Advertisement
Guest User

Untitled

a guest
Apr 30th, 2016
69
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /Off canvas menu starts here
  2. //getting current browser width and doing some math
  3. var WindowWidth = window.innerWidth;
  4.   function percentCalculation(a, b){
  5.   var c = a*b/100;
  6.   return c;
  7. }
  8. var SeventyPercentWidth = percentCalculation(WindowWidth,40);
  9.  
  10.  
  11. // initializing off canvas menu
  12.     IQ.initOffCanvasMenu = function () {
  13.         $(".menu-icon").on("click", function (e) {
  14.             e.preventDefault();
  15.  
  16.             if ($(this).hasClass("open"))
  17.             {
  18.                 $(this).removeClass("open");
  19.         if(WindowWidth <= 640){IQ.closeFullWidthMenu();}else{IQ.closeMenu();}
  20.             }
  21.             else
  22.             {
  23.                 $(this).addClass("open");
  24.                 if(WindowWidth <= 640){IQ.openFullWidthMenu();}else{IQ.openMenu();}
  25.             }
  26.         });
  27.  
  28.         $(".off-canvas-overlay, .close-menu").on("click", function () {
  29.             if(WindowWidth <= 640){IQ.closeFullWidthMenu();}else{IQ.closeMenu();}
  30.             $(".menu-icon").removeClass("open");
  31.         });
  32.  
  33.     };
  34.  
  35. // functions for tablets
  36. IQ.closeMenu = function () {
  37.     var $menu = $(".left-off-canvas-menu");
  38.     var $content = $("section.container, .tab-bar, footer.copyright, .post-filter-container");
  39.     $(".off-canvas-overlay").hide();
  40.     $("body").removeClass("menu-open");
  41.     $menu.animate({
  42.       "left" : "-"+SeventyPercentWidth+"px"
  43.     }, 200, function () {
  44.  
  45.     });
  46.  
  47.     $content.animate({
  48.       "left" : "0"
  49.     }, 200, function () {
  50.  
  51.     });
  52.   };
  53.  
  54.   IQ.openMenu = function () {
  55.     var $menu = $(".left-off-canvas-menu");
  56.     var $content = $("section.container, .tab-bar, footer.copyright, .post-filter-container");
  57.     $(".off-canvas-overlay").show();
  58.     $("body").addClass("menu-open");
  59.     $menu.css('width', SeventyPercentWidth);
  60.     $('.menu').css('width', SeventyPercentWidth);
  61.  
  62.     $menu.animate({
  63.       "left" : "0"
  64.     }, 200, function () {
  65.  
  66.     });
  67.  
  68.     $content.animate({
  69.       "left" : SeventyPercentWidth+"px"
  70.     }, 200, function () {
  71.  
  72.     });
  73.  
  74.  
  75.   };
  76.  
  77.   //functions by Shakil for small screen overlapping menus
  78.   IQ.closeFullWidthMenu = function () {
  79.     var $menu = $(".left-off-canvas-menu");
  80.     $(".off-canvas-overlay").hide();
  81.     $("body").removeClass("menu-open");
  82.     $menu.removeClass('zIndexHigh');
  83.     $menu.animate({
  84.       "left": -WindowWidth},
  85.       200, function() {
  86.             $menu.addClass('zIndexLow');
  87.     });
  88.   }
  89.  
  90.   IQ.openFullWidthMenu = function () {
  91.  
  92.     var $menu = $(".left-off-canvas-menu");
  93.        
  94.     $menu.css({
  95.       width: '100%'
  96.     });
  97.  
  98.     $('.menu').css('width', '100%');
  99.  
  100.     $(".off-canvas-overlay").show();
  101.     $("body").addClass("menu-open");
  102.     $menu.removeClass('zIndexLow');
  103.     $menu.addClass('zIndexHigh');
  104.  
  105.     $menu.animate({
  106.       left: "0"},
  107.       200, function() {
  108.  
  109.     });
  110.  
  111.   }
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement