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