Team:ETH Zurich/scripts/template js

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() + 18 > menuTop && getWidth() > 740) {    
           $('#main_menu')
               .css('position', 'fixed')
               .css('top', '18px');
           $('#main_wrapper')
               .css('margin-top', '42px');
       } else {
           $('#main_menu')
               .css('position', 'static');
           $('#main_wrapper')
               .css('margin-top', '0px');
       }
   }
   $(window).scroll(repositionMenu);
   $(window).resize(repositionMenu);

   // 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();
   });

}