Bug Tracker

root / trunk / plugins / scrollTo / index.old.html

Revision 4989, 8.3 kB (checked in by aflesler, 6 months ago)

- Adding jQuery.ScrollTo? 1.3.3, along with the 2 demos, changelog, and readme.

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5    <title>jQuery.ScrollTo</title>
6    <meta name="keywords" content="javascript, jquery, plugins, scroll, scrollTo, smooth, animation, to, effect, ariel, flesler, window, overflow, element, navigation, customizable" />
7    <meta name="description" content="Demo of jQuery.ScrollTo. A very light and highly customizable jQuery plugin, to scroll overflowed elements or the window itself, made by Ariel Flesler." />
8    <meta name="robots" content="index,follow" />
9    <link type="text/css" rel="stylesheet" href="css/style.old.css" />
10    <script type="text/javascript" src="jquery.js"></script>
11    <script type="text/javascript" src="jquery.scrollTo.js"></script>
12    <script type="text/javascript">
13        jQuery(function( $ ){
14            //borrowed from jQuery easing plugin
15            //http://gsgd.co.uk/sandbox/jquery.easing.php
16            $.easing.elasout = function(x, t, b, c, d) {
17                var s=1.70158;var p=0;var a=c;
18                if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
19                if (a < Math.abs(c)) { a=c; var s=p/4; }
20                else var s = p/(2*Math.PI) * Math.asin (c/a);
21                return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
22            }; 
23            $('button').click(function(){//this is not the cleanest way to do this, I'm just keeping it short.
24                var index = parseInt( $(this).prev('input').val() ) || 0;
25                var $c = $(this).parent().next();
26                $c.stop().scrollTo('li:eq('+index+')', {speed:2500, easing:'elasout',axis:$c.attr('id')});
27            });
28            $('#btn_screen').click(function(){
29                $.scrollTo( $('#txt_screen').val(), {speed:2500} );
30            });
31            $('div.container a').click(function(){
32                var $c = $(this).parents('.container');
33                $c.stop().scrollTo( 0, {speed:2000,axis:$c.attr('id'), queue:true} );
34                return false;
35            });
36        });
37    </script>
38</head>
39<body>
40    <h1>jQuery.ScrollTo&nbsp;<strong>by Ariel Flesler</strong></h1>
41    <div id="links" class="part" style="width:135px">
42        <h3>Links</h3>
43        <ul>
44            <li><a target="_blank" href="http://plugins.jquery.com/project/ScrollTo">Project Page</a></li>
45            <li><a target="_blank" href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">Main blog article</a></li>
46            <li><a target="_blank" href="http://flesler.blogspot.com/search/label/jQuery.ScrollTo">All articles</a></li>
47            <li><a target="_blank" href="http://flesler.webs.com/jQuery.LocalScroll/">LocalScroll Demo</a></li>
48            <li><a target="_blank" href="http://flesler.webs.com/jQuery.SerialScroll/">SerialScroll Demo</a></li>
49            <li><a target="_blank" href="./" rel="prev" rev="next">New Demo</a></li>
50        </ul>
51    </div>
52    <label for="txt_screen">Scroll the window to <input id="txt_screen" type="text" value=".pane:eq(1)" /><input id="btn_screen" type="button" value="Scroll" /></label><br /><br />
53    <label>Scroll to the #<input type="text" value="3" /> element inside this container<button>Scroll</button></label>
54    <div id="y" class="container">
55        <ul>
56            <li style="background-color:#9933CC;"><p>0</p><a href="#">back to top</a></li>
57            <li style="background-color:#FFCC99;"><p>1</p><a href="#">back to top</a></li>
58            <li style="background-color:#FF0000;"><p>2</p><a href="#">back to top</a></li>
59            <li style="background-color:#00FFCC;"><p>3</p><a href="#">back to top</a></li>
60            <li style="background-color:#663366;"><p>4</p><a href="#">back to top</a></li>
61            <li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to top</a></li>
62            <li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to top</a></li>
63            <li style="background-color:#00FF00;"><p>7</p><a href="#">back to top</a></li>
64        </ul>
65    </div>
66    <label>Scroll to the #<input type="text" value="3" /> element inside this container<button>Scroll</button></label>
67    <div id="x" class="container">
68        <ul style="width:4820px;">
69            <li style="background-color:#9933CC;"><p>0</p><a href="#">back to start</a></li>
70            <li style="background-color:#FFCC99;"><p>1</p><a href="#">back to start</a></li>
71            <li style="background-color:#FF0000;"><p>2</p><a href="#">back to start</a></li>
72            <li style="background-color:#00FFCC;"><p>3</p><a href="#">back to start</a></li>
73            <li style="background-color:#663366;"><p>4</p><a href="#">back to start</a></li>
74            <li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to start</a></li>
75            <li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to start</a></li>
76            <li style="background-color:#00FF00;"><p>7</p><a href="#">back to start</a></li>
77            <li style="background-color:#9933CC;"><p>8</p><a href="#">back to start</a></li>
78            <li style="background-color:#FFCC99;"><p>9</p><a href="#">back to start</a></li>
79            <li style="background-color:#FF0000;"><p>10</p><a href="#">back to start</a></li>
80            <li style="background-color:#00FFCC;"><p>11</p><a href="#">back to start</a></li>
81            <li style="background-color:#663366;"><p>12</p><a href="#">back to start</a></li>
82            <li style="background-color:#CCCCFF;"><p>13</p><a href="#">back to start</a></li>
83            <li style="background-color:#FFFFCC;"><p>14</p><a href="#">back to start</a></li>
84            <li style="background-color:#00FF00;"><p>15</p><a href="#">back to start</a></li>
85        </ul>
86    </div>
87    <label>Scroll to the #<input type="text" value="16" /> element inside this container<button>Scroll</button></label>
88    <div id="xy" class="container">
89        <ul style="width:1500px;">
90            <li style="background-color:#9933CC;"><p>0</p><a href="#">back to start</a></li>
91            <li style="background-color:#FFCC99;"><p>1</p><a href="#">back to start</a></li>
92            <li style="background-color:#FF0000;"><p>2</p><a href="#">back to start</a></li>
93            <li style="background-color:#00FFCC;"><p>3</p><a href="#">back to start</a></li>
94            <li style="background-color:#663366;"><p>4</p><a href="#">back to start</a></li>
95            <li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to start</a></li>
96            <li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to start</a></li>
97            <li style="background-color:#00FF00;"><p>7</p><a href="#">back to start</a></li>
98            <li style="background-color:#9933CC;"><p>8</p><a href="#">back to start</a></li>
99            <li style="background-color:#FFCC99;"><p>9</p><a href="#">back to start</a></li>
100            <li style="background-color:#FF0000;"><p>10</p><a href="#">back to start</a></li>
101            <li style="background-color:#00FFCC;"><p>11</p><a href="#">back to start</a></li>
102            <li style="background-color:#663366;"><p>12</p><a href="#">back to start</a></li>
103            <li style="background-color:#CCCCFF;"><p>13</p><a href="#">back to start</a></li>
104            <li style="background-color:#FFFFCC;"><p>14</p><a href="#">back to start</a></li>
105            <li style="background-color:#00FF00;"><p>15</p><a href="#">back to start</a></li>
106            <li style="background-color:#9933CC;"><p>16</p><a href="#">back to start</a></li>
107            <li style="background-color:#FFCC99;"><p>17</p><a href="#">back to start</a></li>
108            <li style="background-color:#FF0000;"><p>18</p><a href="#">back to start</a></li>
109            <li style="background-color:#00FFCC;"><p>19</p><a href="#">back to start</a></li>
110            <li style="background-color:#663366;"><p>20</p><a href="#">back to start</a></li>
111            <li style="background-color:#CCCCFF;"><p>21</p><a href="#">back to start</a></li>
112            <li style="background-color:#FFFFCC;"><p>22</p><a href="#">back to start</a></li>
113            <li style="background-color:#00FF00;"><p>23</p><a href="#">back to start</a></li>
114            <li style="background-color:#9933CC;"><p>24</p><a href="#">back to start</a></li>
115            <li style="background-color:#FFCC99;"><p>25</p><a href="#">back to start</a></li>
116            <li style="background-color:#FF0000;"><p>26</p><a href="#">back to start</a></li>
117            <li style="background-color:#00FFCC;"><p>27</p><a href="#">back to start</a></li>
118            <li style="background-color:#663366;"><p>28</p><a href="#">back to start</a></li>
119            <li style="background-color:#CCCCFF;"><p>29</p><a href="#">back to start</a></li>
120        </ul>
121    </div>
122    <div class="pane" style="background-color:#000000;margin-top:40px;"></div>
123    <div class="pane" style="background-color:#333333;"></div>
124    <div class="pane" style="background-color:#666666;"></div>
125    <div class="pane" style="background-color:#999999;"></div>
126    <div class="pane" style="background-color:#CCCCCC;"></div>
127</body>
128</html>
Note: See TracBrowser for help on using the browser.