Release 1.8 (#5659)
* GC now supports non-core resources * Add two examples about how to analysis audits of kube-apiserver (#4264) * Deprecate system:nodes binding * [1.8] StatefulSet `initialized` annotation is now ignored. * inits the kubeadm upgrade docs addresses kubernetes/kubernetes.github.io/issues/4689 * adds kubeadm upgrade cmd to ToC addresses kubernetes/kubernetes.github.io/issues/4689 * add workload placement docs * ScaleIO - document udpate for 1.8 * Add documentation on storageClass.mountOptions and PV.mountOptions (#5254) * Add documentation on storageClass.mountOptions and PV.mountOptions * convert notes into callouts * Add docs for CustomResource validation add info about supported fields * advanced audit beta features (#5300) * Update job workload doc with backoff failure policy (#5319) Add to the Jobs documentation how to use the new backoffLimit field that limit the number of Pod failure before considering the Job as failed. * Documented additional AWS Service annotations (#4864) * Add device plugin doc under concepts/cluster-administration. (#5261) * Add device plugin doc under concepts/cluster-administration. * Update device-plugins.md * Update device-plugins.md Add meta description. Fix typo. Change bare metal deployment to manual deployment. * Update device-plugins.md Fix typo again. * Update page.version. (#5341) * Add documentation on storageClass.reclaimPolicy (#5171) * [Advanced audit] use new herf for audit-api (#5349) This tag contains all the changes in v1beta1 version. Update it now. * Added documentation around creating the InitializerConfiguration for the persistent volume label controller in the cloud-controller-manager (#5255) * Documentation for kubectl plugins (#5294) * Documentation for kubectl plugins * Update kubectl-plugins.md * Update kubectl-plugins.md * Updated CPU manager docs to match implementation. (#5332) * Noted limitation of alpha static cpumanager. * Updated CPU manager docs to match implementation. - Removed references to CPU pressure node condition and evictions. - Added note about new --cpu-manager-reconcile-period flag. - Added note about node allocatable requirements for static policy. - Noted limitation of alpha static cpumanager. * Move cpu-manager task link to rsc mgmt section. * init containers annotation removed in 1.8 (#5390) * Add documentation for TaintNodesByCondition (#5352) * Add documentation for TaintNodesByCondition * Update nodes.md * Update taint-and-toleration.md * Update daemonset.md * Update nodes.md * Update taint-and-toleration.md * Update daemonset.md * Fix deployments (#5421) * Document extended resources and OIR deprecation. (#5399) * Document extended resources and OIR deprecation. * Updated extended resources doc per reviews. * reverts extra spacing in _data/tasks.yml * addresses `kubeadm upgrade` review comments Feedback from @chenopis, @luxas, and @steveperry-53 addressed with this commit * HugePages documentation (#5419) * Update cpu-management-policies.md (#5407) Fixed the bad link. Modified "cpu" to "CPU". Added more 'yaml' as supplement. * Update RBAC docs for v1 (#5445) * Add user docs for pod priority and preemption (#5328) * Add user docs for pod priority and preemption * Update pod-priority-preemption.md * More updates * Update docs/admin/kubeadm.md for 1.8 (#5440) - Made a couple of minor wording changes (not strictly 1.8 related). - Did some reformatting (not strictly 1.8 related). - Updated references to the default token TTL (was infinite, now 24 hours). - Documented the new `--discovery-token-ca-cert-hash` and `--discovery-token-unsafe-skip-ca-verification` flags for `kubeadm join`. - Added references to the new `--discovery-token-ca-cert-hash` flag in all the default examples. - Added a new _Security model_ section that describes the security tradeoffs of the various discovery modes. - Documented the new `--groups` flag for `kubeadm token create`. - Added a note of caution under _Automating kubeadm_ that references the _Security model_ section. - Updated the component version table to drop 1.6 and add 1.8. - Update `_data/reference.yml` to try to get the sidebar fixed up and more consistent with `kubefed`. * Update StatefulSet Basics for 1.8 release (#5398) * addresses `kubeadm upgrade` review comments 2nd iteration review comments by @luxas * adds kubelet upgrade section to kubeadm upgrade * Fix a bulleted list on docs/admin/kubeadm.md. (#5458) I updated this doc yesterday and I was absolutely sure I fixed this, but I just saw that this commit got lost somehow. This was introduced recently in https://github.com/kubernetes/kubernetes.github.io/pull/5440. * Clarify the API to check for device plugins * Moving Flexvolume to separate out-of-tree section * addresses `kubeadm upgrade` review comments CC: @luxas * fixes kubeadm upgrade index * Update Stackdriver Logging documentation (#5495) * Re-update WordPress and MySQL PV doc to use apps/v1beta2 APIs (#5526) * Update statefulset concepts doc to use apps/v1beta2 APIs (#5420) * add document on kubectl's behavior regarding initializers (#5505) * Update docs/admin/kubeadm.md to cover self-hosting in 1.8. (#5497) This is a new beta feature in 1.8. * Update kubectl patch doc to use apps/v1beta2 APIs (#5422) * [1.8] Update "Run Applications" tasks to apps/v1beta2. (#5525) * Update replicated stateful application task for 1.8. * Update single instance stateful app task for 1.8. * Update stateless app task for 1.8. * Update kubectl patch task for 1.8. * fix the link of persistent storage (#5515) * update the admission-controllers.md index.md what-is-kubernetes.md link * fix the link of persistent storage * Add quota support for local ephemeral storage (#5493) * Add quota support for local ephemeral storage update the doc to this alpha feature * Update resource-quotas.md * Updated Deployments concepts doc (#5491) * Updated Deployments concepts doc * Addressed comments * Addressed more comments * Modify allocatable storage to ephemeral-storage (#5490) Update the doc to use ephemeral-storage instead of storage * Revamped concepts doc for ReplicaSet (#5463) * Revamped concepts doc for ReplicaSet * Minor changes to call out specific versions for selector defaulting and immutability * Addressed doc review comments * Remove petset documentations (#5395) * Update docs to use batch/v1beta1 cronjobs (#5475) * add federation job doc (#5485) * add federation job doc * Update job.md Edits for clarity and consistency * Update job.md Fixed a typo * update DaemonSet concept for 1.8 release (#5397) * update DaemonSet concept for 1.8 release * Update daemonset.md Fix typo. than -> then * Update bootstrap tokens doc for 1.8. (#5479) * Update bootstrap tokens doc for 1.8. This has some changes I missed when I was updating the main kubeadm documention: - Bootstrap tokens are now beta, not alpha (https://github.com/kubernetes/features/issues/130) - The apiserver flag to enable the authenticator changedin 1.8 (https://github.com/kubernetes/kubernetes/pull/51198) - Added `auth-extra-groups` documentaion (https://github.com/kubernetes/kubernetes/pull/50933) - Updated the _Token Management with `kubeadm`_ section to link to the main kubeadm docs, since it was just duplicated information. * Update bootstrap-tokens.md * Updated the Cassandra tutorial to use apps/v1beta2 (#5548) * add docs for AllowPrivilegeEscalation (#5448) Signed-off-by: Jess Frazelle <acidburn@microsoft.com> * Add local ephemeral storage alpha feature in managing compute resource (#5522) * Add local ephemeral storage alpha feature in managing compute resource Since 1.8, we add the local ephemeral storage alpha feature as one resource type to manage. Add this feature into the doc. * Update manage-compute-resources-container.md * Update manage-compute-resources-container.md * Update manage-compute-resources-container.md * Update manage-compute-resources-container.md * Update manage-compute-resources-container.md * Update manage-compute-resources-container.md * Added documentation for Metrics Server (#5560) * authorization: improve authorization debugging docs (#5549) * Document mount propagation (#5544) * Update /docs/setup/independent/create-cluster-kubeadm.md for 1.8. (#5524) This introduction needed a couple of small tweaks to cover the `--discovery-token-ca-cert-hash` flag added in https://github.com/kubernetes/kubernetes/pull/49520 and some version bumps. * Add task doc for alpha dynamic kubelet configuration (#5523) * Fix input/output of selfsubjectaccess review (#5593) * Add docs for implementing resize (#5528) * Add docs for implementing resize * Update admission-controllers.md * Added link to PVC section * minor typo fixes * Update NetworkPolicy concept guide with egress and CIDR changes (#5529) * update zookeeper tutorial for 1.8 release * add doc for hostpath type (#5503) * Federated Hpa feature doc (#5487) * Federated Hpa feature doc * Federated Hpa feature doc review fixes * Update hpa.md * Update hpa.md * update cloud controller manager docs for v1.8 * Update cronjob with defaults information (#5556) * Kubernetes 1.8 reference docs (#5632) * Kubernetes 1.8 reference docs * Kubectl reference docs for 1.8 * Update side bar with 1.8 kubectl and api ref docs links * remove petset.md * update on state of HostAlias in 1.8 with hostNetwork Pod support (#5644) * Fix cron job deletion section (#5655) * update imported docs (#5656) * Add documentation for certificate rotation. (#5639) * Link to using kubeadm page * fix the command output fix the command output * fix typo in api/resources reference: "Worloads" * Add documentation for certificate rotation. * Create TOC entry for cloud controller manager. (#5662) * Updates for new versions of API types * Followup 5655: fix link to garbage collection (#5666) * Temporarily redirect resources-reference to api-reference. (#5668) * Update config for 1.8 release. (#5661) * Update config for 1.8 release. * Address reviewer comments. * Switch references in HPA docs from alpha to beta (#5671) The HPA docs still referenced the alpha version. This switches them to talk about v2beta1, which is the appropriate version for Kubernetes 1.8 * Deprecate openstack heat (#5670) * Fix typo in pod preset conflict example Move container port definition to the correct line. * Highlight openstack-heat provider deprecation The openstack-heat provider for kube-up is being deprecated and will be removed in a future release. * Temporarily fix broken links by redirecting. (#5672) * Fix broken links. (#5675) * Fix render of code block (#5674) * Fix broken links. (#5677) * Add a small note about auto-bootstrapped CSR ClusterRoles (#5660) * Update kubeadm install doc for v1.8 (#5676) * add draft workloads api content for 1.8 (#5650) * add draft workloads api content for 1.8 * edits per review, add tables, for 1.8 workloads api doc * fix typo * Minor fixes to kubeadm 1.8 upgrade guide. (#5678) - The kubelet upgrade instructions should be done on every host, not just worker nodes. - We should just upgrade all packages, instead of calling out kubelet specifically. This will also upgrade kubectl, kubeadm, and kubernetes-cni, if installed. - Draining nodes should also ignore daemonsets, and master errors can be ignored. - Make sure that the new kubeadm download is chmoded correctly. - Add a step to run `kubeadm version` to verify after downloading. - Manually approve new kubelet CSRs if rotation is enabled (known issue). * Release 1.8 (#5680) * Fix versions for 1.8 API ref docs * Updates for 1.8 kubectl reference docs * Kubeadm /docs/admin/kubeadm.md cleanup, editing. (#5681) * Update docs/admin/kubeadm.md (mostly 1.8 related). This is Fabrizio's work, which I'm committing along with my edits (in a commit on top of this). * A few of my own edits to clarify and clean up some Markdown.
This commit is contained in:
Steve Perry
+150
@@ -0,0 +1,150 @@
|
||||
body{
|
||||
padding:5px;
|
||||
height:1600px;
|
||||
font-family: Verdana, sans-serif;
|
||||
background-color: #DDD;
|
||||
}
|
||||
ul,li,h1,h2,h3,h4,p{
|
||||
list-style:none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
.part{
|
||||
border:1px solid black;
|
||||
background-color:white;
|
||||
}
|
||||
.part h3,
|
||||
.part h4,
|
||||
.part h4 a {
|
||||
color:#933;
|
||||
}
|
||||
#toc{
|
||||
display:block;
|
||||
padding:10px;
|
||||
position:relative;
|
||||
margin:15px 0;
|
||||
float:left;
|
||||
width:305px;
|
||||
}
|
||||
#toc h3{
|
||||
padding-bottom:10px;
|
||||
}
|
||||
#toc h3 strong{
|
||||
font-size:13px;
|
||||
color:black;
|
||||
}
|
||||
#links{
|
||||
border:1px solid black;
|
||||
width:210px;
|
||||
padding:10px;
|
||||
float:right;
|
||||
margin-top:-30px;
|
||||
}
|
||||
#links h3{
|
||||
color:#933;
|
||||
}
|
||||
#links ul{
|
||||
padding: 8px 0 3px 20px;
|
||||
}
|
||||
#links li{
|
||||
list-style-type:circle;
|
||||
}
|
||||
#links a{
|
||||
color:#69C;
|
||||
}
|
||||
|
||||
#toc li, #links li{
|
||||
list-style-type:circle;
|
||||
padding-left:5px;
|
||||
margin-left:15px;
|
||||
}
|
||||
#toc a{
|
||||
color:#69C;
|
||||
}
|
||||
.section{
|
||||
border:1px black solid;
|
||||
width:950px;
|
||||
padding:10px;
|
||||
margin: 5px 0;
|
||||
position:relative;
|
||||
clear:both;
|
||||
}
|
||||
.section h3{
|
||||
margin-bottom:10px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.section h4{
|
||||
margin:10px 0 10px 8px;
|
||||
}
|
||||
.section li{
|
||||
float:left;
|
||||
}
|
||||
.pane{
|
||||
overflow:auto;
|
||||
clear:left;
|
||||
margin: 10px 0 0 10px;
|
||||
position:relative;
|
||||
width:826px;
|
||||
height:322px;
|
||||
}
|
||||
ul.elements{
|
||||
background-color:#5B739C;
|
||||
}
|
||||
ul.elements li{
|
||||
width:200px;
|
||||
height:100px;
|
||||
font-weight:bolder;
|
||||
border:1px black solid;
|
||||
text-align:center;
|
||||
padding:50px;
|
||||
position:relative;
|
||||
background-color:#DDD;
|
||||
}
|
||||
ul.elements li a{
|
||||
bottom:20px;
|
||||
color:#933;
|
||||
font-size:12px;
|
||||
left:125px;
|
||||
position:absolute;
|
||||
}
|
||||
ul.elements li p{
|
||||
color:#666;
|
||||
}
|
||||
#pane-settings ul.elements li{
|
||||
margin:5px;
|
||||
}
|
||||
#pane-settings{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
ul.links{
|
||||
height:20px;
|
||||
overflow:hidden;
|
||||
padding-left: 5px;
|
||||
}
|
||||
ul.links a{
|
||||
color:#69C;
|
||||
margin:0 0 0 5px;
|
||||
}
|
||||
.clear{
|
||||
clear:left;
|
||||
}
|
||||
h3 span{
|
||||
position:absolute;
|
||||
}
|
||||
.message{
|
||||
background:#EEE;
|
||||
border:1px solid #999;
|
||||
color:#333;
|
||||
font-size:12px;
|
||||
font-weight:normal;
|
||||
padding:1px;
|
||||
margin-top:2px;
|
||||
}
|
||||
|
||||
h1{
|
||||
color:#5B739C;
|
||||
}
|
||||
h1 strong{
|
||||
font-size:13px;
|
||||
color:#777;
|
||||
}
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
body{
|
||||
background-color: #DDD;
|
||||
}
|
||||
.container li,div.pane{
|
||||
height:200px;
|
||||
font-weight:bolder;
|
||||
position:relative;
|
||||
}
|
||||
ul{
|
||||
list-style:none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
.container a{
|
||||
color:black;
|
||||
position:absolute;
|
||||
bottom:10px;
|
||||
}
|
||||
p{
|
||||
margin:0;
|
||||
}
|
||||
.container{
|
||||
border:1px black solid;
|
||||
margin:30px;
|
||||
overflow:auto;
|
||||
position:relative;
|
||||
width:80%;
|
||||
height:300px;
|
||||
}
|
||||
.container ul{
|
||||
padding:0;
|
||||
}
|
||||
#x{
|
||||
height:217px;
|
||||
}
|
||||
#x li,#xy li{
|
||||
width:300px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
h1{
|
||||
color:#5B739C;
|
||||
}
|
||||
h1 strong{
|
||||
font-size:13px;
|
||||
color:#777;
|
||||
}
|
||||
|
||||
#links{
|
||||
border:1px solid black;
|
||||
width:210px;
|
||||
padding:10px;
|
||||
float:right;
|
||||
margin-top:-55px;
|
||||
background-color:white;
|
||||
}
|
||||
#links h3{
|
||||
color:#933;
|
||||
margin:5px;
|
||||
}
|
||||
#links ul{
|
||||
padding: 8px 0 3px 20px;
|
||||
}
|
||||
#links li{
|
||||
list-style-type:circle;
|
||||
}
|
||||
#links a{
|
||||
color:#69C;
|
||||
}
|
||||
+252
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<title>jQuery.scrollTo</title>
|
||||
<meta name="keywords" content="javascript, jquery, plugins, scroll, scrollTo, smooth, animation, to, effect, ariel, flesler, window, overflow, element, navigation, customizable" />
|
||||
<meta name="description" content="Demo of jQuery.scrollTo. Lightweight, cross-browser and highly customizable animated scrolling with jQuery, made by Ariel Flesler." />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link type="text/css" rel="stylesheet" href="css/style.css" />
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../jquery.scrollTo.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(function( $ ){
|
||||
/**
|
||||
* Demo binding and preparation, no need to read this part
|
||||
*/
|
||||
//borrowed from jQuery easing plugin
|
||||
//http://gsgd.co.uk/sandbox/jquery.easing.php
|
||||
$.easing.elasout = function(x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
};
|
||||
$('a.back').click(function() {
|
||||
$(this).parents('div.pane').scrollTo(0, 800, { queue:true });
|
||||
$(this).parents('div.section').find('span.message').text( this.title);
|
||||
return false;
|
||||
});
|
||||
//just for the example, to stop the click on the links.
|
||||
$('ul.links').click(function(e){
|
||||
var link = e.target;
|
||||
if (link.target === '_blank') {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
link.blur();
|
||||
if (link.title) {
|
||||
$(this).parent().find('span.message').text(link.title);
|
||||
}
|
||||
});
|
||||
|
||||
// This one is important, many browsers don't reset scroll on refreshes
|
||||
// Reset all scrollable panes to (0,0)
|
||||
$('div.pane').scrollTo(0);
|
||||
// Reset the screen to (0,0)
|
||||
$.scrollTo(0);
|
||||
|
||||
// TOC, shows how to scroll the whole window
|
||||
$('#toc a').click(function() {//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
|
||||
$.scrollTo(this.hash, 1500, { easing:'elasout' });
|
||||
$(this.hash).find('span.message').text(this.title);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Target examples bindings
|
||||
var $target = $('#pane-target');
|
||||
$('#target-examples a').click(function() {
|
||||
$target.stop(true);
|
||||
});
|
||||
|
||||
$('#relative-selector').click(function() {
|
||||
$target.scrollTo('li:eq(7)', 800);
|
||||
});
|
||||
$('#jquery-object').click(function() {
|
||||
$target.scrollTo($('#pane-target li:eq(14)') , 800);
|
||||
});
|
||||
$('#dom-element').click(function() {
|
||||
$target.scrollTo(document.getElementById('twenty'), 800);
|
||||
});
|
||||
$('#absolute-number').click(function() {
|
||||
$target.scrollTo(150, 800);
|
||||
});
|
||||
$('#absolute-number-hash').click(function() {
|
||||
$target.scrollTo({ top:800, left:700}, 800);
|
||||
});
|
||||
$('#absolute-px').click(function() {
|
||||
$target.scrollTo('520px', 800);
|
||||
});
|
||||
$('#absolute-px-hash').click(function() {
|
||||
$target.scrollTo({top:'110px', left:'290px'}, 800);
|
||||
});
|
||||
$('#relative-px').click(function() {
|
||||
$target.scrollTo('+=100', 500);
|
||||
});
|
||||
$('#relative-px-hash').click(function() {
|
||||
$target.scrollTo({top:'-=100px', left:'+=100'}, 500);
|
||||
});
|
||||
$('#percentage-px').click(function() {
|
||||
$target.scrollTo('50%', 800);
|
||||
});
|
||||
$('#percentage-px-hash').click(function() {
|
||||
$target.scrollTo({top:'50%', left:'20%'}, 800);
|
||||
});
|
||||
|
||||
// Settings examples bindings, they will all scroll to the same place, with different settings
|
||||
var $settings = $('#pane-settings');
|
||||
$('#settings-examples a').click(function() {
|
||||
// before each animation, reset to (0,0), skip this.
|
||||
$settings.stop(true).scrollTo(0);
|
||||
});
|
||||
|
||||
$('#settings-no').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 1000);
|
||||
});
|
||||
$('#settings-axis').click(function() {// only scroll horizontally
|
||||
$settings.scrollTo('li:eq(15)', 1000, { axis:'x' });
|
||||
});
|
||||
$('#settings-duration').click(function() {// it's the same as specifying it in the 2nd argument
|
||||
$settings.scrollTo('li:eq(15)', { duration: 3000 });
|
||||
});
|
||||
$('#settings-easing').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 2500, { easing:'elasout' });
|
||||
});
|
||||
$('#settings-margin').click(function() {//scroll to the "outer" position of the element
|
||||
$settings.scrollTo('li:eq(15)', 1000, { margin:true });
|
||||
});
|
||||
$('#settings-offset').click(function() {//same as { top:-50, left:-50 }
|
||||
$settings.scrollTo('li:eq(15)', 1000, { offset:-50 });
|
||||
});
|
||||
$('#settings-offset-hash').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 1000, { offset:{ top:-5, left:-30 } });
|
||||
});
|
||||
$('#settings-offset-function').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }});
|
||||
});
|
||||
$('#settings-over').click(function() {//same as { top:-50, left:-50 }
|
||||
$settings.scrollTo('li:eq(15)', 1000, { over:0.5 });
|
||||
});
|
||||
$('#settings-over-hash').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 1000, { over:{ top:0.2, left:-0.5 } });
|
||||
});
|
||||
$('#settings-interrupt').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 10000, { interrupt:true });
|
||||
});
|
||||
$('#settings-queue').click(function() {//in this case, having 'axis' as 'xy' or 'yx' matters.
|
||||
$settings.scrollTo('li:eq(15)', 2000, { queue:true });
|
||||
});
|
||||
$('#settings-onAfter').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 2000, {
|
||||
onAfter:function() {
|
||||
$('#settings-message').text('Got there!');
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#settings-onAfterFirst').click(function() {//onAfterFirst exists only when queuing
|
||||
$settings.scrollTo('li:eq(15)', 1600, {
|
||||
queue:true,
|
||||
onAfterFirst:function() {
|
||||
$('#settings-message').text('Got there horizontally!');
|
||||
},
|
||||
onAfter:function() {
|
||||
$('#settings-message').text('Got there vertically!');
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#settings-step').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 2000, {step:function(now) {
|
||||
$('#settings-message').text(now.toFixed(2));
|
||||
}});
|
||||
});
|
||||
$('#settings-progress').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 2000, {progress:function(_, now) {
|
||||
$('#settings-message').text(Math.round(now*100) + '%');
|
||||
}});
|
||||
});
|
||||
$('#settings-fail').click(function() {
|
||||
$settings.scrollTo('li:eq(15)', 10000, {interrupt:true, fail:function() {
|
||||
$('#settings-message').text('Scroll interrupted!');
|
||||
}});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>jQuery.scrollTo <strong>by Ariel Flesler</strong></h1>
|
||||
|
||||
<div id="toc" class="part">
|
||||
<h3>Table of contents <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 <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 <span id="settings-message" class="message">The examples shown here, are summarized for brevity</span></h3>
|
||||
<ul class="links">
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1000);" id="settings-no" href="#">no settings</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {axis:'x'});//only scroll on this axis (can be x, y, xy or yx)" id="settings-axis" href="#">axis</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {margin:true});//deduct the margin and border from the final position" id="settings-margin" href="#">margin</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {offset:-50});//add or deduct from the final position" id="settings-offset" href="#">offset</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {offset: {top:-5, left:-30} });" id="settings-offset-hash" href="#">offset(hash)</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {offset: function() { return {top:-30, left:-5}; }});" id="settings-offset-function" href="#">offset(function)</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {over:0.5});//add or deduct a fraction of its height/width" id="settings-over" href="#">over</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1000, {over:{top:0.2, left:-0.5});" id="settings-over-hash" href="#">over(hash)</a></li>
|
||||
<li><a title="Scroll manually to interrupt the animation" id="settings-interrupt" href="#">interrupt</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1600, {onAfter:function() { } });//called after the scrolling ends" id="settings-onAfter" href="#">onAfter</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1600, {queue:true, onAfterFirst:function() { } });//called after the first axis scrolled" id="settings-onAfterFirst" href="#">onAfterFirst</a></li>
|
||||
</ul>
|
||||
<h4>Settings inherited from <a href="http://api.jquery.com/animate/#animate-properties-options" target="_blank">$().animate()</a></h4>
|
||||
<ul class="links">
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', {duration:3000});//another way of calling the plugin" id="settings-duration" href="#">duration</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 2500, {easing:'elasout'});//specify an easing equation" id="settings-easing" href="#">easing</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 1600, {queue:true});//scroll one axis, then the other" id="settings-queue" href="#">queue</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 2500, {step:function() { }'});//specify a step function" id="settings-step" href="#">step</a></li>
|
||||
<li><a title="$(...).scrollTo('li:eq(15)', 2500, {progress:function() { }'});//specify a progress function" id="settings-progress" href="#">progress</a></li>
|
||||
<li><a title="Scroll manually to interrupt and trigger the callback" id="settings-fail" href="#">fail</a></li>
|
||||
<li><a href="http://api.jquery.com/animate/#animate-properties-options" target="_blank">more</a></li>
|
||||
</ul>
|
||||
<div id="pane-settings" class="pane">
|
||||
<ul class="elements" style="height:1062px;width:1877px;">
|
||||
<li><p>0</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>1</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>2</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>3</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>4</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>5</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>6</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>7</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>8</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>9</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>10</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>11</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>12</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>13</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>14</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>15</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>16</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>17</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>18</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>19</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>20</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>21</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>22</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>23</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>24</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>25</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>26</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>27</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>28</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li><li><p>29</p><a href="#" title="$(...).scrollTo(0, 800, {queue:true});" class="back">go back</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<title>jQuery.ScrollTo</title>
|
||||
<meta name="keywords" content="javascript, jquery, plugins, scroll, scrollTo, smooth, animation, to, effect, ariel, flesler, window, overflow, element, navigation, customizable" />
|
||||
<meta name="description" content="Demo of jQuery.scrollTo. Lightweight, cross-browser and highly customizable animated scrolling with jQuery, made by Ariel Flesler." />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<link type="text/css" rel="stylesheet" href="css/style.old.css" />
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../jquery.scrollTo.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(function( $ ){
|
||||
//borrowed from jQuery easing plugin
|
||||
//http://gsgd.co.uk/sandbox/jquery.easing.php
|
||||
$.easing.elasout = function(x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
};
|
||||
$('button').click(function(){//this is not the cleanest way to do this, I'm just keeping it short.
|
||||
var index = parseInt( $(this).prev('input').val() ) || 0;
|
||||
var $c = $(this).parent().next();
|
||||
$c.stop().scrollTo('li:eq('+index+')', {duration:2500, easing:'elasout',axis:$c.attr('id')});
|
||||
});
|
||||
$('#btn_screen').click(function(){
|
||||
$.scrollTo( $('#txt_screen').val(), {duration:2500} );
|
||||
});
|
||||
$('div.container a').click(function(){
|
||||
var $c = $(this).parents('.container');
|
||||
$c.stop().scrollTo( 0, {duration:2000,axis:$c.attr('id'), queue:true} );
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>jQuery.ScrollTo <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>
|
||||
Reference in New Issue
Block a user