kubernetes
/
website
mirror of https://github.com/kubernetes/website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replace the tab with 4 spaces in html files 

Signed-off-by: yupengzte <yu.peng36@zte.com.cn>
This commit is contained in:
yupengzte 2017-03-23 09:13:14 +08:00 committed by Andrew Chen
parent eaa52cf2fc
commit 8053e08125
65 changed files with 2836 additions and 2836 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
_includes/footer.html
View File

@ -1,34 +1,34 @@
<footer>
<main class="light-text">
<nav>
<a href="/docs/hellonode/">Get Started</a>
<a href="/docs/">Documentation</a>
<a href="http://blog.kubernetes.io/">Blog</a>
<a href="/partners/">Partners</a>
<a href="/community/">Community</a>
<a href="/case-studies/">Case Studies</a>
</nav>
<div class="social">
<div>
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
</div>
<div>
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>Stack Overflow</span></a>
<a href="https://groups.google.com/forum/#!forum/kubernetes-users" class="mailing-list"><span>Mailing List</span></a>
<a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>Events Calendar</span></a>
</div>
<div>
<a href="//get.k8s.io" class="button">Download K8s</a>
<a href="https://github.com/kubernetes/kubernetes" class="button">Contribute to the K8s codebase</a>
</div>
</div>
<div id="miceType" class="center">
&copy; {{ 'now' | date: "%Y" }} The Kubernetes Authors | Documentation Distributed under <a href="https://github.com/kubernetes/kubernetes.github.io/blob/master/LICENSE" class="light-text">CC BY 4.0</a>
</div>
<div id="miceType" class="center">
Copyright &copy; {{ 'now' | date: "%Y" }} The Linux Foundation&reg;. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Usage page: <a href="https://www.linuxfoundation.org/trademark-usage" class="light-text">https://www.linuxfoundation.org/trademark-usage</a>
</div>
</main>
<main class="light-text">
<nav>
<a href="/docs/hellonode/">Get Started</a>
<a href="/docs/">Documentation</a>
<a href="http://blog.kubernetes.io/">Blog</a>
<a href="/partners/">Partners</a>
<a href="/community/">Community</a>
<a href="/case-studies/">Case Studies</a>
</nav>
<div class="social">
<div>
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
</div>
<div>
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>Stack Overflow</span></a>
<a href="https://groups.google.com/forum/#!forum/kubernetes-users" class="mailing-list"><span>Mailing List</span></a>
<a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>Events Calendar</span></a>
</div>
<div>
<a href="//get.k8s.io" class="button">Download K8s</a>
<a href="https://github.com/kubernetes/kubernetes" class="button">Contribute to the K8s codebase</a>
</div>
</div>
<div id="miceType" class="center">
&copy; {{ 'now' | date: "%Y" }} The Kubernetes Authors | Documentation Distributed under <a href="https://github.com/kubernetes/kubernetes.github.io/blob/master/LICENSE" class="light-text">CC BY 4.0</a>
</div>
<div id="miceType" class="center">
Copyright &copy; {{ 'now' | date: "%Y" }} The Linux Foundation&reg;. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Usage page: <a href="https://www.linuxfoundation.org/trademark-usage" class="light-text">https://www.linuxfoundation.org/trademark-usage</a>
</div>
</main>
</footer>

6
_includes/v1.3/extensions-v1beta1-definitions.html
View File

@ -4275,10 +4275,10 @@ Populated by the system when a graceful deletion is requested. Read-only. More i
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">host</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Host is the fully qualified domain name of a network host, as defined by RFC 3986. Note the following deviations from the "host" part of the URI as defined in the RFC: 1. IPs are not allowed. Currently an IngressRuleValue can only apply to the<br>
IP in the Spec of the parent Ingress.<br>
IP in the Spec of the parent Ingress.<br>
2. The <code>:</code> delimiter is not respected because ports are not allowed.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Both these may change in the future. Incoming requests are matched against the host before the IngressRuleValue. If the host is unspecified, the Ingress routes all traffic based on the specified IngressRuleValue.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">string</p></td>

6
_includes/v1.4/extensions-v1beta1-definitions.html
View File

@ -4393,10 +4393,10 @@ Populated by the system when a graceful deletion is requested. Read-only. More i
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">host</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Host is the fully qualified domain name of a network host, as defined by RFC 3986. Note the following deviations from the "host" part of the URI as defined in the RFC: 1. IPs are not allowed. Currently an IngressRuleValue can only apply to the<br>
IP in the Spec of the parent Ingress.<br>
IP in the Spec of the parent Ingress.<br>
2. The <code>:</code> delimiter is not respected because ports are not allowed.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Both these may change in the future. Incoming requests are matched against the host before the IngressRuleValue. If the host is unspecified, the Ingress routes all traffic based on the specified IngressRuleValue.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">string</p></td>

6
_includes/v1.5/extensions-v1beta1-definitions.html
View File

@ -4613,10 +4613,10 @@ Populated by the system when a graceful deletion is requested. Read-only. More i
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">host</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Host is the fully qualified domain name of a network host, as defined by RFC 3986. Note the following deviations from the "host" part of the URI as defined in the RFC: 1. IPs are not allowed. Currently an IngressRuleValue can only apply to the<br>
IP in the Spec of the parent Ingress.<br>
IP in the Spec of the parent Ingress.<br>
2. The <code>:</code> delimiter is not respected because ports are not allowed.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Both these may change in the future. Incoming requests are matched against the host before the IngressRuleValue. If the host is unspecified, the Ingress routes all traffic based on the specified IngressRuleValue.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">string</p></td>

28
_layouts/docwithnav.html
View File

@ -59,20 +59,20 @@
<p><a href=""><img src="https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/{{ page.path }}?pixel" alt="Analytics" /></a></p>
{% if page.url != "/404.html" and page.url != "/docs/search/" %}
<script type="text/javascript">
PDRTJS_settings_8345992 = {
"id" : "8345992",
"unique_id" : "{{ page.url }}",
"title" : "{{ page.title }}",
"permalink" : "http://kubernetes.github.io{{ page.url }}"
};
(function(d,c,j){if(!document.getElementById(j)){var pd=d.createElement(c),s;pd.id=j;pd.src=('https:'==document.location.protocol)?'https://polldaddy.com/js/rating/rating.js':'http://i0.poll.fm/js/rating/rating.js';s=document.getElementsByTagName(c)[0];s.parentNode.insertBefore(pd,s);}}(document,'script','pd-rating-js'));
</script>
<a href="" onclick="window.open('https://github.com/kubernetes/kubernetes.github.io/issues/new?title=Issue%20with%20' +
window.location.pathname)" class="button issue">Create an Issue</a>
<a href="/editdocs#{{ page.path }}" class="button issue">Edit this Page</a>
{% endif %}
</div>
<script type="text/javascript">
PDRTJS_settings_8345992 = {
"id" : "8345992",
"unique_id" : "{{ page.url }}",
"title" : "{{ page.title }}",
"permalink" : "http://kubernetes.github.io{{ page.url }}"
};
(function(d,c,j){if(!document.getElementById(j)){var pd=d.createElement(c),s;pd.id=j;pd.src=('https:'==document.location.protocol)?'https://polldaddy.com/js/rating/rating.js':'http://i0.poll.fm/js/rating/rating.js';s=document.getElementsByTagName(c)[0];s.parentNode.insertBefore(pd,s);}}(document,'script','pd-rating-js'));
</script>
<a href="" onclick="window.open('https://github.com/kubernetes/kubernetes.github.io/issues/new?title=Issue%20with%20' +
window.location.pathname)" class="button issue">Create an Issue</a>
<a href="/editdocs#{{ page.path }}" class="button issue">Edit this Page</a>
{% endif %}
</div>
</section>
{% include_cached footer.html %}

154
case-studies/index.html
View File

@ -6,94 +6,94 @@ cid: caseStudies
---
<section id="hero" class="light-text">
<h1>Kubernetes User Case Studies</h1>
<h5>A collection of users running Kubernetes in production.</h5>
<h1>Kubernetes User Case Studies</h1>
<h5>A collection of users running Kubernetes in production.</h5>
</section>
<section id="mainContent">
<main>
<div class="content">
<div class="case-studies">
<div class="case-study">
<img src="/images/case_studies/pearson.png" alt="Pearson">
<p class="quote">"We chose Kubernetes because of its flexibility, ease of management and the way it improves our engineers' productivity."</p>
<!--<p class="attrib">— Chris Jackson, Director for Cloud Product Engineering, Pearson</p>-->
<a href="./pearson/">Read about Pearson</a>
</div>
<div class="case-study">
<img src="/images/case_studies/wikimedia.png" alt="Wikimedia">
<p class="quote">"With Kubernetes, we're simplifying our environment and making it easier for developers to build the tools that make wikis run better."</p>
<!--<p class="attrib">— Yuvi Panda, Operations Engineer, Wikimedia Foundation</p>-->
<a href="./wikimedia/">Read about Wikimedia</a>
</div>
<div class="case-study">
<img src="/images/case_studies/ebay.png" alt="eBay">
<p class="quote">Inside eBay's shift to Kubernetes and containers atop OpenStack</p>
<a href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/">Read about eBay</a>
</div>
<div class="case-study">
<img src="/images/case_studies/box.png" alt="box">
<p class="quote">Kubernetes at Box: Microservices at Maximum Velocity</p>
<a href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/">Read about Box</a>
</div>
</div>
</div>
</main>
<main>
<div class="content">
<div class="case-studies">
<div class="case-study">
<img src="/images/case_studies/pearson.png" alt="Pearson">
<p class="quote">"We chose Kubernetes because of its flexibility, ease of management and the way it improves our engineers' productivity."</p>
<!--<p class="attrib">— Chris Jackson, Director for Cloud Product Engineering, Pearson</p>-->
<a href="./pearson/">Read about Pearson</a>
</div>
<div class="case-study">
<img src="/images/case_studies/wikimedia.png" alt="Wikimedia">
<p class="quote">"With Kubernetes, we're simplifying our environment and making it easier for developers to build the tools that make wikis run better."</p>
<!--<p class="attrib">— Yuvi Panda, Operations Engineer, Wikimedia Foundation</p>-->
<a href="./wikimedia/">Read about Wikimedia</a>
</div>
<div class="case-study">
<img src="/images/case_studies/ebay.png" alt="eBay">
<p class="quote">Inside eBay's shift to Kubernetes and containers atop OpenStack</p>
<a href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/">Read about eBay</a>
</div>
<div class="case-study">
<img src="/images/case_studies/box.png" alt="box">
<p class="quote">Kubernetes at Box: Microservices at Maximum Velocity</p>
<a href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/">Read about Box</a>
</div>
</div>
</div>
</main>
</section>
<section id="video">
<main>
<!--<div>-->
<!--<h3>"I don't want to deploy software the old way ever again"</h3>-->
<!--<p class="attrib">— Dylan Carney, Lead Software Engineer, Zulily</p>-->
<!--<img src="/images/case_studies/zulily.png" id="zulilyLogo" alt="zulily">-->
<!--</div>-->
<!--<div><button onclick="kub.showVideo()"><img src="/images/case_studies/video_thumb.jpg" alt="Zulily video"><h6>Kubernetes at zulily</h6></button></div>-->
<div>
<!--<h3>SAP</h3>-->
<h3>SAP's OpenStack, running on Kubernetes in production</h3>
<img src="/images/case_studies/sap_small.png" id="zulilyLogo" alt="SAP">
</div>
<div><button onclick="kub.showVideo()"><img src="/images/case_studies/video_thumb1.png" alt="SAP video"><h6>Kubernetes at SAP</h6></button></div>
</main>
<main>
<!--<div>-->
<!--<h3>"I don't want to deploy software the old way ever again"</h3>-->
<!--<p class="attrib">— Dylan Carney, Lead Software Engineer, Zulily</p>-->
<!--<img src="/images/case_studies/zulily.png" id="zulilyLogo" alt="zulily">-->
<!--</div>-->
<!--<div><button onclick="kub.showVideo()"><img src="/images/case_studies/video_thumb.jpg" alt="Zulily video"><h6>Kubernetes at zulily</h6></button></div>-->
<div>
<!--<h3>SAP</h3>-->
<h3>SAP's OpenStack, running on Kubernetes in production</h3>
<img src="/images/case_studies/sap_small.png" id="zulilyLogo" alt="SAP">
</div>
<div><button onclick="kub.showVideo()"><img src="/images/case_studies/video_thumb1.png" alt="SAP video"><h6>Kubernetes at SAP</h6></button></div>
</main>
</section>
<section id="users">
<main>
<h3>Kubernetes Users</h3>
<div id="usersGrid">
<a target="_blank" href="https://www.youtube.com/watch?v=P5qfyv_zGcU"><img src="/images/case_studies/nyt.png" alt="New York Times"></a>
<a target="_blank" href="https://openai.com/blog/infrastructure-for-deep-learning"><img src="/images/case_studies/openai.png" alt="OpenAI"></a>
<a target="_blank" href="http://blogs.wsj.com/cio/2016/02/24/big-changes-in-goldmans-software-emerge-from-small-containers/"><img src="/images/case_studies/gs.png" alt="Goldman Sachs"></a>
<a target="_blank" href="https://youtu.be/4gyeixJLabo"><img src="/images/case_studies/sap.png" alt="SAP"></a>
<a target="_blank" href="http://www.nextplatform.com/2016/05/24/samsung-experts-put-kubernetes-paces/"><img src="/images/case_studies/sds.png" alt="Samsung SDS"></a>
<a target="_blank" href="http://thenewstack.io/wepay-kubernetes-changed-business/"><img src="/images/case_studies/wepay.png" alt="WePay"></a>
<a target="_blank" href="https://www.youtube.com/watch?v=5378N5iLb2Q"><img src="/images/case_studies/soundcloud.png" alt="SoundCloud"></a>
<a target="_blank" href="https://www.youtube.com/watch?v=F3iMkz_NSvU"><img src="/images/case_studies/homeoffice.png" alt="UK Home Office"></a>
<a target="_blank" href="http://searchitoperations.techtarget.com/news/450297178/Tech-firms-roll-out-Kubernetes-in-production"><img src="/images/case_studies/concur.png" alt="Concur"></a>
<a target="_blank" href="http://www.nextplatform.com/2015/08/04/amadeus-takes-off-with-containers-and-clouds/"><img src="/images/case_studies/amadeus.png" alt="Amadeus"></a>
<a target="_blank" href="http://superuser.openstack.org/articles/how-ancestry-com-s-open-source-strategy-combines-kubernetes-and-openstack"><img src="/images/case_studies/ancestry.png" alt="Ancestry.com"></a>
<a target="_blank" href="https://cloud.google.com/customers/ccp-games/"><img src="/images/case_studies/ccp.png" alt="CCP Games"></a>
<a target="_blank" href="https://www.openstack.org/videos/video/running-kubernetes-on-openstack-at-liveperson"><img src="/images/case_studies/liveperson.png" alt="LivePerson"></a>
<a target="_blank" href="https://youtu.be/YkOY7DgXKyw"><img src="/images/case_studies/monzo_logo.png" alt="monzo"></a>
<a target="_blank" href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/"><img src="/images/case_studies/box_logo.png" alt="Box"></a>
<a target="_blank" href="https://cloudplatform.googleblog.com/2016/09/bringing-Pokemon-GO-to-life-on-Google-Cloud.html"><img src="/images/case_studies/pokemon_go_logo.png" alt="Pokemon GO"></a>
<a target="_blank" href="http://blog.kubernetes.io/2016/10/kubernetes-and-openstack-at-yahoo-japan.html"><img src="/images/case_studies/yahooJapan_logo.png" alt="Yahoo! Japan"></a>
<a target="_blank" href="https://cloud.google.com/customers/philips/"><img src="/images/case_studies/philips_logo.png" alt="Philips"></a>
<a target="_blank" href="https://youtu.be/EC_ZRLsw58M"><img src="/images/case_studies/buffer_logo.png" alt="buffer"></a>
<a target="_blank" href="https://youtu.be/lmeFkH-rHII"><img src="/images/case_studies/comcast_logo.png" alt="Comcast"></a>
<a href="./wikimedia/"><img src="/images/case_studies/wikimedia_logo.png" alt="Wikimedia"></a>
<a href="./pearson/"><img src="/images/case_studies/pearson_logo.png" alt="Pearson"></a>
<a target="_blank" href="#" onclick="event.preventDefault(); kub.showVideo()"><img src="/images/case_studies/zulily_logo.png" alt="zulily"></a>
<a target="_blank" href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/"><img src="/images/case_studies/ebay_logo.png" alt="Ebay"></a>
<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLScuI7Ye3VQHQTwBASrgkjQDSS5TP0g3AXfFhwSM9YpHgxRKFA/viewform" class="tell-your-story"><img src="/images/case_studies/story.png" alt="Tell your story"></a>
</div>
</main>
<main>
<h3>Kubernetes Users</h3>
<div id="usersGrid">
<a target="_blank" href="https://www.youtube.com/watch?v=P5qfyv_zGcU"><img src="/images/case_studies/nyt.png" alt="New York Times"></a>
<a target="_blank" href="https://openai.com/blog/infrastructure-for-deep-learning"><img src="/images/case_studies/openai.png" alt="OpenAI"></a>
<a target="_blank" href="http://blogs.wsj.com/cio/2016/02/24/big-changes-in-goldmans-software-emerge-from-small-containers/"><img src="/images/case_studies/gs.png" alt="Goldman Sachs"></a>
<a target="_blank" href="https://youtu.be/4gyeixJLabo"><img src="/images/case_studies/sap.png" alt="SAP"></a>
<a target="_blank" href="http://www.nextplatform.com/2016/05/24/samsung-experts-put-kubernetes-paces/"><img src="/images/case_studies/sds.png" alt="Samsung SDS"></a>
<a target="_blank" href="http://thenewstack.io/wepay-kubernetes-changed-business/"><img src="/images/case_studies/wepay.png" alt="WePay"></a>
<a target="_blank" href="https://www.youtube.com/watch?v=5378N5iLb2Q"><img src="/images/case_studies/soundcloud.png" alt="SoundCloud"></a>
<a target="_blank" href="https://www.youtube.com/watch?v=F3iMkz_NSvU"><img src="/images/case_studies/homeoffice.png" alt="UK Home Office"></a>
<a target="_blank" href="http://searchitoperations.techtarget.com/news/450297178/Tech-firms-roll-out-Kubernetes-in-production"><img src="/images/case_studies/concur.png" alt="Concur"></a>
<a target="_blank" href="http://www.nextplatform.com/2015/08/04/amadeus-takes-off-with-containers-and-clouds/"><img src="/images/case_studies/amadeus.png" alt="Amadeus"></a>
<a target="_blank" href="http://superuser.openstack.org/articles/how-ancestry-com-s-open-source-strategy-combines-kubernetes-and-openstack"><img src="/images/case_studies/ancestry.png" alt="Ancestry.com"></a>
<a target="_blank" href="https://cloud.google.com/customers/ccp-games/"><img src="/images/case_studies/ccp.png" alt="CCP Games"></a>
<a target="_blank" href="https://www.openstack.org/videos/video/running-kubernetes-on-openstack-at-liveperson"><img src="/images/case_studies/liveperson.png" alt="LivePerson"></a>
<a target="_blank" href="https://youtu.be/YkOY7DgXKyw"><img src="/images/case_studies/monzo_logo.png" alt="monzo"></a>
<a target="_blank" href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/"><img src="/images/case_studies/box_logo.png" alt="Box"></a>
<a target="_blank" href="https://cloudplatform.googleblog.com/2016/09/bringing-Pokemon-GO-to-life-on-Google-Cloud.html"><img src="/images/case_studies/pokemon_go_logo.png" alt="Pokemon GO"></a>
<a target="_blank" href="http://blog.kubernetes.io/2016/10/kubernetes-and-openstack-at-yahoo-japan.html"><img src="/images/case_studies/yahooJapan_logo.png" alt="Yahoo! Japan"></a>
<a target="_blank" href="https://cloud.google.com/customers/philips/"><img src="/images/case_studies/philips_logo.png" alt="Philips"></a>
<a target="_blank" href="https://youtu.be/EC_ZRLsw58M"><img src="/images/case_studies/buffer_logo.png" alt="buffer"></a>
<a target="_blank" href="https://youtu.be/lmeFkH-rHII"><img src="/images/case_studies/comcast_logo.png" alt="Comcast"></a>
<a href="./wikimedia/"><img src="/images/case_studies/wikimedia_logo.png" alt="Wikimedia"></a>
<a href="./pearson/"><img src="/images/case_studies/pearson_logo.png" alt="Pearson"></a>
<a target="_blank" href="#" onclick="event.preventDefault(); kub.showVideo()"><img src="/images/case_studies/zulily_logo.png" alt="zulily"></a>
<a target="_blank" href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/"><img src="/images/case_studies/ebay_logo.png" alt="Ebay"></a>
<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLScuI7Ye3VQHQTwBASrgkjQDSS5TP0g3AXfFhwSM9YpHgxRKFA/viewform" class="tell-your-story"><img src="/images/case_studies/story.png" alt="Tell your story"></a>
</div>
</main>
</section>
<div id="videoPlayer">
<!--<iframe data-url="https://www.youtube.com/watch?v=B0_5Nms8sD0" frameborder="0" allowfullscreen></iframe>-->
<iframe data-url="https://www.youtube.com/embed/4gyeixJLabo?autoplay=1" frameborder="0" allowfullscreen="true"></iframe>
<button id="closeButton"></button>
<!--<iframe data-url="https://www.youtube.com/watch?v=B0_5Nms8sD0" frameborder="0" allowfullscreen></iframe>-->
<iframe data-url="https://www.youtube.com/embed/4gyeixJLabo?autoplay=1" frameborder="0" allowfullscreen="true"></iframe>
<button id="closeButton"></button>
</div>

120
case-studies/pearson.html
View File

@ -6,76 +6,76 @@ cid: caseStudies
---
<section id="hero" class="light-text">
<h1> Pearson Case Study</h1>
<h1> Pearson Case Study</h1>
</section>
<section id="mainContent">
<main>
<div class="content">
<h3 id="caseStudyTitle">Using Kubernetes to reinvent the world's largest educational company</h3>
<p>
Pearson, the world's education company, serving 75 million learners worldwide, set a goal to more than double that number to 200 million by 2025. A key part of this growth is in digital learning experiences, and that requires an infrastructure platform that is able to scale quickly and deliver products to market faster. So Pearson's Cloud Technology team chose Kubernetes to help build a platform to meet the business requirements. </p>
<div class="feature">
<img src="/images/case_studies/pearson.png" alt="Pearson">
<p class="quote">
"To transform our infrastructure, we had to think beyond simply enabling automated provisioning, we realized we had to build a platform that would allow Pearson developers to build manage and deploy applications in a completely different way. We chose Kubernetes because of its flexibility, ease of management and the way it would improve our engineers' productivity." </p>
<p class="attrib">— Chris Jackson, Director for Cloud Product Engineering, Pearson</p>
</div>
</div>
</main>
<main>
<div class="content">
<h3 id="caseStudyTitle">Using Kubernetes to reinvent the world's largest educational company</h3>
<p>
Pearson, the world's education company, serving 75 million learners worldwide, set a goal to more than double that number to 200 million by 2025. A key part of this growth is in digital learning experiences, and that requires an infrastructure platform that is able to scale quickly and deliver products to market faster. So Pearson's Cloud Technology team chose Kubernetes to help build a platform to meet the business requirements. </p>
<div class="feature">
<img src="/images/case_studies/pearson.png" alt="Pearson">
<p class="quote">
"To transform our infrastructure, we had to think beyond simply enabling automated provisioning, we realized we had to build a platform that would allow Pearson developers to build manage and deploy applications in a completely different way. We chose Kubernetes because of its flexibility, ease of management and the way it would improve our engineers' productivity." </p>
<p class="attrib">— Chris Jackson, Director for Cloud Product Engineering, Pearson</p>
</div>
</div>
</main>
</section>
<section class="bullets">
<main>
<div class="content">
<div class="bullet">
<h4>Challenges:</h4>
<ul>
<li>Pearson had difficulty in scaling and adapting to the growing online audience. They wanted to build and deliver content primarily over the web.</li>
</ul>
</div>
<div class="bullet">
<h4>Why Kubernetes:</h4>
<ul>
<li>Kubernetes will allow Pearson's teams to develop their apps in a consistent manner, saving time and minimizing complexity.</li>
</ul>
</div>
<div class="bullet">
<h4>Approach:</h4>
<ul>
<li>Build a centralized platform for use across the entire enterprise</li>
<li>Use container technology as the core of the platform</li>
<li>Deploy Kubernetes to manage the platform</li>
</ul>
</div>
<div class="bullet">
<h4>Results:</h4>
<ul>
<li>Pearson is building an enterprise-wide platform for delivering innovative, web-based educational content. They expect engineers' productivity to increase by up to 20 percent.</li>
</ul>
</div>
</div>
</main>
<main>
<div class="content">
<div class="bullet">
<h4>Challenges:</h4>
<ul>
<li>Pearson had difficulty in scaling and adapting to the growing online audience. They wanted to build and deliver content primarily over the web.</li>
</ul>
</div>
<div class="bullet">
<h4>Why Kubernetes:</h4>
<ul>
<li>Kubernetes will allow Pearson's teams to develop their apps in a consistent manner, saving time and minimizing complexity.</li>
</ul>
</div>
<div class="bullet">
<h4>Approach:</h4>
<ul>
<li>Build a centralized platform for use across the entire enterprise</li>
<li>Use container technology as the core of the platform</li>
<li>Deploy Kubernetes to manage the platform</li>
</ul>
</div>
<div class="bullet">
<h4>Results:</h4>
<ul>
<li>Pearson is building an enterprise-wide platform for delivering innovative, web-based educational content. They expect engineers' productivity to increase by up to 20 percent.</li>
</ul>
</div>
</div>
</main>
</section>
<section class="details">
<main>
<div class="content">
<h4>Kubernetes powers a comprehensive developer experience</h4>
<p>Pearson wanted to use as much open source technology as possible for the platform given that it provides both technical and commercial benefits over the duration of the project. Jackson says, "Building an infrastructure platform based on open source technology in Pearson was a no-brainer, the sharing of technical challenges and advanced use cases in a community of people with talent far beyond what we could hire independently allows us to innovate at a level we could not reach on our own. Our engineers enjoy returning code to the community and participating in talks, blogs and meetings, it's a great way for us to allow our team to express themselves and share the pride they have in their work."</p>
<p>It also wanted to use a container-focused platform. Pearson has 400 development groups and diverse brands with varying business and technical needs. With containers, each brand could experiment with building new types of content using their preferred technologies, and then deliver it using containers. Pearson chose Kubernetes because it believes that is the best technology for managing containers, has the widest community support and offers the most flexible and powerful tools."</p>
<p>Kubernetes is at the core of the platform we've built for developers. After we get our big spike in back-to-school in traffic, much of Pearson's traffic will interact with Kubernetes. It is proving to be as effective as we had hoped," Jackson says.</p>
</div>
</main>
<main>
<div class="content">
<h4>Kubernetes powers a comprehensive developer experience</h4>
<p>Pearson wanted to use as much open source technology as possible for the platform given that it provides both technical and commercial benefits over the duration of the project. Jackson says, "Building an infrastructure platform based on open source technology in Pearson was a no-brainer, the sharing of technical challenges and advanced use cases in a community of people with talent far beyond what we could hire independently allows us to innovate at a level we could not reach on our own. Our engineers enjoy returning code to the community and participating in talks, blogs and meetings, it's a great way for us to allow our team to express themselves and share the pride they have in their work."</p>
<p>It also wanted to use a container-focused platform. Pearson has 400 development groups and diverse brands with varying business and technical needs. With containers, each brand could experiment with building new types of content using their preferred technologies, and then deliver it using containers. Pearson chose Kubernetes because it believes that is the best technology for managing containers, has the widest community support and offers the most flexible and powerful tools."</p>
<p>Kubernetes is at the core of the platform we've built for developers. After we get our big spike in back-to-school in traffic, much of Pearson's traffic will interact with Kubernetes. It is proving to be as effective as we had hoped," Jackson says.</p>
</div>
</main>
</section>
<section class="details">
<main>
<div class="content">
<h4>Encouraging experimentation, saving engineers time</h4>
<p>With the new platform, Pearson will increase stability and performance, and to bring products to market more quickly. The company says its engineers will also get a productivity boost because they won't spend time managing infrastructure. Jackson estimates 15 to 20 percent in productivity savings.</p>
<p>Beyond that, Pearson says the platform will encourage innovation because of the ease with which new applications can be developed, and because applications will be deployed far more quickly than in the past. It expects that will help the company meet its goal of reaching 200 million learners within the next 10 years.</p>
<p>"We're already seeing tremendous benefits with Kubernetes — improved engineering productivity, faster delivery of applications and a simplified infrastructure. But this is just the beginning. Kubernetes will help transform the way that educational content is delivered online," says Jackson.</p>
</div>
</main>
<main>
<div class="content">
<h4>Encouraging experimentation, saving engineers time</h4>
<p>With the new platform, Pearson will increase stability and performance, and to bring products to market more quickly. The company says its engineers will also get a productivity boost because they won't spend time managing infrastructure. Jackson estimates 15 to 20 percent in productivity savings.</p>
<p>Beyond that, Pearson says the platform will encourage innovation because of the ease with which new applications can be developed, and because applications will be deployed far more quickly than in the past. It expects that will help the company meet its goal of reaching 200 million learners within the next 10 years.</p>
<p>"We're already seeing tremendous benefits with Kubernetes — improved engineering productivity, faster delivery of applications and a simplified infrastructure. But this is just the beginning. Kubernetes will help transform the way that educational content is delivered online," says Jackson.</p>
</div>
</main>
</section>

150
case-studies/wikimedia.html
View File

@ -6,91 +6,91 @@ cid: caseStudies
---
<section id="hero" class="light-text">
<h1> Wikimedia Case Study</h1>
<h1> Wikimedia Case Study</h1>
</section>
<section id="mainContent">
<main>
<div class="content">
<h3 id="caseStudyTitle">Using Kubernetes to Build Tools to Improve the World's Wikis</h3>
<p>
The non-profit Wikimedia Foundation operates some of the largest collaboratively edited reference projects in the world, including Wikipedia. To help users maintain and use wikis, it runs Wikimedia Tool Labs, a hosting environment for community developers working on tools and bots to help editors and other volunteers do their work, including reducing vandalism. The community around Wikimedia Tool Labs began forming nearly 10 years ago.
</p>
<div class="feature">
<img src="/images/case_studies/wikimedia.png" alt="Wikimedia">
<p class="quote">
"Wikimedia Tool Labs is vital for making sure wikis all around the world work as well as they possibly can. Because it's grown organically for almost 10 years, it has become an extremely challenging environment and difficult to maintain. It's like a big ball of mud — you really can't see through it. With Kubernetes, we're simplifying the environment and making it easier for developers to build the tools that make wikis run better."
</p>
<p class="attrib">— Yuvi Panda, operations engineer at Wikimedia Foundation and Wikimedia Tool Labs</p>
</div>
</div>
</main>
<main>
<div class="content">
<h3 id="caseStudyTitle">Using Kubernetes to Build Tools to Improve the World's Wikis</h3>
<p>
The non-profit Wikimedia Foundation operates some of the largest collaboratively edited reference projects in the world, including Wikipedia. To help users maintain and use wikis, it runs Wikimedia Tool Labs, a hosting environment for community developers working on tools and bots to help editors and other volunteers do their work, including reducing vandalism. The community around Wikimedia Tool Labs began forming nearly 10 years ago.
</p>
<div class="feature">
<img src="/images/case_studies/wikimedia.png" alt="Wikimedia">
<p class="quote">
"Wikimedia Tool Labs is vital for making sure wikis all around the world work as well as they possibly can. Because it's grown organically for almost 10 years, it has become an extremely challenging environment and difficult to maintain. It's like a big ball of mud — you really can't see through it. With Kubernetes, we're simplifying the environment and making it easier for developers to build the tools that make wikis run better."
</p>
<p class="attrib">— Yuvi Panda, operations engineer at Wikimedia Foundation and Wikimedia Tool Labs</p>
</div>
</div>
</main>
</section>
<section class="bullets">
<main>
<div class="content">
<div class="bullet">
<h4>Challenges:</h4>
<ul>
<li>Simplify a complex, difficult-to-manage infrastructure</li>
<li>Allow developers to continue writing tools and bots using existing techniques</li>
</ul>
</div>
<div class="bullet">
<h4>Why Kubernetes:</h4>
<ul>
<li>Wikimedia Tool Labs chose Kubernetes because it can mimic existing workflows, while reducing complexity</li>
</ul>
</div>
<div class="bullet">
<h4>Approach:</h4>
<ul>
<li>Migrate old systems and a complex infrastructure to Kubernetes</li>
</ul>
</div>
<div class="bullet">
<h4>Results:</h4>
<ul>
<li>20 percent of web tools that account for more than 40 percent of web traffic now run on Kubernetes</li>
<li>A 25-node cluster that keeps up with each new Kubernetes release</li>
<li>Thousands of lines of old code have been deleted, thanks to Kubernetes</li>
</ul>
</div>
</div>
</main>
<main>
<div class="content">
<div class="bullet">
<h4>Challenges:</h4>
<ul>
<li>Simplify a complex, difficult-to-manage infrastructure</li>
<li>Allow developers to continue writing tools and bots using existing techniques</li>
</ul>
</div>
<div class="bullet">
<h4>Why Kubernetes:</h4>
<ul>
<li>Wikimedia Tool Labs chose Kubernetes because it can mimic existing workflows, while reducing complexity</li>
</ul>
</div>
<div class="bullet">
<h4>Approach:</h4>
<ul>
<li>Migrate old systems and a complex infrastructure to Kubernetes</li>
</ul>
</div>
<div class="bullet">
<h4>Results:</h4>
<ul>
<li>20 percent of web tools that account for more than 40 percent of web traffic now run on Kubernetes</li>
<li>A 25-node cluster that keeps up with each new Kubernetes release</li>
<li>Thousands of lines of old code have been deleted, thanks to Kubernetes</li>
</ul>
</div>
</div>
</main>
</section>
<section class="details">
<main>
<div class="content">
<h4>Using Kubernetes to provide tools for maintaining wikis</h4>
<p>
Wikimedia Tool Labs is run by a staff of four-and-a-half paid employees and two volunteers. The infrastructure didn't make it easy or intuitive for developers to build bots and other tools to make wikis work more easily. Yuvi says, "It's incredibly chaotic. We have lots of Perl and Bash duct tape on top of it. Everything is super fragile."
</p>
<p>
To solve the problem, Wikimedia Tool Labs migrated parts of its infrastructure to Kubernetes, in preparation for eventually moving its entire system. Yuvi said Kubernetes greatly simplifies maintenance. The goal is to allow developers creating bots and other tools to use whatever development methods they want, but make it easier for the Wikimedia Tool Labs to maintain the required infrastructure for hosting and sharing them.
</p>
<p>
"With Kubernetes, I've been able to remove a lot of our custom-made code, which makes everything easier to maintain. Our users' code also runs in a more stable way than previously," says Yuvi.
</p>
</div>
</main>
<main>
<div class="content">
<h4>Using Kubernetes to provide tools for maintaining wikis</h4>
<p>
Wikimedia Tool Labs is run by a staff of four-and-a-half paid employees and two volunteers. The infrastructure didn't make it easy or intuitive for developers to build bots and other tools to make wikis work more easily. Yuvi says, "It's incredibly chaotic. We have lots of Perl and Bash duct tape on top of it. Everything is super fragile."
</p>
<p>
To solve the problem, Wikimedia Tool Labs migrated parts of its infrastructure to Kubernetes, in preparation for eventually moving its entire system. Yuvi said Kubernetes greatly simplifies maintenance. The goal is to allow developers creating bots and other tools to use whatever development methods they want, but make it easier for the Wikimedia Tool Labs to maintain the required infrastructure for hosting and sharing them.
</p>
<p>
"With Kubernetes, I've been able to remove a lot of our custom-made code, which makes everything easier to maintain. Our users' code also runs in a more stable way than previously," says Yuvi.
</p>
</div>
</main>
</section>
<section class="details">
<main>
<div class="content">
<h4>Simplifying infrastructure and keeping wikis running better</h4>
<p>
Wikimedia Tool Labs has seen great success with the initial Kubernetes deployment. Old code is being simplified and eliminated, contributing developers don't have to change the way they write their tools and bots, and those tools and bots run in a more stable fashion than they have in the past. The paid staff and volunteers are able to better keep up with fixing issues.
</p>
<p>
In the future, with a more complete migration to Kubernetes, Wikimedia Tool Labs expects to make it even easier to host and maintain the bots and tools that help run wikis across the world. The tool labs already host approximately 1,300 tools and bots from 800 volunteers, with many more being submitted every day. Twenty percent of the tool labs' web tools that account for more than 60 percent of web traffic now run on Kubernetes. The tool labs has a 25-node cluster that keeps up with each new Kubernetes release. Many existing web tools are migrating to Kubernetes.
</p>
<p>
"Our goal is to make sure that people all over the world can share knowledge as easily as possible. Kubernetes helps with that, by making it easier for wikis everywhere to have the tools they need to thrive," says Yuvi.
</p>
</div>
</main>
<main>
<div class="content">
<h4>Simplifying infrastructure and keeping wikis running better</h4>
<p>
Wikimedia Tool Labs has seen great success with the initial Kubernetes deployment. Old code is being simplified and eliminated, contributing developers don't have to change the way they write their tools and bots, and those tools and bots run in a more stable fashion than they have in the past. The paid staff and volunteers are able to better keep up with fixing issues.
</p>
<p>
In the future, with a more complete migration to Kubernetes, Wikimedia Tool Labs expects to make it even easier to host and maintain the bots and tools that help run wikis across the world. The tool labs already host approximately 1,300 tools and bots from 800 volunteers, with many more being submitted every day. Twenty percent of the tool labs' web tools that account for more than 60 percent of web traffic now run on Kubernetes. The tool labs has a 25-node cluster that keeps up with each new Kubernetes release. Many existing web tools are migrating to Kubernetes.
</p>
<p>
"Our goal is to make sure that people all over the world can share knowledge as easily as possible. Kubernetes helps with that, by making it easier for wikis everywhere to have the tools they need to thrive," says Yuvi.
</p>
</div>
</main>
</section>

110
community/index.html
View File

@ -9,63 +9,63 @@ cid: community
</section>
<section id="mainContent">
<main>
<div class="content">
<h3>Ensuring Kubernetes works well everywhere and for everyone.</h3>
<p>Connect with the Kubernetes community on our <a href="http://slack.k8s.io/">Slack channel</a> or join the
<a href="https://groups.google.com/forum/#!forum/kubernetes-dev">Kubernetes-dev Google group</a>. A weekly
community meeting takes place via video conference to discuss the state of affairs,
<a href="https://groups.google.com/forum/#!forum/kubernetes-community-video-chat">get a calendar invite</a>
to participate.</p>
<p>You can also join Kubernauts all around the world through our
<a href="https://www.meetup.com/topics/kubernetes/">Kubernetes Meetup Community</a> and the
<a href="https://www.meetup.com/Kubernetes-Cloud-Native-Online-Meetup/">Kubernetes Cloud Native Meetup Community</a>.</p>
</div>
<div class="content">
<h3>Special Interest Groups (SIGs)</h3>
<p>Have a special interest in how Kubernetes works with another technology? See our ever growing
<a href="https://github.com/kubernetes/kubernetes/wiki/Special-Interest-Groups-(SIGs)">lists of SIGs</a>,
from AWS and Openstack to Big Data and Scalability, there's a place for you to contribute and instructions
for forming a new SIG if your special interest isn't covered (yet).</p>
<main>
<div class="content">
<h3>Ensuring Kubernetes works well everywhere and for everyone.</h3>
<p>Connect with the Kubernetes community on our <a href="http://slack.k8s.io/">Slack channel</a> or join the
<a href="https://groups.google.com/forum/#!forum/kubernetes-dev">Kubernetes-dev Google group</a>. A weekly
community meeting takes place via video conference to discuss the state of affairs,
<a href="https://groups.google.com/forum/#!forum/kubernetes-community-video-chat">get a calendar invite</a>
to participate.</p>
<p>You can also join Kubernauts all around the world through our
<a href="https://www.meetup.com/topics/kubernetes/">Kubernetes Meetup Community</a> and the
<a href="https://www.meetup.com/Kubernetes-Cloud-Native-Online-Meetup/">Kubernetes Cloud Native Meetup Community</a>.</p>
</div>
<div class="content">
<h3>Special Interest Groups (SIGs)</h3>
<p>Have a special interest in how Kubernetes works with another technology? See our ever growing
<a href="https://github.com/kubernetes/kubernetes/wiki/Special-Interest-Groups-(SIGs)">lists of SIGs</a>,
from AWS and Openstack to Big Data and Scalability, there's a place for you to contribute and instructions
for forming a new SIG if your special interest isn't covered (yet).</p>
<p>As a member of the Kubernetes community, you are welcome to join any of the SIG meetings
you are interested in. No registration required.</p>
<div id="calendarMeetings">
<iframe src="https://calendar.google.com/calendar/embed?src=cgnt364vd8s86hr2phapfjc6uk%40group.calendar.google.com&ctz=America/Los_Angeles"
frameborder="0" scrolling="no"></iframe>
</div>
</div>
<div class="content">
<h3>Events</h3>
<div id="calendarEvents">
<iframe src="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com&ctz=America/Los_Angeles"
frameborder="0" scrolling="no"></iframe>
</div>
</div>
</main>
<p>As a member of the Kubernetes community, you are welcome to join any of the SIG meetings
you are interested in. No registration required.</p>
<div id="calendarMeetings">
<iframe src="https://calendar.google.com/calendar/embed?src=cgnt364vd8s86hr2phapfjc6uk%40group.calendar.google.com&ctz=America/Los_Angeles"
frameborder="0" scrolling="no"></iframe>
</div>
</div>
<div class="content">
<h3>Events</h3>
<div id="calendarEvents">
<iframe src="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com&ctz=America/Los_Angeles"
frameborder="0" scrolling="no"></iframe>
</div>
</div>
</main>
</section>
<section id="talkToUs">
<main>
<h3>Talk to Us!</h3>
<h4>We would love to hear from you, how you are using Kubernetes,<br> and what we can do to make it better.</h4>
<div id="bigSocial">
<div>
<a href="https://twitter.com/kubernetesio">@kubernetesio</a>
<p>Get the latest news and updates.</p>
</div>
<div>
<a href="https://github.com/kubernetes/kubernetes">Github Project</a>
<p>Check out the project and consider contributing.</p>
</div>
<div>
<a href="http://slack.k8s.io/">#kubernetes-users</a>
<p>Our Slack channel is the best way to contact our engineers and share your ideas with them.</p>
</div>
<div>
<a href="http://stackoverflow.com/questions/tagged/kubernetes">Stack Overflow</a>
<p>Our user forum is a great place to go for community support.</p>
</div>
</div>
</main>
<main>
<h3>Talk to Us!</h3>
<h4>We would love to hear from you, how you are using Kubernetes,<br> and what we can do to make it better.</h4>
<div id="bigSocial">
<div>
<a href="https://twitter.com/kubernetesio">@kubernetesio</a>
<p>Get the latest news and updates.</p>
</div>
<div>
<a href="https://github.com/kubernetes/kubernetes">Github Project</a>
<p>Check out the project and consider contributing.</p>
</div>
<div>
<a href="http://slack.k8s.io/">#kubernetes-users</a>
<p>Our Slack channel is the best way to contact our engineers and share your ideas with them.</p>
</div>
<div>
<a href="http://stackoverflow.com/questions/tagged/kubernetes">Stack Overflow</a>
<p>Our user forum is a great place to go for community support.</p>
</div>
</div>
</main>
</section>

6
docs/api-reference/extensions/v1beta1/definitions.html
View File

@ -4617,10 +4617,10 @@ Populated by the system when a graceful deletion is requested. Read-only. More i
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">host</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Host is the fully qualified domain name of a network host, as defined by RFC 3986. Note the following deviations from the "host" part of the URI as defined in the RFC: 1. IPs are not allowed. Currently an IngressRuleValue can only apply to the<br>
IP in the Spec of the parent Ingress.<br>
IP in the Spec of the parent Ingress.<br>
2. The <code>:</code> delimiter is not respected because ports are not allowed.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Both these may change in the future. Incoming requests are matched against the host before the IngressRuleValue. If the host is unspecified, the Ingress routes all traffic based on the specified IngressRuleValue.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">string</p></td>

488
docs/api-reference/v1.5/node_modules/jquery.scrollto/demo/index.html generated vendored
View File

@ -1,252 +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);
});
<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>
$('#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>
<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>

242
docs/api-reference/v1.5/node_modules/jquery.scrollto/demo/index.old.html generated vendored
View File

@ -1,128 +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>
<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>
<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>

30
docs/api-reference/v1.5/node_modules/jquery.scrollto/tests/ElemMaxY-compat.html generated vendored
View File

@ -1,21 +1,21 @@
<!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 - Test Element MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Element MaxY - Compat Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
<h1>jQuery.scrollTo - Test Element MaxY - Compat Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
</html>

30
docs/api-reference/v1.5/node_modules/jquery.scrollto/tests/ElemMaxY-quirks.html generated vendored
View File

@ -1,20 +1,20 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Element MaxY - Quirks Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
<h1>jQuery.scrollTo - Test Element MaxY - Quirks Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
</html>

26
docs/api-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-compat.html generated vendored
View File

@ -1,19 +1,19 @@
<!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 - Test Window MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
</html>

24
docs/api-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-quirks.html generated vendored
View File

@ -1,18 +1,18 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Quirks Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY - Quirks Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
</html>

26
docs/api-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-to-iframe-compat.html generated vendored
View File

@ -1,20 +1,20 @@
<!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 - Test Window MaxY to Iframe - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html?notest" style="width:500px" /></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
<iframe src="WinMaxY-compat.html?notest" style="width:500px" /></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
</html>

28
docs/api-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-to-iframe-quirks.html generated vendored
View File

@ -1,19 +1,19 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html?notest" style="width:500px"></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html?notest" style="width:500px"></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
</html>

10
docs/api-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-with-iframe-compat.html generated vendored
View File

@ -1,11 +1,11 @@
<!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 - Test Window MaxY with Iframe - Compat Mode</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</title>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html" />
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html" />
</html>

8
docs/api-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-with-iframe-quirks.html generated vendored
View File

@ -1,10 +1,10 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</title>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html" />
<iframe src="WinMaxY-quirks.html" />
</html>

34
docs/api-reference/v1.5/node_modules/jquery.scrollto/tests/index.html generated vendored
View File

@ -1,24 +1,24 @@
<!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 Tests</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="Tests for jQuery ScrollTo. Made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo Tests</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="Tests for jQuery ScrollTo. Made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
</head>
<body>
<h1>jQuery.scrollTo Tests</h1>
<ul>
<li><a href="WinMaxY-compat.html">Max window scrolling (compat mode)</a></li>
<li><a href="WinMaxY-quirks.html">Max window scrolling (quirks mode)</a></li>
<li><a href="ElemMaxY-compat.html">Max element scrolling (compat mode)</a></li>
<li><a href="ElemMaxY-quirks.html">Max element scrolling (quirks mode)</a></li>
<li><a href="WinMaxY-with-iframe-compat.html">Max window scrolling, within an iframe (compat mode)</a></li>
<li><a href="WinMaxY-with-iframe-quirks.html">Max window scrolling, within an iframe (quirks mode)</a></li>
<li><a href="WinMaxY-to-iframe-compat.html">Max iframe scrolling from outside (compat mode)</a></li>
<li><a href="WinMaxY-to-iframe-quirks.html">Max iframe scrolling from outside (quirks mode)</a></li>
</ul>
<h1>jQuery.scrollTo Tests</h1>
<ul>
<li><a href="WinMaxY-compat.html">Max window scrolling (compat mode)</a></li>
<li><a href="WinMaxY-quirks.html">Max window scrolling (quirks mode)</a></li>
<li><a href="ElemMaxY-compat.html">Max element scrolling (compat mode)</a></li>
<li><a href="ElemMaxY-quirks.html">Max element scrolling (quirks mode)</a></li>
<li><a href="WinMaxY-with-iframe-compat.html">Max window scrolling, within an iframe (compat mode)</a></li>
<li><a href="WinMaxY-with-iframe-quirks.html">Max window scrolling, within an iframe (quirks mode)</a></li>
<li><a href="WinMaxY-to-iframe-compat.html">Max iframe scrolling from outside (compat mode)</a></li>
<li><a href="WinMaxY-to-iframe-quirks.html">Max iframe scrolling from outside (quirks mode)</a></li>
</ul>
</body>
</html>

4
docs/api-reference/v1.5/node_modules/node-static/test/fixtures/index.html generated vendored
View File

@ -1,8 +1,8 @@
<html lang="en">
<head>
<title>Awesome page</title>
<title>Awesome page</title>
</head>
<body>
hello world!
hello world!
</body>
</html>

4
docs/api-reference/v1.5/node_modules/node-static/test/fixtures/there/index.html generated vendored
View File

@ -1,8 +1,8 @@
<html lang="en">
<head>
<title>Other page</title>
<title>Other page</title>
</head>
<body>
hello there!
hello there!
</body>
</html>

6
docs/federation/api-reference/extensions/v1beta1/definitions.html
View File

@ -3923,10 +3923,10 @@ Populated by the system when a graceful deletion is requested. Read-only. More i
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">host</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Host is the fully qualified domain name of a network host, as defined by RFC 3986. Note the following deviations from the "host" part of the URI as defined in the RFC: 1. IPs are not allowed. Currently an IngressRuleValue can only apply to the<br>
IP in the Spec of the parent Ingress.<br>
IP in the Spec of the parent Ingress.<br>
2. The <code>:</code> delimiter is not respected because ports are not allowed.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Currently the port of an Ingress is implicitly :80 for http and<br>
:443 for https.<br>
Both these may change in the future. Incoming requests are matched against the host before the IngressRuleValue. If the host is unspecified, the Ingress routes all traffic based on the specified IngressRuleValue.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">false</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">string</p></td>

488
docs/resources-reference/v1.5/node_modules/jquery.scrollto/demo/index.html generated vendored
View File

@ -1,252 +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);
});
<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>
$('#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>
<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>

242
docs/resources-reference/v1.5/node_modules/jquery.scrollto/demo/index.old.html generated vendored
View File

@ -1,128 +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>
<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>
<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>

30
docs/resources-reference/v1.5/node_modules/jquery.scrollto/tests/ElemMaxY-compat.html generated vendored
View File

@ -1,21 +1,21 @@
<!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 - Test Element MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Element MaxY - Compat Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
<h1>jQuery.scrollTo - Test Element MaxY - Compat Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
</html>

30
docs/resources-reference/v1.5/node_modules/jquery.scrollto/tests/ElemMaxY-quirks.html generated vendored
View File

@ -1,20 +1,20 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Element MaxY - Quirks Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
<h1>jQuery.scrollTo - Test Element MaxY - Quirks Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
</html>

26
docs/resources-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-compat.html generated vendored
View File

@ -1,19 +1,19 @@
<!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 - Test Window MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
</html>

24
docs/resources-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-quirks.html generated vendored
View File

@ -1,18 +1,18 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Quirks Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY - Quirks Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
</html>

26
docs/resources-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-to-iframe-compat.html generated vendored
View File

@ -1,20 +1,20 @@
<!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 - Test Window MaxY to Iframe - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html?notest" style="width:500px" /></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
<iframe src="WinMaxY-compat.html?notest" style="width:500px" /></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
</html>

28
docs/resources-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-to-iframe-quirks.html generated vendored
View File

@ -1,19 +1,19 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html?notest" style="width:500px"></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html?notest" style="width:500px"></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
</html>

10
docs/resources-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-with-iframe-compat.html generated vendored
View File

@ -1,11 +1,11 @@
<!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 - Test Window MaxY with Iframe - Compat Mode</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</title>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html" />
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html" />
</html>

8
docs/resources-reference/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-with-iframe-quirks.html generated vendored
View File

@ -1,10 +1,10 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</title>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html" />
<iframe src="WinMaxY-quirks.html" />
</html>

34
docs/resources-reference/v1.5/node_modules/jquery.scrollto/tests/index.html generated vendored
View File

@ -1,24 +1,24 @@
<!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 Tests</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="Tests for jQuery ScrollTo. Made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo Tests</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="Tests for jQuery ScrollTo. Made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
</head>
<body>
<h1>jQuery.scrollTo Tests</h1>
<ul>
<li><a href="WinMaxY-compat.html">Max window scrolling (compat mode)</a></li>
<li><a href="WinMaxY-quirks.html">Max window scrolling (quirks mode)</a></li>
<li><a href="ElemMaxY-compat.html">Max element scrolling (compat mode)</a></li>
<li><a href="ElemMaxY-quirks.html">Max element scrolling (quirks mode)</a></li>
<li><a href="WinMaxY-with-iframe-compat.html">Max window scrolling, within an iframe (compat mode)</a></li>
<li><a href="WinMaxY-with-iframe-quirks.html">Max window scrolling, within an iframe (quirks mode)</a></li>
<li><a href="WinMaxY-to-iframe-compat.html">Max iframe scrolling from outside (compat mode)</a></li>
<li><a href="WinMaxY-to-iframe-quirks.html">Max iframe scrolling from outside (quirks mode)</a></li>
</ul>
<h1>jQuery.scrollTo Tests</h1>
<ul>
<li><a href="WinMaxY-compat.html">Max window scrolling (compat mode)</a></li>
<li><a href="WinMaxY-quirks.html">Max window scrolling (quirks mode)</a></li>
<li><a href="ElemMaxY-compat.html">Max element scrolling (compat mode)</a></li>
<li><a href="ElemMaxY-quirks.html">Max element scrolling (quirks mode)</a></li>
<li><a href="WinMaxY-with-iframe-compat.html">Max window scrolling, within an iframe (compat mode)</a></li>
<li><a href="WinMaxY-with-iframe-quirks.html">Max window scrolling, within an iframe (quirks mode)</a></li>
<li><a href="WinMaxY-to-iframe-compat.html">Max iframe scrolling from outside (compat mode)</a></li>
<li><a href="WinMaxY-to-iframe-quirks.html">Max iframe scrolling from outside (quirks mode)</a></li>
</ul>
</body>
</html>

4
docs/resources-reference/v1.5/node_modules/node-static/test/fixtures/index.html generated vendored
View File

@ -1,8 +1,8 @@
<html lang="en">
<head>
<title>Awesome page</title>
<title>Awesome page</title>
</head>
<body>
hello world!
hello world!
</body>
</html>

4
docs/resources-reference/v1.5/node_modules/node-static/test/fixtures/there/index.html generated vendored
View File

@ -1,8 +1,8 @@
<html lang="en">
<head>
<title>Other page</title>
<title>Other page</title>
</head>
<body>
hello there!
hello there!
</body>
</html>

26
docs/tutorials/kubernetes-basics/cluster-interactive.html
View File

@ -13,21 +13,21 @@ title: Interactive Tutorial - Creating a Cluster
<div class="layout" id="top">
<main class="content katacoda-content">
<main class="content katacoda-content">
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/1" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;"></div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/deploy-intro/" role="button">Continue to Module 2<span class="btn__next">›</span></a>
</div>
</div>
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/1" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;"></div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/deploy-intro/" role="button">Continue to Module 2<span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

146
docs/tutorials/kubernetes-basics/cluster-intro.html
View File

@ -15,94 +15,94 @@ title: Using Minikube to Create a Cluster
<div class="layout" id="top">
<main class="content">
<main class="content">
<div class="row">
<div class="row">
<div class="col-md-8">
<h3>Objectives</h3>
<ul>
<li>Learn what a Kubernetes cluster is.</li>
<li>Learn what Minikube is.</li>
<li>Start a Kubernetes cluster using an online terminal.</li>
</ul>
</div>
<h3>Objectives</h3>
<ul>
<li>Learn what a Kubernetes cluster is.</li>
<li>Learn what Minikube is.</li>
<li>Start a Kubernetes cluster using an online terminal.</li>
</ul>
</div>
<div class="col-md-8">
<h3>Kubernetes Clusters</h3>
<p>
<b>Kubernetes coordinates a highly available cluster of computers that are connected to work as a single unit.</b> The abstractions in Kubernetes allow you to deploy containerized applications to a cluster without tying them specifically to individual machines. To make use of this new model of deployment, applications need to be packaged in a way that decouples them from individual hosts: they need to be containerized. Containerized applications are more flexible and available than in past deployment models, where applications were installed directly onto specific machines as packages deeply integrated into the host. <b>Kubernetes automates the distribution and scheduling of application containers across a cluster in a more efficient way.</b> Kubernetes is an <a href="https://github.com/kubernetes/kubernetes">open-source</a> platform and is production-ready.
</p>
<p>A Kubernetes cluster consists of two types of resources:
<ul>
<li>The <b>Master</b> coordinates the cluster</li>
<li><b>Nodes</b> are the workers that run applications</li>
</ul>
</p>
</div>
<div class="col-md-8">
<h3>Kubernetes Clusters</h3>
<p>
<b>Kubernetes coordinates a highly available cluster of computers that are connected to work as a single unit.</b> The abstractions in Kubernetes allow you to deploy containerized applications to a cluster without tying them specifically to individual machines. To make use of this new model of deployment, applications need to be packaged in a way that decouples them from individual hosts: they need to be containerized. Containerized applications are more flexible and available than in past deployment models, where applications were installed directly onto specific machines as packages deeply integrated into the host. <b>Kubernetes automates the distribution and scheduling of application containers across a cluster in a more efficient way.</b> Kubernetes is an <a href="https://github.com/kubernetes/kubernetes">open-source</a> platform and is production-ready.
</p>
<p>A Kubernetes cluster consists of two types of resources:
<ul>
<li>The <b>Master</b> coordinates the cluster</li>
<li><b>Nodes</b> are the workers that run applications</li>
</ul>
</p>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Kubernetes cluster</li>
<li>Minikube</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>
Kubernetes is a production-grade, open-source platform that orchestrates the placement (scheduling) and execution of application containers within and across computer clusters.
</i></p>
</div>
</div>
</div>
<br>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Kubernetes cluster</li>
<li>Minikube</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>
Kubernetes is a production-grade, open-source platform that orchestrates the placement (scheduling) and execution of application containers within and across computer clusters.
</i></p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Cluster Diagram</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Cluster Diagram</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_01_cluster.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_01_cluster.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<p><b>The Master is responsible for managing the cluster.</b> The master coordinates all activities in your cluster, such as scheduling applications, maintaining applications' desired state, scaling applications, and rolling out new updates.</p>
<p><b>A node is a VM or a physical computer that serves as a worker machine in a Kubernetes cluster.</b> Each node has a Kubelet, which is an agent for managing the node and communicating with the Kubernetes master. The node should also have tools for handling container operations, such as <a href="https://www.docker.com/">Docker</a> or <a href="https://coreos.com/rkt/">rkt</a>. A Kubernetes cluster that handles production traffic should have a minimum of three nodes.</p>
<div class="row">
<div class="col-md-8">
<p><b>The Master is responsible for managing the cluster.</b> The master coordinates all activities in your cluster, such as scheduling applications, maintaining applications' desired state, scaling applications, and rolling out new updates.</p>
<p><b>A node is a VM or a physical computer that serves as a worker machine in a Kubernetes cluster.</b> Each node has a Kubelet, which is an agent for managing the node and communicating with the Kubernetes master. The node should also have tools for handling container operations, such as <a href="https://www.docker.com/">Docker</a> or <a href="https://coreos.com/rkt/">rkt</a>. A Kubernetes cluster that handles production traffic should have a minimum of three nodes.</p>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> Masters manage the cluster and the nodes are used to host the running applications. </i></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> Masters manage the cluster and the nodes are used to host the running applications. </i></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p>When you deploy applications on Kubernetes, you tell the master to start the application containers. The master schedules the containers to run on the cluster's nodes. <b>The nodes communicate with the master using the Kubernetes API</b>, which the master exposes. End users can also use the Kubernetes API directly to interact with the cluster.</p>
<div class="row">
<div class="col-md-8">
<p>When you deploy applications on Kubernetes, you tell the master to start the application containers. The master schedules the containers to run on the cluster's nodes. <b>The nodes communicate with the master using the Kubernetes API</b>, which the master exposes. End users can also use the Kubernetes API directly to interact with the cluster.</p>
<p>A Kubernetes cluster can be deployed on either physical or virtual machines. To get started with Kubernetes development, you can use <a href="https://github.com/kubernetes/minikube">Minikube</a>. Minikube is a lightweight Kubernetes implementation that creates a VM on your local machine and deploys a simple cluster containing only one node. Minikube is available for Linux, Mac OS and Windows systems. The Minikube CLI provides basic bootstrapping operations for working with your cluster, including start, stop, status, and delete. For this bootcamp, however, you'll use a provided online terminal with Minikube pre-installed.</p>
<p>A Kubernetes cluster can be deployed on either physical or virtual machines. To get started with Kubernetes development, you can use <a href="https://github.com/kubernetes/minikube">Minikube</a>. Minikube is a lightweight Kubernetes implementation that creates a VM on your local machine and deploys a simple cluster containing only one node. Minikube is available for Linux, Mac OS and Windows systems. The Minikube CLI provides basic bootstrapping operations for working with your cluster, including start, stop, status, and delete. For this bootcamp, however, you'll use a provided online terminal with Minikube pre-installed.</p>
<p>Now that you know what Kubernetes is, let's go to the online tutorial and start our first cluster!</p>
<p>Now that you know what Kubernetes is, let's go to the online tutorial and start our first cluster!</p>
</div>
</div>
<br>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/cluster-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/cluster-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

30
docs/tutorials/kubernetes-basics/deploy-interactive.html
View File

@ -13,25 +13,25 @@ title: Interactive Tutorial - Deploying an App
<div class="layout" id="top">
<main class="content katacoda-content">
<main class="content katacoda-content">
<br>
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<br>
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/7" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/7" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/explore-intro/" role="button">Continue to Module 3<span class="btn__next">›</span></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/explore-intro/" role="button">Continue to Module 3<span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

134
docs/tutorials/kubernetes-basics/deploy-intro.html
View File

@ -12,95 +12,95 @@ title: Using kubectl to Create a Deployment
<div class="layout" id="top">
<main class="content">
<main class="content">
<div class="row">
<div class="row">
<div class="col-md-8">
<h3>Objectives</h3>
<ul>
<li>Learn about application Deployments.</li>
<li>Deploy your first app on Kubernetes with kubectl.</li>
</ul>
</div>
<div class="col-md-8">
<h3>Objectives</h3>
<ul>
<li>Learn about application Deployments.</li>
<li>Deploy your first app on Kubernetes with kubectl.</li>
</ul>
</div>
<div class="col-md-8">
<h3>Kubernetes Deployments</h3>
<p>
Once you have a running Kubernetes cluster, you can deploy your containerized applications on top of it. To do so, you create a Kubernetes <b>Deployment</b>. The Deployment is responsible for creating and updating instances of your application. Once you've created a Deployment, the Kubernetes master schedules the application instances that the Deployment creates onto individual Nodes in the cluster.
</p>
<div class="col-md-8">
<h3>Kubernetes Deployments</h3>
<p>
Once you have a running Kubernetes cluster, you can deploy your containerized applications on top of it. To do so, you create a Kubernetes <b>Deployment</b>. The Deployment is responsible for creating and updating instances of your application. Once you've created a Deployment, the Kubernetes master schedules the application instances that the Deployment creates onto individual Nodes in the cluster.
</p>
<p>Once the application instances are created, a Kubernetes Deployment Controller continuously monitors those instances. The Deployment controller replaces an instance if the Node hosting it goes down or it is deleted. <b>This provides a self-healing mechanism to address machine failure or maintenance.</b></p>
<p>Once the application instances are created, a Kubernetes Deployment Controller continuously monitors those instances. The Deployment controller replaces an instance if the Node hosting it goes down or it is deleted. <b>This provides a self-healing mechanism to address machine failure or maintenance.</b></p>
<p>In a pre-orchestration world, installation scripts would often be used to start applications, but they did not allow recovery from machine failure. By both creating your application instances and keeping them running across Nodes, Kubernetes Deployments provide a fundamentally different approach to application management. </p>
<p>In a pre-orchestration world, installation scripts would often be used to start applications, but they did not allow recovery from machine failure. By both creating your application instances and keeping them running across Nodes, Kubernetes Deployments provide a fundamentally different approach to application management. </p>
</div>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Deployments</li>
<li>Kubectl</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>
A Deployment is responsible for creating and updating instances of your application
</i></p>
</div>
</div>
</div>
<br>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Deployments</li>
<li>Kubectl</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>
A Deployment is responsible for creating and updating instances of your application
</i></p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Deploying your first app on Kubernetes</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Deploying your first app on Kubernetes</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_02_first_app.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_02_first_app.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-8">
<p>You can create and manage a Deployment by using the Kubernetes command line interface, <b>Kubectl</b>. Kubectl uses the Kubernetes API to interact with the cluster. In this module, you'll learn the most common Kubectl commands needed to create Deployments that run your applications on a Kubernetes cluster.</p>
<p>When you create a Deployment, you'll need to specify the container image for your application and the number of replicas that you want to run. You can change that information later by updating your Deployment; Modules <a href="/docs/tutorials/kubernetes-basics/scale-intro/">5</a> and <a href="/docs/tutorials/kubernetes-basics/update-intro/">6</a> of the bootcamp discuss how you can scale and update your Deployments.</p>
<p>When you create a Deployment, you'll need to specify the container image for your application and the number of replicas that you want to run. You can change that information later by updating your Deployment; Modules <a href="/docs/tutorials/kubernetes-basics/scale-intro/">5</a> and <a href="/docs/tutorials/kubernetes-basics/update-intro/">6</a> of the bootcamp discuss how you can scale and update your Deployments.</p>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> Applications need to be packaged into one of the supported container formats in order to be deployed on Kubernetes </i></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> Applications need to be packaged into one of the supported container formats in order to be deployed on Kubernetes </i></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p>For our first Deployment, we'll use a <a href="https://nodejs.org">Node.js</a> application packaged in a Docker container. The source code and the Dockerfile are available in the <a href="https://github.com/kubernetes/kubernetes-bootcamp">GitHub repository</a> for the Kubernetes Bootcamp.</p>
<div class="row">
<div class="col-md-8">
<p>For our first Deployment, we'll use a <a href="https://nodejs.org">Node.js</a> application packaged in a Docker container. The source code and the Dockerfile are available in the <a href="https://github.com/kubernetes/kubernetes-bootcamp">GitHub repository</a> for the Kubernetes Bootcamp.</p>
<p>Now that you know what Deployments are, let's go to the online tutorial and deploy our first app!</p>
<p>Now that you know what Deployments are, let's go to the online tutorial and deploy our first app!</p>
</div>
</div>
<br>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/deploy-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/deploy-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

30
docs/tutorials/kubernetes-basics/explore-interactive.html
View File

@ -13,25 +13,25 @@ title: Interactive Tutorial - Exploring Your App
<div class="layout" id="top">
<main class="content katacoda-content">
<main class="content katacoda-content">
<br>
<div class="katacoda">
<br>
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/4" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/expose-intro/" role="button">Continue to Module 4<span class="btn__next">›</span></a>
</div>
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/4" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/expose-intro/" role="button">Continue to Module 4<span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

204
docs/tutorials/kubernetes-basics/explore-intro.html
View File

@ -13,128 +13,128 @@ title: Viewing Pods and Nodes
<div class="layout" id="top">
<main class="content">
<main class="content">
<div class="row">
<div class="row">
<div class="col-md-8">
<h3>Objectives</h3>
<ul>
<li>Learn about Kubernetes Pods.</li>
<li>Learn about Kubernetes Nodes.</li>
<li>Troubleshoot deployed applications.</li>
</ul>
</div>
<h3>Objectives</h3>
<ul>
<li>Learn about Kubernetes Pods.</li>
<li>Learn about Kubernetes Nodes.</li>
<li>Troubleshoot deployed applications.</li>
</ul>
</div>
<div class="col-md-8">
<h2>Kubernetes Pods</h2>
<p>When you created a Deployment in Module <a href="/docs/tutorials/kubernetes-basics/deploy-intro/">2</a>, Kubernetes created a <b>Pod</b> to host your application instance. A Pod is a Kubernetes abstraction that represents a group of one or more application containers (such as Docker or rkt), and some shared resources for those containers. Those resources include:</p>
<ul>
<li>Shared storage, as Volumes</li>
<li>Networking, as a unique cluster IP address</li>
<li>Information about how to run each container, such as the container image version or specific ports to use</li>
</ul>
<p>A Pod models an application-specific "logical host" and can contain different application containers which are relatively tightly coupled. For example, a Pod might include both the container with your Node.js app as well as a different container that feeds the data to be published by the Node.js webserver. The containers in a Pod share an IP Address and port space, are always co-located and co-scheduled, and run in a shared context on the same Node.</p>
<div class="col-md-8">
<h2>Kubernetes Pods</h2>
<p>When you created a Deployment in Module <a href="/docs/tutorials/kubernetes-basics/deploy-intro/">2</a>, Kubernetes created a <b>Pod</b> to host your application instance. A Pod is a Kubernetes abstraction that represents a group of one or more application containers (such as Docker or rkt), and some shared resources for those containers. Those resources include:</p>
<ul>
<li>Shared storage, as Volumes</li>
<li>Networking, as a unique cluster IP address</li>
<li>Information about how to run each container, such as the container image version or specific ports to use</li>
</ul>
<p>A Pod models an application-specific "logical host" and can contain different application containers which are relatively tightly coupled. For example, a Pod might include both the container with your Node.js app as well as a different container that feeds the data to be published by the Node.js webserver. The containers in a Pod share an IP Address and port space, are always co-located and co-scheduled, and run in a shared context on the same Node.</p>
<p>Pods are the atomic unit on the Kubernetes platform. When we create a Deployment on Kubernetes, that Deployment creates Pods with containers inside them (as opposed to creating containers directly). Each Pod is tied to the Node where it is scheduled, and remains there until termination (according to restart policy) or deletion. In case of a Node failure, identical Pods are scheduled on other available Nodes in the cluster.</p>
<p>Pods are the atomic unit on the Kubernetes platform. When we create a Deployment on Kubernetes, that Deployment creates Pods with containers inside them (as opposed to creating containers directly). Each Pod is tied to the Node where it is scheduled, and remains there until termination (according to restart policy) or deletion. In case of a Node failure, identical Pods are scheduled on other available Nodes in the cluster.</p>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Pods</li>
<li>Nodes</li>
<li>Kubectl main commands</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>
A Pod is a group of one or more application containers (such as Docker or rkt) and includes shared storage (volumes), IP address and information about how to run them.
</i></p>
</div>
</div>
</div>
<br>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Pods</li>
<li>Nodes</li>
<li>Kubectl main commands</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>
A Pod is a group of one or more application containers (such as Docker or rkt) and includes shared storage (volumes), IP address and information about how to run them.
</i></p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Pods overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Pods overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_03_pods.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_03_pods.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2>Nodes</h2>
<p>A Pod always runs on a <b>Node</b>. A Node is a worker machine in Kubernetes and may be either a virtual or a physical machine, depending on the cluster. Each Node is managed by the Master. A Node can have multiple pods, and the Kubernetes master automatically handles scheduling the pods across the Nodes in the cluster. The Master's automatic scheduling takes into account the available resources on each Node.</p>
<div class="row">
<div class="col-md-8">
<h2>Nodes</h2>
<p>A Pod always runs on a <b>Node</b>. A Node is a worker machine in Kubernetes and may be either a virtual or a physical machine, depending on the cluster. Each Node is managed by the Master. A Node can have multiple pods, and the Kubernetes master automatically handles scheduling the pods across the Nodes in the cluster. The Master's automatic scheduling takes into account the available resources on each Node.</p>
<p>Every Kubernetes Node runs at least:</p>
<ul>
<li>Kubelet, a process responsible for communication between the Kubernetes Master and the Nodes; it manages the Pods and the containers running on a machine.</li>
<li>A container runtime (like Docker, rkt) responsible for pulling the container image from a registry, unpacking the container, and running the application.</li>
</ul>
<p>Every Kubernetes Node runs at least:</p>
<ul>
<li>Kubelet, a process responsible for communication between the Kubernetes Master and the Nodes; it manages the Pods and the containers running on a machine.</li>
<li>A container runtime (like Docker, rkt) responsible for pulling the container image from a registry, unpacking the container, and running the application.</li>
</ul>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> Containers should only be scheduled together in a single Pod if they are tightly coupled and need to share resources such as disk. </i></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> Containers should only be scheduled together in a single Pod if they are tightly coupled and need to share resources such as disk. </i></p>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Node overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Node overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_03_nodes.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_03_nodes.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2>Troubleshooting with kubectl</h2>
<p>In Module <a href="/docs/tutorials/kubernetes-basics/deploy-intro/">2</a>, you used Kubectl command-line interface. You'll continue to use it in Module 3 to get information about deployed applications and their environments. The most common operations can be done with the following kubectl commands:</p>
<ul>
<li><b>kubectl get</b> - list resources</li>
<li><b>kubectl describe</b> - show detailed information about a resource</li>
<li><b>kubectl logs</b> - print the logs from a container in a pod</li>
<li><b>kubectl exec</b> - execute a command on a container in a pod</li>
</ul>
<div class="row">
<div class="col-md-8">
<h2>Troubleshooting with kubectl</h2>
<p>In Module <a href="/docs/tutorials/kubernetes-basics/deploy-intro/">2</a>, you used Kubectl command-line interface. You'll continue to use it in Module 3 to get information about deployed applications and their environments. The most common operations can be done with the following kubectl commands:</p>
<ul>
<li><b>kubectl get</b> - list resources</li>
<li><b>kubectl describe</b> - show detailed information about a resource</li>
<li><b>kubectl logs</b> - print the logs from a container in a pod</li>
<li><b>kubectl exec</b> - execute a command on a container in a pod</li>
</ul>
<p>You can use these commands to see when applications were deployed, what their current statuses are, where they are running and what their configurations are.</p>
<p>You can use these commands to see when applications were deployed, what their current statuses are, where they are running and what their configurations are.</p>
<p>Now that we know more about our cluster components and the command line, let's explore our application.</p>
<p>Now that we know more about our cluster components and the command line, let's explore our application.</p>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> A node is a worker machine in Kubernetes and may be a VM or physical machine, depending on the cluster. Multiple Pods can run on one Node. </i></p>
</div>
</div>
</div>
<br>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> A node is a worker machine in Kubernetes and may be a VM or physical machine, depending on the cluster. Multiple Pods can run on one Node. </i></p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/explore-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/explore-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

28
docs/tutorials/kubernetes-basics/expose-interactive.html
View File

@ -13,22 +13,22 @@ title: Interactive Tutorial - Exposing Your App
<div class="layout" id="top">
<main class="content katacoda-content">
<main class="content katacoda-content">
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/8" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/scale-intro/" role="button">Continue to Module 5<span class="btn__next">›</span></a>
</div>
</div>
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/8" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/scale-intro/" role="button">Continue to Module 5<span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

200
docs/tutorials/kubernetes-basics/expose-intro.html
View File

@ -12,125 +12,125 @@ title: Using a Service to Expose Your App
<div class="layout" id="top">
<main class="content">
<main class="content">
<div class="row">
<div class="row">
<div class="col-md-8">
<h3>Objectives</h3>
<ul>
<li>Learn about Kubernetes Services.</li>
<li>Learn about Kubernetes Labels.</li>
<li>Expose an application outside Kubernetes.</li>
</ul>
</div>
<h3>Objectives</h3>
<ul>
<li>Learn about Kubernetes Services.</li>
<li>Learn about Kubernetes Labels.</li>
<li>Expose an application outside Kubernetes.</li>
</ul>
</div>
<div class="col-md-8">
<h3>Kubernetes Services</h3>
<div class="col-md-8">
<h3>Kubernetes Services</h3>
<p>While Pods do have their own unique IP across the cluster, those IPs are not exposed outside Kubernetes. Taking into account that over time Pods may be terminated, deleted or replaced by other Pods, we need a way to let other Pods and applications automatically discover each other. Kubernetes addresses this by grouping Pods in Services. A Kubernetes <b>Service</b> is an abstraction layer which defines a logical set of Pods and enables external traffic exposure, load balancing and service discovery for those Pods.</p>
<p>While Pods do have their own unique IP across the cluster, those IPs are not exposed outside Kubernetes. Taking into account that over time Pods may be terminated, deleted or replaced by other Pods, we need a way to let other Pods and applications automatically discover each other. Kubernetes addresses this by grouping Pods in Services. A Kubernetes <b>Service</b> is an abstraction layer which defines a logical set of Pods and enables external traffic exposure, load balancing and service discovery for those Pods.</p>
<p>This abstraction will allow us to expose Pods to traffic originating from outside the cluster. Services have their own unique cluster-private IP address and expose a port to receive traffic. If you choose to expose the service outside the cluster, the options are:</p>
<ul>
<li>LoadBalancer - provides a public IP address (what you would typically use when you run Kubernetes on GCP or AWS)</li>
<li>NodePort - exposes the Service on the same port on each Node of the cluster using NAT (available on all Kubernetes clusters, and in Minikube)</li>
</ul>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Exposing Pods to external traffic</li>
<li>Load balancing traffic across multiple Pods</li>
<li>Using labels</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>
A Kubernetes Service is an abstraction layer which defines a logical set of Pods and enables external traffic exposure, load balancing and service discovery for those Pods.
</i></p>
</div>
</div>
</div>
<br>
<p>This abstraction will allow us to expose Pods to traffic originating from outside the cluster. Services have their own unique cluster-private IP address and expose a port to receive traffic. If you choose to expose the service outside the cluster, the options are:</p>
<ul>
<li>LoadBalancer - provides a public IP address (what you would typically use when you run Kubernetes on GCP or AWS)</li>
<li>NodePort - exposes the Service on the same port on each Node of the cluster using NAT (available on all Kubernetes clusters, and in Minikube)</li>
</ul>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Exposing Pods to external traffic</li>
<li>Load balancing traffic across multiple Pods</li>
<li>Using labels</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>
A Kubernetes Service is an abstraction layer which defines a logical set of Pods and enables external traffic exposure, load balancing and service discovery for those Pods.
</i></p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Services overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Services overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_04_services.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_04_services.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-8">
<p>A Service provides load balancing of traffic across the contained set of Pods. This is useful when a service is created to group all Pods from a specific Deployment (our application will make use of this in the next module, when we'll have multiple instances running).</p>
<p>A Service provides load balancing of traffic across the contained set of Pods. This is useful when a service is created to group all Pods from a specific Deployment (our application will make use of this in the next module, when we'll have multiple instances running).</p>
<p>Services are also responsible for service-discovery within the cluster (covered in <a href="/docs/user-guide/connecting-applications/#accessing-the-service">Accessing the Service</a>). This will for example allow a frontend service (like a web server) to receive traffic from a backend service (like a database) without worrying about Pods.</p>
<p>Services are also responsible for service-discovery within the cluster (covered in <a href="/docs/user-guide/connecting-applications/#accessing-the-service">Accessing the Service</a>). This will for example allow a frontend service (like a web server) to receive traffic from a backend service (like a database) without worrying about Pods.</p>
<p>Services match a set of Pods using Label Selectors, a grouping primitive that allows logical operation on Labels.</p>
<p>Services match a set of Pods using Label Selectors, a grouping primitive that allows logical operation on Labels.</p>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> You can create a Service when you start a Deployment by adding --expose as a parameter for the kubectl run command </i></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> You can create a Service when you start a Deployment by adding --expose as a parameter for the kubectl run command </i></p>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-8">
<p><b>Labels</b> are key/value pairs that are attached to objects, such as Pods and you can think of them as hashtags from social media. They are used to organize related objects in a way meaningful to the users like:</p>
<ul>
<li>Production environment (production, test, dev)</li>
<li>Application version (beta, v1.3)</li>
<li>Type of service/server (frontend, backend, database)</li>
</ul>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> Labels are key/value pairs that are attached to objects </i></p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Labels</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><b>Labels</b> are key/value pairs that are attached to objects, such as Pods and you can think of them as hashtags from social media. They are used to organize related objects in a way meaningful to the users like:</p>
<ul>
<li>Production environment (production, test, dev)</li>
<li>Application version (beta, v1.3)</li>
<li>Type of service/server (frontend, backend, database)</li>
</ul>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i> Labels are key/value pairs that are attached to objects </i></p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Labels</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_04_labels.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-8">
<p><img src="/docs/tutorials/kubernetes-basics/public/images/module_04_labels.svg"></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<p>Labels can be attached to objects at the creation time or later and can be modified at any time.
The kubectl run command sets some default Labels/Label Selectors on the new Pods/ Deployment. The link between Labels and Label Selectors defines the relationship between the Deployment and the Pods it creates.</p>
<p>Labels can be attached to objects at the creation time or later and can be modified at any time.
The kubectl run command sets some default Labels/Label Selectors on the new Pods/ Deployment. The link between Labels and Label Selectors defines the relationship between the Deployment and the Pods it creates.</p>
<p>Now let's expose our application with the help of a Service, and apply some new Labels.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/expose-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
<p>Now let's expose our application with the help of a Service, and apply some new Labels.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/expose-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

28
docs/tutorials/kubernetes-basics/scale-interactive.html
View File

@ -13,22 +13,22 @@ title: Interactive Tutorial - Scaling Your App
<div class="layout" id="top">
<main class="content katacoda-content">
<main class="content katacoda-content">
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/5" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/update-intro/" role="button">Continue to Module 6<span class="btn__next">›</span></a>
</div>
</div>
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/5" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/update-intro/" role="button">Continue to Module 6<span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
<a class="scrolltop" href="#top"></a>

158
docs/tutorials/kubernetes-basics/scale-intro.html
View File

@ -12,107 +12,107 @@ title: Running Multiple Instances of Your App
<div class="layout" id="top">
<main class="content">
<main class="content">
<div class="row">
<div class="row">
<div class="col-md-8">
<h3>Objectives</h3>
<ul>
<li>Scale an app using kubectl.</li>
</ul>
</div>
<h3>Objectives</h3>
<ul>
<li>Scale an app using kubectl.</li>
</ul>
</div>
<div class="col-md-8">
<div class="col-md-8">
<h3>Scaling an application</h3>
<p>In the previous modules we created a <a href="http://kubernetes.io/docs/user-guide/deployments/"> Deployment</a>, and then exposed it publicly via a <a href="http://kubernetes.io/docs/user-guide/services/">Service</a>. The Deployment created only one Pod for running our application. When traffic increases, we will need to scale the application to keep up with user demand.</p>
<p>In the previous modules we created a <a href="http://kubernetes.io/docs/user-guide/deployments/"> Deployment</a>, and then exposed it publicly via a <a href="http://kubernetes.io/docs/user-guide/services/">Service</a>. The Deployment created only one Pod for running our application. When traffic increases, we will need to scale the application to keep up with user demand.</p>
<p><b>Scaling</b> is accomplished by changing the number of replicas in a Deployment</p>
<p><b>Scaling</b> is accomplished by changing the number of replicas in a Deployment</p>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Scaling a Deployment</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i> You can create from the start a Deployment with multiple instances using the --replicas parameter for the kubectl run command </i></p>
</div>
</div>
</div>
<br>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Scaling a Deployment</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i> You can create from the start a Deployment with multiple instances using the --replicas parameter for the kubectl run command </i></p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Scaling overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Scaling overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling1.svg">
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling1.svg">
</div>
<div class="item">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling2.svg">
</div>
</div>
<div class="item">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling2.svg">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="sr-only ">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="sr-only ">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-8">
<p>Scaling up a Deployment will ensure new Pods are created and scheduled to Nodes with available resources. Scaling down will reduce the number of Pods to the new desired state. Kubernetes also supports <a href="http://kubernetes.io/docs/user-guide/horizontal-pod-autoscaling/"> autoscaling </a> of Pods, but it is outside of the scope of this tutorial. Scaling to zero is also possible, and it will terminate all Pods of the specified Deployment.</p>
<p>Scaling up a Deployment will ensure new Pods are created and scheduled to Nodes with available resources. Scaling down will reduce the number of Pods to the new desired state. Kubernetes also supports <a href="http://kubernetes.io/docs/user-guide/horizontal-pod-autoscaling/"> autoscaling </a> of Pods, but it is outside of the scope of this tutorial. Scaling to zero is also possible, and it will terminate all Pods of the specified Deployment.</p>
<p>Running multiple instances of an application will require a way to distribute the traffic to all of them. Services have an integrated load-balancer that will distribute network traffic to all Pods of an exposed Deployment. Services will monitor continuously the running Pods using endpoints, to ensure the traffic is sent only to available Pods.</p>
<p>Running multiple instances of an application will require a way to distribute the traffic to all of them. Services have an integrated load-balancer that will distribute network traffic to all Pods of an exposed Deployment. Services will monitor continuously the running Pods using endpoints, to ensure the traffic is sent only to available Pods.</p>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i>Scaling is accomplished by changing the number of replicas in a Deployment.</i></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i>Scaling is accomplished by changing the number of replicas in a Deployment.</i></p>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-8">
<p> Once you have multiple instances of an Application running, you would be able to do Rolling updates without downtime. We'll cover that in the next module. Now, let's go to the online terminal and scale our application.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<p> Once you have multiple instances of an Application running, you would be able to do Rolling updates without downtime. We'll cover that in the next module. Now, let's go to the online terminal and scale our application.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/scale-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/scale-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

18
docs/tutorials/kubernetes-basics/update-interactive.html
View File

@ -13,17 +13,17 @@ title: Interactive Tutorial - Updating Your App
<div class="layout" id="top">
<main class="content katacoda-content">
<main class="content katacoda-content">
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/6" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
</div>
<div class="katacoda">
<div class="katacoda__alert">
To interact with the Terminal, please use the desktop/tablet version
</div>
<div class="katacoda__box" id="inline-terminal-1" data-katacoda-id="kubernetes-bootcamp/6" data-katacoda-color="326de6" data-katacoda-secondary="273d6d" data-katacoda-hideintro="false" data-katacoda-font="Roboto" data-katacoda-fontheader="Roboto Slab" data-katacoda-prompt="Kubernetes Bootcamp Terminal" style="height: 600px;">
</div>
</div>
</main>
</main>
</div>

188
docs/tutorials/kubernetes-basics/update-intro.html
View File

@ -12,122 +12,122 @@ title: Performing a Rolling Update
<div class="layout" id="top">
<main class="content">
<main class="content">
<div class="row">
<div class="row">
<div class="col-md-8">
<h3>Objectives</h3>
<ul>
<li>Perform a rolling update using kubectl.</li>
</ul>
</div>
<h3>Objectives</h3>
<ul>
<li>Perform a rolling update using kubectl.</li>
</ul>
</div>
<div class="col-md-8">
<h3>Updating an application</h3>
<div class="col-md-8">
<h3>Updating an application</h3>
<p>Users expect applications to be available all the time and developers are expected to deploy new versions of them several times a day. In Kubernetes this is done with rolling updates. <b>Rolling updates</b> allow Deployments' update to take place with zero downtime by incrementally updating Pods instances with new ones. The new Pods will be scheduled on Nodes with available resources.</p>
<p>Users expect applications to be available all the time and developers are expected to deploy new versions of them several times a day. In Kubernetes this is done with rolling updates. <b>Rolling updates</b> allow Deployments' update to take place with zero downtime by incrementally updating Pods instances with new ones. The new Pods will be scheduled on Nodes with available resources.</p>
<p>In the previous module we scaled our application to run multiple instances. This is a requirement for performing updates without affecting application availability. By default, the maximum number of Pods that can be unavailable during the update and the maximum number of new Pods that can be created, is one. Both options can be configured to either numbers or percentages (of Pods).
In Kubernetes, updates are versioned and any Deployment update can be reverted to previous (stable) version.</p>
<p>In the previous module we scaled our application to run multiple instances. This is a requirement for performing updates without affecting application availability. By default, the maximum number of Pods that can be unavailable during the update and the maximum number of new Pods that can be created, is one. Both options can be configured to either numbers or percentages (of Pods).
In Kubernetes, updates are versioned and any Deployment update can be reverted to previous (stable) version.</p>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Updating an app</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>Rolling updates allow Deployments' update to take place with zero downtime by incrementally updating Pods instances with new ones. </i></p>
</div>
</div>
</div>
<br>
</div>
<div class="col-md-4">
<div class="content__box content__box_lined">
<h3>Summary:</h3>
<ul>
<li>Updating an app</li>
</ul>
</div>
<div class="content__box content__box_fill">
<p><i>Rolling updates allow Deployments' update to take place with zero downtime by incrementally updating Pods instances with new ones. </i></p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Rolling updates overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates1.svg" >
</div>
<div class="row">
<div class="col-md-8">
<h2 style="color: #3771e3;">Rolling updates overview</h2>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates1.svg" >
</div>
<div class="item">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates2.svg">
</div>
<div class="item">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates2.svg">
</div>
<div class="item">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates3.svg">
</div>
<div class="item">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates3.svg">
</div>
<div class="item">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates4.svg">
</div>
</div>
<div class="item">
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates4.svg">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="sr-only ">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="sr-only ">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-8">
<p>Similar to application Scaling, If a Deployment is exposed publicly, the Service will load-balance the traffic only to available Pods during the update. An available Pod is an instance that is available to the users of the application.</p>
<p>Similar to application Scaling, If a Deployment is exposed publicly, the Service will load-balance the traffic only to available Pods during the update. An available Pod is an instance that is available to the users of the application.</p>
<p>Rolling updates allow the following actions:</p>
<ul>
<li>Promote an application from one environment to another (via container image updates)</li>
<li>Rollback to previous versions</li>
<li>Continuous Integration and Continuous Delivery of applications with zero downtime</li>
<p>Rolling updates allow the following actions:</p>
<ul>
<li>Promote an application from one environment to another (via container image updates)</li>
<li>Rollback to previous versions</li>
<li>Continuous Integration and Continuous Delivery of applications with zero downtime</li>
</ul>
</ul>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i>If a Deployment is exposed publicly, the Service will load-balance the traffic only to available Pods during the update. </i></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="content__box content__box_fill">
<p><i>If a Deployment is exposed publicly, the Service will load-balance the traffic only to available Pods during the update. </i></p>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-8">
<p> In the following interactive tutorial we'll update our application to a new version, and also perform a rollback.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8">
<p> In the following interactive tutorial we'll update our application to a new version, and also perform a rollback.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/update-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="btn btn-lg btn-success" href="/docs/tutorials/kubernetes-basics/update-interactive/" role="button">Start Interactive Tutorial <span class="btn__next">›</span></a>
</div>
</div>
</main>
</main>
</div>

488
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/demo/index.html generated vendored
View File

@ -1,252 +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);
});
<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>
$('#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>
<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>

242
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/demo/index.old.html generated vendored
View File

@ -1,128 +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>
<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>
<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>

30
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/tests/ElemMaxY-compat.html generated vendored
View File

@ -1,21 +1,21 @@
<!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 - Test Element MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Element MaxY - Compat Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
<h1>jQuery.scrollTo - Test Element MaxY - Compat Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
</html>

30
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/tests/ElemMaxY-quirks.html generated vendored
View File

@ -1,20 +1,20 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Element MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Element MaxY - Quirks Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
<h1>jQuery.scrollTo - Test Element MaxY - Quirks Mode</h1>
<div id="viewport" style="width:600px;height:500px;overflow: auto">
<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
&nbsp;
</div>
</div>
<script type="text/javascript">
$('#viewport').test();
</script>
</html>

26
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-compat.html generated vendored
View File

@ -1,19 +1,19 @@
<!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 - Test Window MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
</html>

24
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-quirks.html generated vendored
View File

@ -1,18 +1,18 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY - Quirks Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY - Quirks Mode</h1>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
&nbsp;
</div>
<script type="text/javascript">
$(window).test();
</script>
</html>

26
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-to-iframe-compat.html generated vendored
View File

@ -1,20 +1,20 @@
<!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 - Test Window MaxY to Iframe - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html?notest" style="width:500px" /></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
<iframe src="WinMaxY-compat.html?notest" style="width:500px" /></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
</html>

28
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-to-iframe-quirks.html generated vendored
View File

@ -1,19 +1,19 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html?notest" style="width:500px"></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
<h1>jQuery.scrollTo - Test Window MaxY to Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html?notest" style="width:500px"></iframe>
<script type="text/javascript">
setTimeout(function(){
$('iframe').test();
}, 1500 );
</script>
</html>

10
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-with-iframe-compat.html generated vendored
View File

@ -1,11 +1,11 @@
<!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 - Test Window MaxY with Iframe - Compat Mode</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</title>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html" />
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</h1>
<iframe src="WinMaxY-compat.html" />
</html>

8
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/tests/WinMaxY-with-iframe-quirks.html generated vendored
View File

@ -1,10 +1,10 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</title>
</head>
<body>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</h1>
<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Quirks Mode</h1>
<iframe src="WinMaxY-quirks.html" />
<iframe src="WinMaxY-quirks.html" />
</html>

34
docs/user-guide/kubectl/v1.5/node_modules/jquery.scrollto/tests/index.html generated vendored
View File

@ -1,24 +1,24 @@
<!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 Tests</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="Tests for jQuery ScrollTo. Made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.scrollTo Tests</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="Tests for jQuery ScrollTo. Made by Ariel Flesler." />
<meta name="robots" content="index,follow" />
</head>
<body>
<h1>jQuery.scrollTo Tests</h1>
<ul>
<li><a href="WinMaxY-compat.html">Max window scrolling (compat mode)</a></li>
<li><a href="WinMaxY-quirks.html">Max window scrolling (quirks mode)</a></li>
<li><a href="ElemMaxY-compat.html">Max element scrolling (compat mode)</a></li>
<li><a href="ElemMaxY-quirks.html">Max element scrolling (quirks mode)</a></li>
<li><a href="WinMaxY-with-iframe-compat.html">Max window scrolling, within an iframe (compat mode)</a></li>
<li><a href="WinMaxY-with-iframe-quirks.html">Max window scrolling, within an iframe (quirks mode)</a></li>
<li><a href="WinMaxY-to-iframe-compat.html">Max iframe scrolling from outside (compat mode)</a></li>
<li><a href="WinMaxY-to-iframe-quirks.html">Max iframe scrolling from outside (quirks mode)</a></li>
</ul>
<h1>jQuery.scrollTo Tests</h1>
<ul>
<li><a href="WinMaxY-compat.html">Max window scrolling (compat mode)</a></li>
<li><a href="WinMaxY-quirks.html">Max window scrolling (quirks mode)</a></li>
<li><a href="ElemMaxY-compat.html">Max element scrolling (compat mode)</a></li>
<li><a href="ElemMaxY-quirks.html">Max element scrolling (quirks mode)</a></li>
<li><a href="WinMaxY-with-iframe-compat.html">Max window scrolling, within an iframe (compat mode)</a></li>
<li><a href="WinMaxY-with-iframe-quirks.html">Max window scrolling, within an iframe (quirks mode)</a></li>
<li><a href="WinMaxY-to-iframe-compat.html">Max iframe scrolling from outside (compat mode)</a></li>
<li><a href="WinMaxY-to-iframe-quirks.html">Max iframe scrolling from outside (quirks mode)</a></li>
</ul>
</body>
</html>

4
docs/user-guide/kubectl/v1.5/node_modules/node-static/test/fixtures/index.html generated vendored
View File

@ -1,8 +1,8 @@
<html lang="en">
<head>
<title>Awesome page</title>
<title>Awesome page</title>
</head>
<body>
hello world!
hello world!
</body>
</html>

4
docs/user-guide/kubectl/v1.5/node_modules/node-static/test/fixtures/there/index.html generated vendored
View File

@ -1,8 +1,8 @@
<html lang="en">
<head>
<title>Other page</title>
<title>Other page</title>
</head>
<body>
hello there!
hello there!
</body>
</html>

286
index.html
View File

@ -5,176 +5,176 @@ cid: home
<!-- HERO -->
<section id="hero" class="light-text">
<main>
<div id="headlineWrapper">
<h1>Production-Grade Container Orchestration</h1>
<h5>Automated container deployment, scaling, and management</h5>
</div>
<a href="/docs/tutorials/kubernetes-basics/" id="quickstartButton" class="button">Try Our Interactive Tutorials</a>
</main>
<!--<div id="vendorStrip" class="light-text">-->
<!--<img src="images/logos/viacom_logo.png">-->
<!--<img src="images/logos/soundcloud_logo.png">-->
<!--<img src="images/logos/redhat_logo.png">-->
<!--<img src="images/logos/wepay_logo.png">-->
<!--<img src="images/logos/verizon_logo.png">-->
<!--</div>-->
<main>
<div id="headlineWrapper">
<h1>Production-Grade Container Orchestration</h1>
<h5>Automated container deployment, scaling, and management</h5>
</div>
<a href="/docs/tutorials/kubernetes-basics/" id="quickstartButton" class="button">Try Our Interactive Tutorials</a>
</main>
<!--<div id="vendorStrip" class="light-text">-->
<!--<img src="images/logos/viacom_logo.png">-->
<!--<img src="images/logos/soundcloud_logo.png">-->
<!--<img src="images/logos/redhat_logo.png">-->
<!--<img src="images/logos/wepay_logo.png">-->
<!--<img src="images/logos/verizon_logo.png">-->
<!--</div>-->
</section>
<!-- OCEAN NODES -->
<section id="oceanNodes">
<main>
<div class="image-wrapper"><img src="images/flower.png"></div>
<div class="content">
<h3><a href="docs/whatisk8s">Kubernetes</a> is an open-source system for automating deployment, scaling, and management of containerized applications.</h3>
<p>It groups containers that make up an application into logical units for easy management and discovery. Kubernetes builds
<main>
<div class="image-wrapper"><img src="images/flower.png"></div>
<div class="content">
<h3><a href="docs/whatisk8s">Kubernetes</a> is an open-source system for automating deployment, scaling, and management of containerized applications.</h3>
<p>It groups containers that make up an application into logical units for easy management and discovery. Kubernetes builds
upon <a href="http://queue.acm.org/detail.cfm?id=2898444">15 years of experience of running production workloads at Google</a>,
combined with best-of-breed ideas and practices from the community.</p>
</div>
</main>
<main>
<div class="image-wrapper"><img src="images/scalable.png"></div>
<div class="content">
<h4>Planet Scale</h4>
<p>Designed on the same principles that allows Google to run billions of containers a week, Kubernetes can scale without increasing your ops team.</p>
</div>
</main>
<main>
<div class="image-wrapper"><img src="images/blocks.png"></div>
<div class="content">
<h4>Never Outgrow</h4>
<p>Whether testing locally or running a global enterprise, Kubernetes flexibility grows with you to deliver your applications consistently and easily no matter how complex your need is.</p>
</div>
</main>
<main>
<div class="image-wrapper"><img src="images/suitcase.png"></div>
<div class="content">
<h4>Run Anywhere</h4>
<p>Kubernetes is open source giving you the freedom to take advantage of on-premise, hybrid, or public cloud infrastructure, letting you effortlessly move workloads to where it matters to you.</p>
</div>
</main>
</div>
</main>
<main>
<div class="image-wrapper"><img src="images/scalable.png"></div>
<div class="content">
<h4>Planet Scale</h4>
<p>Designed on the same principles that allows Google to run billions of containers a week, Kubernetes can scale without increasing your ops team.</p>
</div>
</main>
<main>
<div class="image-wrapper"><img src="images/blocks.png"></div>
<div class="content">
<h4>Never Outgrow</h4>
<p>Whether testing locally or running a global enterprise, Kubernetes flexibility grows with you to deliver your applications consistently and easily no matter how complex your need is.</p>
</div>
</main>
<main>
<div class="image-wrapper"><img src="images/suitcase.png"></div>
<div class="content">
<h4>Run Anywhere</h4>
<p>Kubernetes is open source giving you the freedom to take advantage of on-premise, hybrid, or public cloud infrastructure, letting you effortlessly move workloads to where it matters to you.</p>
</div>
</main>
</section>
<section id="video">
<div class="light-text">
<h2>Kubernetes: Finally&hellip; A True Cloud Platform</h2>
<p>Sam Ghods, Co-Founder and Services Architect at Box, gives a passionate talk showing that with Kubernetes, we have for first time a universal interface that one can build real deployment tooling against.</p>
<button id="desktopShowVideoButton" onclick="kub.showVideo()">Watch Video</button>
</div>
<button id="mobileShowVideoButton" onclick="kub.showVideo()"></button>
<div class="light-text">
<h2>Kubernetes: Finally&hellip; A True Cloud Platform</h2>
<p>Sam Ghods, Co-Founder and Services Architect at Box, gives a passionate talk showing that with Kubernetes, we have for first time a universal interface that one can build real deployment tooling against.</p>
<button id="desktopShowVideoButton" onclick="kub.showVideo()">Watch Video</button>
</div>
<button id="mobileShowVideoButton" onclick="kub.showVideo()"></button>
</section>
<section id="features">
<main>
<h3 class="center">Kubernetes Features</h3>
<main>
<h3 class="center">Kubernetes Features</h3>
<div class="feature-box">
<div>
<h4><a href="/docs/user-guide/compute-resources/">Automatic binpacking</a></h4>
<p>Automatically places containers based on their resource requirements and other constraints, while not
sacrificing availability. Mix critical and best-effort workloads in order to drive up utilization and save even more resources.</p>
</div>
<div>
<h4><a href="/docs/user-guide/replication-controller/#what-is-a-replication-controller">Self-healing</a></h4>
<p>Restarts containers that fail, replaces and reschedules containers when nodes die, kills containers
that don't respond to your user-defined health check, and doesn't advertise them to clients until they are ready to serve.</p>
</div>
</div>
<div class="feature-box">
<div>
<h4><a href="/docs/user-guide/compute-resources/">Automatic binpacking</a></h4>
<p>Automatically places containers based on their resource requirements and other constraints, while not
sacrificing availability. Mix critical and best-effort workloads in order to drive up utilization and save even more resources.</p>
</div>
<div>
<h4><a href="/docs/user-guide/replication-controller/#what-is-a-replication-controller">Self-healing</a></h4>
<p>Restarts containers that fail, replaces and reschedules containers when nodes die, kills containers
that don't respond to your user-defined health check, and doesn't advertise them to clients until they are ready to serve.</p>
</div>
</div>
<div class="feature-box">
<div>
<h4><a href="/docs/user-guide/horizontal-pod-autoscaling/">Horizontal scaling</a></h4>
<p>Scale your application up and down with a simple command, with a UI, or automatically based on CPU usage.</p>
</div>
<div>
<h4><a href="/docs/user-guide/services/">Service discovery and load balancing</a></h4>
<p>No need to modify your application to use an unfamiliar service discovery mechanism. Kubernetes gives
containers their own IP addresses and a single DNS name for a set of containers, and can load-balance across them.</p>
</div>
</div>
<div class="feature-box">
<div>
<h4><a href="/docs/user-guide/horizontal-pod-autoscaling/">Horizontal scaling</a></h4>
<p>Scale your application up and down with a simple command, with a UI, or automatically based on CPU usage.</p>
</div>
<div>
<h4><a href="/docs/user-guide/services/">Service discovery and load balancing</a></h4>
<p>No need to modify your application to use an unfamiliar service discovery mechanism. Kubernetes gives
containers their own IP addresses and a single DNS name for a set of containers, and can load-balance across them.</p>
</div>
</div>
<div class="feature-box">
<div>
<h4><a href="/docs/user-guide/deployments/#what-is-a-deployment">Automated rollouts and rollbacks</a></h4>
<p>Kubernetes progressively rolls out changes to your application or its configuration, while monitoring
application health to ensure it doesn't kill all your instances at the same time. If something goes
wrong, Kubernetes will rollback the change for you. Take advantage of a growing ecosystem of deployment solutions.</p>
</div>
<div>
<h4><a href="/docs/user-guide/secrets/">Secret</a> and <a href="/docs/user-guide/configmap/">configuration</a> management</h4>
<p>Deploy and update secrets and application configuration without rebuilding your image and without
exposing secrets in your stack configuration.</p>
</div>
</div>
<div class="feature-box">
<div>
<h4><a href="/docs/user-guide/deployments/#what-is-a-deployment">Automated rollouts and rollbacks</a></h4>
<p>Kubernetes progressively rolls out changes to your application or its configuration, while monitoring
application health to ensure it doesn't kill all your instances at the same time. If something goes
wrong, Kubernetes will rollback the change for you. Take advantage of a growing ecosystem of deployment solutions.</p>
</div>
<div>
<h4><a href="/docs/user-guide/secrets/">Secret</a> and <a href="/docs/user-guide/configmap/">configuration</a> management</h4>
<p>Deploy and update secrets and application configuration without rebuilding your image and without
exposing secrets in your stack configuration.</p>
</div>
</div>
<div class="feature-box">
<div>
<h4><a href="/docs/user-guide/persistent-volumes/">Storage orchestration</a></h4>
<p>Automatically mount the storage system of your choice, whether from local storage, a public cloud provider
<div class="feature-box">
<div>
<h4><a href="/docs/user-guide/persistent-volumes/">Storage orchestration</a></h4>
<p>Automatically mount the storage system of your choice, whether from local storage, a public cloud provider
such as <a href="https://cloud.google.com/storage/">GCP</a> or <a href="http://media.amazonwebservices.com/AWS_Storage_Options.pdf">AWS</a>, or a network storage system such as NFS, iSCSI,
Gluster, Ceph, Cinder, or Flocker.</p>
</div>
<div>
<h4><a href="/docs/concepts/jobs/run-to-completion-finite-workloads/">Batch execution</a></h4>
<p>In addition to services, Kubernetes can manage your batch and CI workloads, replacing containers that fail, if desired.</p>
</div>
</div>
</div>
<div>
<h4><a href="/docs/concepts/jobs/run-to-completion-finite-workloads/">Batch execution</a></h4>
<p>In addition to services, Kubernetes can manage your batch and CI workloads, replacing containers that fail, if desired.</p>
</div>
</div>
</main>
</main>
</section>
<section id="talkToUs">
<main>
<h3>Case Studies</h3>
<div id="caseStudiesWrapper">
<div>
<p>Using Kubernetes to reinvent the world's largest educational company</p>
<a href="/case-studies/pearson/">Read more</a>
</div>
<div>
<p>Kubernetes at Box: Microservices at Maximum Velocity</p>
<a href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/">Read more</a>
</div>
<div>
<p>Inside eBay's shift to Kubernetes and containers atop OpenStack</p>
<a href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/">Read more</a>
</div>
<div>
<p>Migrating from a homegrown 'cluster' to Kubernetes</p>
<a href="https://www.youtube.com/watch?v=6XGUTu3WhBw">Watch the video</a>
</div>
</div>
<main>
<h3>Case Studies</h3>
<div id="caseStudiesWrapper">
<div>
<p>Using Kubernetes to reinvent the world's largest educational company</p>
<a href="/case-studies/pearson/">Read more</a>
</div>
<div>
<p>Kubernetes at Box: Microservices at Maximum Velocity</p>
<a href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/">Read more</a>
</div>
<div>
<p>Inside eBay's shift to Kubernetes and containers atop OpenStack</p>
<a href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/">Read more</a>
</div>
<div>
<p>Migrating from a homegrown 'cluster' to Kubernetes</p>
<a href="https://www.youtube.com/watch?v=6XGUTu3WhBw">Watch the video</a>
</div>
</div>
<!--<div id="bigSocial">-->
<!--&lt;!&ndash;<div>&ndash;&gt;-->
<!--&lt;!&ndash;<a href="https://youtu.be/OLwzSHBtxhI">Watch the video</a>&ndash;&gt;-->
<!--&lt;!&ndash;<p>Creating Next Generation Kubernetes Infrastructure at Viacom</p>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<div>-->
<!--<p>Using Kubernetes to reinvent the world's largest educational company</p>-->
<!--<a href="/case-studies/pearson/">Read more</a>-->
<!--</div>-->
<!--<div>-->
<!--<p>Kubernetes at Box: Microservices at Maximum Velocity</p>-->
<!--<a href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/">Read more</a>-->
<!--</div>-->
<!--<div>-->
<!--<p>Inside eBay's shift to Kubernetes and containers atop OpenStack</p>-->
<!--<a href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/">Read the story</a>-->
<!--</div>-->
<!--<div>-->
<!--<p>Migrating from a homegrown 'cluster' to Kubernetes</p>-->
<!--<a href="https://www.youtube.com/watch?v=6XGUTu3WhBw">Watch the video</a>-->
<!--</div>-->
<!--</div>-->
<h5 style="text-align: center"><a href="/case-studies/" style="color: #3371E3; font-weight: 400">View all case studies</a></h5>
</main>
<!--<div id="bigSocial">-->
<!--&lt;!&ndash;<div>&ndash;&gt;-->
<!--&lt;!&ndash;<a href="https://youtu.be/OLwzSHBtxhI">Watch the video</a>&ndash;&gt;-->
<!--&lt;!&ndash;<p>Creating Next Generation Kubernetes Infrastructure at Viacom</p>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<div>-->
<!--<p>Using Kubernetes to reinvent the world's largest educational company</p>-->
<!--<a href="/case-studies/pearson/">Read more</a>-->
<!--</div>-->
<!--<div>-->
<!--<p>Kubernetes at Box: Microservices at Maximum Velocity</p>-->
<!--<a href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/">Read more</a>-->
<!--</div>-->
<!--<div>-->
<!--<p>Inside eBay's shift to Kubernetes and containers atop OpenStack</p>-->
<!--<a href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/">Read the story</a>-->
<!--</div>-->
<!--<div>-->
<!--<p>Migrating from a homegrown 'cluster' to Kubernetes</p>-->
<!--<a href="https://www.youtube.com/watch?v=6XGUTu3WhBw">Watch the video</a>-->
<!--</div>-->
<!--</div>-->
<h5 style="text-align: center"><a href="/case-studies/" style="color: #3371E3; font-weight: 400">View all case studies</a></h5>
</main>
</section>
<div id="videoPlayer">
<iframe data-url="https://www.youtube.com/embed/of45hYbkIZs?autoplay=1" frameborder="0" allowfullscreen></iframe>
<button id="closeButton"></button>
<iframe data-url="https://www.youtube.com/embed/of45hYbkIZs?autoplay=1" frameborder="0" allowfullscreen></iframe>
<button id="closeButton"></button>
</div>

654
jquery-ui.html
View File

@ -1,59 +1,59 @@
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="/css/jquery-ui.min.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
select {
width: 200px;
}
</style>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="/css/jquery-ui.min.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
select {
width: 200px;
}
</style>
</head>
<body>
<h1>Welcome to jQuery UI!</h1>
<div class="ui-widget">
<p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.</p>
<p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.</p>
</div>
<h1>YOUR COMPONENTS:</h1>
@ -62,12 +62,12 @@
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
@ -75,7 +75,7 @@
<!-- Autocomplete -->
<h2 class="demoHeaders">Autocomplete</h2>
<div>
<input id="autocomplete" title="type &quot;a&quot;">
<input id="autocomplete" title="type &quot;a&quot;">
</div>
@ -84,11 +84,11 @@
<h2 class="demoHeaders">Button</h2>
<button id="button">A button element</button>
<form style="margin-top: 1em;">
<div id="radioset">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
<div id="radioset">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
@ -96,14 +96,14 @@
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
@ -114,200 +114,200 @@
<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
<!-- ui-dialog -->
<div class="ui-overlay"><div class="ui-widget-overlay"></div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div></div>
<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<!-- ui-dialog -->
<div class="ui-overlay"><div class="ui-widget-overlay"></div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div></div>
<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul>
@ -332,11 +332,11 @@
<!-- Progressbar -->
<h2 class="demoHeaders">Selectmenu</h2>
<select id="selectmenu">
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
<option>Slower</option>
<option>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
@ -350,19 +350,19 @@
<!-- Menu -->
<h2 class="demoHeaders">Menu</h2>
<ul style="width:100px;" id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
@ -370,7 +370,7 @@
<!-- Tooltip -->
<h2 class="demoHeaders">Tooltip</h2>
<p id="tooltip">
<a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
<a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
</p>
@ -378,17 +378,17 @@ the element with your mouse, the title attribute is displayed in a little box ne
<!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
</div>
<br>
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>
</div>
<script src="/js/jquery-2.2.0.min.js"></script>
@ -400,31 +400,31 @@ $( "#accordion" ).accordion();
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#autocomplete" ).autocomplete({
source: availableTags
source: availableTags
});
@ -439,47 +439,47 @@ $( "#tabs" ).tabs();
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
$( "#datepicker" ).datepicker({
inline: true
inline: true
});
$( "#slider" ).slider({
range: true,
values: [ 17, 67 ]
range: true,
values: [ 17, 67 ]
});
$( "#progressbar" ).progressbar({
value: 20
value: 20
});
@ -501,12 +501,12 @@ $( "#selectmenu" ).selectmenu();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
</script>
</body>

