Template:Queens Canada/Scripts

// makes the default page title not display var topTitle = document.getElementById("top_title").style.display = "none"; var navText = document.getElementsByClassName("nav-text"); // gets all nav-text elements bc they are used in multiple funcs var dropLinks = document.getElementsByClassName("drop-link"); // gets all of the expandable nav sections for the same reason var navItems = document.getElementsByClassName("nav-item"); // gets all of the nav-items var foodItems = document.getElementsByClassName("food-item-inner"); var team = document.getElementsByClassName("overlay"); var navbarLinks = document.getElementsByClassName("navbar-links"); var dropdownLinks = document.getElementsByClassName("dropdown"); var dropdownContent = document.getElementsByClassName("dropdown-content"); var wordArray = ["Humans", "Scientists", "Researchers", "Engineers", "Designers"] var wordIndex = 0; //Start at first word in wordArray var displayWord = wordArray[wordIndex]; var stateChange = 0; var wordIncrement = -1 //controls whether the word is being generated or deleted const wordTime = 1000; const changeWordTime = 100; //Time to switch letters var homeFoodConts = document.getElementsByClassName("food-img-container"); for(i = 0; i < dropdownLinks.length; i++) { dropdownLinks[i].addEventListener("click", function() { var dropdownContent = this.nextElementSibling; if(dropdownContent.style.visiblity == "visible") { dropdownContent.style.visibility = "hidden"; } else { dropdownContent.style.visiblity = "visible"; } }) } $(document).ready(function(){ $('#nav-icon').click(function(){ $(this).toggleClass('open'); }); }); // old function openNav() { document.getElementById("nav-elements").style.right = "0"; setTimeout(function() { for(i = 0; i < navText.length; i++) { // makes the text inside each nav-item visible navText[i].style.opacity = "1"; navItems[i].style.pointerEvents = "all"; // gives back the ability to click on things when the nav is open } }, 500); document.getElementById("open-close-nav").className = "toggle-nav"; // for some reason,making it a global var didn't work document.getElementById("open-close-nav").setAttribute("onclick","closeNav()"); document.getElementById("open-close-nav").title = "Close Menu"; //document.getElementById("nav-icon").style.display = "none"; gets rid of "open nav" button //document.getElementById("close-nav-button").style.display = "block"; shows "close nav" button } //old function closeNav() { closeSubmenus(); for(i = 0; i < navText.length; i++) { navText[i].style.opacity = "0"; navItems[i].style.pointerEvents = "none"; // tries to hide the fact that you can still click on it when closed } setTimeout(function() { document.getElementById("nav-elements").style.right = "100vw"; }, 500); document.getElementById("open-close-nav").className = ""; document.getElementById("open-close-nav").setAttribute("onclick","openNav()"); document.getElementById("open-close-nav").title = "Open Menu"; //document.getElementById("nav-icon").style.display = "block"; //document.getElementById("close-nav-button").style.display = "none"; } // old function closeSubmenus() { for(i = 0; i < dropLinks.length; i++) { dropLinks[i].className = "drop-link nav-item"; // gets rid of the active-menu class name } } // old function showSubmenu(x) { closeSubmenus(); // first closes the current open submenu for(i = 0; i < dropLinks.length; i++) { // then adds the class name active-menu to a specified element if(i == (x-1)) { dropLinks[i].className = "drop-link nav-item active-menu"; } } } function openMobileNav() { navbarLinks[0].style.height = "100%"; var navBtn = document.getElementById("nav-icon"); navBtn.setAttribute("onclick", "closeMobileNav()"); } function closeMobileNav() { closeSubmenus(); navbarLinks[0].style.height = 0; var navBtn = document.getElementById("nav-icon"); navBtn.setAttribute("onclick", "openMobileNav()"); } function openSubmenu(x) { dropdownContent[x-1].style.visibility = "visible"; } /* when i click on the x, that is technically also clicking on the li */ function closeSubmenus() { for(i = 0; i < dropdownContent.length; i++) { dropdownContent[i].style.visibility = "hidden"; } } function closeSubTest() { this.stlye.display = "none"; } function flipFood(x) { unFlipFood(); for(i = 0; i < foodItems.length; i++) { if(i == (x-1)) { foodItems[i].className = "food-item-inner flipped-food-item-inner"; foodItems[i].setAttribute("onclick","unFlipFood()"); } } foodPop(x); } function unFlipFood() { for(i = 0; i < foodItems.length; i++) { foodItems[i].className = "food-item-inner food-item-inner-1"; var newOnClick = "flipFood(" + (i+1).toString() + ")"; foodItems[i].setAttribute("onclick", newOnClick); } } function fontResize() { var bodyElement = document.getElementsByTagName("body"); var newFontSize = window.innerWidth * 0.0125; newFontSize = newFontSize.toString(); newFontSize = newFontSize + "px"; bodyElement[0].style.fontSize = newFontSize; } function toInteractive() { var startOfInteractive = (document.getElementById("home-welcome").offsetHeight) + (document.getElementsByClassName("navbar")[0].offsetHeight); window.scrollTo(0, startOfInteractive); } function scrollDownTeam(){ window.scrollTo(0, document.getElementById("team-title").offsetHeight); } function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'translate-feature'); //({pageLanguage: 'en', includedLanguages: 'es,fr'}, 'translate-feature'); } function mobileNav() { if(window.innerWidth <= 1024) { //dropdownLinks[0].setAttribute("onclick", "openSubmenu(1)"); //dropdownLinks[1].setAttribute("onclick", "openSubmenu(2)"); //dropdownLinks[2].setAttribute("onclick", "openSubmenu(3)"); //dropdownLinks[3].setAttribute("onclick", "openSubmenu(4)"); } else { //for(i = 0; i < dropdownLinks.length; i++) { // dropdownLinks[i].setAttribute("onclick", ""); //} } } function windowResize() { fontResize(); mobileNav(); } function windowLoad() { fontResize(); mobileNav(); } function wordChangeWrapperFunc() { //Call word generator functions setTimeout(alterDisplayWord,wordTime); //Set the first time delay updateWord(); } function alterDisplayWord(){ if(stateChange == 0){ //if word is in process of being generated displayWord = wordArray[wordIndex].substring(0,displayWord.length + wordIncrement); //Add or delete a letter if(wordArray[wordIndex] == displayWord || displayWord.length ==0){ //if word is fully generated or deleted stateChange = 1; //let next function call know about the change in state } setTimeout(alterDisplayWord, changeWordTime); //call function again after a delay updateWord(); } else{ stateChange = 0; if(displayWord.length == 0){ if(wordIndex == wordArray.length - 1) wordIndex = 0; else wordIndex++; wordIncrement = 1; //change to the generating word increment setTimeout(alterDisplayWord, changeWordTime); //set a short time for the next call of the function } else{ wordIncrement = -1; setTimeout(alterDisplayWord,wordTime); } } } function updateWord(){ document.getElementById("Changing-Text").innerHTML = displayWord; } //These function controls the popups on click for the team page //I know this is lowkey inefficient but it works for now lol function overlayOn(x){ team[x-1].style.display = "block"; } function overlayOff(x) { team[x-1].style.display = "none"; } /*Script for opening video overlay*/ function toggle(){ var introVid = document.querySelector(".intro-video") var video = document.querySelector("video") introVid.classList.toggle("active"); video.pause(); video.currentTime = 0; } //script for loader var loaderVar; function loaderFunc() { loaderVar = setTimeout(showPage, 3000); } function showPage() { document.getElementById("loader-wrapper").style.display = "none"; document.getElementById("main-content").style.display = "block"; } function foodPop(x) { homeFoodConts[x-1].className = "food-img-container popped" setTimeout(function(){ for(i = 0; i < foodItems.length; i++) { homeFoodConts[i].className = "food-img-container"; } }, 800); } var a = 0; $(window).scroll(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 2000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); //alert('finished'); } }); }); a = 1; } });