This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on May 16th, 2011  |  syntax: JavaScript  |  size: 10.00 KB  |  views: 112  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. //iWebKit 6.0 Fullscreen + Slide + touch=hover
  2. function create_elements()
  3. {
  4.     var inside_html        =    "<div class='switch' onmousedown='event.preventDefault ? event.preventDefault() : event.returnValue = false'></div>";
  5.     $('.toggle_box').each(function(){
  6.         $(this).attr('state','off');
  7.         $(this).html(inside_html);
  8.         $('.switch',this).css({'top':($(this).height()/2 - $('.switch',this).height()/2)});
  9.     });
  10. }
  11.  
  12.  
  13. function set_listeners()
  14. {
  15.     $('.toggle_box').mousedown(slide_begin);
  16.     $('.toggle_box').mousemove(slide_move);
  17.     $('.toggle_box').mouseup(slide_end);
  18.     $('.toggle_box').mouseout(slide_end);
  19.     $('.toggle_box').bind('touchstart',touch_start);
  20.     $('.toggle_box').bind('touchmove',touch_move);
  21.     $('.toggle_box').bind('touchend',slide_end);    
  22.  
  23. }
  24.  
  25.  
  26. function touch_start(e)
  27. {
  28.      
  29.     var parent         =    $(e.currentTarget);
  30.     var target         =    $('.switch',parent);
  31.     target.stop();
  32.    
  33.     beginTouchDown = parseInt(e.originalEvent.touches[0].pageX,10)-(target.offset().left - parent.offset().left);
  34. }
  35.  
  36. function touch_move(e)
  37. {
  38.     e.preventDefault();
  39.     var parent         =    $(e.currentTarget);
  40.     var parentOffset   =    parent.offset().left;
  41.     var target         =    $('.switch',parent);
  42.     var currentLeft    =    0;
  43.     var toMove         =    parseInt(e.originalEvent.touches[0].pageX,10)-beginTouchDown+currentLeft;
  44.     if(!(toMove+parentOffset+target.width() > parentOffset+parent.width())&&(toMove+parentOffset > parentOffset))
  45.     {
  46.             target.css({'left':toMove+"px"});
  47.                         $(target).parent().css({'background-position': + 94 + toMove+"px -37px"});
  48.                        
  49. check_place(target);
  50.     }
  51.  
  52. }
  53.  
  54. function slide_move(e)
  55. {
  56.     if(mouseDown === true)
  57.     {
  58.         var parent         =    $(e.currentTarget);
  59.         var target         =    $('.switch',parent);
  60.         var parentOffset   =    parent.offset().left;
  61.         var toMove         =    e.pageX-parentOffset-target.width()/2;    
  62.         if(!(toMove+parentOffset+target.width() > parentOffset+parent.width())&&(toMove+parentOffset > parentOffset))
  63.         {
  64.            target.css({'left':toMove+"px"});
  65.                    $(target).parent().css({'background-position': + 94 + toMove+"px -37px"});
  66.             check_place(target);
  67.         }
  68.  
  69.     }
  70.  
  71. }
  72. function slide_begin(e)
  73. {
  74.    var target        =    $('.switch',e.currentTarget);
  75.    if(target.is(':animated'))
  76.    {
  77.        target.stop();
  78.    }
  79.    mouseDown        =    true;
  80. }
  81.  
  82. function slide_end(e)
  83. {
  84.    mouseDown        =    false;
  85.    check_place($('.switch',e.currentTarget));
  86.    slide_to_state($('.switch',e.currentTarget));
  87.    
  88. }
  89.  
  90.  
  91. function slide_to_state(target)
  92. {
  93.     var toMove = target.attr('state') === "on" ? target.parent().width()-target.width() : 0;
  94.     target.animate({'left':toMove+"px"});
  95.          $(target).parent().css({'background-position': + 94 + toMove+"px -37px"});
  96. }
  97. function check_place(target)
  98. {
  99.    
  100.     if(target.offset().left+target.width()/2 > target.parent().offset().left+target.parent().width()/2)
  101.     {
  102.         target.attr('state','on').addClass('active');
  103.     }
  104.     else
  105.     {
  106.         target.attr('state','off').removeClass('active');
  107.     }
  108. }
  109. function hijackLinks() {
  110.     $('a').live("click", function (e) {
  111.         e.preventDefault();        
  112.         if(direction != "leftnav" && direction != "rightnav"){setTimeout(function () {$(this).addClass('click')}, 10);};
  113.         var linkhref = $(this).attr('href');           
  114.         window.location.hash = linkhref;           
  115.     });    
  116.         $('a,input,fieldset[data-input-type=button],select,fieldset[data-input-type=select],footer a').live("touchstart", function (e) {
  117.             direction = $(this).attr('class');
  118.                         if(direction != "leftnav" && direction != "rightnav"){$(this).addClass('temp');
  119.                         setTimeout(function () {
  120.                 $('.temp').addClass('click');
  121.             }, 100);}
  122.             else{$(this).addClass('click');};
  123.                         if(direction == "leftnav" || direction == "rightnav"){$('.click').live("touchend",                      function (e) {
  124.                 $('.click').removeClass('click');
  125.                 });
  126.                 }
  127.            
  128.         });
  129.                
  130.         $('a').live("touchmove", function (e) {
  131.             $('.temp').removeClass('temp');
  132.             $('.click').removeClass('click');
  133.         });    
  134.                 $('select,fieldset[data-input-type=select]').live("click", function (e) {
  135.             $('.temp').removeClass('temp');
  136.             $('.click').removeClass('click');
  137.         });            
  138.                
  139.                         $('input,select,fieldset[data-input-type=select]').live("touchmove change", function (e) {
  140.                                 var inputvalue = $(this).val()
  141.                                 $('input[value="' + inputvalue + '"] + label').css({
  142.                     '-webkit-transition': 'opacity 0.2s linear'});
  143.                         if (e.type == 'touchmove'){
  144.                                 $('input[value="' + inputvalue + '"]  + label').css({'-webkit-transition': '0',
  145.                     'opacity': '1'});
  146.            
  147.                         $('.temp').removeClass('temp');
  148.             $('.click').removeClass('click');}
  149.                         else{$('input[value="' + inputvalue + '"] + label').addClass('click')
  150.                                 var inputvalue = $(this).val()
  151.              $('input[value="' + inputvalue + '"] + label').css({
  152.                     'opacity': '0'
  153.                 });
  154.                         setTimeout(function () {
  155.                                 $('input[value="' + inputvalue + '"]  + label').css({'-webkit-transition': '0',
  156.                     'opacity': '1'});
  157.             $('.temp').removeClass('temp');
  158.             $('.click').removeClass('click');
  159.                         }, 200);}
  160.         });
  161.        };
  162.            
  163.                
  164.                
  165.  
  166.  
  167. function loadPage(url) {
  168.     currenthash = window.location.hash.substring(1);
  169.     if (currenthash === "") {
  170.         currenthash = "window.location";
  171.     }
  172.     if (url === undefined && currenthash != "") {
  173.                 $('body').load(currenthash, 'header:first,#content,footer', hijackLinks);
  174.     } else {
  175.         $.get(url, function (data) {
  176.             $('body').append(data);
  177.             sm = $(window).width();
  178.             sn = $(window).scrollTop();
  179.             window.scrollTo(0, 0);       
  180.                      if (direction === "leftnav") {
  181.                 $('body>#content:last,footer:last,body>header:last>h1').css("-webkit-transform", "translate( -" + sm + "px,0px)");
  182.                                 $('body>header:last>nav').css("-webkit-transform", "translate(-" +sm/2+"px, 0px)");
  183.                                
  184.                                
  185.                 footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true);
  186.                 $('footer:last').css("top", footerheight);
  187.                 $('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");
  188.                 $('body>header:first>h1,body>#content:first,footer:first').css("-webkit-transform", "translate(" + sm + "px,0px)");
  189.                                 $('body>header:first>nav').css("-webkit-transform", "translate(" +sm/2+"px, 0px)");
  190.                 $('body>#content:last,footer:last,body>header:last>nav,body>header:last>h1,body>header:last div').css({
  191.                     "-webkit-transform": "translate(0,0)"
  192.                 });
  193.                                
  194.                 $('body>header:last a.leftnav,body>header:last a.rightnav').css({
  195.                     '-webkit-transition': 'opacity 0.4s linear',
  196.                     'opacity': '1'
  197.                 });
  198.                 $('body>header:first a.leftnav,body>header:first a.rightnav').css({
  199.                     '-webkit-transition': 'opacity 0.4s linear',
  200.                     'opacity': '0'
  201.                 });
  202.                                  setTimeout(function () {
  203.                 $('body>header:not(:last),body>footer:not(:last),body>#content:not(:last),body>meta,body>title,body>link,body>style,body>script').remove();
  204.                 $('body>header,body>footer,body>#content').removeAttr('style');
  205.             }, 400);
  206.                                
  207.             }
  208.             if (direction !== "leftnav") {
  209.                 $('body>#content:last,footer:last,body>header:last>h1').css("-webkit-transform", "translate( " + sm + "px,0px)");
  210.                                 $('body>header:last>nav').css("-webkit-transform", "translate(" +sm/2+"px, 0px)");
  211.                                
  212.                                
  213.                 footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true);
  214.                 $('footer:last').css("top", footerheight);
  215.                 $('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");
  216.                 $('body>header:first>h1,body>#content:first,footer:first').css("-webkit-transform", "translate(-" + sm + "px,0px)");
  217.                                 $('body>header:first>nav').css("-webkit-transform", "translate(-" +sm/2+"px, 0px)");
  218.                 $('body>#content:last,footer:last,body>header:last>nav,body>header:last>h1,body>header:last div').css({
  219.                     "-webkit-transform": "translate(0,0)"
  220.                 });
  221.                                
  222.                 $('body>header:last a.leftnav,body>header:last a.rightnav').css({
  223.                     '-webkit-transition': 'opacity 0.4s linear',
  224.                     'opacity': '1'
  225.                 });
  226.                 $('body>header:first a.leftnav,body>header:first a.rightnav').css({
  227.                     '-webkit-transition': 'opacity 0.4s linear',
  228.                     'opacity': '0'
  229.                 });
  230.                                  setTimeout(function () {
  231.                 $('body>header:not(:last),body>footer:not(:last),body>#content:not(:last),body>meta,body>title,body>link,body>style,body>script').remove();
  232.                 $('body>header,body>footer,body>#content').removeAttr('style');
  233.             }, 400);
  234.             }
  235.         });
  236.     }
  237. }
  238. $(document).ready(function () {
  239.         var togglebox = "<div class='toggle_box'></div>";
  240.         $('input[type=checkbox]').css('display','none');
  241.         $('fieldset[data-input-type=checkbox]').append(togglebox);
  242.         var mouseDown = false;
  243.         var beginTouchDown = 0;
  244.         create_elements();
  245.     set_listeners();
  246.   loadPage();
  247.                        
  248.    currenthash = window.location.hash.substring(1);
  249.     $(window).bind('hashchange', function () {
  250.       currenthash = window.location.hash.substring(1);
  251.     loadPage(currenthash);     
  252.    });
  253. });
clone this paste RAW Paste Data