Difference between revisions of "Team:ETH Zurich/scripts/template js"

Line 1: Line 1:
 
function initTemplate() {
 
function initTemplate() {
 +
 +
    var menuTop = $('.title_container').offset().top + $('.title_container').height();
 +
 +
    // Get browser inner width
 +
    //=============================================================================
 +
    function getWidth() {
 +
        if (self.innerWidth) {
 +
            return self.innerWidth;
 +
        }
 +
 +
        if (document.documentElement && document.documentElement.clientWidth) {
 +
            return document.documentElement.clientWidth;
 +
        }
 +
 +
        if (document.body) {
 +
            return document.body.clientWidth;
 +
        }
 +
    }
 +
 +
    // Keep the menu fixed at the top when scrolling in desktop mode
 +
    //=============================================================================
 +
    function repositionMenu() {
 +
        if ($(window).scrollTop() + 16 > menuTop && getWidth() > 740) {   
 +
            $('#main_menu')
 +
                .css('position', 'fixed')
 +
                .css('top', '16px');
 +
            $('#main_wrapper')
 +
                .css('margin-top', '40px');
 +
        } else {
 +
            $('#main_menu')
 +
                .css('position', 'static');
 +
            $('#main_wrapper')
 +
                .css('margin-top', '0px');
 +
        }
 +
    }
 +
 +
    // Highlight menu buttons when mouse hover
 +
    //=============================================================================
 +
    $(".menu_container a").mouseover(function (e) {
 +
        e.stopPropagation();
 +
        $(this).addClass('menu_hover');
 +
    }).mouseout(function () {
 +
        $(this).removeClass('menu_hover');
 +
    });
 +
   
 +
    // Reposition menu after jump to an anchor
 +
    //=============================================================================
 +
    $(".outline_item > a").click(function() {
 +
        $(document).scrollTop($($(this).attr("href")).offset().top - 76);
 +
        repositionMenu();
 +
        $(document).scrollTop($($(this).attr("href")).offset().top - 76);
 +
        return false;
 +
    });
 +
}
 +
 +
function initMenus() {
 
      
 
      
 
     var menuTop = $('.title_container').offset().top + $('.title_container').height();
 
     var menuTop = $('.title_container').offset().top + $('.title_container').height();
Line 35: Line 91:
 
         }
 
         }
 
     }
 
     }
    $(window).scroll(repositionMenu);
 
    $(window).resize(repositionMenu);
 
  
 
     // Show submenu when the corresponding menu item is clicked
 
     // Show submenu when the corresponding menu item is clicked
Line 73: Line 127:
 
         e.stopPropagation();
 
         e.stopPropagation();
 
     });
 
     });
 +
 +
    $(window).scroll(repositionMenu);
 +
    $(window).resize(repositionMenu);
 
}
 
}

Revision as of 12:44, 12 September 2016

function initTemplate() {

   var menuTop = $('.title_container').offset().top + $('.title_container').height();
   // Get browser inner width
   //=============================================================================
   function getWidth() {
       if (self.innerWidth) {
           return self.innerWidth;
       }
       if (document.documentElement && document.documentElement.clientWidth) {
           return document.documentElement.clientWidth;
       }
       if (document.body) {
           return document.body.clientWidth;
       }
   }
   // Keep the menu fixed at the top when scrolling in desktop mode
   //=============================================================================
   function repositionMenu() {
       if ($(window).scrollTop() + 16 > menuTop && getWidth() > 740) {    
           $('#main_menu')
               .css('position', 'fixed')
               .css('top', '16px');
           $('#main_wrapper')
               .css('margin-top', '40px');
       } else {
           $('#main_menu')
               .css('position', 'static');
           $('#main_wrapper')
               .css('margin-top', '0px');
       }
   }
   // Highlight menu buttons when mouse hover
   //=============================================================================
   $(".menu_container a").mouseover(function (e) {
       e.stopPropagation();
       $(this).addClass('menu_hover');
   }).mouseout(function () {
       $(this).removeClass('menu_hover');
   });
   
   // Reposition menu after jump to an anchor
   //=============================================================================
   $(".outline_item > a").click(function() {
       $(document).scrollTop($($(this).attr("href")).offset().top - 76); 
       repositionMenu();
       $(document).scrollTop($($(this).attr("href")).offset().top - 76);
       return false;
   });

}

function initMenus() {

   var menuTop = $('.title_container').offset().top + $('.title_container').height();
   // Get browser inner width
   //=============================================================================
   function getWidth() {
       if (self.innerWidth) {
           return self.innerWidth;
       }
       if (document.documentElement && document.documentElement.clientWidth) {
           return document.documentElement.clientWidth;
       }
       if (document.body) {
           return document.body.clientWidth;
       }
   }
   // Keep the menu fixed at the top when scrolling in desktop mode
   //=============================================================================
   function repositionMenu() {
       if ($(window).scrollTop() + 16 > menuTop && getWidth() > 740) {    
           $('#main_menu')
               .css('position', 'fixed')
               .css('top', '16px');
           $('#main_wrapper')
               .css('margin-top', '40px');
       } else {
           $('#main_menu')
               .css('position', 'static');
           $('#main_wrapper')
               .css('margin-top', '0px');
       }
   }
   // Show submenu when the corresponding menu item is clicked
   //=============================================================================
   $(".menu_item").click(function (e) {
       $(".menu_item").not(this)
           .removeClass('menu_open')
           .children('.submenu')
           .removeClass('submenu_visible');
       $('.submenu', this).toggleClass('submenu_visible');
       $(this).toggleClass('menu_open');
       e.stopPropagation();
   });
   // Close submenus when the user clicks anywhere on the page
   //=============================================================================
   $(document).click(function () {
       $('.submenu').removeClass('submenu_visible');
       $('.menu_item').removeClass('menu_open');
   });
   // Highlight menu buttons when mouse hover
   //=============================================================================
   $(".menu_container a").mouseover(function (e) {
       e.stopPropagation();
       $(this).addClass('menu_hover');
   }).mouseout(function () {
       $(this).removeClass('menu_hover');
   });
   // Show menu when the burger button is clicked
   //=============================================================================
   $("#burger_button").click(function (e) {
       $("#main_menu")
           .toggleClass('burger_visible');
       e.stopPropagation();
   });
   $(window).scroll(repositionMenu);
   $(window).resize(repositionMenu);

}