Skip to content

Instantly share code, notes, and snippets.

@cherenkov
Created April 7, 2012 19:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cherenkov/2331553 to your computer and use it in GitHub Desktop.
Save cherenkov/2331553 to your computer and use it in GitHub Desktop.
jqueryプラグイン、オプションの設定方法を教えて下さい。 素人.. - 人力検索はてな http://q.hatena.ne.jp/1333816826
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pagescroller.com/javascripts/pagescroller.min.js"></script>
<link rel="stylesheet" href="http://pagescroller.com/stylesheets/style.css" type="text/css" media="all" />
<script>
$(document).ready(function(){
$('#wrapper').pageScroller({
navigation: ['A','B','C','D']
});
setTimeout(function() {
fadeInTop('right', 1);
//fadeInTop('left', 1);
}, 300);
});
function fadeInSide(direction, top){
var topNav = $('.topNav');
var nav = $('ul', topNav);
topNav.fadeOut(200, function(){
nav.unwrap();
var newClass = 'pageScroll '+direction;
nav.addClass(newClass);
var navis = $('li', nav);
for(var i=0;i<navis.length;i++){
var naviClass = 'scrollNav scrollNav_'+(i+1);
navis.eq(i).attr('class', naviClass);
}
pageScroller.options.scrollOffset = 0;
nav.fadeIn(200);
});
}
function fadeInTop(direction, top){
var nav = $('.pageScroll');
var navis = $('li', nav);
nav.fadeOut(200, function(){
nav.removeAttr('class').wrap('<div class="topNav white"></div>');
for(var i=0;i<navis.length;i++){
var naviClass = 'topNavLink topNavLink_'+(i+1);
navis.eq(i).attr('class', naviClass)
}
pageScroller.options.scrollOffset = 50;
nav.fadeIn(200);
});
navis.eq(0).addClass('active');
setTimeout(function(){ $('li', nav).eq(0).addClass('active') }, 250);
}
</script>
</head>
<body>
<div id="wrapper">
<div class="section">
<h2>A</h2>
aaaaaaa
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="section">
<h2>B</h2>
bbbbbbbb
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="section">
<h2>C</h2>
ccccc
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="section">
<h2>D</h2>
dddddddd
</div>
</div>
</body>
</html>
/*
* Page Scroller - jQuery Plugin (minified)
* Simple plugin to create a smooth scrolling page with updating links
*
* Support at: http://dairien.com
*
* Copyright (c) 2012 Dairien Boyd. All Rights Reserved
*
* Version: 1.0 (2/2/2012)
* Requires: jQuery v1.3+
*
* This library is released under the BSD license:
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this
* list of conditions and the following disclaimer. Redistributions in binary
* form must reproduce the above copyright notice, this list of conditions and
* the following disclaimer in the documentation and/or other materials
* provided with the distribution. Neither the name Dairirien Boyd nor
* the names of its contributors may be used to endorse or promote products
* derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR
* ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
* SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
* CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
* LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
* OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
* DAMAGE.
*
*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 2={};(3(c){c.1i.J({2:3(f){f=c.J({o:0,F:"1g",q:"1e",U:1c,l:15,C:[],S:3(){},V:3(){},Z:3(){}},f);k=3(d,a){c.1a.19=5;d.E(\'<I B="k"></I>\');2.r=c(".k",d);2.r.D("17");2.6=c("."+a.F,d);2.K=c(16);2.s=c(11);2.L=c("X");2.n=2.s.w();2.o=2.s.T();2.4=a;d.H({M:"R"});2.6.P(3(b){7 d=c(x);d.H({M:"R",1b:0});d.D(2.4.F+"G"+(b+1));2.4.C.j?2.r.E(\'<u B="\'+a.q+" "+a.q+"G"+(b+1)+\'"><a Q="#k\'+b+\'">\'+2.4.C[b]+"</a></u>"):2.r.E(\'<u B="\'+a.q+" "+a.q+"G"+(b+1)+\'"><a Q="#k\'+b+\'">14 \'+(b+1)+"</a></u>")});2.m=c("u",2.r);2.m.P(3(b){1d=c(x);N=c("a",x);N.1j(3(c){c.1m();a.S();e(d,2.6.8(b),b)})});2.1o=3(){7 b=2.4.o+1;9(b!=2.6.j){7 a=2.6.8(b);e(d,a,b)}};2.1p=3(){7 b=2.4.o-1;0>=b&&(b=0);7 a=2.6.8(b);e(d,a,b)};2.1q=3(a){7 a=a-1,c=2.6.8(a);e(d,c,a)};2.s.1n(3(){h()});1k(3(){0==2.n&&h()},1f)};7 h=3(){2.n=2.s.w();2.O=2.n+2.o;1h(i=0;i<2.6.j;i++){7 d=2.6.8(i).y().z;2.4.l&&(d-=2.4.l);7 a=0;9(i<2.6.j-1)7 a=2.6.8(i+1),a=2.4.l?a.y().z-2.4.l:a.y().z,b=2.m.8(i),c=2.m.8(2.6.j-1);9(2.L.W(":Y"))v!1;9(2.K.T()==2.O){9(!c.A("t"))v p=2.6.j-1,g(k,p),!1}10 9(a){9(2.n>=d&&2.n<a&&!b.A("t"))v p=i,g(k,p),!1}10 9(2.n>=d&&i==2.6.j-1&&!2.m.8(2.6.j-1).A("t"))v p=2.6.j-1,g(k,p),!1}},e=3(d,a,b){a=a.y().z;2.4.l&&(a-=2.4.l);7 e=c("1l, X"),f=c(11).w();a!=f&&!e.W(":Y")&&e.12({w:a},2.4.U,3(){g(d,b);2.4.V()})},g=3(c,a){2.m.18("t");2.m.8(a).D("t");2.4.o=a;2.4.Z()};9(!2.4)v k(x,f)}})})(13);',62,89,'||pageScroller|function|options||sections|var|eq|if||||||||||length|pageScroll|scrollOffset|pageLinks|scrollPosition|currentSection|updateTo|navigationClass|navi|scrollWindow|active|li|return|scrollTop|this|offset|top|hasClass|class|navigation|addClass|append|sectionClass|_|css|ul|extend|scrollDocument|scrollBody|position|pageAnchor|scrollDistance|each|href|relative|animationBefore|height|animationSpeed|animationComplete|is|body|animated|onChange|else|window|animate|jQuery|Navigation|20|document|left|removeClass|interval|fx|margin|500|pageLink|scrollNav|200|section|for|fn|click|setTimeout|html|preventDefault|scroll|next|prev|goTo'.split('|'),0,{}))
/*
Site Name: PageScroller
Site URI: http://www.dairien.com
Author: Dairien Boyd
--------------------------------
1. Document
2. Page Structure
3. Global Classes
4. Footer
*/
/*---------- 1. DOCUMENT STYLES [start] ----------*/
html{
height: 100%;
}
body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, table, a, img{
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
body{
height: 100%;
font-family: 'Open Sans', 'Helvetica Neue', Arial sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
background: #e3e7ec url('../images/bg.png') 0 0 repeat;
}
ol, ul{
display: block;
list-style: none;
}
a, a:focus, input, textarea{
outline: none;
}
a, a:link, a:visited{
color: #333;
font-weight: bold;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
/*---------- DOCUMENT STYLES [end] ----------*/
/*---------- 2. PAGE STRUCTURE [start] ----------*/
#wrapper{
position:relative;
width:100%;
overflow:hidden;
min-height: 100%;
}
* html #wrapper{
height: 100%;
}
#main{
width: 960px;
position: relative;
overflow: visible;
margin: 0 auto 140px;
padding: 0;
/*padding: 0 0 70px; sticky footer */
background: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
}
#header{
position: relative;
overflow: hidden;
width: 820px;
padding: 40px 0 0;
margin: 0 auto;
}
#header .logo{
display: block;
float: left;
padding: 5px 0 0;
}
#header .download{
display: block;
float: right;
}
#header .logo a{
display: block;
position: relative;
overflow: hidden;
width: 201px;
height: 0;
padding: 36px 0 0;
line-height: 40px;
background: transparent url('../images/logo.png') 0 0 no-repeat;
}
#header .download a{
display: block;
position: relative;
overflow: hidden;
width: 205px;
height: 0;
padding: 47px 0 0;
line-height: 55px;
background: transparent url('../images/btn_download.png') 0 0 no-repeat;
}
#header .download a:hover{
background-position: 0 -47px;
}
#header .download a:active{
top: 1px;
}
.section{
min-height: 500px;
}
.section_1,
.toggles{
height: 600px;
color: #fff;
background: #1d333a url('../images/section_1.png') center bottom no-repeat;
}
h1, h2.h1{
font-family: 'Open Sans', 'Helvetica Neue', Arial sans-serif;
color: #333;
font-weight: 900;
font-size: 39px;
line-height: 50px;
padding: 40px 80px 10px;
text-align: center;
}
.section_1 h1,
.toggles h1,
.section_3 h2.h1,
.section_5 h2.h1{
color: #fff;
text-shadow: 1px 1px 3px rgba(0,0,0,.5);
padding: 15px 0 5px;
}
h2, h3.h2{
font-family: 'Glegoo', Georgia, serif;
font-size: 19px;
line-height: 30px;
font-weight: normal;
padding: 0 120px;
color: #999;
text-align: center;
}
.section_1 h2,
.section:first-of-type h2,
.section_3 h3.h2,
.section_5 h3.h2{
text-shadow: 1px 1px 3px rgba(0,0,0,.5);
padding: 0;
color: #c5c5c5;
font-size: 22px;
line-height: 32px;
}
.section_2 {
padding: 20px 0 0;
height: 740px;
}
.section_2 img{
display: block;
margin: 0 auto;
}
.section_2 ul{
display: block;
position: relative;
overflow: hidden;
width: 800px;
margin: 60px auto 0;
}
.section_2 li{
float: left;
width: 210px;
margin: 0 55px 0 0;
text-align: center;
padding: 0 10px 20px;
}
.section_2 li.last{
margin: 0;
}
.section_2 li em{
display: block;
}
.tab.html5{
display: none;
}
#html5,
#html4{
position: relative;
overflow: hidden;
width: 800px;
margin: 30px auto 0;
background: transparent url('../images/line-double.png') 0 center repeat-x;
}
#html5 p,
#html4 p{
font-size: 11px;
width: 320px;
margin: 0 auto;
background: #fff;
padding: 10px 25px;
}
#html5 p a,
#html5 p a:link,
#html5 p a:visited{
display: block;
float: right;
position: relative;
overflow: hidden;
width: 99px;
height: 0;
padding: 36px 0 0;
line-height: 45px;
background: transparent url('../images/btn_html5.png') 0 0 no-repeat;
top: 2px;
}
#html4 p a,
#html4 p a:link,
#html4 p a:visited{
display: block;
float: right;
position: relative;
overflow: hidden;
width: 99px;
height: 0;
padding: 36px 0 0;
line-height: 45px;
background: transparent url('../images/btn_html4.png') 0 0 no-repeat;
top: 2px;
}
#html5 p a:hover,
#html4 p a:hover{
background-position: 0 -36px;
}
#html5 p a:active,
#html4 p a:active{
top: 3px;
}
.section_4 img{
display: block;
margin: 20px auto 0;
}
.section_3{
background: #1a2b33 url('../images/included_bg.jpg') 0 0 no-repeat;
padding: 40px 0 30px;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
height: 710px;
}
.included{
position: relative;
overflow: hidden;
width: 800px;
margin: 0 auto;
padding: 55px 0 0;
height: 240px;
}
.included li{
float: left;
width: 184px;
margin: 0 21px 0 0;
text-align: center;
}
.included li img{
border: 6px solid #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, .6);
-moz-box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, .6);
box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, .6);
margin: 20px 0 0;
}
.included li.last{
margin: 0;
}
.included h4{
color: #fff;
margin: 0;
padding: 0;
font-size: 15px;
line-height: 22px;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.included p{
color: #d7d7d7;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
#seeDemo{
width: 406px;
height: 57px;
background: transparent url('../images/try-demo_bg.png') right 0 no-repeat;
margin: 7px auto 0;
padding: 14px 45px 0;
color: #fff;
font-weight: 900;
text-transform: uppercase;
font-size: 22px;
line-height: 36px;
text-shadow: 1px 1px 3px rgba(0,0,0,.5);
text-align: center;
}
#seeDemo a,
#seeDemo a:link,
#seeDemo a:visited{
font-size: 12px;
width: 91px;
height: 0;
display: block;
position: relative;
overflow: hidden;
padding: 38px 0 0;
line-height: 45px;
margin: 0;
float: right;
background: transparent url('../images/btn_try-demo.png') 0 0 no-repeat;
}
#seeDemo a:hover{
background-position: 0 -38px;
}
#upsell{
display: block;
position: relative;
overflow: hidden;
width: 800px;
margin: 40px auto 0;
}
#wordpress{
position: relative;
width: 380px;
overflow: hidden;
float: left;
padding: 33px 0 0 30px;
}
#wordpress form{
display: block;
float: right;
width: 275px;
padding: 0;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
}
#wordpress form h4{
font-size: 15px;
}
#wordpress form p{
margin: 2px 0 6px;
}
#wordpress form input[type=text]{
background: #354043;
font-family: "Droid Sans", Arial, sans-serif;
font-size: 14px;
color: #999;
padding: 5px;
width: 130px;
border: 1px solid #303030;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-weight: normal;
text-shadow: 1px 1px 2px rgba(0,0,0,.6);
clear: both;
}
#wordpress form #address{
display: block;
position: relative;
float: right;
width: 10px;
left: 300px;
clear: none;
}
#wordpress form input[type=submit]{
font-family: "Droid Sans", Arial, sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255,255,255,.8);
color: #555;
padding: 6px 10px;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #bdbdbd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#bdbdbd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#bdbdbd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#bdbdbd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#bdbdbd 100%); /* IE10+ */
background: linear-gradient(top, #eeeeee 0%,#bdbdbd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#bdbdbd',GradientType=0 ); /* IE6-9 */
border: 1px solid #4f4f4f;
-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .4);
-moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .4);
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .4);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
#wordpress form input[type=submit]:hover{
color: #333;
}
#mobile{
float: right;
display: block;
position: relative;
overflow: hidden;
width: 360px;
padding: 7px 20px 0 0;
color: #fff;
}
#mobile h4,
#mobile p{
text-align: right;
text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
#mobile h4{
font-size: 16px;
text-transform: uppercase;
margin: 30px 0 0;
}
#mobile p{
color: #d7d7d7;
font-style: italic;
}
#mobile img{
float: right;
}
.section.section_5{
color: #fff;
background: #1d333a url('../images/section_1.png') center center no-repeat;
padding: 40px;
min-height: inherit;
height: 520px;
}
.section_4{
padding: 0 0 80px;
min-height: 700px;
}
.tabs h3{
font-size: 18px;
margin: 0 0 20px;
}
.options{
text-align: left;
margin: 0 0 20px;
width: 100%;
border: 1px solid #eee;
}
.options{
font-size: 13px;
}
.options th{
font-size: 14px;
padding: 5px 5px 10px;
}
.options td{
padding: 5px;
}
.options tr.alt{
background: #eee;
}
.options td.value{
color: #666;
}
.options td.prop{
font-family: Consolas, Courier, 'Courier New', Arial;
font-size: 13px;
}
.downloadToggle{
position: relative;
overflow: hidden;
height: 600px;
}
.downloadToggle li{
display: block;
position: relative;
overflow: hidden;
width: 100%;
}
.downloadToggle li.download{
padding-top: 85px;
}
.get-feedback{
position: absolute;
top: 20px;
right: 40px;
width: 89px;
height: 0;
display: block;
overflow: hidden;
padding: 36px 0 0;
line-height: 42px;
background: transparent url('../images/btn_feedback-small.png') 0 0 no-repeat;
}
.get-feedback:hover{
background-position: 0 -36px;
}
.get-download{
position: absolute;
top: 20px;
right: 40px;
width: 125px;
height: 0;
display: block;
overflow: hidden;
padding: 36px 0 0;
line-height: 42px;
background: transparent url('../images/btn_download-small.png') 0 0 no-repeat;
}
.get-download:hover{
background-position: 0 -36px;
}
.get-download:active,
.get-feedback:active{
top: 21px;
}
#download, #feedback{
width: 500px;
position: relative;
overflow: hidden;
margin: 50px auto;
padding: 15px 10px;
border: 7px solid #fff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .8);
-moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .8);
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .8);
background: #f8f6f6; /* Old browsers */
background: -moz-linear-gradient(top, #f8f6f6 0%, #e8e7e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f6f6), color-stop(100%,#e8e7e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8f6f6 0%,#e8e7e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8f6f6 0%,#e8e7e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8f6f6 0%,#e8e7e7 100%); /* IE10+ */
background: linear-gradient(top, #f8f6f6 0%,#e8e7e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f6f6', endColorstr='#e8e7e7',GradientType=0 ); /* IE6-9 */
}
#download input[type=text],
#feedback input[type=text],
#feedback textarea{
float: left;
font-family: "Open Sans", sans-serif;
font-size: 18px;
height: 18px;
line-height: 18px;
padding: 18px 10px;
border: 1px solid #bbb;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .1);
color: #666;
width: 270px;
}
#feedback input[type=text]{
width: 220px;
}
#feedback #fname{
margin-right: 15px;
}
#feedback textarea{
float: none;
clear: both;
width: 475px;
margin: 15px 0 0;
height: 80px;
resize: none;
}
input[type=image].feedback{
display: block;
margin: 0 auto 0;
}
.section_5 p{
text-align: center;
color: #d7d7d7;
text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
#download input[type=image]{
float: right;
}
#download input[type=text]:focus{
border-color: #999;
color: #000;
}
#download #subject, #feedback #subject2{
display: block;
position: absolute;
width: 0;
left: -20px;
padding: 0;
border: none;
background: none;
filter: alpha(opacity=01);
-khtml-opacity: 0.01;
-moz-opacity: 0.01;
opacity: 0.01;
}
#tweet{
position: fixed;
overflow: hidden;
width: 120px;
height: 20px;
bottom: 4%;
left: 50%;
margin: 0 0 0 500px;
z-index: 99999;
}
.tabLinks{
display: block;
float: left;
margin: 0 0 0 80px;
width: 120px;
padding: 0 30px 0 0;
border-right: 1px solid #ccc;
}
.tabLinks li{
display: block;
margin: 0 0 15px;
}
.tabLinks li a{
font-weight: normal;
color: #999;
}
.tabLinks li.active a{
color: #333;
font-weight: bold;
}
.tabs{
display: block;
float: right;
margin: 0 80px 0 0;
width: 600px;
}
.tabs .tab{
display: none;
}
.features{
position: relative;
overflow: hidden;
width: 820px;
margin: 35px auto 0;
}
.features li{
position: relative;
display: block;
width: 180px;
text-align: center;
float: left;
margin: 0 33px 0 0;
padding: 190px 0 0;
}
.features li.left-nav{
background: transparent url('../images/feature_left-nav.png') center 0 no-repeat;
}
.features li.right-nav{
margin: 0;
background: transparent url('../images/feature_right-nav.png') center 0 no-repeat;
}
.features li.top-nav{
background: transparent url('../images/feature_top-nav.png') center 0 no-repeat;
}
.features li.next-prev{
background: transparent url('../images/feature_next-prev.png') center 0 no-repeat;
}
.features li img{
display: block;
margin: 0 auto 15px;
}
.features h3{
font-size: 14px;
line-height: 22px;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
margin: 0;
text-transform: uppercase;
}
.features p{
font-size: 13px;
color: #d7d7d7;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
padding: 0 10px;
}
.section_4 h2.h1{
padding: 40px 0 40px 280px;
text-align: left;
}
.topNav{
position: fixed !important;
width: 100%;
top: 0;
left: 0;
height: 65px;
background: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
}
.topNav.dark{
background: #000;
background: rgba(0,0,0,.92);
border-bottom: 4px solid #222;
}
.topNav ul{
position: relative;
overflow: hidden;
width: 960px;
margin: 0 auto;
display: block;
}
.topNavLink{
float: left;
margin: 0 5px 0;
}
.topNavLink a{
display: block;
height: 18px;
margin: 15px 0 0;
line-height: 16px;
padding: 7px 15px;
color: #666;
border: 1px solid #fff;
font-weight: normal;
}
.tabs p{
margin: 0 0 25px 0;
}
.tabs ul{
margin: 0 0 25px;
padding: 0 0 0 20px;
list-style: disc;
}
.tabs ul li{
margin: 0 0 5px;
}
.white .topNavLink.active a{
background: #ccc;
color: #333;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #fcfcfc 3%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#fcfcfc), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfcfc 3%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfcfc 3%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfcfc 3%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(top, #fcfcfc 3%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
border-color: #ddd;
}
.dark .topNavLink.active a{
background: #222;
color: #fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 3%, #333333 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4c4c4c), color-stop(100%,#333333)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 3%,#333333 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 3%,#333333 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 3%,#333333 100%); /* IE10+ */
background: linear-gradient(top, #4c4c4c 3%,#333333 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
border: none;
}
.dark .topNavLink a{
border: none;
}
.white .topNavLink a:hover{
color: #444444;
text-decoration: none;
}
.dark .topNavLink a:hover{
color: #ccc;
text-decoration: none;
}
.topNav .colors{
position: relative;
overflow: hidden;
float: right;
width: 100px;
margin: 22px 0 0;
}
.topNav .colors span{
display: block;
position: relative;
overflow: hidden;
width: 14px;
height: 0;
padding: 14px 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
float: left;
}
.topNav .colors .label{
width: 40px;
font-size: 10px;
padding: 0;
height: 16px;
line-height: 16px;
color: #999;
}
.topNav .colors span.white{
background: #fff;
border: 1px solid #fff;
}
.topNav .colors span.dark{
background: #111;
border: 1px solid #000;
margin: 0 0 0 5px;
}
.topNav .colors.white span.white{
border: 1px solid #999;
}
.topNav .colors.dark span.dark{
background: #000;
border: 1px solid #999;
}
/*
.topNavLink_5{
float: right;
margin: 15px 0 0;
}
*/
.pageScroll{
position: fixed !important;
top: 50%;
left: 50%;
margin-top: -250px;
width: 167px;
border: 7px solid #fff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
}
.pageScroll.left{
margin-left: -680px;
}
.pageScroll.right{
margin-left: 500px;
}
.scrollNav a{
display: block;
color: #666;
font-weight: normal;
padding: 8px 10px;
background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top, #f9f9f9 0%, #f3f3f3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#f3f3f3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#f3f3f3 100%); /* IE10+ */
background: linear-gradient(top, #f9f9f9 0%,#f3f3f3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
border-top: 1px solid #fcfcfc;
}
.scrollNav{
border-top: 1px solid #ebeded;
}
.scrollNav_1,
.scrollNav_1 a{
border:none;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.scrollNav a:hover{
color: #444;
text-decoration: none;
}
li.scrollNav.active a{
background: #ffffff;
filter: none;
color: #333;
font-weight: bold;
}
.scrollNav_5{
border: none;
background: none;
}
.scrollNav_5 a,
.scrollNav_5.scrollNav.active a/*,
.topNavLink_5.topNavLink a,
.topNavLink_5.topNavLink.active a*/{
position: relative;
overflow: hidden;
display: block;
width: 167px;
height: 0;
padding: 37px 0 0;
line-height: 45px;
border: none;
background: transparent url('../images/btn_nav_download.png') 0 0 no-repeat !important;
filter: none !important;
}
.scrollNav_5 a:active,
.scrollNav_5.scrollNav.active a:active{
top: 1px;
}
.scrollNav_5 a:hover,
.scrollNav_5.scrollNav.active a:hover/*,
.topNavLink_5.topNavLink a:hover,
.topNavLink_5.topNavLink.active a:hover*/{
background-position: 0 -37px !important;
}
#jquery{
position: relative;
overflow: hidden;
width: 810px;
padding: 40px 0 40px 150px;
background: #f0f2f3 url('../images/logo_jquery.png') 110px 30px no-repeat;
border-bottom: 1px solid #dedede;
color: #666;
text-align: center;
}
#controls{
position: fixed;
z-index: 999;
height: 94%;
top: 3%;
right: 5%;
width: 20px;
text-align: center;
}
#controls a{
display: block;
position: absolute;
padding: 12px 10px 5px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .3);
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .3);
}
#controls.light a{
border: 7px solid #fff;
background: #f8f6f6; /* Old browsers */
background: -moz-linear-gradient(top, #f8f6f6 0%, #e8e7e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f6f6), color-stop(100%,#e8e7e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8f6f6 0%,#e8e7e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8f6f6 0%,#e8e7e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8f6f6 0%,#e8e7e7 100%); /* IE10+ */
background: linear-gradient(top, #f8f6f6 0%,#e8e7e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f6f6', endColorstr='#e8e7e7',GradientType=0 ); /* IE6-9 */
}
#controls.dark a{
border: 7px solid #1c1c1c;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .3);
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .3);
background: #f8f6f6; /* Old browsers */
background: -moz-linear-gradient(top, #3f3f3f 0%, #292929 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(100%,#292929)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3f3f3f 0%,#292929 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3f3f3f 0%,#292929 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3f3f3f 0%,#292929 100%); /* IE10+ */
background: linear-gradient(top, #3f3f3f 0%,#292929 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#292929',GradientType=0 ); /* IE6-9 */
}
#controls a:hover{
text-decoration: none;
color: #fff;
}
#controls a.next{
bottom: 0;
}
#controls a.prev{
top: 0;
}
ul.switch{
display: block;
position: relative;
overflow: hidden;
width: 110px;
height: 41px;
background: transparent url('../images/toggle_bg.png') center center no-repeat;
margin: 5px auto 15px;
cursor: pointer;
}
ul.switch li{
display: block;
position: absolute;
bottom: 0;
left: 0;
cursor: pointer;
}
ul.switch.on li{
left: 50px;
}
ul.switch li a{
display: block;
position: relative;
overflow: hidden;
width: 58px;
height: 0;
padding: 41px 0 0;
background: transparent url('../images/btn_toggle.png') 0 0 no-repeat;
}
/*---------- PAGE STRUCTURE [end] ----------*/
/*---------- 3. GLOBAL CLASSES [start] ----------*/
.left{
position: relative;
overflow: hidden;
float: left;
}
.right {
position: relative;
overflow: hidden;
float: right;
}
div.container{
position: relative;
overflow: hidden;
width: 100%;
}
/*---------- GLOBAL CLASSES [end] ----------*/
/*---------- 4. FOOTER [start] ----------*/
#footerContainer{
color: #999;
width: 100%;
padding: 0 0 40px;
height: 30px;
margin-top: -70px;
}
#footer {
width: 800px;
margin: 0 auto;
}
#footer .left{
width: 50%;
float:left;
}
#footer p{
padding-top: 5px;
}
#footer a{
color: #777;
font-weight: normal;
text-decoration: underline;
}
#footer a:hover{
color: #444;
}
#footer .right{
width: 50%;
text-align: right;
}
/*---------- FOOTER [end] ----------*/
/*---------- ide-codewarrior Styles ---------*/
.sh_ide-codewarrior{background:none; padding:0; margin:0; border:0 none;}
.sh_ide-codewarrior .sh_sourceCode{background-color:#fff;color:#000;}
.sh_ide-codewarrior .sh_sourceCode .sh_keyword{color:#7F0055;font-weight:bold;}
.sh_ide-codewarrior .sh_sourceCode .sh_type{color:#4c73a6}
.sh_ide-codewarrior .sh_sourceCode .sh_string{color:#2A00FF}
.sh_ide-codewarrior .sh_sourceCode .sh_regexp{color:#666}
.sh_ide-codewarrior .sh_sourceCode .sh_specialchar{color:#666}
.sh_ide-codewarrior .sh_sourceCode .sh_comment{color:#3F5FBF}
.sh_ide-codewarrior .sh_sourceCode .sh_number{color:#000}
.sh_ide-codewarrior .sh_sourceCode .sh_preproc{color:#0000b3}
.sh_ide-codewarrior .sh_sourceCode .sh_function{color:#000}
.sh_ide-codewarrior .sh_sourceCode .sh_url{color:#666}
.sh_ide-codewarrior .sh_sourceCode .sh_date{color:#0000b3}
.sh_ide-codewarrior .sh_sourceCode .sh_time{color:#0000b3}
.sh_ide-codewarrior .sh_sourceCode .sh_file{color:#0000b3}
.sh_ide-codewarrior .sh_sourceCode .sh_ip{color:#666}
.sh_ide-codewarrior .sh_sourceCode .sh_name{color:#666}
.sh_ide-codewarrior .sh_sourceCode .sh_variable{color:#0000b3}
.sh_ide-codewarrior .sh_sourceCode .sh_oldfile{color:#666}
.sh_ide-codewarrior .sh_sourceCode .sh_newfile{color:#666}
.sh_ide-codewarrior .sh_sourceCode .sh_difflines{color:#0000b3}
.sh_ide-codewarrior .sh_sourceCode .sh_selector{color:#0000b3}
.sh_ide-codewarrior .sh_sourceCode .sh_property{color:#0000b3}
.sh_ide-codewarrior .sh_sourceCode .sh_value{color:#666}
/*-------- Snippet Base Styles ----------*/
.snippet-wrap {position:relative;}
*:first-child+html .snippet-wrap {display:inline-block;}
* html .snippet-wrap {display:inline-block;}
.snippet-reveal{text-decoration:underline;}
.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:10px; right:15px; z-index:1;background-color:transparent;}
.snippet-wrap .snippet-hide {top:auto; bottom:10px;}
*:first-child+html .snippet-wrap .snippet-hide {bottom:25px;}
* html .snippet-wrap .snippet-hide {bottom:25px;}
.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:0; padding:0;}
.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:0 5px; text-decoration:underline;}
.snippet-wrap pre.sh_sourceCode{
display: block;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
position:relative;
overflow:auto;
background-color: #F6F6F6;
border: 1px solid #DDD;
padding: 5px 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .1);
font-size: 13px;
margin: 0 0 50px;
}
.snippet-wrap pre.snippet-textonly {padding:2em;}
*:first-child+html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
* html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
.snippet-reveal pre.sh_sourceCode {padding:.5em 1em; text-align:right;}
.snippet-wrap .snippet-num li{padding-left:1.5em;}
.snippet-wrap .snippet-no-num{list-style:none; padding:.6em 1em; margin:0;}
.snippet-wrap .snippet-no-num li {list-style:none; padding:3px 0;margin:0;}
.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:3em;}
.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:-3em; padding-left:6px;}
*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
* html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
.snippet-wrap li.box-top {border-width:1px 1px 0 !important;}
.snippet-wrap li.box-bot {border-width:0 1px 1px !important;}
.snippet-wrap li.box-mid {border-width:0 1px !important;}
.snippet-wrap .snippet-num li .box-sp {width:18px; display:inline-block;}
*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:27px;}
* html .snippet-wrap .snippet-num li .box-sp {width:27px;}
.snippet-wrap .snippet-no-num li.box {border:1px solid;}
.snippet-wrap .snippet-no-num li .box-sp {display:none;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment