OwlCyberSecurity - MANAGER
Edit File: index.old.html
<!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=iso-8859-1" /> <title>jQuery.ScrollTo</title> <meta name="keywords" content="javascript, jquery, plugins, scroll, scrollTo, smooth, animation, to, effect, ariel, flesler, window, overflow, element, navigation, customizable" /> <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." /> <meta name="robots" content="index,follow" /> <link type="text/css" rel="stylesheet" href="css/style.old.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="../jquery.scrollTo.js"></script> <script type="text/javascript"> jQuery(function( $ ){ //borrowed from jQuery easing plugin //http://gsgd.co.uk/sandbox/jquery.easing.php $.easing.elasout = function(x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }; $('button').click(function(){//this is not the cleanest way to do this, I'm just keeping it short. var index = parseInt( $(this).prev('input').val() ) || 0; var $c = $(this).parent().next(); $c.stop().scrollTo('li:eq('+index+')', {duration:2500, easing:'elasout',axis:$c.attr('id')}); }); $('#btn_screen').click(function(){ $.scrollTo( $('#txt_screen').val(), {duration:2500} ); }); $('div.container a').click(function(){ var $c = $(this).parents('.container'); $c.stop().scrollTo( 0, {duration:2000,axis:$c.attr('id'), queue:true} ); return false; }); }); </script> </head> <body> <h1>jQuery.ScrollTo <strong>by Ariel Flesler</strong></h1> <div id="links" class="part" style="width:135px"> <h3>Links</h3> <ul> <li><a target="_blank" href="http://plugins.jquery.com/project/ScrollTo">Project Page</a></li> <li><a target="_blank" href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">Main blog article</a></li> <li><a target="_blank" href="http://flesler.blogspot.com/search/label/jQuery.ScrollTo">All articles</a></li> <li><a target="_blank" href="http://flesler.webs.com/jQuery.LocalScroll/">LocalScroll Demo</a></li> <li><a target="_blank" href="http://flesler.webs.com/jQuery.SerialScroll/">SerialScroll Demo</a></li> <li><a target="_blank" href="./" rel="prev" rev="next">New Demo</a></li> </ul> </div> <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 /> <label>Scroll to the #<input type="text" value="3" /> element inside this container<button>Scroll</button></label> <div id="y" class="container"> <ul> <li style="background-color:#9933CC;"><p>0</p><a href="#">back to top</a></li> <li style="background-color:#FFCC99;"><p>1</p><a href="#">back to top</a></li> <li style="background-color:#FF0000;"><p>2</p><a href="#">back to top</a></li> <li style="background-color:#00FFCC;"><p>3</p><a href="#">back to top</a></li> <li style="background-color:#663366;"><p>4</p><a href="#">back to top</a></li> <li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to top</a></li> <li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to top</a></li> <li style="background-color:#00FF00;"><p>7</p><a href="#">back to top</a></li> </ul> </div> <label>Scroll to the #<input type="text" value="3" /> element inside this container<button>Scroll</button></label> <div id="x" class="container"> <ul style="width:4820px;"> <li style="background-color:#9933CC;"><p>0</p><a href="#">back to start</a></li> <li style="background-color:#FFCC99;"><p>1</p><a href="#">back to start</a></li> <li style="background-color:#FF0000;"><p>2</p><a href="#">back to start</a></li> <li style="background-color:#00FFCC;"><p>3</p><a href="#">back to start</a></li> <li style="background-color:#663366;"><p>4</p><a href="#">back to start</a></li> <li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to start</a></li> <li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to start</a></li> <li style="background-color:#00FF00;"><p>7</p><a href="#">back to start</a></li> <li style="background-color:#9933CC;"><p>8</p><a href="#">back to start</a></li> <li style="background-color:#FFCC99;"><p>9</p><a href="#">back to start</a></li> <li style="background-color:#FF0000;"><p>10</p><a href="#">back to start</a></li> <li style="background-color:#00FFCC;"><p>11</p><a href="#">back to start</a></li> <li style="background-color:#663366;"><p>12</p><a href="#">back to start</a></li> <li style="background-color:#CCCCFF;"><p>13</p><a href="#">back to start</a></li> <li style="background-color:#FFFFCC;"><p>14</p><a href="#">back to start</a></li> <li style="background-color:#00FF00;"><p>15</p><a href="#">back to start</a></li> </ul> </div> <label>Scroll to the #<input type="text" value="16" /> element inside this container<button>Scroll</button></label> <div id="xy" class="container"> <ul style="width:1500px;"> <li style="background-color:#9933CC;"><p>0</p><a href="#">back to start</a></li> <li style="background-color:#FFCC99;"><p>1</p><a href="#">back to start</a></li> <li style="background-color:#FF0000;"><p>2</p><a href="#">back to start</a></li> <li style="background-color:#00FFCC;"><p>3</p><a href="#">back to start</a></li> <li style="background-color:#663366;"><p>4</p><a href="#">back to start</a></li> <li style="background-color:#CCCCFF;"><p>5</p><a href="#">back to start</a></li> <li style="background-color:#FFFFCC;"><p>6</p><a href="#">back to start</a></li> <li style="background-color:#00FF00;"><p>7</p><a href="#">back to start</a></li> <li style="background-color:#9933CC;"><p>8</p><a href="#">back to start</a></li> <li style="background-color:#FFCC99;"><p>9</p><a href="#">back to start</a></li> <li style="background-color:#FF0000;"><p>10</p><a href="#">back to start</a></li> <li style="background-color:#00FFCC;"><p>11</p><a href="#">back to start</a></li> <li style="background-color:#663366;"><p>12</p><a href="#">back to start</a></li> <li style="background-color:#CCCCFF;"><p>13</p><a href="#">back to start</a></li> <li style="background-color:#FFFFCC;"><p>14</p><a href="#">back to start</a></li> <li style="background-color:#00FF00;"><p>15</p><a href="#">back to start</a></li> <li style="background-color:#9933CC;"><p>16</p><a href="#">back to start</a></li> <li style="background-color:#FFCC99;"><p>17</p><a href="#">back to start</a></li> <li style="background-color:#FF0000;"><p>18</p><a href="#">back to start</a></li> <li style="background-color:#00FFCC;"><p>19</p><a href="#">back to start</a></li> <li style="background-color:#663366;"><p>20</p><a href="#">back to start</a></li> <li style="background-color:#CCCCFF;"><p>21</p><a href="#">back to start</a></li> <li style="background-color:#FFFFCC;"><p>22</p><a href="#">back to start</a></li> <li style="background-color:#00FF00;"><p>23</p><a href="#">back to start</a></li> <li style="background-color:#9933CC;"><p>24</p><a href="#">back to start</a></li> <li style="background-color:#FFCC99;"><p>25</p><a href="#">back to start</a></li> <li style="background-color:#FF0000;"><p>26</p><a href="#">back to start</a></li> <li style="background-color:#00FFCC;"><p>27</p><a href="#">back to start</a></li> <li style="background-color:#663366;"><p>28</p><a href="#">back to start</a></li> <li style="background-color:#CCCCFF;"><p>29</p><a href="#">back to start</a></li> </ul> </div> <div class="pane" style="background-color:#000000;margin-top:40px;"></div> <div class="pane" style="background-color:#333333;"></div> <div class="pane" style="background-color:#666666;"></div> <div class="pane" style="background-color:#999999;"></div> <div class="pane" style="background-color:#CCCCCC;"></div> </body> </html>