tag:blogger.com,1999:blog-68768928849752385022024-03-14T08:44:33.399-07:00Piyush MarvaniyaWeb DesignerAnonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.comBlogger22125tag:blogger.com,1999:blog-6876892884975238502.post-21643062885912976962015-02-26T01:43:00.005-08:002015-02-26T02:02:26.576-08:00Parallax Scroling...<div dir="ltr" style="text-align: left;" trbidi="on">
<!DOCTYPE html><br />
<html lang="en"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><head><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta charset="utf-8"> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><title>Parallax</title><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta name="description" content=""><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta name="viewport" content="width=device-width; initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><link rel="shortcut icon" href="/favicon.ico"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><link rel="stylesheet" href="css/bootstrap.css" /><br />
<br />
<style><br />
body, html {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 100%;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>min-height: 100%;<br />
}<br />
/*---------------------- Banner -------------------------*/<br />
section.hero {<br />
padding: 100px 0;<br />
}<br />
.banner {<br />
background-image: url("../images/banner.jpg");<br />
background-size: auto 100%;<br />
min-height: 100px;<br />
transition: all 1ms linear 0s;<br />
width: 100%;<br />
}<br />
/*---------------------- Banner End -------------------------*/ <br />
article {<br />
float: left;<br />
margin: 50px auto 0;<br />
width: 100%;<br />
}<br />
.loading {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background: url('../img/ico_loading.gif') no-repeat center center;<br />
}<br />
.no-js {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding-top: 106px;<br />
}<br />
.loaded section, .no-js section {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>opacity: 1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-transition: opacity 300ms ease-out;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-transition: opacity 300ms ease-out;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>transition: opacity 300ms ease-out;<br />
}<br />
main {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow-x: hidden;<br />
}<br />
#preload {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 1px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 1px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow: hidden;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>top: 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>left: 0;<br />
}<br />
.bcg {<br />
background-attachment: fixed;<br />
background-position: center center;<br />
background-repeat: no-repeat;<br />
background-size: cover;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
.fixbg {<br />
background-attachment: fixed;<br />
background-position: center center;<br />
background-size: cover;<br />
color: #fff;<br />
}<br />
.hsContainer { padding: 50px 0px; }<br />
/* Slide 1 */<br />
#section1 .bcg {<br />
background-image: url("../images/section1bg.jpg"); }<br />
<br />
/* Slide 2 */<br />
#slide-2 .hsContent { }<br />
<br />
/* Slide 3 */<br />
#section3 .bcg { background-image: url("../images/section1bg.jpg"); }<br />
<br />
/* Slide 4 */<br />
#slide-4 .hsContent { }<br />
</style> <br />
<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></head><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><body><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><!-- Start Loader --><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="loader-start"></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><!-- End Loader --><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<nav class="navbar navbar-default navbar-fixed-top"><br />
<div class="container"><br />
<div class="navbar-header"><br />
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><br />
<span class="sr-only">Toggle navigation</span><br />
<span class="icon-bar"></span><br />
<span class="icon-bar"></span><br />
<span class="icon-bar"></span><br />
</button><br />
<br />
</div><br />
<div id="navbar" class="navbar-collapse collapse"><br />
<br />
<div class="pull-left logo"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <a data-scroll="section0" href="#">Project name</a><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> </div><br />
<br />
<ul class="nav navbar-nav navbar-right"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#" data-scroll="section1">What is FaceCandi?</a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#" data-scroll="section2">So What?</a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#" data-scroll="section3">Benefits</a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#" data-scroll="section4">Who Is It For?</a></li><br />
</ul><br />
</div><!--/.nav-collapse --><br />
</div><br />
</nav><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><article><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <section class="hero banner" data-anchor="section0"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="container"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="col-md-12"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> Banner text<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> </div> <span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span></section> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><section class="section1 fixbg homeSlide" id="section1" data-anchor="section1"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -200px;" data-anchor-target="#section1"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <div class="hsContainer container"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><div class="row"><span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="hsContent col-md-7" data--20-bottom="opacity: 0;" data--100-bottom="opacity: 1;" data--150-center="opacity: 1" data--400-top="opacity: 0" data-anchor-target="#section1 h2"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <h2>WHAT IS FACECANDI?</h2><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><p><span>Connect</span> with <span>customers</span> in a way that <span>competitors cannot.</span></p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><p class="with_mng">Be the <span>relief</span> to when customers - all of us really -<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>scream in our own heads <span>"CAN I JUST PLEASE GET A <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>HUMAN BEING TO HELP ME</span> make my purchase<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>or resolve my problem?!”</p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><p class="with_mng2"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><span>Woo</span> your customers with <span>human warmth</span> and<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><span>competence</span>, and in return they will <span>wow</span> you with relationships of <span>trust</span> and <span>loyalty.</span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> </div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></section><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><section class="section2" id="section2" data-anchor="section2" style="min-height: 250px;"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="container"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h2>so what? <i class="bottom_line"></i></h2><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></section><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><section class="section3 fixbg homeSlide" id="section3" data-anchor="section3"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -200px;" data-anchor-target="#section3"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="hsContainer container"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="row"><span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="col-md-12"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h2>Benefits</h2><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><p><span>Connect</span> with <span>customers</span> in a way that <span>competitors cannot.</span></p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><p class="with_mng">Be the <span>relief</span> to when customers - all of us really -<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>scream in our own heads <span>"CAN I JUST PLEASE GET A <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>HUMAN BEING TO HELP ME</span> make my purchase<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>or resolve my problem?!”</p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><p class="with_mng2"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><span>Woo</span> your customers with <span>human warmth</span> and<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><span>competence</span>, and in return they will <span>wow</span> you with relationships of <span>trust</span> and <span>loyalty.</span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></section><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><section class="section4" id="section4" data-anchor="section4" style="min-height: 250px;"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div class="container"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h2>so what? <i class="bottom_line"></i></h2><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></section><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></article><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><footer><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><div class="container"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>Be the to when customers <br /> - all of us really - scream in <br />our own heads "CAN I JUST PLEASE <br />GET A HUMAN BEING TO HELP<br /> ME make my purchase or resolve my problem?!”<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>Be the to when customers <br /> - all of us really - scream in <br /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>Be the to when customers <br /> - all of us really - scream in <br /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span></div> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></footer><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></body><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><script src="js/jquery-1.11.1.min.js"></script><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><script src="js/bootstrap.min.js"></script><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><script src="js/custem.js"></script> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><script src="js/imagesloaded.js"></script> <!-- ---- paralax js --- --><br />
<script src="js/skrollr.js"></script><span class="Apple-tab-span" style="white-space: pre;"> </span><!-- ---- paralax js --- --><br />
<script src="js/main.js"></script><span class="Apple-tab-span" style="white-space: pre;"> </span><!-- ---- paralax js --- --><br />
<br />
</html><br />
<br />
---------------------------------------custem.js-------------------------------------------------<br />
$(document).ready(function(){<br />
<br />
(function($) { <br />
<br />
var x = 0; <br />
var y = 0; <br />
//cache a reference to the banner <br />
var banner = $(".banner"); <br />
<br />
// set initial banner background position <br />
banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px'); <br />
<br />
// scroll up background position every 90 milliseconds <br />
window.setInterval(function() { <br />
banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px'); <br />
// y--; <br />
x--; <br />
<br />
//if you need to scroll image horizontally - <br />
// uncomment x and comment y <br />
<br />
}, 90); <br />
<br />
})(jQuery); <br />
<br />
<br />
<br />
$('#navbar ul li a, .ftr-lnk li a, .banner_arw a, .logo a').on('click', function() {<br />
<br />
var scrollAnchor = $(this).attr('data-scroll'),<br />
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 50;<br />
<br />
$('body,html').animate({<br />
scrollTop: scrollPoint<br />
}, 550);<br />
<br />
return false;<br />
<br />
})<br />
<br />
<br />
$(window).scroll(function() {<br />
var windscroll = $(window).scrollTop();<br />
if (windscroll >= 50) {<br />
<br />
$('section').each(function(i) {<br />
if ($(this).position().top <= windscroll - 20) {<br />
$('.nav li.active').removeClass('active');<br />
$('.nav li').eq(i).addClass('active');<br />
}<br />
});<br />
<br />
} else {<br />
<br />
<br />
$('.nav li.active').removeClass('active');<br />
// $('.nav a:first').addClass('active');<br />
}<br />
<br />
}).scroll();<br />
<br />
<br />
});<br />
// $('#myModal').on('show.bs.modal', function (e) {<br />
// $('.modal-body').scrollTop();<br />
// })<br />
<br />
$('#myModal').on('shown.bs.modal', function () {<br />
var html = $(this).children().children().children(".modal-body").scrollTop(0);<br />
});<br />
<br />
$('#myModal2').on('shown.bs.modal', function () {<br />
var html = $(this).children().children().children(".modal-body").scrollTop(0);<br />
});<br />
<br />
$(document).ready(function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.menu-icn').click(function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// event.stopPropagation();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).parent().find('.mobilemenu').toggleClass('menu-opn');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).parent().find('.mobilemenu').parent().toggleClass('heightfix');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(parseInt($(window).width()) < 768){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var h = parseInt($(window).height());<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(h<480){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.modal-body').css('height', h-130);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.modal-body').css('height', h-100);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(parseInt($(window).width()) > 1199)<br />
{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> $('.mobilemenu li a').click(function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>$('.mobilemenu li a').removeClass('');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).addClass('');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> })<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if($('.menu').hasClass('mobilemenu')){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.menu').removeClass('mobilemenu').addClass('mainmenu');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.menu').addClass('mainmenu');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else if(parseInt($(window).width()) < 1199){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if($('.menu').hasClass('mainmenu')){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.menu').removeClass('mainmenu').addClass('mobilemenu');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.menu').addClass('mobilemenu');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span><br />
});<br />
<br />
$(window).bind( "orientationchange resize", function( event ) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(parseInt($(window).width()) < 768){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var h = parseInt($(window).height());<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(h<480){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.modal-body').css('height', h-130);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.modal-body').css('height', h-100);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(parseInt($(window).width()) > 1199)<br />
{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> $('.mobilemenu li a').click(function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>$('.mobilemenu li a').removeClass('');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).addClass('');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> })<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if($('.menu').hasClass('mobilemenu')){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.menu').removeClass('mobilemenu').addClass('mainmenu');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.menu').addClass('mainmenu');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else if(parseInt($(window).width()) < 1199){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if($('.menu').hasClass('mainmenu')){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.menu').removeClass('mainmenu').addClass('mobilemenu');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.menu').addClass('mobilemenu');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
});<br />
<br />
<br />
$(document).ready(function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.mobilemenu li a').click(function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.mobilemenu').removeClass( "menu-opn" );<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
});<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
--------------------------------------custem.js end----------------------------------------<br />
-------------------------------------------------------------------------------------------<br />
<br />
--------------------------------------------------------------------------------------------<br />
---------------------------------------imagesloaded.js-------------------------------------<br />
<br />
(function () {<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>function EventEmitter() {}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Shortcuts to improve speed and size<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Easy access to the prototype<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var proto = EventEmitter.prototype;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>function indexOfListener(listeners, listener) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var i = listeners.length;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>while (i--) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (listeners[i].listener === listener) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return i;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return -1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>function alias(name) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return function aliasClosure() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this[name].apply(this, arguments);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.getListeners = function getListeners(evt) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var events = this._getEvents();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var response;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var key;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Return a concatenated array of all matching events if<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// the selector is a regular expression.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (typeof evt === 'object') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>response = {};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (key in events) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (events.hasOwnProperty(key) && evt.test(key)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>response[key] = events[key];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>response = events[evt] || (events[evt] = []);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return response;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.flattenListeners = function flattenListeners(listeners) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var flatListeners = [];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var i;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (i = 0; i < listeners.length; i += 1) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>flatListeners.push(listeners[i].listener);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return flatListeners;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.getListenersAsObject = function getListenersAsObject(evt) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var listeners = this.getListeners(evt);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var response;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (listeners instanceof Array) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>response = {};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>response[evt] = listeners;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return response || listeners;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.addListener = function addListener(evt, listener) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var listeners = this.getListenersAsObject(evt);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var listenerIsWrapped = typeof listener === 'object';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var key;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (key in listeners) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (listeners.hasOwnProperty(key) && indexOfListener(listeners[key], listener) === -1) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>listeners[key].push(listenerIsWrapped ? listener : {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>listener: listener,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>once: false<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.on = alias('addListener');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.addOnceListener = function addOnceListener(evt, listener) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this.addListener(evt, {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>listener: listener,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>once: true<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.once = alias('addOnceListener');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.defineEvent = function defineEvent(evt) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.getListeners(evt);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.defineEvents = function defineEvents(evts) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (var i = 0; i < evts.length; i += 1) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.defineEvent(evts[i]);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.removeListener = function removeListener(evt, listener) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var listeners = this.getListenersAsObject(evt);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var index;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var key;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (key in listeners) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (listeners.hasOwnProperty(key)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>index = indexOfListener(listeners[key], listener);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (index !== -1) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>listeners[key].splice(index, 1);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.off = alias('removeListener');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.addListeners = function addListeners(evt, listeners) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Pass through to manipulateListeners<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this.manipulateListeners(false, evt, listeners);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.removeListeners = function removeListeners(evt, listeners) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Pass through to manipulateListeners<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this.manipulateListeners(true, evt, listeners);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.manipulateListeners = function manipulateListeners(remove, evt, listeners) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var i;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var value;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var single = remove ? this.removeListener : this.addListener;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var multiple = remove ? this.removeListeners : this.addListeners;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// If evt is an object then pass each of it's properties to this method<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (typeof evt === 'object' && !(evt instanceof RegExp)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (i in evt) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (evt.hasOwnProperty(i) && (value = evt[i])) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Pass the single listener straight through to the singular method<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (typeof value === 'function') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>single.call(this, i, value);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Otherwise pass back to the multiple function<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>multiple.call(this, i, value);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// So evt must be a string<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// And listeners must be an array of listeners<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Loop over it and pass each one to the multiple method<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>i = listeners.length;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>while (i--) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>single.call(this, evt, listeners[i]);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.removeEvent = function removeEvent(evt) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var type = typeof evt;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var events = this._getEvents();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var key;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Remove different things depending on the state of evt<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (type === 'string') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Remove all listeners for the specified event<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>delete events[evt];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else if (type === 'object') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Remove all events matching the regex.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (key in events) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (events.hasOwnProperty(key) && evt.test(key)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>delete events[key];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Remove all listeners in all events<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>delete this._events;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.removeAllListeners = alias('removeEvent');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.emitEvent = function emitEvent(evt, args) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var listeners = this.getListenersAsObject(evt);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var listener;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var i;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var key;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var response;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (key in listeners) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (listeners.hasOwnProperty(key)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>i = listeners[key].length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>while (i--) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// If the listener returns true then it shall be removed from the event<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// The function is executed either with a basic call or an apply if there is an args array<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>listener = listeners[key][i];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (listener.once === true) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.removeListener(evt, listener.listener);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>response = listener.listener.apply(this, args || []);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (response === this._getOnceReturnValue()) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.removeListener(evt, listener.listener);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.trigger = alias('emitEvent');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.emit = function emit(evt) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var args = Array.prototype.slice.call(arguments, 1);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this.emitEvent(evt, args);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto.setOnceReturnValue = function setOnceReturnValue(value) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this._onceReturnValue = value;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto._getOnceReturnValue = function _getOnceReturnValue() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (this.hasOwnProperty('_onceReturnValue')) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this._onceReturnValue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return true;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>proto._getEvents = function _getEvents() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return this._events || (this._events = {});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Expose the class either via AMD, CommonJS or the global object<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (typeof define === 'function' && define.amd) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>define('eventEmitter/EventEmitter',[],function () {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return EventEmitter;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else if (typeof module === 'object' && module.exports){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>module.exports = EventEmitter;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>this.EventEmitter = EventEmitter;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
}.call(this));<br />
<br />
<br />
( function( window ) {<br />
<br />
<br />
<br />
var docElem = document.documentElement;<br />
<br />
var bind = function() {};<br />
<br />
if ( docElem.addEventListener ) {<br />
bind = function( obj, type, fn ) {<br />
obj.addEventListener( type, fn, false );<br />
};<br />
} else if ( docElem.attachEvent ) {<br />
bind = function( obj, type, fn ) {<br />
obj[ type + fn ] = fn.handleEvent ?<br />
function() {<br />
var event = window.event;<br />
// add event.target<br />
event.target = event.target || event.srcElement;<br />
fn.handleEvent.call( fn, event );<br />
} :<br />
function() {<br />
var event = window.event;<br />
// add event.target<br />
event.target = event.target || event.srcElement;<br />
fn.call( obj, event );<br />
};<br />
obj.attachEvent( "on" + type, obj[ type + fn ] );<br />
};<br />
}<br />
<br />
var unbind = function() {};<br />
<br />
if ( docElem.removeEventListener ) {<br />
unbind = function( obj, type, fn ) {<br />
obj.removeEventListener( type, fn, false );<br />
};<br />
} else if ( docElem.detachEvent ) {<br />
unbind = function( obj, type, fn ) {<br />
obj.detachEvent( "on" + type, obj[ type + fn ] );<br />
try {<br />
delete obj[ type + fn ];<br />
} catch ( err ) {<br />
// can't delete window object properties<br />
obj[ type + fn ] = undefined;<br />
}<br />
};<br />
}<br />
<br />
var eventie = {<br />
bind: bind,<br />
unbind: unbind<br />
};<br />
<br />
// transport<br />
if ( typeof define === 'function' && define.amd ) {<br />
// AMD<br />
define( 'eventie/eventie',eventie );<br />
} else {<br />
// browser global<br />
window.eventie = eventie;<br />
}<br />
<br />
})( this );<br />
<br />
/*!<br />
* imagesLoaded v3.0.4<br />
* JavaScript is all like "You images are done yet or what?"<br />
* MIT License<br />
*/<br />
<br />
( function( window ) {<br />
<br />
<br />
<br />
var $ = window.jQuery;<br />
var console = window.console;<br />
var hasConsole = typeof console !== 'undefined';<br />
<br />
// -------------------------- helpers -------------------------- //<br />
<br />
// extend objects<br />
function extend( a, b ) {<br />
for ( var prop in b ) {<br />
a[ prop ] = b[ prop ];<br />
}<br />
return a;<br />
}<br />
<br />
var objToString = Object.prototype.toString;<br />
function isArray( obj ) {<br />
return objToString.call( obj ) === '[object Array]';<br />
}<br />
<br />
// turn element or nodeList into an array<br />
function makeArray( obj ) {<br />
var ary = [];<br />
if ( isArray( obj ) ) {<br />
// use object if already an array<br />
ary = obj;<br />
} else if ( typeof obj.length === 'number' ) {<br />
// convert nodeList to array<br />
for ( var i=0, len = obj.length; i < len; i++ ) {<br />
ary.push( obj[i] );<br />
}<br />
} else {<br />
// array of single index<br />
ary.push( obj );<br />
}<br />
return ary;<br />
}<br />
<br />
// -------------------------- -------------------------- //<br />
<br />
function defineImagesLoaded( EventEmitter, eventie ) {<br />
<br />
<br />
function ImagesLoaded( elem, options, onAlways ) {<br />
// coerce ImagesLoaded() without new, to be new ImagesLoaded()<br />
if ( !( this instanceof ImagesLoaded ) ) {<br />
return new ImagesLoaded( elem, options );<br />
}<br />
// use elem as selector string<br />
if ( typeof elem === 'string' ) {<br />
elem = document.querySelectorAll( elem );<br />
}<br />
<br />
this.elements = makeArray( elem );<br />
this.options = extend( {}, this.options );<br />
<br />
if ( typeof options === 'function' ) {<br />
onAlways = options;<br />
} else {<br />
extend( this.options, options );<br />
}<br />
<br />
if ( onAlways ) {<br />
this.on( 'always', onAlways );<br />
}<br />
<br />
this.getImages();<br />
<br />
if ( $ ) {<br />
// add jQuery Deferred object<br />
this.jqDeferred = new $.Deferred();<br />
}<br />
<br />
// HACK check async to allow time to bind listeners<br />
var _this = this;<br />
setTimeout( function() {<br />
_this.check();<br />
});<br />
}<br />
<br />
ImagesLoaded.prototype = new EventEmitter();<br />
<br />
ImagesLoaded.prototype.options = {};<br />
<br />
ImagesLoaded.prototype.getImages = function() {<br />
this.images = [];<br />
<br />
// filter & find items if we have an item selector<br />
for ( var i=0, len = this.elements.length; i < len; i++ ) {<br />
var elem = this.elements[i];<br />
// filter siblings<br />
if ( elem.nodeName === 'IMG' ) {<br />
this.addImage( elem );<br />
}<br />
// find children<br />
var childElems = elem.querySelectorAll('img');<br />
// concat childElems to filterFound array<br />
for ( var j=0, jLen = childElems.length; j < jLen; j++ ) {<br />
var img = childElems[j];<br />
this.addImage( img );<br />
}<br />
}<br />
};<br />
<br />
<br />
ImagesLoaded.prototype.addImage = function( img ) {<br />
var loadingImage = new LoadingImage( img );<br />
this.images.push( loadingImage );<br />
};<br />
<br />
ImagesLoaded.prototype.check = function() {<br />
var _this = this;<br />
var checkedCount = 0;<br />
var length = this.images.length;<br />
this.hasAnyBroken = false;<br />
// complete if no images<br />
if ( !length ) {<br />
this.complete();<br />
return;<br />
}<br />
<br />
function onConfirm( image, message ) {<br />
if ( _this.options.debug && hasConsole ) {<br />
console.log( 'confirm', image, message );<br />
}<br />
<br />
_this.progress( image );<br />
checkedCount++;<br />
if ( checkedCount === length ) {<br />
_this.complete();<br />
}<br />
return true; // bind once<br />
}<br />
<br />
for ( var i=0; i < length; i++ ) {<br />
var loadingImage = this.images[i];<br />
loadingImage.on( 'confirm', onConfirm );<br />
loadingImage.check();<br />
}<br />
};<br />
<br />
ImagesLoaded.prototype.progress = function( image ) {<br />
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;<br />
// HACK - Chrome triggers event before object properties have changed. #83<br />
var _this = this;<br />
setTimeout( function() {<br />
_this.emit( 'progress', _this, image );<br />
if ( _this.jqDeferred ) {<br />
_this.jqDeferred.notify( _this, image );<br />
}<br />
});<br />
};<br />
<br />
ImagesLoaded.prototype.complete = function() {<br />
var eventName = this.hasAnyBroken ? 'fail' : 'done';<br />
this.isComplete = true;<br />
var _this = this;<br />
// HACK - another setTimeout so that confirm happens after progress<br />
setTimeout( function() {<br />
_this.emit( eventName, _this );<br />
_this.emit( 'always', _this );<br />
if ( _this.jqDeferred ) {<br />
var jqMethod = _this.hasAnyBroken ? 'reject' : 'resolve';<br />
_this.jqDeferred[ jqMethod ]( _this );<br />
}<br />
});<br />
};<br />
<br />
// -------------------------- jquery -------------------------- //<br />
<br />
if ( $ ) {<br />
$.fn.imagesLoaded = function( options, callback ) {<br />
var instance = new ImagesLoaded( this, options, callback );<br />
return instance.jqDeferred.promise( $(this) );<br />
};<br />
}<br />
<br />
<br />
// -------------------------- -------------------------- //<br />
<br />
var cache = {};<br />
<br />
function LoadingImage( img ) {<br />
this.img = img;<br />
}<br />
<br />
LoadingImage.prototype = new EventEmitter();<br />
<br />
LoadingImage.prototype.check = function() {<br />
// first check cached any previous images that have same src<br />
var cached = cache[ this.img.src ];<br />
if ( cached ) {<br />
this.useCached( cached );<br />
return;<br />
}<br />
// add this to cache<br />
cache[ this.img.src ] = this;<br />
<br />
// If complete is true and browser supports natural sizes,<br />
// try to check for image status manually.<br />
if ( this.img.complete && this.img.naturalWidth !== undefined ) {<br />
// report based on naturalWidth<br />
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );<br />
return;<br />
}<br />
<br />
// If none of the checks above matched, simulate loading on detached element.<br />
var proxyImage = this.proxyImage = new Image();<br />
eventie.bind( proxyImage, 'load', this );<br />
eventie.bind( proxyImage, 'error', this );<br />
proxyImage.src = this.img.src;<br />
};<br />
<br />
LoadingImage.prototype.useCached = function( cached ) {<br />
if ( cached.isConfirmed ) {<br />
this.confirm( cached.isLoaded, 'cached was confirmed' );<br />
} else {<br />
var _this = this;<br />
cached.on( 'confirm', function( image ) {<br />
_this.confirm( image.isLoaded, 'cache emitted confirmed' );<br />
return true; // bind once<br />
});<br />
}<br />
};<br />
<br />
LoadingImage.prototype.confirm = function( isLoaded, message ) {<br />
this.isConfirmed = true;<br />
this.isLoaded = isLoaded;<br />
this.emit( 'confirm', this, message );<br />
};<br />
<br />
// trigger specified handler for event type<br />
LoadingImage.prototype.handleEvent = function( event ) {<br />
var method = 'on' + event.type;<br />
if ( this[ method ] ) {<br />
this[ method ]( event );<br />
}<br />
};<br />
<br />
LoadingImage.prototype.onload = function() {<br />
this.confirm( true, 'onload' );<br />
this.unbindProxyEvents();<br />
};<br />
<br />
LoadingImage.prototype.onerror = function() {<br />
this.confirm( false, 'onerror' );<br />
this.unbindProxyEvents();<br />
};<br />
<br />
LoadingImage.prototype.unbindProxyEvents = function() {<br />
eventie.unbind( this.proxyImage, 'load', this );<br />
eventie.unbind( this.proxyImage, 'error', this );<br />
};<br />
<br />
// ----- ----- //<br />
<br />
return ImagesLoaded;<br />
}<br />
<br />
// -------------------------- transport -------------------------- //<br />
<br />
if ( typeof define === 'function' && define.amd ) {<br />
// AMD<br />
define( [<br />
'eventEmitter/EventEmitter',<br />
'eventie/eventie'<br />
],<br />
defineImagesLoaded );<br />
} else {<br />
// browser global<br />
window.imagesLoaded = defineImagesLoaded(<br />
window.EventEmitter,<br />
window.eventie<br />
);<br />
}<br />
<br />
})( window );<br />
<br />
---------------------------------------imagesloaded.js END-------------------------------------<br />
--------------------------------------------------------------------------------------------<br />
<br />
--------------------------------------------------------------------------------------------<br />
---------------------------------------skrollr.js--------------------------------------------<br />
<br />
/*!<br />
* skrollr core<br />
*<br />
* Alexander Prinzhorn - https://github.com/Prinzhorn/skrollr<br />
*<br />
* Free to use under terms of MIT license<br />
*/<br />
(function(window, document, undefined) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>'use strict';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/*<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Global api.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollr = window.skrollr = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>get: function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _instance;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Main entry point.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>init: function(options) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _instance || new Skrollr(options);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>VERSION: '0.6.21'<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Minify optimization.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var hasProp = Object.prototype.hasOwnProperty;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var Math = window.Math;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var getStyle = window.getComputedStyle;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//They will be filled when skrollr gets initialized.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var documentElement;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var body;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var EVENT_TOUCHSTART = 'touchstart';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var EVENT_TOUCHMOVE = 'touchmove';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var EVENT_TOUCHCANCEL = 'touchcancel';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var EVENT_TOUCHEND = 'touchend';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var SKROLLABLE_CLASS = 'skrollable';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var SKROLLABLE_BEFORE_CLASS = SKROLLABLE_CLASS + '-before';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var SKROLLABLE_BETWEEN_CLASS = SKROLLABLE_CLASS + '-between';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var SKROLLABLE_AFTER_CLASS = SKROLLABLE_CLASS + '-after';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var SKROLLR_CLASS = 'skrollr';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var NO_SKROLLR_CLASS = 'no-' + SKROLLR_CLASS;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var SKROLLR_DESKTOP_CLASS = SKROLLR_CLASS + '-desktop';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var SKROLLR_MOBILE_CLASS = SKROLLR_CLASS + '-mobile';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var DEFAULT_EASING = 'linear';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var DEFAULT_DURATION = 1000;//ms<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var DEFAULT_MOBILE_DECELERATION = 0.004;//pixel/ms²<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var DEFAULT_SMOOTH_SCROLLING_DURATION = 200;//ms<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var ANCHOR_START = 'start';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var ANCHOR_END = 'end';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var ANCHOR_CENTER = 'center';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var ANCHOR_BOTTOM = 'bottom';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The property which will be added to the DOM element to hold the ID of the skrollable.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var SKROLLABLE_ID_DOM_PROPERTY = '___skrollable_id';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxTouchIgnoreTags = /^(?:input|textarea|button|select)$/i;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxTrim = /^\s+|\s+$/g;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Find all data-attributes. data-[_constant]-[offset]-[anchor]-[anchor].<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxKeyframeAttribute = /^data(?:-(_\w+))?(?:-?(-?\d*\.?\d+p?))?(?:-?(start|end|top|center|bottom))?(?:-?(top|center|bottom))?$/;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxPropValue = /\s*([\w\-\[\]]+)\s*:\s*(.+?)\s*(?:;|$)/gi;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Easing function names follow the property in square brackets.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxPropEasing = /^([a-z\-]+)\[(\w+)\]$/;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxCamelCase = /-([a-z])/g;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxCamelCaseFn = function(str, letter) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return letter.toUpperCase();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Numeric values with optional sign.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxNumericValue = /[\-+]?[\d]*\.?[\d]+/g;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Used to replace occurences of {?} with a number.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxInterpolateString = /\{\?\}/g;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Finds rgb(a) colors, which don't use the percentage notation.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxRGBAIntegerColor = /rgba?\(\s*-?\d+\s*,\s*-?\d+\s*,\s*-?\d+/g;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Finds all gradients.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxGradient = /[a-z\-]+-gradient/g;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Vendor prefix. Will be set once skrollr gets initialized.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var theCSSPrefix = '';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var theDashedCSSPrefix = '';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Will be called once (when skrollr gets initialized).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var detectCSSPrefix = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Only relevant prefixes. May be extended.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Could be dangerous if there will ever be a CSS property which actually starts with "ms". Don't hope so.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var rxPrefixes = /^(?:O|Moz|webkit|ms)|(?:-(?:o|moz|webkit|ms)-)/;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Detect prefix for current browser by finding the first property using a prefix.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!getStyle) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var style = getStyle(body, null);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(var k in style) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//We check the key and if the key is a number, we check the value as well, because safari's getComputedStyle returns some weird array-like thingy.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>theCSSPrefix = (k.match(rxPrefixes) || (+k == k && style[k].match(rxPrefixes)));<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(theCSSPrefix) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Did we even detect a prefix?<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!theCSSPrefix) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>theCSSPrefix = theDashedCSSPrefix = '';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>theCSSPrefix = theCSSPrefix[0];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//We could have detected either a dashed prefix or this camelCaseish-inconsistent stuff.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(theCSSPrefix.slice(0,1) === '-') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>theDashedCSSPrefix = theCSSPrefix;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//There's no logic behind these. Need a look up.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>theCSSPrefix = ({<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>'-webkit-': 'webkit',<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>'-moz-': 'Moz',<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>'-ms-': 'ms',<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>'-o-': 'O'<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>})[theCSSPrefix];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>theDashedCSSPrefix = '-' + theCSSPrefix.toLowerCase() + '-';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var polyfillRAF = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var requestAnimFrame = window.requestAnimationFrame || window[theCSSPrefix.toLowerCase() + 'RequestAnimationFrame'];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var lastTime = _now();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_isMobile || !requestAnimFrame) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>requestAnimFrame = function(callback) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//How long did it take to render?<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var deltaTime = _now() - lastTime;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var delay = Math.max(0, 1000 / 60 - deltaTime);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return window.setTimeout(function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>lastTime = _now();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>callback();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}, delay);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return requestAnimFrame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var polyfillCAF = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var cancelAnimFrame = window.cancelAnimationFrame || window[theCSSPrefix.toLowerCase() + 'CancelAnimationFrame'];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_isMobile || !cancelAnimFrame) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>cancelAnimFrame = function(timeout) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return window.clearTimeout(timeout);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return cancelAnimFrame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Built-in easing functions.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var easings = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>begin: function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>end: function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return 1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>linear: function(p) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return p;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>quadratic: function(p) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return p * p;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>cubic: function(p) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return p * p * p;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>swing: function(p) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return (-Math.cos(p * Math.PI) / 2) + 0.5;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>sqrt: function(p) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return Math.sqrt(p);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>outCubic: function(p) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return (Math.pow((p - 1), 3) + 1);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//see https://www.desmos.com/calculator/tbr20s8vd2 for how I did this<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>bounce: function(p) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var a;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(p <= 0.5083) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>a = 3;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else if(p <= 0.8489) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>a = 9;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else if(p <= 0.96208) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>a = 27;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else if(p <= 0.99981) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>a = 91;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return 1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return 1 - Math.abs(3 * Math.cos(p * a * 1.028) / a);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Constructor.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>function Skrollr(options) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>documentElement = document.documentElement;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>body = document.body;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>detectCSSPrefix();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_instance = this;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>options = options || {};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_constants = options.constants || {};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//We allow defining custom easings or overwrite existing.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(options.easing) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(var e in options.easing) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>easings[e] = options.easing[e];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_edgeStrategy = options.edgeStrategy || 'set';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_listeners = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Function to be called right before rendering.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>beforerender: options.beforerender,<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Function to be called right after finishing rendering.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>render: options.render<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//forceHeight is true by default<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_forceHeight = options.forceHeight !== false;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_forceHeight) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_scale = options.scale || 1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_mobileDeceleration = options.mobileDeceleration || DEFAULT_MOBILE_DECELERATION;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_smoothScrollingEnabled = options.smoothScrolling !== false;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_smoothScrollingDuration = options.smoothScrollingDuration || DEFAULT_SMOOTH_SCROLLING_DURATION;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Dummy object. Will be overwritten in the _render method when smooth scrolling is calculated.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_smoothScrolling = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>targetTop: _instance.getScrollTop()<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//A custom check function may be passed.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_isMobile = ((options.mobileCheck || function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>})());<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_isMobile) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_skrollrBody = document.getElementById('skrollr-body');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Detect 3d transform if there's a skrollr-body (only needed for #skrollr-body).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_skrollrBody) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_detect3DTransforms();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_initMobile();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_updateClass(documentElement, [SKROLLR_CLASS, SKROLLR_MOBILE_CLASS], [NO_SKROLLR_CLASS]);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_updateClass(documentElement, [SKROLLR_CLASS, SKROLLR_DESKTOP_CLASS], [NO_SKROLLR_CLASS]);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Triggers parsing of elements and a first reflow.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_instance.refresh();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_addEvent(window, 'resize orientationchange', function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var width = documentElement.clientWidth;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var height = documentElement.clientHeight;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Only reflow if the size actually changed (#271).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(height !== _lastViewportHeight || width !== _lastViewportWidth) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_lastViewportHeight = height;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_lastViewportWidth = width;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_requestReflow = true;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var requestAnimFrame = polyfillRAF();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Let's go.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>(function animloop(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_render();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_animFrame = requestAnimFrame(animloop);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}());<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _instance;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * (Re)parses some or all elements.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.refresh = function(elements) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var elementIndex;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var elementsLength;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var ignoreID = false;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Completely reparse anything without argument.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(elements === undefined) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Ignore that some elements may already have a skrollable ID.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>ignoreID = true;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_skrollables = [];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_skrollableIdCounter = 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>elements = document.getElementsByTagName('*');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//We accept a single element or an array of elements.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>elements = [].concat(elements);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>elementIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>elementsLength = elements.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; elementIndex < elementsLength; elementIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var el = elements[elementIndex];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var anchorTarget = el;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var keyFrames = [];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//If this particular element should be smooth scrolled.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var smoothScrollThis = _smoothScrollingEnabled;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The edge strategy for this particular element.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var edgeStrategy = _edgeStrategy;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!el.attributes) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Iterate over all attributes and search for key frame attributes.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var attributeIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var attributesLength = el.attributes.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for (; attributeIndex < attributesLength; attributeIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var attr = el.attributes[attributeIndex];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(attr.name === 'data-anchor-target') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>anchorTarget = document.querySelector(attr.value);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(anchorTarget === null) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>throw 'Unable to find anchor target "' + attr.value + '"';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Global smooth scrolling can be overridden by the element attribute.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(attr.name === 'data-smooth-scrolling') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>smoothScrollThis = attr.value !== 'off';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Global edge strategy can be overridden by the element attribute.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(attr.name === 'data-edge-strategy') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>edgeStrategy = attr.value;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var match = attr.name.match(rxKeyframeAttribute);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(match === null) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var kf = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>props: attr.value,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Point back to the element as well.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element: el<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFrames.push(kf);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var constant = match[1];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(constant) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Strip the underscore prefix.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.constant = constant.substr(1);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Get the key frame offset.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var offset = match[2];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Is it a percentage offset?<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(/p$/.test(offset)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.isPercentage = true;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.offset = (offset.slice(0, -1) | 0) / 100;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.offset = (offset | 0);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var anchor1 = match[3];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//If second anchor is not set, the first will be taken for both.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var anchor2 = match[4] || anchor1;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//"absolute" (or "classic") mode, where numbers mean absolute scroll offset.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!anchor1 || anchor1 === ANCHOR_START || anchor1 === ANCHOR_END) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.mode = 'absolute';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//data-end needs to be calculated after all key frames are known.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(anchor1 === ANCHOR_END) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.isEnd = true;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else if(!kf.isPercentage) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//For data-start we can already set the key frame w/o calculations.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//#59: "scale" options should only affect absolute mode.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.offset = kf.offset * _scale;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//"relative" mode, where numbers are relative to anchors.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.mode = 'relative';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.anchors = [anchor1, anchor2];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Does this element have key frames?<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!keyFrames.length) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Will hold the original style and class attributes before we controlled the element (see #80).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var styleAttr, classAttr;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var id;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!ignoreID && SKROLLABLE_ID_DOM_PROPERTY in el) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//We already have this element under control. Grab the corresponding skrollable id.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>id = el[SKROLLABLE_ID_DOM_PROPERTY];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>styleAttr = _skrollables[id].styleAttr;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>classAttr = _skrollables[id].classAttr;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//It's an unknown element. Asign it a new skrollable id.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>id = (el[SKROLLABLE_ID_DOM_PROPERTY] = _skrollableIdCounter++);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>styleAttr = el.style.cssText;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>classAttr = _getClass(el);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_skrollables[id] = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element: el,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>styleAttr: styleAttr,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>classAttr: classAttr,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>anchorTarget: anchorTarget,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFrames: keyFrames,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>smoothScrolling: smoothScrollThis,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>edgeStrategy: edgeStrategy<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_updateClass(el, [SKROLLABLE_CLASS], []);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Reflow for the first time.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_reflow();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Now that we got all key frame numbers right, actually parse the properties.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>elementIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>elementsLength = elements.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; elementIndex < elementsLength; elementIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var sk = _skrollables[elements[elementIndex][SKROLLABLE_ID_DOM_PROPERTY]];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(sk === undefined) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Parse the property string to objects<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_parseProps(sk);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Fill key frames with missing properties from left and right<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_fillProps(sk);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _instance;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Transform "relative" mode to "absolute" mode.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * That is, calculate anchor position and offset of element.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.relativeToAbsolute = function(element, viewportAnchor, elementAnchor) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var viewportHeight = documentElement.clientHeight;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var box = element.getBoundingClientRect();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var absolute = box.top;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//#100: IE doesn't supply "height" with getBoundingClientRect.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var boxHeight = box.bottom - box.top;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(viewportAnchor === ANCHOR_BOTTOM) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>absolute -= viewportHeight;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else if(viewportAnchor === ANCHOR_CENTER) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>absolute -= viewportHeight / 2;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(elementAnchor === ANCHOR_BOTTOM) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>absolute += boxHeight;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else if(elementAnchor === ANCHOR_CENTER) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>absolute += boxHeight / 2;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Compensate scrolling since getBoundingClientRect is relative to viewport.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>absolute += _instance.getScrollTop();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return (absolute + 0.5) | 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Animates scroll top to new position.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.animateTo = function(top, options) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>options = options || {};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var now = _now();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var scrollTop = _instance.getScrollTop();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Setting this to a new value will automatically cause the current animation to stop, if any.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_scrollAnimation = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>startTop: scrollTop,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>topDiff: top - scrollTop,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>targetTop: top,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>duration: options.duration || DEFAULT_DURATION,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>startTime: now,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>endTime: now + (options.duration || DEFAULT_DURATION),<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>easing: easings[options.easing || DEFAULT_EASING],<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>done: options.done<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Don't queue the animation if there's nothing to animate.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!_scrollAnimation.topDiff) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_scrollAnimation.done) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_scrollAnimation.done.call(_instance, false);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_scrollAnimation = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _instance;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Stops animateTo animation.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.stopAnimateTo = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_scrollAnimation && _scrollAnimation.done) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_scrollAnimation.done.call(_instance, true);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_scrollAnimation = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Returns if an animation caused by animateTo is currently running.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.isAnimatingTo = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return !!_scrollAnimation;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.setScrollTop = function(top, force) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_forceRender = (force === true);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_isMobile) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_mobileOffset = Math.min(Math.max(top, 0), _maxKeyFrame);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>window.scrollTo(0, top);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _instance;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.getScrollTop = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_isMobile) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _mobileOffset;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return window.pageYOffset || documentElement.scrollTop || body.scrollTop || 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.getMaxScrollTop = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _maxKeyFrame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.on = function(name, fn) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_listeners[name] = fn;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _instance;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.off = function(name) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>delete _listeners[name];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return _instance;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Skrollr.prototype.destroy = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var cancelAnimFrame = polyfillCAF();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>cancelAnimFrame(_animFrame);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_removeAllEvents();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_updateClass(documentElement, [NO_SKROLLR_CLASS], [SKROLLR_CLASS, SKROLLR_DESKTOP_CLASS, SKROLLR_MOBILE_CLASS]);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollableIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollablesLength = _skrollables.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; skrollableIndex < skrollablesLength; skrollableIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_reset(_skrollables[skrollableIndex].element);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>documentElement.style.overflow = body.style.overflow = 'auto';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>documentElement.style.height = body.style.height = 'auto';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_skrollrBody) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollr.setStyle(_skrollrBody, 'transform', 'none');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_instance = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_skrollrBody = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_listeners = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_forceHeight = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_maxKeyFrame = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_scale = 1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_constants = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_mobileDeceleration = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_direction = 'down';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_lastTop = -1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_lastViewportWidth = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_lastViewportHeight = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_requestReflow = false;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_scrollAnimation = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_smoothScrollingEnabled = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_smoothScrollingDuration = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_smoothScrolling = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_forceRender = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_skrollableIdCounter = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_edgeStrategy = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_isMobile = false;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_mobileOffset = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_translateZ = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/*<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Private methods.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>*/<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _initMobile = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var initialElement;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var initialTouchY;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var initialTouchX;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var currentElement;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var currentTouchY;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var currentTouchX;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var lastTouchY;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var deltaY;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var initialTouchTime;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var currentTouchTime;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var lastTouchTime;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var deltaTime;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_addEvent(documentElement, [EVENT_TOUCHSTART, EVENT_TOUCHMOVE, EVENT_TOUCHCANCEL, EVENT_TOUCHEND].join(' '), function(e) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var touch = e.changedTouches[0];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>currentElement = e.target;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//We don't want text nodes.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>while(currentElement.nodeType === 3) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>currentElement = currentElement.parentNode;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>currentTouchY = touch.clientY;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>currentTouchX = touch.clientX;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>currentTouchTime = e.timeStamp;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!rxTouchIgnoreTags.test(currentElement.tagName)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>e.preventDefault();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>switch(e.type) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>case EVENT_TOUCHSTART:<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The last element we tapped on.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(initialElement) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>initialElement.blur();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_instance.stopAnimateTo();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>initialElement = currentElement;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>initialTouchY = lastTouchY = currentTouchY;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>initialTouchX = currentTouchX;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>initialTouchTime = currentTouchTime;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>case EVENT_TOUCHMOVE:<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Prevent default event on touchIgnore elements in case they don't have focus yet.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(rxTouchIgnoreTags.test(currentElement.tagName) && document.activeElement !== currentElement) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>e.preventDefault();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>deltaY = currentTouchY - lastTouchY;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>deltaTime = currentTouchTime - lastTouchTime;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_instance.setScrollTop(_mobileOffset - deltaY, true);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>lastTouchY = currentTouchY;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>lastTouchTime = currentTouchTime;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>default:<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>case EVENT_TOUCHCANCEL:<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>case EVENT_TOUCHEND:<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var distanceY = initialTouchY - currentTouchY;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var distanceX = initialTouchX - currentTouchX;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var distance2 = distanceX * distanceX + distanceY * distanceY;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Check if it was more like a tap (moved less than 7px).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(distance2 < 49) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!rxTouchIgnoreTags.test(initialElement.tagName)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>initialElement.focus();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//It was a tap, click the element.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var clickEvent = document.createEvent('MouseEvents');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>clickEvent.initMouseEvent('click', true, true, e.view, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 0, null);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>initialElement.dispatchEvent(clickEvent);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>initialElement = undefined;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var speed = deltaY / deltaTime;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Cap speed at 3 pixel/ms.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>speed = Math.max(Math.min(speed, 3), -3);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var duration = Math.abs(speed / _mobileDeceleration);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var targetOffset = speed * duration + 0.5 * _mobileDeceleration * duration * duration;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var targetTop = _instance.getScrollTop() - targetOffset;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Relative duration change for when scrolling above bounds.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var targetRatio = 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Change duration proportionally when scrolling would leave bounds.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(targetTop > _maxKeyFrame) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>targetRatio = (_maxKeyFrame - targetTop) / targetOffset;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>targetTop = _maxKeyFrame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else if(targetTop < 0) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>targetRatio = -targetTop / targetOffset;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>targetTop = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>duration = duration * (1 - targetRatio);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_instance.animateTo((targetTop + 0.5) | 0, {easing: 'outCubic', duration: duration});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Just in case there has already been some native scrolling, reset it.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>window.scrollTo(0, 0);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>documentElement.style.overflow = body.style.overflow = 'hidden';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Updates key frames which depend on others / need to be updated on resize.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * That is "end" in "absolute" mode and all key frames in "relative" mode.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Also handles constants, because they may change on resize.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _updateDependentKeyFrames = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var viewportHeight = documentElement.clientHeight;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var processedConstants = _processConstants();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollable;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var element;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var anchorTarget;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var keyFrames;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var keyFrameIndex;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var keyFramesLength;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var kf;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollableIndex;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollablesLength;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var offset;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var constantValue;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//First process all relative-mode elements and find the max key frame.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollableIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollablesLength = _skrollables.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; skrollableIndex < skrollablesLength; skrollableIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollable = _skrollables[skrollableIndex];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element = skrollable.element;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>anchorTarget = skrollable.anchorTarget;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFrames = skrollable.keyFrames;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFrameIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFramesLength = keyFrames.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; keyFrameIndex < keyFramesLength; keyFrameIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf = keyFrames[keyFrameIndex];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>offset = kf.offset;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>constantValue = processedConstants[kf.constant] || 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.frame = offset;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(kf.isPercentage) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Convert the offset to percentage of the viewport height.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>offset = offset * viewportHeight;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Absolute + percentage mode.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.frame = offset;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(kf.mode === 'relative') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_reset(element);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.frame = _instance.relativeToAbsolute(anchorTarget, kf.anchors[0], kf.anchors[1]) - offset;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_reset(element, true);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.frame += constantValue;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Only search for max key frame when forceHeight is enabled.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_forceHeight) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Find the max key frame, but don't use one of the data-end ones for comparison.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!kf.isEnd && kf.frame > _maxKeyFrame) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_maxKeyFrame = kf.frame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//#133: The document can be larger than the maxKeyFrame we found.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_maxKeyFrame = Math.max(_maxKeyFrame, _getDocumentHeight());<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Now process all data-end keyframes.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollableIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollablesLength = _skrollables.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; skrollableIndex < skrollablesLength; skrollableIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollable = _skrollables[skrollableIndex];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFrames = skrollable.keyFrames;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFrameIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFramesLength = keyFrames.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; keyFrameIndex < keyFramesLength; keyFrameIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf = keyFrames[keyFrameIndex];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>constantValue = processedConstants[kf.constant] || 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(kf.isEnd) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>kf.frame = _maxKeyFrame - kf.offset + constantValue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollable.keyFrames.sort(_keyFrameComparator);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Calculates and sets the style properties for the element at the given frame.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * @param fakeFrame The frame to render at when smooth scrolling is enabled.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * @param actualFrame The actual frame we are at.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _calcSteps = function(fakeFrame, actualFrame) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Iterate over all skrollables.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollableIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollablesLength = _skrollables.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; skrollableIndex < skrollablesLength; skrollableIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollable = _skrollables[skrollableIndex];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var element = skrollable.element;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var frame = skrollable.smoothScrolling ? fakeFrame : actualFrame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var frames = skrollable.keyFrames;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var firstFrame = frames[0].frame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var lastFrame = frames[frames.length - 1].frame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var beforeFirst = frame < firstFrame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var afterLast = frame > lastFrame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var firstOrLastFrame = frames[beforeFirst ? 0 : frames.length - 1];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var key;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var value;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//If we are before/after the first/last frame, set the styles according to the given edge strategy.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(beforeFirst || afterLast) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Check if we already handled this edge case last time.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Note: using setScrollTop it's possible that we jumped from one edge to the other.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(beforeFirst && skrollable.edge === -1 || afterLast && skrollable.edge === 1) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Add the skrollr-before or -after class.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_updateClass(element, [beforeFirst ? SKROLLABLE_BEFORE_CLASS : SKROLLABLE_AFTER_CLASS], [SKROLLABLE_BEFORE_CLASS, SKROLLABLE_BETWEEN_CLASS, SKROLLABLE_AFTER_CLASS]);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Remember that we handled the edge case (before/after the first/last keyframe).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollable.edge = beforeFirst ? -1 : 1;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>switch(skrollable.edgeStrategy) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>case 'reset':<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_reset(element);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>case 'ease':<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Handle this case like it would be exactly at first/last keyframe and just pass it on.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>frame = firstOrLastFrame.frame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>default:<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>case 'set':<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var props = firstOrLastFrame.props;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(key in props) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(hasProp.call(props, key)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value = _interpolateString(props[key].value);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollr.setStyle(element, key, value);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Did we handle an edge last time?<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(skrollable.edge !== 0) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_updateClass(element, [SKROLLABLE_CLASS, SKROLLABLE_BETWEEN_CLASS], [SKROLLABLE_BEFORE_CLASS, SKROLLABLE_AFTER_CLASS]);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollable.edge = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Find out between which two key frames we are right now.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var keyFrameIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var framesLength = frames.length - 1;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; keyFrameIndex < framesLength; keyFrameIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(frame >= frames[keyFrameIndex].frame && frame <= frames[keyFrameIndex + 1].frame) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var left = frames[keyFrameIndex];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var right = frames[keyFrameIndex + 1];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(key in left.props) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(hasProp.call(left.props, key)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var progress = (frame - left.frame) / (right.frame - left.frame);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Transform the current progress using the given easing function.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>progress = left.props[key].easing(progress);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Interpolate between the two values<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value = _calcInterpolation(left.props[key].value, right.props[key].value, progress);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value = _interpolateString(value);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollr.setStyle(element, key, value);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>break;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Renders all elements.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _render = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_requestReflow) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_requestReflow = false;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_reflow();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//We may render something else than the actual scrollbar position.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var renderTop = _instance.getScrollTop();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//If there's an animation, which ends in current render call, call the callback after rendering.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var afterAnimationCallback;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var now = _now();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var progress;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Before actually rendering handle the scroll animation, if any.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_scrollAnimation) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//It's over<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(now >= _scrollAnimation.endTime) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>renderTop = _scrollAnimation.targetTop;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>afterAnimationCallback = _scrollAnimation.done;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_scrollAnimation = undefined;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Map the current progress to the new progress using given easing function.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>progress = _scrollAnimation.easing((now - _scrollAnimation.startTime) / _scrollAnimation.duration);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>renderTop = (_scrollAnimation.startTop + progress * _scrollAnimation.topDiff) | 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_instance.setScrollTop(renderTop, true);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Smooth scrolling only if there's no animation running and if we're not forcing the rendering.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else if(!_forceRender) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var smoothScrollingDiff = _smoothScrolling.targetTop - renderTop;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The user scrolled, start new smooth scrolling.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(smoothScrollingDiff) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_smoothScrolling = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>startTop: _lastTop,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>topDiff: renderTop - _lastTop,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>targetTop: renderTop,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>startTime: _lastRenderCall,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>endTime: _lastRenderCall + _smoothScrollingDuration<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Interpolate the internal scroll position (not the actual scrollbar).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(now <= _smoothScrolling.endTime) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Map the current progress to the new progress using easing function.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>progress = easings.sqrt((now - _smoothScrolling.startTime) / _smoothScrollingDuration);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>renderTop = (_smoothScrolling.startTop + progress * _smoothScrolling.topDiff) | 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//That's were we actually "scroll" on mobile.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_isMobile && _skrollrBody) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Set the transform ("scroll it").<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollr.setStyle(_skrollrBody, 'transform', 'translate(0, ' + -(_mobileOffset) + 'px) ' + _translateZ);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Did the scroll position even change?<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_forceRender || _lastTop !== renderTop) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Remember in which direction are we scrolling?<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_direction = (renderTop > _lastTop) ? 'down' : (renderTop < _lastTop ? 'up' : _direction);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_forceRender = false;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var listenerParams = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>curTop: renderTop,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>lastTop: _lastTop,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>maxTop: _maxKeyFrame,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>direction: _direction<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Tell the listener we are about to render.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var continueRendering = _listeners.beforerender && _listeners.beforerender.call(_instance, listenerParams);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The beforerender listener function is able the cancel rendering.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(continueRendering !== false) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Now actually interpolate all the styles.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_calcSteps(renderTop, _instance.getScrollTop());<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Remember when we last rendered.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_lastTop = renderTop;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_listeners.render) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_listeners.render.call(_instance, listenerParams);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(afterAnimationCallback) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>afterAnimationCallback.call(_instance, false);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_lastRenderCall = now;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Parses the properties for each key frame of the given skrollable.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _parseProps = function(skrollable) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Iterate over all key frames<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var keyFrameIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var keyFramesLength = skrollable.keyFrames.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; keyFrameIndex < keyFramesLength; keyFrameIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var frame = skrollable.keyFrames[keyFrameIndex];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var easing;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var value;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var prop;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var props = {};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var match;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>while((match = rxPropValue.exec(frame.props)) !== null) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>prop = match[1];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value = match[2];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>easing = prop.match(rxPropEasing);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Is there an easing specified for this prop?<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(easing !== null) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>prop = easing[1];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>easing = easing[2];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>easing = DEFAULT_EASING;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Exclamation point at first position forces the value to be taken literal.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value = value.indexOf('!') ? _parseProp(value) : [value.slice(1)];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Save the prop for this key frame with his value and easing function<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>props[prop] = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value: value,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>easing: easings[easing]<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>frame.props = props;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Parses a value extracting numeric values and generating a format string<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * for later interpolation of the new values in old string.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> *<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * @param val The CSS value to be parsed.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * @return Something like ["rgba(?%,?%, ?%,?)", 100, 50, 0, .7]<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * where the first element is the format string later used<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * and all following elements are the numeric value.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _parseProp = function(val) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var numbers = [];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//One special case, where floats don't work.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//We replace all occurences of rgba colors<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//which don't use percentage notation with the percentage notation.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>rxRGBAIntegerColor.lastIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>val = val.replace(rxRGBAIntegerColor, function(rgba) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return rgba.replace(rxNumericValue, function(n) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return n / 255 * 100 + '%';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Handle prefixing of "gradient" values.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//For now only the prefixed value will be set. Unprefixed isn't supported anyway.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(theDashedCSSPrefix) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>rxGradient.lastIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>val = val.replace(rxGradient, function(s) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return theDashedCSSPrefix + s;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Now parse ANY number inside this string and create a format string.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>val = val.replace(rxNumericValue, function(n) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>numbers.push(+n);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return '{?}';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Add the formatstring as first value.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>numbers.unshift(val);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return numbers;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Fills the key frames with missing left and right hand properties.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * If key frame 1 has property X and key frame 2 is missing X,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * but key frame 3 has X again, then we need to assign X to key frame 2 too.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> *<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * @param sk A skrollable.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _fillProps = function(sk) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Will collect the properties key frame by key frame<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var propList = {};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var keyFrameIndex;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var keyFramesLength;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Iterate over all key frames from left to right<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFrameIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFramesLength = sk.keyFrames.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; keyFrameIndex < keyFramesLength; keyFrameIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_fillPropForFrame(sk.keyFrames[keyFrameIndex], propList);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Now do the same from right to fill the last gaps<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>propList = {};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Iterate over all key frames from right to left<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFrameIndex = sk.keyFrames.length - 1;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; keyFrameIndex >= 0; keyFrameIndex--) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_fillPropForFrame(sk.keyFrames[keyFrameIndex], propList);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _fillPropForFrame = function(frame, propList) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var key;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//For each key frame iterate over all right hand properties and assign them,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//but only if the current key frame doesn't have the property by itself<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(key in propList) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The current frame misses this property, so assign it.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!hasProp.call(frame.props, key)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>frame.props[key] = propList[key];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Iterate over all props of the current frame and collect them<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(key in frame.props) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>propList[key] = frame.props[key];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Calculates the new values for two given values array.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _calcInterpolation = function(val1, val2, progress) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var valueIndex;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var val1Length = val1.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//They both need to have the same length<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(val1Length !== val2.length) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>throw 'Can\'t interpolate between "' + val1[0] + '" and "' + val2[0] + '"';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Add the format string as first element.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var interpolated = [val1[0]];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>valueIndex = 1;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; valueIndex < val1Length; valueIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//That's the line where the two numbers are actually interpolated.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>interpolated[valueIndex] = val1[valueIndex] + ((val2[valueIndex] - val1[valueIndex]) * progress);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return interpolated;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Interpolates the numeric values into the format string.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _interpolateString = function(val) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var valueIndex = 1;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>rxInterpolateString.lastIndex = 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return val[0].replace(rxInterpolateString, function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return val[valueIndex++];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Resets the class and style attribute to what it was before skrollr manipulated the element.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Also remembers the values it had before reseting, in order to undo the reset.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _reset = function(elements, undo) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//We accept a single element or an array of elements.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>elements = [].concat(elements);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollable;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var element;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var elementsIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var elementsLength = elements.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; elementsIndex < elementsLength; elementsIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element = elements[elementsIndex];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollable = _skrollables[element[SKROLLABLE_ID_DOM_PROPERTY]];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Couldn't find the skrollable for this DOM element.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!skrollable) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>continue;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(undo) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Reset class and style to the "dirty" (set by skrollr) values.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element.style.cssText = skrollable.dirtyStyleAttr;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_updateClass(element, skrollable.dirtyClassAttr);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Remember the "dirty" (set by skrollr) class and style.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollable.dirtyStyleAttr = element.style.cssText;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollable.dirtyClassAttr = _getClass(element);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Reset class and style to what it originally was.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element.style.cssText = skrollable.styleAttr;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_updateClass(element, skrollable.classAttr);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Detects support for 3d transforms by applying it to the skrollr-body.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _detect3DTransforms = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_translateZ = 'translateZ(0)';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollr.setStyle(_skrollrBody, 'transform', _translateZ);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var computedStyle = getStyle(_skrollrBody);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var computedTransform = computedStyle.getPropertyValue('transform');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var computedTransformWithPrefix = computedStyle.getPropertyValue(theDashedCSSPrefix + 'transform');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var has3D = (computedTransform && computedTransform !== 'none') || (computedTransformWithPrefix && computedTransformWithPrefix !== 'none');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!has3D) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_translateZ = '';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Set the CSS property on the given element. Sets prefixed properties as well.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollr.setStyle = function(el, prop, val) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var style = el.style;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Camel case.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>prop = prop.replace(rxCamelCase, rxCamelCaseFn).replace('-', '');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Make sure z-index gets a <integer>.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//This is the only <integer> case we need to handle.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(prop === 'zIndex') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(isNaN(val)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//If it's not a number, don't touch it.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//It could for example be "auto" (#351).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>style[prop] = val;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Floor the number.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>style[prop] = '' + (val | 0);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//#64: "float" can't be set across browsers. Needs to use "cssFloat" for all except IE.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else if(prop === 'float') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>style.styleFloat = style.cssFloat = val;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Need try-catch for old IE.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>try {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Set prefixed property if there's a prefix.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(theCSSPrefix) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>style[theCSSPrefix + prop.slice(0,1).toUpperCase() + prop.slice(1)] = val;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Set unprefixed.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>style[prop] = val;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} catch(ignore) {}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Cross browser event handling.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _addEvent = skrollr.addEvent = function(element, names, callback) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var intermediate = function(e) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Normalize IE event stuff.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>e = e || window.event;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!e.target) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>e.target = e.srcElement;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(!e.preventDefault) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>e.preventDefault = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>e.returnValue = false;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return callback.call(this, e);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>names = names.split(' ');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var name;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var nameCounter = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var namesLength = names.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; nameCounter < namesLength; nameCounter++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>name = names[nameCounter];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(element.addEventListener) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element.addEventListener(name, callback, false);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element.attachEvent('on' + name, intermediate);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Remember the events to be able to flush them later.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_registeredEvents.push({<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element: element,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>name: name,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>listener: callback<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _removeEvent = skrollr.removeEvent = function(element, names, callback) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>names = names.split(' ');<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var nameCounter = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var namesLength = names.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; nameCounter < namesLength; nameCounter++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(element.removeEventListener) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element.removeEventListener(names[nameCounter], callback, false);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element.detachEvent('on' + names[nameCounter], callback);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _removeAllEvents = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var eventData;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var eventCounter = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var eventsLength = _registeredEvents.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; eventCounter < eventsLength; eventCounter++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>eventData = _registeredEvents[eventCounter];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_removeEvent(eventData.element, eventData.name, eventData.listener);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_registeredEvents = [];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _reflow = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var pos = _instance.getScrollTop();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Will be recalculated by _updateDependentKeyFrames.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_maxKeyFrame = 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_forceHeight && !_isMobile) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//un-"force" the height to not mess with the calculations in _updateDependentKeyFrames (#216).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>body.style.height = 'auto';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_updateDependentKeyFrames();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_forceHeight && !_isMobile) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//"force" the height.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>body.style.height = (_maxKeyFrame + documentElement.clientHeight) + 'px';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The scroll offset may now be larger than needed (on desktop the browser/os prevents scrolling farther than the bottom).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_isMobile) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_instance.setScrollTop(Math.min(_instance.getScrollTop(), _maxKeyFrame));<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Remember and reset the scroll pos (#217).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_instance.setScrollTop(pos, true);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>_forceRender = true;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/*<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Returns a copy of the constants object where all functions and strings have been evaluated.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _processConstants = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var viewportHeight = documentElement.clientHeight;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var copy = {};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var prop;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var value;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(prop in _constants) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value = _constants[prop];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(typeof value === 'function') {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value = value.call(_instance);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Percentage offset.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>else if((/p$/).test(value)) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value = (value.slice(0, -1) / 100) * viewportHeight;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>copy[prop] = value;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return copy;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/*<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Returns the height of the document.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _getDocumentHeight = function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var skrollrBodyHeight = (_skrollrBody && _skrollrBody.offsetHeight || 0);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var bodyHeight = Math.max(skrollrBodyHeight, body.scrollHeight, body.offsetHeight, documentElement.scrollHeight, documentElement.offsetHeight, documentElement.clientHeight);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return bodyHeight - documentElement.clientHeight;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Returns a string of space separated classnames for the current element.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Works with SVG as well.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _getClass = function(element) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var prop = 'className';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//SVG support by using className.baseVal instead of just className.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(window.SVGElement && element instanceof window.SVGElement) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element = element[prop];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>prop = 'baseVal';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return element[prop];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Adds and removes a CSS classes.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Works with SVG as well.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * add and remove are arrays of strings,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * or if remove is ommited add is a string and overwrites all classes.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _updateClass = function(element, add, remove) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var prop = 'className';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//SVG support by using className.baseVal instead of just className.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(window.SVGElement && element instanceof window.SVGElement) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element = element[prop];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>prop = 'baseVal';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//When remove is ommited, we want to overwrite/set the classes.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(remove === undefined) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element[prop] = add;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Cache current classes. We will work on a string before passing back to DOM.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var val = element[prop];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//All classes to be removed.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var classRemoveIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var removeLength = remove.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; classRemoveIndex < removeLength; classRemoveIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>val = _untrim(val).replace(_untrim(remove[classRemoveIndex]), ' ');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>val = _trim(val);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//All classes to be added.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var classAddIndex = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var addLength = add.length;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>for(; classAddIndex < addLength; classAddIndex++) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Only add if el not already has class.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(_untrim(val).indexOf(_untrim(add[classAddIndex])) === -1) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>val += ' ' + add[classAddIndex];<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element[prop] = _trim(val);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _trim = function(a) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return a.replace(rxTrim, '');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/**<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Adds a space before and after the string.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _untrim = function(a) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return ' ' + a + ' ';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _now = Date.now || function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return +new Date();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _keyFrameComparator = function(a, b) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return a.frame - b.frame;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/*<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Private variables.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> */<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Singleton<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _instance;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>/*<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>A list of all elements which should be animated associated with their the metadata.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Exmaple skrollable with two key frames animating from 100px width to 20px:<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>skrollable = {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>element: <the DOM element>,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>styleAttr: <style attribute of the element before skrollr>,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>classAttr: <class attribute of the element before skrollr>,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>keyFrames: [<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>frame: 100,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>props: {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value: ['{?}px', 100],<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>easing: <reference to easing function><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>mode: "absolute"<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>frame: 200,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>props: {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>value: ['{?}px', 20],<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>easing: <reference to easing function><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>},<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>mode: "absolute"<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>]<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>};<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>*/<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _skrollables;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _skrollrBody;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _listeners;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _forceHeight;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _maxKeyFrame = 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _scale = 1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _constants;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _mobileDeceleration;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Current direction (up/down).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _direction = 'down';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The last top offset value. Needed to determine direction.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _lastTop = -1;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The last time we called the render method (doesn't mean we rendered!).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _lastRenderCall = _now();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//For detecting if it actually resized (#271).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _lastViewportWidth = 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _lastViewportHeight = 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _requestReflow = false;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Will contain data about a running scrollbar animation, if any.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _scrollAnimation;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _smoothScrollingEnabled;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _smoothScrollingDuration;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Will contain settins for smooth scrolling if enabled.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _smoothScrolling;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Can be set by any operation/event to force rendering even if the scrollbar didn't move.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _forceRender;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Each skrollable gets an unique ID incremented for each skrollable.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The ID is the index in the _skrollables array.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _skrollableIdCounter = 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _edgeStrategy;<br />
<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Mobile specific vars. Will be stripped by UglifyJS when not in use.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _isMobile = false;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//The virtual scroll offset when using mobile scrolling.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _mobileOffset = 0;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//If the browser supports 3d transforms, this will be filled with 'translateZ(0)' (empty string otherwise).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _translateZ;<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Will contain data about registered events by skrollr.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _registeredEvents = [];<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>//Animation frame id returned by RequestAnimationFrame (or timeout when RAF is not supported).<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var _animFrame;<br />
}(window, document));<br />
<br />
---------------------------------------skrollr.js END---------------------------------------------<br />
--------------------------------------------------------------------------------------------<br />
<br />
---------------------------------------main.js---------------------------------------------<br />
--------------------------------------------------------------------------------------------<br />
<br />
<br />
jQuery(document).ready(function($){<br />
<br />
if(parseInt($(window).width()) > 1199)<br />
{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Setup variables<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$window = $(window);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$slide = $('.homeSlide');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$body = $('body');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
//FadeIn all sections <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$body.imagesLoaded( function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>setTimeout(function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> // Resize sections<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> adjustWindow();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> // Fade in sections<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> $body.removeClass('loading').addClass('loaded');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}, 00);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>function adjustWindow(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Init Skrollr<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var s = skrollr.init({<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> forceHeight: false,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> render: function(data) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> //Debugging - Log the current scroll position.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> //console.log(data.curTop);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> }<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Get window size<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> winH = $window.height();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> // Keep minimum height 550<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> if(winH <= 550) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>winH = 550;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> // Resize our slides<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> // $slide.height(winH);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> // Refresh Skrollr after resizing our sections<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> s.refresh($('.homeSlide'));<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span> <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
} );<br />
<br />
--------------------------------------------------------------------------------------------<br />
---------------------------------------main.js End-------------------------------------<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-29434623417180705802015-02-25T20:15:00.002-08:002015-02-26T22:26:30.689-08:00Back To Top<div dir="ltr" style="text-align: left;" trbidi="on">
http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/<br />
<br />
------------------------------------------------------------------------------------------------------------<br />
<br />
<pre class="brush: js xml"><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#"</span> <span class="attribute">class</span>=<span class="value">"back-to-top"</span>></span>Back to Top<span class="tag"></<span class="title">a</span>></span></pre>
<pre class="brush: js xml"><span class="tag">
</span></pre>
<pre class="brush: js xml"><span class="tag">
</span></pre>
<pre class="brush: js xml"><style></pre>
<pre class="brush: js xml"><pre class="brush: js css"><span class="class">.back-to-top</span> <span class="rules">{
<span class="rule"><span class="attribute">position</span>:<span class="value"> fixed</span>;</span>
<span class="rule"><span class="attribute">bottom</span>:<span class="value"> <span class="number">2</span>em</span>;</span>
<span class="rule"><span class="attribute">right</span>:<span class="value"> <span class="number">0</span>px</span>;</span>
<span class="rule"><span class="attribute">text-decoration</span>:<span class="value"> none</span>;</span>
<span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#000000</span></span>;</span>
<span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="function">rgba(<span class="number">235</span>, <span class="number">235</span>, <span class="number">235</span>, <span class="number">0.80</span>)</span></span>;</span>
<span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">12</span>px</span>;</span>
<span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">1</span>em</span>;</span>
<span class="rule"><span class="attribute">display</span>:<span class="value"> none</span>;</span>
<span class="rule">}</span></span>
<span class="class">.back-to-top</span><span class="pseudo">:hover</span> <span class="rules">{
<span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="function">rgba(<span class="number">135</span>, <span class="number">135</span>, <span class="number">135</span>, <span class="number">0.50</span>)</span></span>;</span>
<span class="rule">}</span></span></pre>
</pre>
<pre class="brush: js xml"><span class="tag"></style></span></pre>
<pre class="brush: js xml"><span class="tag">
</span></pre>
<pre class="brush: js xml"><span class="tag">
</span></pre>
<pre class="brush: js xml"><span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"</span>></span></pre>
<pre class="brush: js xml"><span class="tag">
</span></pre>
<pre class="brush: js xml"><span class="tag"><script></span></pre>
<pre class="brush: js xml"><span class="tag">jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});</span></pre>
<pre class="brush: js xml"><span class="tag"></script></span></pre>
<pre class="brush: js xml"><span class="tag">
</span></pre>
<pre class="brush: js xml"><span class="tag">
</span></pre>
</div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-7890596095152322012015-02-08T02:00:00.001-08:002015-02-08T02:00:18.318-08:00<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-8025146214006410352015-02-08T01:58:00.001-08:002015-02-08T01:58:17.218-08:00<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-72029306594830261162015-02-08T01:56:00.002-08:002015-02-08T01:56:26.670-08:00Piyush Marvaniya<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-32350507832687997572014-01-23T21:49:00.002-08:002014-02-20T02:28:05.658-08:00Menu Active Button <div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-KWELD2_42vI/UuH-t4dpOZI/AAAAAAAABRc/5B1oQsy1DLM/s1600/onclick.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-KWELD2_42vI/UuH-t4dpOZI/AAAAAAAABRc/5B1oQsy1DLM/s1600/onclick.jpg" height="101" width="320" /><br /><script src="http://code.jquery.com/jquery-1.8.3.js" /> </script><br /><script><br />$(document).ready(function() { alert('Active Button')<br />$("span").on("click", function() {<br /> $(this).siblings().removeClass('active').end().addClass("active");<br />});<br />});<br /></script><br /><br /><style><br />#text1 { padding:2px 8px; margin:3px; }<br />.active<br /> { background:red; color:#fff; }<br /></style><br /><br /></head><br /><body><br /><div id="text"><br /><span class="text_1 active" id="text1">Home</span><br /><span class="text_2" id="text1">About</span><br /><span class="text_3" id="text1">Contact</span><br /><span class="text_4" id="text1">Faq's</span><br /></div></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<ul>
<li><pre class="default prettyprint prettyprinted"><code><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">'text/javascript'</span><span class="tag">></span><span class="pln">
$</span><span class="pun">(</span><span class="pln">window</span><span class="pun">).</span><span class="pln">load</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
$</span><span class="pun">(</span><span class="str">"#main-menu a"</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'.active'</span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">'active'</span><span class="pun">);</span><span class="pln">
$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"active"</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="pun">});></span><span class="pln">
</span><span class="tag"></script></span><span class="pln">
</span><span class="tag"><style></span><span class="pln">
</span><span class="pun">.</span><span class="pln">active </span><span class="pun">{</span><span class="kwd">font-weight</span><span class="pun">:</span><span class="pln">bold</span><span class="pun">}</span><span class="pln">
</span><span class="tag"></style></span><span class="pln">
</span><span class="com"><!--Navigation--></span><span class="pln">
</span><span class="tag"><nav</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"main-menu"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"right"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Home</span><span class="tag"></a></li></span><span class="pln">
</span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Test Link 1</span><span class="tag"></a></li></span><span class="pln">
</span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Test Link 2</span><span class="tag"></a></li></span><span class="pln">
</span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Test Link 3</span><span class="tag"></a></li></span><span class="pln">
</span><span class="tag"></ul></span><span class="pln">
</span><span class="tag"></nav></span></code></pre>
</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-68487749804470395852014-01-02T04:59:00.001-08:002014-01-02T05:03:10.723-08:00How do I use a gradient as a font color in CSS?<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
http://jsfiddle.net/HzzHA/ { Firefox }<br />
<br />
http://jsfiddle.net/3rvsm/ { Chrome}</div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-1975662291454172972013-12-23T01:34:00.001-08:002014-01-02T21:45:48.129-08:00Current Time Watches<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-EWhv78zdO6M/UrgFkxv-YMI/AAAAAAAABP0/5bUeqIR0kGc/s1600/wac.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-EWhv78zdO6M/UrgFkxv-YMI/AAAAAAAABP0/5bUeqIR0kGc/s1600/wac.png" /></a></div>
<br />
<script src="http://24timezones.com/js/swfobject.js" language="javascript"></script><br />
<script src="http://24timezones.com/timescript/cities2_countries/maindata.js.php?city=1000247374" language="javascript"></script><br />
<table><tr><td><div id="flash_container_tt52b40fd429f76"></div><script type="text/javascript"><br />
var flashMap = new SWFObject("http://24timezones.com/timescript/clock_final.swf", "main", "175", "175", "7.0.22", "#FFFFFF", true)<br />
flashMap.addParam("movie", "http://24timezones.com/timescript/clock_final.swf");<br />
flashMap.addParam("quality", "high");<br />
flashMap.addParam("wmode", "transparent");<br />
flashMap.addParam("flashvars", "color=FF00FF&logo=1&city=1000247374");<br />
flashMap.write("flash_container_tt52b40fd429f76"); <br />
</script></td></tr><tr><td style="text-align: center; font-weight: bold"><a href="http://24timezones.com/current_local/india_time.php" target="_blank" style="text-decoration: none" title="timezones India">India</a></td></tr></table></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-79304465608573666942013-11-21T05:50:00.002-08:002014-01-30T22:35:21.228-08:00Placeholder IE using jquery for html5 <div dir="ltr" style="text-align: left;" trbidi="on">
<style><br />
.placeholder { color:#999; }<br />
</style><br />
<br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><br />
</script><br />
<script><br />
// A jQuery based placeholder polyfill<br />
$(document).ready(function(){<br />
function add() {<br />
if($(this).val() === ''){<br />
$(this).val($(this).attr('placeholder')).addClass('placeholder');<br />
}<br />
}<br />
<br />
function remove() {<br />
if($(this).val() === $(this).attr('placeholder')){<br />
$(this).val('').removeClass('placeholder');<br />
}<br />
}<br />
<br />
// Create a dummy element for feature detection<br />
if (!('placeholder' in $('<input>')[0])) {<br />
<br />
// Select the elements that have a placeholder attribute<br />
$('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);<br />
<br />
// Remove the placeholder text before the form is submitted<br />
$('form').submit(function(){<br />
$(this).find('input[placeholder], textarea[placeholder]').each(remove);<br />
});<br />
}<br />
});<br />
<br />
</script><br />
</head><br />
<body><br />
<input type='text' name='email' placeholder='Email Address'/><br />
<input type='password' name='password' placeholder='Password'/><br />
</div></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-37961539090548413012013-11-19T03:53:00.000-08:002013-11-19T03:54:31.165-08:00Add ( DIV ) js<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript"> <br />
$(window).load(function(){ <br />
var i=0; <br />
$("#uniform-account_type > span").each(function(){<br />
$(this).append("<div class='blk'></div>");<br />
i++;<br />
})<br />
}); <br />
</script></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-49243531221201850162013-10-03T21:17:00.002-07:002014-01-29T01:45:20.363-08:00 Add Remove Class Onclick For Checkbox AND jQuery addClass() Method<div dir="ltr" style="text-align: left;" trbidi="on">
<!doctype html><br />
<html lang="en"><br />
<head><br />
<meta charset="utf-8"><br />
<title>button demo</title><br />
<style><br />
.is-checked { color:red; }<br />
</style><br />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script><br />
</head><br />
<body><br />
<br />
<div class="fix_header"> <br />
<div class="test"> Add Remove Class </div><br />
<input type="checkbox" id="check"><br />
</div><br />
<script><br />
$(window).load(function(){<br /> $('#check').attr('checked',false);<br />}) <br />
$(function () {<br />
$('.fix_header > input[type="checkbox"], input[type="radio"]').each(function () {<br />
$(this).on('click', function () {<br />
$(this).parent().wrap('<div>').unwrap(); <br />
// works great for checkboxes, but not for radios<br />
if ($(this).prop('checked')) {<br />
<br />
$('div.test').addClass('is-checked');<br />
} else {<br />
$('div.test').removeClass('is-checked');<br />
}<br />
})<br />
})<br />
})<br />
</script><br />
</body><br />
</html><br />
<br />
-----------------------------------------------------------------<br />
<h2>
checkbox id display none</h2>
-----------------------------------------------------------------<br />
<script src="http://code.jquery.com/jquery.js"></script><br />
<br />
<script><br />
jQuery(document).ready(function () {<br />
<br />
$('input.pokazkontakt').each(function(){<br />
if ($(this).is(':checked')) {<br />
$(this).parent().nextAll('.pkbox:first').css('display', 'none');<br />
} else {<br />
$(this).parent().nextAll('.pkbox:first').css('display', 'block'); <br />
}<br />
});<br />
<br />
$('input.pokazkontakt').click(function () {<br />
$(this).parent().nextAll('.pkbox:first').toggle('fast');<br />
});<br />
});<br />
</script><br />
<br />
<title>Checked Box</title><br />
</head><br />
<body><br />
<br />
<h3><input type="checkbox" checked="checked" class="pokazkontakt">Bla bla</h3><br />
<div class="pkbox">bla bla</div> <br />
----------------------------------------------------------------- <br />
<br />
<br />
-----------------------------------------------------------------<br />
<h2>
jQuery addClass() Method</h2>
-----------------------------------------------------------------<br />
<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><br />
</script><br />
<script><br />
$(document).ready(function(){<br />
$(".button").click(function(){<br />
$("#div1").addClass("important blue");<br />
});<br />
});<br />
</script><br />
<style type="text/css"><br />
.important<br />
{<br />
font-weight:bold;<br />
font-size:xx-large;<br />
}<br />
.blue<br />
{<br />
display:none;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<div id="div1">This is some text.</div><br />
<div id="div2">This is some text.</div><br />
<br><br />
<div class="button">Button</div><br />
<br />
</body><br />
</html> </div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-47803106657018525372013-09-26T04:51:00.002-07:002013-09-26T04:51:49.825-07:00 Center - Middle Dynamic Code For IE Browser Sported...<div dir="ltr" style="text-align: left;" trbidi="on">
<style><br />
html, body {<br /> height: 100%;<br /> background: #0099FF;<br />}<br />.inlay {<br /> height: 100%;<br /> text-align: center;<br />}<br /><br />.inlay img {<br /> vertical-align: middle;<br />}<br />.helper {<br /> display: inline-block;<br /> height: 100%;<br /> vertical-align: middle;<br />}<br /></style><br />
<br />
<div class="inlay"><br /> <span class="helper"></span><img src="../yourImages.jpg" /> <br /> IE Browser Sported Center-Middle Images Dynamic Code<br /></div></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-40577984714422082112013-08-20T21:38:00.002-07:002013-08-20T21:38:34.401-07:00Audio Play/Stop and up-down - HTML <div dir="ltr" style="text-align: left;" trbidi="on">
<style><br />.play,<br />.pause,<br />.up,<br />.down { background:#999999; float:left; margin:0px; padding:0px;<br /> border:2px solid #333333; color:#fff; padding:3px; cursor:pointer; }<br /></style><br />
<br />
<body><br /> <audio autoplay id="player" src="sound/audio.wav"></audio><br /><div><br /> <button onclick="document.getElementById('player').play()" class="play">Play</button><br /> <button onclick="document.getElementById('player').pause()" class="pause">Pause</button><br /> <button onclick="document.getElementById('player').volume+=0.1" class="up">Volume Up</button><br /> <button onclick="document.getElementById('player').volume-=0.1" class="down">Volume Down</button><br /></div><br /></body></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-65097728533265607212013-08-15T21:34:00.000-07:002013-08-15T21:34:09.150-07:00Create a simple CSS Dropdown Menu..<div dir="ltr" style="text-align: left;" trbidi="on">
<style><br />ul {<br /> font-family: Arial, Verdana;<br /> font-size: 14px;<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br />}<br />ul li {<br /> display: block;<br /> position: relative;<br /> float: left;<br />}<br />li ul {<br /> display: none;<br />}<br />ul li a {<br /> display: block;<br /> text-decoration: none;<br /> color: #ffffff;<br /> border-top: 1px solid #ffffff;<br /> padding: 5px 15px 5px 15px;<br /> background: #1e7c9a;<br /> margin-left: 1px;<br /> white-space: nowrap;<br />}<br />ul li a:hover {<br />background: #3b3b3b;<br />}<br />li:hover ul {<br /> display: block;<br /> position: absolute;<br />}<br />li:hover li {<br /> float: none;<br /> font-size: 11px;<br />}<br />li:hover a { background: #3b3b3b; }<br />li:hover li a:hover {<br /> background: #1e7c9a;<br />} <br /></style><br /><br /></head><br /><body><br /><ul id="menu"><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About Us</a><br /> <ul><br /> <li><a href="#">The Team</a></li><br /> <li><a href="#">History</a></li><br /> <li><a href="#">Vision</a></li><br /> </ul><br /> </li><br /> <li><a href="#">Products</a><br /> <ul><br /> <li><a href="#">Cozy Couch</a></li><br /> <li><a href="#">Great Table</a></li><br /> <li><a href="#">Small Chair</a></li><br /> <li><a href="#">Shiny Shelf</a></li><br /> <li><a href="#">Invisible Nothing</a></li><br /> </ul><br /> </li><br /> <li><a href="#">Contact</a><br /> <ul><br /> <li><a href="#">Online</a></li><br /> <li><a href="#">Right Here</a></li><br /> <li><a href="#">Somewhere Else</a></li><br /> </ul><br /> </li><br /></ul> <br /><br /></body><br /></html><br />
---------------------------------------------------------------------------------------------------- <br />
You can see a LIVE PREVIEW here <br />
<div id="stcpDiv" style="left: -1988px; position: absolute; top: -1999px;">
You can see a LIVE PREVIEW here</div>
http://www.handy-html.com/wp-content/uploads/2012/02/create-a-simple-css-dropdown-menu.html<br />
---------------------------------------------------------------------------------------------------- </div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-14232440768281201852013-07-31T06:46:00.003-07:002013-10-03T21:20:35.783-07:00(< footer> ) - Tag IE issue.<div dir="ltr" style="text-align: left;" trbidi="on">
If you're using <code><footer></code> (a fancy schmancy HTML5 tag) sometimes IE does not like it. This is how I've fixed issues like this. Add this to your <code><head></code>:<br />
<br />
<script>document.createElement('footer');</script><br />
<br />
It may not be what's causing your issue, but I've notice when trying to use HTML5 tags, IE pretty much ignores them or renders them strangely.</div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-11225415283096133142013-07-25T07:04:00.003-07:002013-11-26T21:06:49.928-08:00PIE.htc - First chaild JS - html5 - css3 ( Spoted in IE 7,8,9 )<div dir="ltr" style="text-align: left;" trbidi="on">
<!-------------PIE.htc and First_chaild Spoted JS for IE 7,8,9 ----------------><br />
<pre><code> </code></pre>
<pre><code> </code></pre>
<pre><code>.class { behavior: url(/pie/PIE.htc); }</code></pre>
<br />
<br />
<!--[if IE 7]><br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script><br />
<![endif]--><br />
<br />
<!--[if IE 8]><br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script><br />
<![endif]--><br />
<br />
<!--[if IE 9]><br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><br />
<![endif]--><br />
<br />
<br />
<!----------------------------------- END -----------------------------------> <br />
<br />
<!------------- HTML5 and css3 Spoted JS for IE 7,8,9 ----------------><br />
<br />
<br />
<!--[if lt IE 9]><br />
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script><br />
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><br />
<![endif]--><br />
<br />
<br />
<!----------------------------------- END -----------------------------------></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-36203743189816375782013-07-25T07:00:00.002-07:002013-07-25T07:00:36.872-07:00Read More HTML ( Dynamically shortened Text with Show More link using jQuery )<div dir="ltr" style="text-align: left;" trbidi="on">
<HTML><br />
<HEAD><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><TITLE>Dynamically shortened Text with Show More link using jQuery</TITLE><br />
<STYLE><br />
body, input{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-family: Calibri, Arial;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 0px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 0px;<br />
}<br />
a {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #0254EB<br />
}<br />
a:visited {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #0254EB<br />
}<br />
#header h2 {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: white;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #00A1E6;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin:0px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 5px;<br />
}<br />
.comment {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 400px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #f0f0f0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 10px;<br />
}<br />
a.morelink {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>text-decoration:none;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>outline: none;<br />
}<br />
.morecontent span {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>display: none;<br />
<br />
}<br />
</STYLE><br />
</HEAD><br />
<BODY><br />
<br />
<br />
<div class="comment more"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Vestibulum laoreet, nunc eget laoreet sagittis,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>quam ligula sodales orci, congue imperdiet eros tortor ac lectus.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Duis eget nisl orci. Aliquam mattis purus non mauris<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>blandit id luctus felis convallis.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Integer varius egestas vestibulum.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Nullam a dolor arcu, ac tempor elit. Donec.<br />
</div><br />
<br />
</BODY><br />
<SCRIPT><br />
$(document).ready(function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var showChar = 100;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var ellipsestext = "...";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var moretext = "more";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var lesstext = "less";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.more').each(function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var content = $(this).html();<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(content.length > showChar) {<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var c = content.substr(0, showChar);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var h = content.substr(showChar-1, content.length - showChar);<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).html(html);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(".morelink").click(function(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if($(this).hasClass("less")) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).removeClass("less");<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).html(moretext);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).addClass("less");<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).html(lesstext);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).parent().prev().toggle();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$(this).prev().toggle();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return false;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
});<br />
</SCRIPT><br />
</HTML></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-68327534453500405232013-07-24T22:10:00.002-07:002013-07-24T22:10:58.428-07:00My Photos<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNXe-lAkoDpfySmQk9c0ZQQZhY_L-xzQpwyeLkgF4TfDBYtljmxuhQTTMd4fLZYpUsaOdgdB1tnPTOLeyzdo8Qnl8_D-9D78FPZFPP2_iTthVEDvw0Z17UkFZHS1ZyDUJ7lMo8Bo_9LXU/s1600/p2706+copy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNXe-lAkoDpfySmQk9c0ZQQZhY_L-xzQpwyeLkgF4TfDBYtljmxuhQTTMd4fLZYpUsaOdgdB1tnPTOLeyzdo8Qnl8_D-9D78FPZFPP2_iTthVEDvw0Z17UkFZHS1ZyDUJ7lMo8Bo_9LXU/s320/p2706+copy.jpg" width="217" /></a></div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com1tag:blogger.com,1999:blog-6876892884975238502.post-48532239791020977942013-07-24T21:56:00.003-07:002013-07-24T22:01:27.390-07:00Popup HTML<div dir="ltr" style="text-align: left;" trbidi="on">
<style><br />
.jeup-btn, input.jeup-btn { color:red!important;}<br />
</style><br />
<script type="text/javascript" src="js/jquery-1.js"></script><br />
<script type="text/javascript" src="js/jquery_002.js"></script><br />
<script type="text/javascript" charset="utf-8"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>jQuery(function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>function launch() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#je-popuplogin').lightbox_me({centered: true, onLoad: function() { $('#je-popuplogin').find('input:first').focus()}});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#jepopup').click(function(e) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$("#je-popuplogin").lightbox_me({centered: true, onLoad: function() {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$("#je-popuplogin").find("input:first").focus();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>e.preventDefault();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
</script><br />
<br />
<br />
<div class="menu"><br />
<br />
<a href="#" id="jepopup" class="jeup-btn">Click</a><br />
<br />
<br />
<div style="left: 50%; margin-left: -210px; z-index: 1002; position: fixed; top: 50%; margin-top: -167px; display: none;" id="je-popuplogin"><br />
<div style="background:#fff; float:left; width:250px; height:200px; border:1px solid #666666;"><br />
<div><br />
<a id="close-x" href="#">Close</a><br />
</div><br />
<div style=" padding:20px; "><br />
Remember Me<br />
</div> <br />
</div> <br />
</div><br />
<br />
</div></div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-47542350226485927292013-07-24T21:36:00.002-07:002013-07-24T21:36:22.803-07:00RESPONSIVE CSS<div dir="ltr" style="text-align: left;" trbidi="on">
/*********- RESPONSIVE CSS -*****************<br />
smaller than 980<br />
*************************************************************************************/<br />
@media screen and (max-width: 980px) {<br />
<br />
}<br />
<br />
/************************************************************************************<br />
smaller than 650<br />
*************************************************************************************/<br />
@media screen and (max-width: 650px) {<br />
<br />
}<br />
<br />
/************************************************************************************<br />
smaller than 560<br />
*************************************************************************************/<br />
@media screen and (max-width: 480px) {<br />
/* disable webkit text size adjust (for iPhone) */<br />
<br />
}</div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-11981454056615834312013-07-24T21:34:00.000-07:002013-12-06T04:35:20.151-08:00 Specific Browser CSS<div dir="ltr" style="text-align: left;" trbidi="on">
/*-------- Chrome Safari -------------*/<br />
@media screen and (-webkit-min-device-pixel-ratio:0)<br />
{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>.test { <br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 5px 5px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} <span class="Apple-tab-span" style="white-space: pre;"> </span><br />
}<br />
/*-------- Chrome Safari END -------*/<br />
<br />
<br />
/*--------------- Safari -------------*/<br />
@media screen and (-webkit-min-device-pixel-ratio:0) { <br />
/* Safari and Chrome */<br />
body { background:#00CCCC; }<br />
<br />
/* Safari only override */<br />
body { background:#00CCCC; } <br />
::i-block-chrome, body { background:#FF0000; }<br />
}<br />
/*-------------- Safari End -------------*/<br />
<br />
<br />
<br />
/*-------------- Opera ----------------*/<br />
@media not all and (-webkit-min-device-pixel-ratio:0) { <br />
--- opera old version -----<br />
}<br />
<br />
@media not screen and (1) { /* OPERA 11.00 */<br />input[type="radio"] { <br />box-sizing: content-box;<br />height: 3px !important;<br />width: 3px !important;<br />float:left!important;<br />}<br />}<br />
<br />
@media (min-resolution: .001dpcm) {<br />
Opera 12+Somthing <br />
} <br />
/*------------ Opera END ---------*/<br />
<br />
<br />
<br />
<br />
/*-------------- IE 8---------------*/<br />
@media \0screen {<br />
<br />
}<br />
/*----------- IE 8 END ---------*/<br />
<br />
<br />
/*--------- IE - 10 --------------*/<br />
@media \0screen { <br />
<br />
}<br />
/*------ ie10 end ---------------*/<br />
<br />
<br />
/*---------- IE 6, 7 and 8 -------*/<br />
@media \0screen\,screen\9 {<br />
<br />
}<br />
/*---------IE 6, 7 and 8 END ---------*/<br />
<br />
<br />
<br />
<br />
========================================= <br />
============== Other Demos ================ <br />
=========================================<br />
<br />
=============== Safsri =====================<br />
<style><br />
.safari .example { background:#996699; }<br />
</style> <br />
<br />
<body><br />
<script><br />
if (navigator.userAgent.indexOf('Safari') != -1 && <br />
navigator.userAgent.indexOf('Chrome') == -1) {<br />
document.body.className += " safari";<br />
}<br />
</script><br />
</body> <br />
=============== Safsri End===================<br />
<br />
<br />
<br />
<br />
<body><br />
<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script><br />
</body> <br />
<br />
<br />
<style type="text/css"><br />
<br />
/*---IE-All---*/<br />
.ie .example {<br />
background-color: yellow;<br />
}<br />
<br />
/*---IE-7---*/<br />
.ie7 .example {<br />
background-color: orange;<br />
}<br />
<br />
.gecko .example {<br />
background-color: gray;<br />
}<br />
<br />
/*---Fire-Fox---*/<br />
.win.gecko .example {<br />
background-color: red;<br />
}<br />
<br />
.linux.gecko .example {<br />
background-color: pink;<br />
}<br />
/*---Opera---*/<br />
.opera .example {<br />
background-color: green;<br />
}<br />
<br />
.konqueror .example {<br />
background-color: blue;<br />
}<br />
<br />
/*---Safari---*/<br />
.webkit .example {<br />
background-color: black;<br />
}<br />
.example {<br />
width: 100px;<br />
height: 100px;<br />
}<br />
.no_js { display: block }<br />
.has_js { display: none }<br />
.js .no_js { display: none }<br />
.js .has_js { display: block }<br />
</style><br />
<br />
</head><br />
<br />
</html><br />
<br />
=========================================<br />
=========================================<br />
<br />
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--><br />
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--><br />
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--><br />
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]--> <br />
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><br />
<br />
.ie7 .example {<br />
background-color: orange;<br />
}<br />
.ie8 .example {<br />
background-color: orange;<br />
}<br />
.ie9 .example {<br />
background-color: orange;<br />
}<br />
<br />
<br />
========================================= <br />
========= Compatible View Issue IE 7,8,9 ========<br />
<br />
This is how I've fixed issues like this. Add this to your<br />
<head><br />
<br />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> <br />
<br />
<br />
========= Compatible View Issue IE 7,8,9 ======== <br />
========================================= </div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0tag:blogger.com,1999:blog-6876892884975238502.post-39308335069289543062013-02-16T06:06:00.003-08:002013-02-16T06:08:27.746-08:00Piyush Marvaniya<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMOuZTiTWsxu6x3oYvITwVGdipdTyYpfsTEE2hKeJk0ua2WpDcyyjal4H63KS7s1NeV0HJtx8Py7iQSBAWQF2XBWe4ZOViC7sk0iegV_lOQPbYGNyQPTfc_k8pr4B4LF7MqAtUiyLZy0/s1600/piyu.jpg.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMOuZTiTWsxu6x3oYvITwVGdipdTyYpfsTEE2hKeJk0ua2WpDcyyjal4H63KS7s1NeV0HJtx8Py7iQSBAWQF2XBWe4ZOViC7sk0iegV_lOQPbYGNyQPTfc_k8pr4B4LF7MqAtUiyLZy0/s1600/piyu.jpg.jpg" /></a></div>
Hiiiiiiiiiiiiiiiiiiiiiiii</div>
Anonymoushttp://www.blogger.com/profile/06211431551726095958noreply@blogger.com0Ahmedabad, Gujarat, India23.0395677 72.56600449999996322.8057432 72.243280999999968 23.2733922 72.888727999999958