Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //iWebKit 6.0 Fullscreen + Slide + touch=hover
- function create_elements()
- {
- var inside_html = "<div class='switch' onmousedown='event.preventDefault ? event.preventDefault() : event.returnValue = false'></div>";
- $('.toggle_box').each(function(){
- $(this).attr('state','off');
- $(this).html(inside_html);
- $('.switch',this).css({'top':($(this).height()/2 - $('.switch',this).height()/2)});
- });
- }
- function set_listeners()
- {
- $('.toggle_box').mousedown(slide_begin);
- $('.toggle_box').mousemove(slide_move);
- $('.toggle_box').mouseup(slide_end);
- $('.toggle_box').mouseout(slide_end);
- $('.toggle_box').bind('touchstart',touch_start);
- $('.toggle_box').bind('touchmove',touch_move);
- $('.toggle_box').bind('touchend',slide_end);
- }
- function touch_start(e)
- {
- var parent = $(e.currentTarget);
- var target = $('.switch',parent);
- target.stop();
- beginTouchDown = parseInt(e.originalEvent.touches[0].pageX,10)-(target.offset().left - parent.offset().left);
- }
- function touch_move(e)
- {
- e.preventDefault();
- var parent = $(e.currentTarget);
- var parentOffset = parent.offset().left;
- var target = $('.switch',parent);
- var currentLeft = 0;
- var toMove = parseInt(e.originalEvent.touches[0].pageX,10)-beginTouchDown+currentLeft;
- if(!(toMove+parentOffset+target.width() > parentOffset+parent.width())&&(toMove+parentOffset > parentOffset))
- {
- target.css({'left':toMove+"px"});
- $(target).parent().css({'background-position': + 94 + toMove+"px -37px"});
- check_place(target);
- }
- }
- function slide_move(e)
- {
- if(mouseDown === true)
- {
- var parent = $(e.currentTarget);
- var target = $('.switch',parent);
- var parentOffset = parent.offset().left;
- var toMove = e.pageX-parentOffset-target.width()/2;
- if(!(toMove+parentOffset+target.width() > parentOffset+parent.width())&&(toMove+parentOffset > parentOffset))
- {
- target.css({'left':toMove+"px"});
- $(target).parent().css({'background-position': + 94 + toMove+"px -37px"});
- check_place(target);
- }
- }
- }
- function slide_begin(e)
- {
- var target = $('.switch',e.currentTarget);
- if(target.is(':animated'))
- {
- target.stop();
- }
- mouseDown = true;
- }
- function slide_end(e)
- {
- mouseDown = false;
- check_place($('.switch',e.currentTarget));
- slide_to_state($('.switch',e.currentTarget));
- }
- function slide_to_state(target)
- {
- var toMove = target.attr('state') === "on" ? target.parent().width()-target.width() : 0;
- target.animate({'left':toMove+"px"});
- $(target).parent().css({'background-position': + 94 + toMove+"px -37px"});
- }
- function check_place(target)
- {
- if(target.offset().left+target.width()/2 > target.parent().offset().left+target.parent().width()/2)
- {
- target.attr('state','on').addClass('active');
- }
- else
- {
- target.attr('state','off').removeClass('active');
- }
- }
- function hijackLinks() {
- $('a').live("click", function (e) {
- e.preventDefault();
- if(direction != "leftnav" && direction != "rightnav"){setTimeout(function () {$(this).addClass('click')}, 10);};
- var linkhref = $(this).attr('href');
- window.location.hash = linkhref;
- });
- $('a,input,fieldset[data-input-type=button],select,fieldset[data-input-type=select],footer a').live("touchstart", function (e) {
- direction = $(this).attr('class');
- if(direction != "leftnav" && direction != "rightnav"){$(this).addClass('temp');
- setTimeout(function () {
- $('.temp').addClass('click');
- }, 100);}
- else{$(this).addClass('click');};
- if(direction == "leftnav" || direction == "rightnav"){$('.click').live("touchend", function (e) {
- $('.click').removeClass('click');
- });
- }
- });
- $('a').live("touchmove", function (e) {
- $('.temp').removeClass('temp');
- $('.click').removeClass('click');
- });
- $('select,fieldset[data-input-type=select]').live("click", function (e) {
- $('.temp').removeClass('temp');
- $('.click').removeClass('click');
- });
- $('input,select,fieldset[data-input-type=select]').live("touchmove change", function (e) {
- var inputvalue = $(this).val()
- $('input[value="' + inputvalue + '"] + label').css({
- '-webkit-transition': 'opacity 0.2s linear'});
- if (e.type == 'touchmove'){
- $('input[value="' + inputvalue + '"] + label').css({'-webkit-transition': '0',
- 'opacity': '1'});
- $('.temp').removeClass('temp');
- $('.click').removeClass('click');}
- else{$('input[value="' + inputvalue + '"] + label').addClass('click')
- var inputvalue = $(this).val()
- $('input[value="' + inputvalue + '"] + label').css({
- 'opacity': '0'
- });
- setTimeout(function () {
- $('input[value="' + inputvalue + '"] + label').css({'-webkit-transition': '0',
- 'opacity': '1'});
- $('.temp').removeClass('temp');
- $('.click').removeClass('click');
- }, 200);}
- });
- };
- function loadPage(url) {
- currenthash = window.location.hash.substring(1);
- if (currenthash === "") {
- currenthash = "window.location";
- }
- if (url === undefined && currenthash != "") {
- $('body').load(currenthash, 'header:first,#content,footer', hijackLinks);
- } else {
- $.get(url, function (data) {
- $('body').append(data);
- sm = $(window).width();
- sn = $(window).scrollTop();
- window.scrollTo(0, 0);
- if (direction === "leftnav") {
- $('body>#content:last,footer:last,body>header:last>h1').css("-webkit-transform", "translate( -" + sm + "px,0px)");
- $('body>header:last>nav').css("-webkit-transform", "translate(-" +sm/2+"px, 0px)");
- footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true);
- $('footer:last').css("top", footerheight);
- $('body>header,body>#content,footer,body>header:last>nav,body>header:last>h1,body>header:first>nav,body>header:first>h1,body>header:first').css("-webkit-transition-duration", "0.4s");
- $('body>header:first>h1,body>#content:first,footer:first').css("-webkit-transform", "translate(" + sm + "px,0px)");
- $('body>header:first>nav').css("-webkit-transform", "translate(" +sm/2+"px, 0px)");
- $('body>#content:last,footer:last,body>header:last>nav,body>header:last>h1,body>header:last div').css({
- "-webkit-transform": "translate(0,0)"
- });
- $('body>header:last a.leftnav,body>header:last a.rightnav').css({
- '-webkit-transition': 'opacity 0.4s linear',
- 'opacity': '1'
- });
- $('body>header:first a.leftnav,body>header:first a.rightnav').css({
- '-webkit-transition': 'opacity 0.4s linear',
- 'opacity': '0'
- });
- setTimeout(function () {
- $('body>header:not(:last),body>footer:not(:last),body>#content:not(:last),body>meta,body>title,body>link,body>style,body>script').remove();
- $('body>header,body>footer,body>#content').removeAttr('style');
- }, 400);
- }
- if (direction !== "leftnav") {
- $('body>#content:last,footer:last,body>header:last>h1').css("-webkit-transform", "translate( " + sm + "px,0px)");
- $('body>header:last>nav').css("-webkit-transform", "translate(" +sm/2+"px, 0px)");
- footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true);
- $('footer:last').css("top", footerheight);
- $('body>header,body>#content,footer,body>header:last>nav,body>header:last>h1,body>header:first>nav,body>header:first>h1,body>header:first').css("-webkit-transition-duration", "0.4s");
- $('body>header:first>h1,body>#content:first,footer:first').css("-webkit-transform", "translate(-" + sm + "px,0px)");
- $('body>header:first>nav').css("-webkit-transform", "translate(-" +sm/2+"px, 0px)");
- $('body>#content:last,footer:last,body>header:last>nav,body>header:last>h1,body>header:last div').css({
- "-webkit-transform": "translate(0,0)"
- });
- $('body>header:last a.leftnav,body>header:last a.rightnav').css({
- '-webkit-transition': 'opacity 0.4s linear',
- 'opacity': '1'
- });
- $('body>header:first a.leftnav,body>header:first a.rightnav').css({
- '-webkit-transition': 'opacity 0.4s linear',
- 'opacity': '0'
- });
- setTimeout(function () {
- $('body>header:not(:last),body>footer:not(:last),body>#content:not(:last),body>meta,body>title,body>link,body>style,body>script').remove();
- $('body>header,body>footer,body>#content').removeAttr('style');
- }, 400);
- }
- });
- }
- }
- $(document).ready(function () {
- var togglebox = "<div class='toggle_box'></div>";
- $('input[type=checkbox]').css('display','none');
- $('fieldset[data-input-type=checkbox]').append(togglebox);
- var mouseDown = false;
- var beginTouchDown = 0;
- create_elements();
- set_listeners();
- loadPage();
- currenthash = window.location.hash.substring(1);
- $(window).bind('hashchange', function () {
- currenthash = window.location.hash.substring(1);
- loadPage(currenthash);
- });
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement