/* gloabl.js ========= All global logic for the coromford theme https://docs.google.com/document/d/1lf4B8EJa8TO5lJn7r_Z3bDvGaNvmFXBPsMbn_lCOjok/edit#heading=h.jmgn0ahc1mo5 */ /* FUNCTIONS ========= fNotOnHomePage() - this function is called on load if we aren't on the homepage fOnDropdownHover() - When the dropdown is being hovered open it fOnDropdownNoLongerHover() - When the dropdown is no longer being hovered close it fOpenMobileMenu() - Shows the navigation on mobile fCloseMobileMenu() - Closes the navigaiton on mobile fHeaderNavigationScrollHandler() - Hides/shows the header navigation depending on scroll /* /* GLOBAL VARIABLES ================ */ // Store if the header is being displayed or not var bIsHeaderBeingDisplayed = true; // Cache the logo DOM element var oLogoElem = ""; // Cache the logo DOM element var oNavigationElem = ""; // store last scroll position var nLastScrollPos = 0; // Store the navigaiton header state var sNavigationHeaderState = "visible"; /* On Document Loaded ================== Called by Jquery event handler when the document is ready (When content has been loaded) */ $( document ).ready( function() { // Store the logo element oLogoElem = $(".logo-image"); // Handle the navigation scroll handler fHeaderNavigationScrollHandler(); // If we are not on the homepage if( $("#homepage-div").length == 0 ) { // Call the not on homepage function fNotOnHomePage(); } // On window resize $(window).on("resize", function() { // If we have the newsletter input box if( $(".newsletter-input-boxes").length ) { // Store the target height of the sign up button var nTargetHeight = $(".sign-up-button").outerHeight(true); // Set the height of the newsletter input box $(".newsletter-input-boxes").css( { height : nTargetHeight + "px" } ); } // If we are on mobile if( $(window).width() <= 500 ) { // If we have dropdown elements that are facing the right, make them go left on mobile if( $(".dropdown-menu-right").length ) { // Add the class to store that this element had the right dropdown on tablet/desktop $(".dropdown-menu-right").addClass("dropdown-menu-right-desktop"); // Remove the dropdown class $(".dropdown-menu-right").removeClass("dropdown-menu-right"); } } // If we are not on mobile (On desktop/tablet) else { // If we have dropdown elements that should be facing the right if( $(".dropdown-menu-right-desktop").length ) { // Add the dropdown class $(".dropdown-menu-right-desktop").addClass("dropdown-menu-right"); // Remove the class to store that this element had the right dropdown on tablet/desktop $(".dropdown-menu-right-desktop").removeClass("dropdown-menu-right-desktop"); } } }); // Trigger the resize to set the initals $(window).trigger('resize'); /* INITATE NAVIGATION DROPDOWNS ============================ Make it so when we hover the navigation elements / click them the navigation menu displays */ // On mouse over dropdown container $(".dropdown-root-container").mouseover( function() { // If we are on desktop if( $(window).width() >= 992 ) { // Open the menu fOnDropdownHover( $(this) ); } }); // On mouse leave dropdown container $(".dropdown-root-container").mouseleave( function() { // If we are on desktop if( $(window).width() >= 992 ) { // Close the menu fOnDropdownNoLongerHover( $(this) ); } }); // On mouse click $(".dropdown-root-container").click( function() { // If the menu is open if( $(this).children().last().is(":visible") ) { // Then close the menu fOnDropdownNoLongerHover( $(this) ); } // If the menu is closed else { // Then open the menu fOnDropdownHover( $(this) ); } }); // Each time an image loads, we want to call the resize function to ensure everything is correctly sized / positioned $("img").on('load', function() { // Trigger the resize to set the initals $(window).trigger('resize'); }); }); /* fNotOnHomePage() ================ This function is called on document load, if we are not on the homepage, it fixes global styling that otherwise we want to ignore if we are on the homepage. */ function fNotOnHomePage() { // Add the background colour of the header $(".header").addClass("header-add-background"); // Add the navigation background class $(".header-navigation-link").addClass("nav-element-add-background"); // Remove the border that is on the header $(".header-inner-wrapper-border-bottom").removeClass("header-inner-wrapper-border-bottom"); // On window reisze whilst not on the home page $(window).on("resize", function() { // Set the height of the relative container $(".header-relative").css( { display : "block", height : $(".header").outerHeight(true) + "px" } ); }); // Trigger the resize to set the initals $(window).trigger('resize'); } /* fOnDropdownHover() ================== Opens the releavnt dropdown menu for the navigation */ function fOnDropdownHover( oElement) { // Store the dropdown menu var oDropdownMenu = oElement.children().last(); // If the dropdown menu isn't active if( !oDropdownMenu.hasClass("menu-is-active") ) { // Add the menu is active class oDropdownMenu.addClass("menu-is-active"); // Store the first child (first col-) var oMenuFirstChild = oDropdownMenu.children().first().children().first(); // If the dropdown menu's outer width is too small (The navigation looks squished) if( oDropdownMenu.outerWidth() <= 350 ) { // If the first child has the class of col-md-6, then it's a half menu if( oMenuFirstChild.hasClass("col-md-6") ) { // Store the last child (Second col-6) var oMenuLastChild = oDropdownMenu.children().first().children().last(); // Remove the col-md-6 class oMenuFirstChild.removeClass("col-md-6"); // Add the col-md-12 class oMenuFirstChild.addClass("col-md-12"); // Add a class to track if the menu used to have col-md-6 oMenuFirstChild.addClass("had-col-md-6"); // Remove the col-md-6 class oMenuLastChild.removeClass("col-md-6"); // Add the col-md-12 class oMenuLastChild.addClass("col-md-12"); // Add a class to track if the menu used to have col-md-6 oMenuLastChild.addClass("had-col-md-6"); } } // If the dropdown menu is sized ok else { // If the menu item is a col-12 but should be a col-6 (after the swap), since it is now sized fine for 2 menus, we can put back if( oMenuFirstChild.hasClass("had-col-md-6") ) { // Store the last child (Second col-6) var oMenuLastChild = oDropdownMenu.children().first().children().last(); // Remove the col-md-12 class oMenuFirstChild.removeClass("col-md-12"); // Add the col-md-6 class oMenuFirstChild.addClass("col-md-6"); // Remove a class to track if the menu used to have col-md-6 oMenuFirstChild.removeClass("had-col-md-6"); // Remove the col-md-12 class oMenuLastChild.removeClass("col-md-12"); // Add the col-md-6 class oMenuLastChild.addClass("col-md-6"); // Remove a class to track if the menu used to have col-md-6 oMenuLastChild.removeClass("had-col-md-6"); } } // Stop any animations playing (cancels close animation if required) oDropdownMenu.stop(); // Remove the menu is active closing class incase we have canceld the closing oDropdownMenu.removeClass("menu-is-closing"); // Set the opaciy to 0 oDropdownMenu.css( { opacity : 0 } ); // Show the dropdown menu oDropdownMenu.show(); // Set the opaciy to 1 oDropdownMenu.animate( { opacity : 1 } , 500 ); } } /* fOnDropdownNoLongerHover() ========================== closes the releavnt dropdown menu for the navigation */ function fOnDropdownNoLongerHover( oElement ) { // Store the dropdown menu var oDropdownMenu = oElement.children().last(); // If the dropdown menu is active if( oDropdownMenu.hasClass("menu-is-active") ) { // Remove the dropdown menu class oDropdownMenu.removeClass("menu-is-active"); // Add the removing class oDropdownMenu.addClass("menu-is-closing"); // Set the opaciy to 0 oDropdownMenu.stop().animate( { opacity : 0 } , 300, function() { // If we are still wanting to close the menu if( oDropdownMenu.hasClass("menu-is-closing") ) { // Hide the dropdown menu oDropdownMenu.hide(); // Remove the dropdown closing class oDropdownMenu.removeClass("menu-is-closing"); } }); } } /* fOpenMobileMenu() ================= Opens the mobile menu */ function fOpenMobileMenu() { // Stop any animations in progress $(".navigation-row").stop(); $(".navigation-row").clearQueue(); // Remove the height attribute $(".navigation-row").css( 'height', '' ); // Set the navigation state to visable sNavigationHeaderState = "visible"; // Add the css class to activate the side menu $(".navigation-row").addClass("active-mobile-menu"); } /* fCloseMobileMenu() ================== Close the mobile menu */ function fCloseMobileMenu() { // Remove the css class to deactivate the menu $(".navigation-row").removeClass("active-mobile-menu"); } /* fHeaderNavigationScrollHandler() ================================= This function handles the hiding and showing the navigation menu depending on the scrolling. */ function fHeaderNavigationScrollHandler() { // If we are on desktop if( $(window).width() >= 992 ) { // Cache the scroll position var nScrollPos = $(window).scrollTop(); // If the scroll position is less than 100 if( nScrollPos <= 150 ) { // If the navigation state is hidden if( sNavigationHeaderState == "hidden" ) { // Set the height of the navigation bar $(".navigation-row").stop().animate( { height : $(".navigation-row").get(0).scrollHeight }, 200 ); // Remove the navigation overflow class $(".navigation-row").removeClass("navigation-row-hide-overflow"); // Set the navigation state to visable sNavigationHeaderState = "visible"; } } // If the scroll position is more than 100 else { // If the navigation state is visible and we scroll down if( sNavigationHeaderState == "visible" && nScrollPos > nLastScrollPos ) { // Animate the height of the navigation row (hide it) $(".navigation-row").stop().animate( { height : "0px" }, 200 ); // Set the navigation state to hidden sNavigationHeaderState = "hidden"; // Add the navigation overflow class $(".navigation-row").addClass("navigation-row-hide-overflow"); } // If the navigation state is hidden and we scroll up else if( sNavigationHeaderState == "hidden" && nScrollPos < nLastScrollPos ) { // Set the height of the navigation bar $(".navigation-row").stop().animate( { height : $(".navigation-row").get(0).scrollHeight }, 200 ); // Remove the navigation overflow class $(".navigation-row").removeClass("navigation-row-hide-overflow"); // Set the navigation state to visable sNavigationHeaderState = "visible"; } } } // Run every 1/4 seconds setTimeout(function () { // Handle this navigation scroller fHeaderNavigationScrollHandler(); }, 250); // Store the last scroll position nLastScrollPos = nScrollPos; }