Lianaevans (Talk | contribs) m |
|||
(293 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | |||
<html> | <html> | ||
+ | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Queens_Canada/Particles&action=raw&ctype=text/javascript"></script> | ||
<script> | <script> | ||
+ | |||
// makes the default page title not display | // makes the default page title not display | ||
var topTitle = document.getElementById("top_title").style.display = "none"; | 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 foodItems2 = document.getElementsByClassName("food-item"); | ||
+ | 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"); | ||
− | var | + | 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"); | ||
+ | var navLinks = document.getElementsByClassName("navbar-links")[0]; | ||
+ | navBtn.setAttribute("onclick", "closeMobileNav()"); | ||
+ | navBtn.classList.toggle("toggle-nav"); | ||
+ | navBtn.title = "Close Nav"; | ||
+ | navLinks.classList.toggle("openNavLinks"); | ||
+ | |||
+ | } | ||
+ | |||
+ | function closeMobileNav() { | ||
+ | //closeSubmenus();// | ||
+ | navbarLinks[0].style.height = 0; | ||
+ | var navBtn = document.getElementById("nav-icon"); | ||
+ | var navLinks = document.getElementsByClassName("navbar-links")[0]; | ||
+ | navBtn.setAttribute("onclick", "openMobileNav()"); | ||
+ | navBtn.classList.toggle("toggle-nav"); | ||
+ | navBtn.title = "Open Nav"; | ||
+ | navLinks.classList.toggle("openNavLinks"); | ||
+ | } | ||
+ | |||
+ | 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) { | ||
+ | foodItems[x-1].className = "food-item-inner flipped-food-item-inner"; | ||
+ | foodItems2[x-1].setAttribute("onclick", "unFlipFood(" +x.toString()+ ")"); | ||
+ | foodPop(x); | ||
+ | } | ||
+ | |||
+ | function unFlipFood(x) { | ||
+ | foodItems[x-1].className = "food-item-inner food-item-inner-1"; | ||
+ | foodItems2[x-1].setAttribute("onclick", "flipFood(" +x.toString()+ ")"); | ||
+ | foodPop(x); | ||
+ | } | ||
+ | |||
+ | 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); | ||
+ | window.scroll({top: startOfInteractive, left: 0, behaviour: 'smooth'}); | ||
+ | console.log("It should have just scrolled"); | ||
+ | |||
+ | } | ||
+ | function scrollDownTeam(){ | ||
+ | window.scrollTo(0, document.getElementById("team-title").offsetHeight); | ||
+ | } | ||
+ | function scrollDownProject(){ | ||
+ | window.scrollTo(0, document.getElementById("page-content").offsetHeight); | ||
+ | } | ||
+ | |||
+ | function googleTranslateElementInit() { | ||
+ | new google.translate.TranslateElement({pageLanguage: 'en'}, 'translate-feature'); | ||
+ | //({pageLanguage: 'en', includedLanguages: 'es,fr'}, 'translate-feature'); | ||
+ | } | ||
+ | |||
+ | function mobileNav() { | ||
+ | if(window.innerWidth <= 1024) { | ||
+ | var navBtn = document.getElementById("nav-icon"); | ||
+ | if(navBtn.classList.contains("toggle-nav")) { | ||
+ | closeMobileNav(); | ||
+ | } | ||
+ | else { | ||
+ | navbarLinks[0].style.height = 0; | ||
+ | } | ||
+ | } | ||
+ | else { | ||
+ | navbarLinks[0].style.height = "100%"; // to ensure that the regular nav bar gets set back to regular height even after | ||
+ | // the mobile nav has been opened and closed(which would set the height back to 0) | ||
+ | } | ||
+ | } | ||
+ | |||
+ | 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(){ | ||
+ | // 74.07% x 48.25% is the size of the circle relative to its container. Not used right now. | ||
+ | var introVidScreen = document.querySelector(".intro-video-screen") | ||
+ | var circle = document.querySelector(".home-video-circle") | ||
+ | var video = document.querySelector(".actual-intro-video") | ||
+ | |||
+ | var scrollValue = window.innerHeight * 0.1384; | ||
+ | var scrollValue2 = scrollValue - (scrollValue * 2); | ||
+ | |||
+ | // the next two lines make it so that the full screen animation looks the best for the user | ||
+ | // and so that if they scroll while viewing the video, they go back to the same place | ||
+ | // the second line adjust the scrolling to accomadate for the wiki bar at the top | ||
+ | //document.getElementsByClassName("home-video")[0].scrollIntoView(); | ||
+ | document.getElementById("home-intro-video").scrollIntoView(); | ||
+ | if(window.innerWidth >= 992) | ||
+ | { | ||
+ | window.scrollBy(0,scrollValue2); | ||
+ | } | ||
+ | |||
+ | if(circle.classList.contains("full-circle")) | ||
+ | { | ||
+ | introVidScreen.classList.toggle("active"); | ||
+ | setTimeout(function(){ circle.classList.toggle("full-circle"); }, 800); | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | circle.classList.toggle("full-circle"); | ||
+ | setTimeout(function(){ introVidScreen.classList.toggle("active"); }, 800); | ||
+ | } | ||
+ | |||
+ | video.pause(); | ||
+ | video.currentTime = 0; | ||
+ | } | ||
+ | |||
+ | function pauseHomeVideo() { | ||
+ | var video = document.querySelector(".actual-intro-video") | ||
+ | video.pause(); | ||
+ | } | ||
+ | |||
+ | //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); | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | window.addEventListener("load", function () { | ||
+ | const loader = document.querySelector(".loader-wrapper"); | ||
+ | loader.className += " hidden"; | ||
+ | const e = document.getElementById("loader-wrapper-id"); | ||
+ | e.addEventListener("animationend", (ev) => { | ||
+ | if (ev.type === "animationend") { | ||
+ | e.style.display = "none"; | ||
+ | } | ||
+ | }, false); | ||
+ | }); | ||
</script> | </script> | ||
− | <html> | + | </script> |
+ | </html> |
Latest revision as of 01:18, 27 October 2020