igor/GEOVizor_PHP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Старт

Browse Source
This commit is contained in:
igor
2023-11-07 19:51:49 +06:00
commit 86542a157f
5002 changed files with 199551 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
assets/plugins/jquery-scrollTo/demo/css/style.css Normal file
View File

@ -0,0 +1,150 @@
body{
padding:5px;
height:1600px;
font-family: Verdana, sans-serif;
background-color: #DDD;
}
ul,li,h1,h2,h3,h4,p{
list-style:none;
padding:0;
margin:0;
}
.part{
border:1px solid black;
background-color:white;
}
.part h3,
.part h4,
.part h4 a {
color:#933;
}
#toc{
display:block;
padding:10px;
position:relative;
margin:15px 0;
float:left;
width:305px;
}
#toc h3{
padding-bottom:10px;
}
#toc h3 strong{
font-size:13px;
color:black;
}
#links{
border:1px solid black;
width:210px;
padding:10px;
float:right;
margin-top:-30px;
}
#links h3{
color:#933;
}
#links ul{
padding: 8px 0 3px 20px;
}
#links li{
list-style-type:circle;
}
#links a{
color:#69C;
}
#toc li, #links li{
list-style-type:circle;
padding-left:5px;
margin-left:15px;
}
#toc a{
color:#69C;
}
.section{
border:1px black solid;
width:950px;
padding:10px;
margin: 5px 0;
position:relative;
clear:both;
}
.section h3{
margin-bottom:10px;
margin-left: 8px;
}
.section h4{
margin:10px 0 10px 8px;
}
.section li{
float:left;
}
.pane{
overflow:auto;
clear:left;
margin: 10px 0 0 10px;
position:relative;
width:826px;
height:322px;
}
ul.elements{
background-color:#5B739C;
}
ul.elements li{
width:200px;
height:100px;
font-weight:bolder;
border:1px black solid;
text-align:center;
padding:50px;
position:relative;
background-color:#DDD;
}
ul.elements li a{
bottom:20px;
color:#933;
font-size:12px;
left:125px;
position:absolute;
}
ul.elements li p{
color:#666;
}
#pane-settings ul.elements li{
margin:5px;
}
#pane-settings{
margin-bottom:10px;
}
ul.links{
height:20px;
overflow:hidden;
padding-left: 5px;
}
ul.links a{
color:#69C;
margin:0 0 0 5px;
}
.clear{
clear:left;
}
h3 span{
position:absolute;
}
.message{
background:#EEE;
border:1px solid #999;
color:#333;
font-size:12px;
font-weight:normal;
padding:1px;
margin-top:2px;
}
h1{
color:#5B739C;
}
h1 strong{
font-size:13px;
color:#777;
}

69
assets/plugins/jquery-scrollTo/demo/css/style.old.css Normal file
View File

@ -0,0 +1,69 @@
body{
background-color: #DDD;
}
.container li,div.pane{
height:200px;
font-weight:bolder;
position:relative;
}
ul{
list-style:none;
padding:0;
margin:0;
}
.container a{
color:black;
position:absolute;
bottom:10px;
}
p{
margin:0;
}
.container{
border:1px black solid;
margin:30px;
overflow:auto;
position:relative;
width:80%;
height:300px;
}
.container ul{
padding:0;
}
#x{
height:217px;
}
#x li,#xy li{
width:300px;
float:left;
}
h1{
color:#5B739C;
}
h1 strong{
font-size:13px;
color:#777;
}
#links{
border:1px solid black;
width:210px;
padding:10px;
float:right;
margin-top:-55px;
background-color:white;
}
#links h3{
color:#933;
margin:5px;
}
#links ul{
padding: 8px 0 3px 20px;
}
#links li{
list-style-type:circle;
}
#links a{
color:#69C;
}

252
assets/plugins/jquery-scrollTo/demo/index.html Normal file
View File

@ -0,0 +1,252 @@
<!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. Lightweight, cross-browser and highly customizable animated scrolling with jQuery, made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.min.js"></script>
<script type="text/javascript">
jQuery(function( $ ){
/**
* Demo binding and preparation, no need to read this part
*/
//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;
};
$('a.back').click(function() {
$(this).parents('div.pane').scrollTo(0, 800, { queue:true });
$(this).parents('div.section').find('span.message').text( this.title);
return false;
});
//just for the example, to stop the click on the links.
$('ul.links').click(function(e){
var link = e.target;
if (link.target === '_blank') {
return;
}
e.preventDefault();
link.blur();
if (link.title) {
$(this).parent().find('span.message').text(link.title);
}
});
// This one is important, many browsers don't reset scroll on refreshes
// Reset all scrollable panes to (0,0)
$('div.pane').scrollTo(0);
// Reset the screen to (0,0)
$.scrollTo(0);
// TOC, shows how to scroll the whole window
$('#toc a').click(function() {//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
$.scrollTo(this.hash, 1500, { easing:'elasout' });
$(this.hash).find('span.message').text(this.title);
return false;
});
// Target examples bindings
var $target = $('#pane-target');
$('#target-examples a').click(function() {
$target.stop(true);
});
$('#relative-selector').click(function() {
$target.scrollTo('li:eq(7)', 800);
});
$('#jquery-object').click(function() {
$target.scrollTo($('#pane-target li:eq(14)') , 800);
});
$('#dom-element').click(function() {
$target.scrollTo(document.getElementById('twenty'), 800);
});
$('#absolute-number').click(function() {
$target.scrollTo(150, 800);
});
$('#absolute-number-hash').click(function() {
$target.scrollTo({ top:800, left:700}, 800);
});
$('#absolute-px').click(function() {
$target.scrollTo('520px', 800);
});
$('#absolute-px-hash').click(function() {
$target.scrollTo({top:'110px', left:'290px'}, 800);
});
$('#relative-px').click(function() {
$target.scrollTo('+=100', 500);
});
$('#relative-px-hash').click(function() {
$target.scrollTo({top:'-=100px', left:'+=100'}, 500);
});
$('#percentage-px').click(function() {
$target.scrollTo('50%', 800);
});
$('#percentage-px-hash').click(function() {
$target.scrollTo({top:'50%', left:'20%'}, 800);
});
// Settings examples bindings, they will all scroll to the same place, with different settings
var $settings = $('#pane-settings');
$('#settings-examples a').click(function() {
// before each animation, reset to (0,0), skip this.
$settings.stop(true).scrollTo(0);
});
$('#settings-no').click(function() {
$settings.scrollTo('li:eq(15)', 1000);
});
$('#settings-axis').click(function() {// only scroll horizontally
$settings.scrollTo('li:eq(15)', 1000, { axis:'x' });
});
$('#settings-duration').click(function() {// it's the same as specifying it in the 2nd argument
$settings.scrollTo('li:eq(15)', { duration: 3000 });
});
$('#settings-easing').click(function() {
$settings.scrollTo('li:eq(15)', 2500, { easing:'elasout' });
});
$('#settings-margin').click(function() {//scroll to the "outer" position of the element
$settings.scrollTo('li:eq(15)', 1000, { margin:true });
});
$('#settings-offset').click(function() {//same as { top:-50, left:-50 }
$settings.scrollTo('li:eq(15)', 1000, { offset:-50 });
});
$('#settings-offset-hash').click(function() {
$settings.scrollTo('li:eq(15)', 1000, { offset:{ top:-5, left:-30 } });
});
$('#settings-offset-function').click(function() {
$settings.scrollTo('li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }});
});
$('#settings-over').click(function() {//same as { top:-50, left:-50 }
$settings.scrollTo('li:eq(15)', 1000, { over:0.5 });
});
$('#settings-over-hash').click(function() {
$settings.scrollTo('li:eq(15)', 1000, { over:{ top:0.2, left:-0.5 } });
});
$('#settings-interrupt').click(function() {
$settings.scrollTo('li:eq(15)', 10000, { interrupt:true });
});
$('#settings-queue').click(function() {//in this case, having 'axis' as 'xy' or 'yx' matters.
$settings.scrollTo('li:eq(15)', 2000, { queue:true });
});
$('#settings-onAfter').click(function() {
$settings.scrollTo('li:eq(15)', 2000, {
onAfter:function() {
$('#settings-message').text('Got there!');
}
});
});
$('#settings-onAfterFirst').click(function() {//onAfterFirst exists only when queuing
$settings.scrollTo('li:eq(15)', 1600, {
queue:true,
onAfterFirst:function() {
$('#settings-message').text('Got there horizontally!');
},
onAfter:function() {
$('#settings-message').text('Got there vertically!');
}
});
});
$('#settings-step').click(function() {
$settings.scrollTo('li:eq(15)', 2000, {step:function(now) {
$('#settings-message').text(now.toFixed(2));
}});
});
$('#settings-progress').click(function() {
$settings.scrollTo('li:eq(15)', 2000, {progress:function(_, now) {
$('#settings-message').text(Math.round(now*100) + '%');
}});
});
$('#settings-fail').click(function() {
$settings.scrollTo('li:eq(15)', 10000, {interrupt:true, fail:function() {
$('#settings-message').text('Scroll interrupted!');
}});
});
});
</script>
</head>
<body>
<h1>jQuery.scrollTo&nbsp;<strong>by Ariel Flesler</strong></h1>
<div id="toc" class="part">
<h3>Table of contents&nbsp;<strong>(try these)</strong></h3>
<ul>
<li><a title="$.scrollTo('#target-examples', 800, {easing:'elasout'});" href="#target-examples">Ways to specify the target</a></li>
<li><a title="$.scrollTo('#settings-examples', 800, {easing:'elasout'});" href="#settings-examples">Settings</a></li>
</ul>
</div>
<div id="links" class="part">
<h3>Links</h3>
<ul>
<li><a target="_blank" href="https://github.com/flesler/jquery.scrollTo">Github</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://demos.flesler.com/jquery/localScroll/">LocalScroll Demo</a></li>
<li><a target="_blank" href="http://demos.flesler.com/jquery/serialScroll/">SerialScroll Demo</a></li>
<li><a target="_blank" href="index.old.html">Old Demo</a></li>
</ul>
</div>
<div id="target-examples" class="section part">
<h3>Ways to specify the target&nbsp;<span id="target-message" class="message">Click an option, to see it in action</span></h3>
<ul class="links">
<li><a title="$(...).scrollTo('li:eq(7)', 800);" id="relative-selector" href="#">Relative selector</a></li>
<li><a title="$(...).scrollTo($('div li:eq(14)'), 800);" id="jquery-object" href="#">jQuery object</a></li>
<li><a title="$(...).scrollTo(document.getElementById('twenty'), 800);" id="dom-element" href="#">DOM Element</a></li>
<li><a title="$(...).scrollTo(150, 800);" id="absolute-number" href="#">Absolute number</a></li>
<li><a title="$(...).scrollTo({ top:800, left:700}, 800);" id="absolute-number-hash" href="#">Absolute number(hash)</a></li>
</ul>
<ul class="links">
<li><a title="$(...).scrollTo('520px', 800);" id="absolute-px" href="#">Absolute px</a></li>
<li><a title="$(...).scrollTo({top:'110px', left:'290px'}, 800);" id="absolute-px-hash" href="#">Absolute px(hash)</a></li>
<li><a title="$(...).scrollTo('+=100px', 800);" id="relative-px" href="#">Relative px</a></li>
<li><a title="$(...).scrollTo({top:'-=100px', left:'+=100'}, 800);" id="relative-px-hash" href="#">Relative px(hash)</a></li>
<li><a title="$(...).scrollTo('50%', 800);" id="percentage-px" href="#">Percent</a></li>
<li><a title="$(...).scrollTo({top:'50%', left:'20%'}, 800);" id="percentage-px-hash" href="#">Percent(hash)</a></li>
</ul>
<div id="pane-target" class="pane">
<ul class="elements" style="height:1011px; width:1820px;">
<li><p>0</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>1</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>2</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>3</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>4</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>5</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>6</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>7</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>8</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>9</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>10</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>11</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>12</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>13</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>14</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>15</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>16</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>17</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>18</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>19</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li id="twenty"><p>20</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>21</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>22</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>23</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>24</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>25</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>26</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>27</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>28</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>29</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li>
</ul>
</div>
</div>
<div id="settings-examples" class="section part">
<h3>Settings&nbsp;<span id="settings-message" class="message">The examples shown here, are summarized for brevity</span></h3>
<ul class="links">
<li><a title="$(...).scrollTo('li:eq(15)', 1000);" id="settings-no" href="#">no settings</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {axis:'x'});//only scroll on this axis (can be x, y, xy or yx)" id="settings-axis" href="#">axis</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {margin:true});//deduct the margin and border from the final position" id="settings-margin" href="#">margin</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {offset:-50});//add or deduct from the final position" id="settings-offset" href="#">offset</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {offset: {top:-5, left:-30} });" id="settings-offset-hash" href="#">offset(hash)</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }});" id="settings-offset-function" href="#">offset(function)</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {over:0.5});//add or deduct a fraction of its height/width" id="settings-over" href="#">over</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {over:{top:0.2, left:-0.5});" id="settings-over-hash" href="#">over(hash)</a></li>
<li><a title="Scroll manually to interrupt the animation" id="settings-interrupt" href="#">interrupt</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1600, {onAfter:function() { } });//called after the scrolling ends" id="settings-onAfter" href="#">onAfter</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1600, {queue:true, onAfterFirst:function() { } });//called after the first axis scrolled" id="settings-onAfterFirst" href="#">onAfterFirst</a></li>
</ul>
<h4>Settings inherited from <a href="http://api.jquery.com/animate/#animate-properties-options" target="_blank">$().animate()</a></h4>
<ul class="links">
<li><a title="$(...).scrollTo('li:eq(15)', {duration:3000});//another way of calling the plugin" id="settings-duration" href="#">duration</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 2500, {easing:'elasout'});//specify an easing equation" id="settings-easing" href="#">easing</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 1600, {queue:true});//scroll one axis, then the other" id="settings-queue" href="#">queue</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 2500, {step:function() { }'});//specify a step function" id="settings-step" href="#">step</a></li>
<li><a title="$(...).scrollTo('li:eq(15)', 2500, {progress:function() { }'});//specify a progress function" id="settings-progress" href="#">progress</a></li>
<li><a title="Scroll manually to interrupt and trigger the callback" id="settings-fail" href="#">fail</a></li>
<li><a href="http://api.jquery.com/animate/#animate-properties-options" target="_blank">more</a></li>
</ul>
<div id="pane-settings" class="pane">
<ul class="elements" style="height:1062px;width:1877px;">
<li><p>0</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>1</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>2</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>3</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>4</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>5</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>6</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>7</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>8</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>9</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>10</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>11</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>12</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>13</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>14</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>15</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>16</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>17</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>18</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>19</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>20</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>21</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>22</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>23</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>24</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>25</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>26</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>27</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>28</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>29</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li>
</ul>
</div>
</div>
</body>
</html>

128
assets/plugins/jquery-scrollTo/demo/index.old.html Normal file
View File

@ -0,0 +1,128 @@
<!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. Lightweight, cross-browser and highly customizable animated scrolling with jQuery, 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="https://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&nbsp;<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>