-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo.html
More file actions
executable file
·58 lines (58 loc) · 4.56 KB
/
demo.html
File metadata and controls
executable file
·58 lines (58 loc) · 4.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.tickertype - Demo</title>
<link href="tickertype.demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.tickertype.js"></script>
</head>
<body>
<a class="littlelink" href="#download">Jump to download</a>
<h1>jQuery TickerType Plugin Demo</h1>
<h2>Example</h2>
<div id="ticker-area" alt="2">
<ul>
<li>Sed venenatis <a href="http://www.google.com">diam quis</a> lorem. Curabitur.</li>
<li>Fusce <strong>vehicula</strong> iaculis felis. Phasellus congue!</li>
<li>Morbi vitae enim vel <em>purus sollicitudin</em>.</li>
</ul>
</div>
<h2>What is it?</h2>
<p>The TickerType jQuery plugin allows you to animate a set of headlines or any other list of text items.</p>
<h2>How do I use it?</h2>
<p>To implement, simply include the <a href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery" target="_blank">latest jquery library</a> as well as jquery.tickertype.js in the <span class="code"><head></span> tag of your HTML page</p>
<div class="codeblock code">
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jquery.tickertype - Demo</title><br />
<link href="tickertype.demo.css" rel="stylesheet" type="text/css" /><br />
<span class="highlight"><script type="text/javascript" src="jquery-1.2.6.min.js"></script><br />
<script type="text/javascript" src="jquery.tickertype.js"></script></span><br />
</head><br />
</div>
<p>Next, add a <span class="code"><div></span> tag and set the id attribute to <span class="code">ticker-area</span>. Within this <span class="code"><div></span> tag, create an unordered list of the text fragments you would like to be display in the ticker. List items may include simple HTML tags, such as links, <span class="code"><strong></span> and <span class="code"><em></span>.</p>
<div class="codeblock code"><div id="<span class="highlight">ticker-area</span>"><br />
<ul><br />
<li>Sed venenatis <a href="http://www.google.com">diam quis</a> lorem. Curabitur.</li><br />
<li>Fusce <strong>vehicula</strong> iaculis felis. Phasellus congue!</li><br />
<li>Morbi vitae enim vel <em>purus sollicitudin</em>.</li><br />
</ul><br />
</div><br />
</div>
<p>The code above will rotate through the 3 items endlessly. If you would like the ticker to stop animating after a number of cycles, simple at <span class="code">alt="2"</span> to the ticker-area div tag, substituting the number of cycles you would like before animation stops. After the animation stops, the last item in the set will remain on he screen. For example:</p>
<div class="codeblock code"><div id="ticker-area" <span class="highlight">alt="10"</span>><br />
<ul><br />
<li>Sed venenatis <a href="http://www.google.com">diam quis</a> lorem. Curabitur.</li><br />
<li>Fusce <strong>vehicula</strong> iaculis felis. Phasellus congue!</li><br />
<li>Morbi vitae enim vel <em>purus sollicitudin</em>.</li><br />
</ul><br />
</div><br />
</div>
<p>The code above will rotate through the 3 items 10 times and then stop on the last item.</p>
<a name="download"></a><h2>Download</h2>
<a href="jQuery.TickerType.zip">jquery.ticker.zip</a> (<em>includes this demo page and CSS, jquery.tickertype.js and jquery-1.2.6.min.js</em>) or view/fork the code on <a href="https://github.com/hungrymedia/JQuery-tickertype">github</a>.
<h2>License</h2>
<a rel="license" href="http://creativecommons.org/licenses/publicdomain/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/publicdomain/88x31.png"/></a><br/>This work is dedicated to the <a rel="license" href="http://creativecommons.org/licenses/publicdomain/">Public Domain</a>.
</body>
</html>