index.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title>FitText Test/Demo</title>
  7. <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8" />
  8. <script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
  9. <script type="text/javascript" src="../Source/FitText.js"></script>
  10. <script type="text/javascript" src="demo.js"></script>
  11. </head>
  12. <body>
  13. <h1>FitText.js Test/Demo</h1>
  14. <h2>Resize the browser window</h2>
  15. <p>The lines should:</p>
  16. <ul>
  17. <li>Truncate with an ellipses near the middle.</li>
  18. <li>Receive a class (highlight) when truncated, and lose it when not</li>
  19. </ul>
  20. <ul id="container">
  21. <li><span>Lorem ipsum dolor</span></li>
  22. <li><span>sit amet, consectetur adipisicing</span></li>
  23. <li><span>elit, sed do eiusmod tempor incididunt ut labore et</span></li>
  24. <li><span>dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</span></li>
  25. <li><span>laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</span></li>
  26. </ul>
  27. <h2>Public Methods</h2>
  28. <div class="methods">
  29. <button id="attachment" class="attached">Detach</button>
  30. <button id="reset">Reset</button>
  31. <button id="fit">Fit</button>
  32. </div>
  33. <p>
  34. <a href="http://moodocs.net/rpflo/mootools-rpflo/FitText">FitText @ moodocs.net</a>
  35. <a href="http://ryanflorence.com" id="avatar"><img src="avatar.png" /></a>
  36. </p>
  37. </body>
  38. </html>