24
partners/index.html
View File

@ -6,25 +6,25 @@ cid: partners
---
<section id="hero" class="light-text">
<h1>Kubernetes Partners</h1>
<h5>Growing the Kubernetes ecosystem.</h5>
<!--<h5></h5>-->
<h1>Kubernetes Partners</h1>
<h5>Growing the Kubernetes ecosystem.</h5>
<!--<h5></h5>-->
</section>
<section id="users">
<main>
<h5>We are working with a broad group of partners who contribute to the Kubernetes core codebase, making it stronger and richer. These partners create a vibrant Kubernetes ecosystem supporting a spectrum of complementing platforms, from open source solutions to market-leading technologies. Partners can get their services and offerings added to this page by completing and submitting the <a href="https://goo.gl/qcSnZF">partner request form</a>.</h5>
<h3>Technology Partners</h3>
<div id="isvContainer"></div>
<h3>Services Partners</h3>
<div id="servContainer"></div>
</main>
<main>
<h5>We are working with a broad group of partners who contribute to the Kubernetes core codebase, making it stronger and richer. These partners create a vibrant Kubernetes ecosystem supporting a spectrum of complementing platforms, from open source solutions to market-leading technologies. Partners can get their services and offerings added to this page by completing and submitting the <a href="https://goo.gl/qcSnZF">partner request form</a>.</h5>
<h3>Technology Partners</h3>
<div id="isvContainer"></div>
<h3>Services Partners</h3>
<div id="servContainer"></div>
</main>
</section>
<style>
{% include partner-style.css %}
{% include partner-style.css %}
</style>
<script>
{% include partner-script.js %}
{% include partner-script.js %}
</script>