Lianaevans (Talk | contribs) m |
Lianaevans (Talk | contribs) m |
||
(180 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 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 | ||
Line 10: | Line 13: | ||
var navItems = document.getElementsByClassName("nav-item"); // gets all of the nav-items | var navItems = document.getElementsByClassName("nav-item"); // gets all of the nav-items | ||
var foodItems = document.getElementsByClassName("food-item-inner"); | var foodItems = document.getElementsByClassName("food-item-inner"); | ||
− | var | + | 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 wordArray = ["Humans", "Scientists", "Researchers", "Engineers", "Designers"] | ||
var wordIndex = 0; //Start at first word in wordArray | var wordIndex = 0; //Start at first word in wordArray | ||
Line 18: | Line 25: | ||
const wordTime = 1000; | const wordTime = 1000; | ||
const changeWordTime = 100; //Time to switch letters | 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(){ | $(document).ready(function(){ | ||
Line 25: | Line 48: | ||
}); | }); | ||
}); | }); | ||
− | + | // old | |
function openNav() { | function openNav() { | ||
document.getElementById("nav-elements").style.right = "0"; | document.getElementById("nav-elements").style.right = "0"; | ||
Line 44: | Line 67: | ||
} | } | ||
− | + | //old | |
function closeNav() { | function closeNav() { | ||
closeSubmenus(); | closeSubmenus(); | ||
Line 64: | Line 87: | ||
//document.getElementById("close-nav-button").style.display = "none"; | //document.getElementById("close-nav-button").style.display = "none"; | ||
} | } | ||
− | + | // old | |
function closeSubmenus() { | function closeSubmenus() { | ||
+ | |||
for(i = 0; i < dropLinks.length; i++) { | for(i = 0; i < dropLinks.length; i++) { | ||
dropLinks[i].className = "drop-link nav-item"; // gets rid of the active-menu class name | dropLinks[i].className = "drop-link nav-item"; // gets rid of the active-menu class name | ||
} | } | ||
} | } | ||
− | + | // old | |
function showSubmenu(x) { | function showSubmenu(x) { | ||
closeSubmenus(); // first closes the current open submenu | closeSubmenus(); // first closes the current open submenu | ||
Line 81: | Line 105: | ||
} | } | ||
− | function | + | 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 | + | function openSubmenu(x) { |
− | for(i = 0; i < | + | 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); | ||
} | } | ||
Line 109: | Line 164: | ||
function toInteractive() { | 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"); | ||
} | } | ||
Line 115: | Line 173: | ||
window.scrollTo(0, document.getElementById("team-title").offsetHeight); | window.scrollTo(0, document.getElementById("team-title").offsetHeight); | ||
} | } | ||
+ | function scrollDownProject(){ | ||
+ | window.scrollTo(0, document.getElementById("page-content").offsetHeight); | ||
+ | } | ||
+ | |||
function googleTranslateElementInit() { | function googleTranslateElementInit() { | ||
new google.translate.TranslateElement({pageLanguage: 'en'}, 'translate-feature'); | new google.translate.TranslateElement({pageLanguage: 'en'}, 'translate-feature'); | ||
//({pageLanguage: 'en', includedLanguages: 'es,fr'}, '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() { | function windowResize() { | ||
fontResize(); | fontResize(); | ||
+ | mobileNav(); | ||
} | } | ||
function windowLoad() { | function windowLoad() { | ||
fontResize(); | fontResize(); | ||
+ | mobileNav(); | ||
} | } | ||
Line 163: | Line 243: | ||
document.getElementById("Changing-Text").innerHTML = displayWord; | 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> | </script> | ||
</html> | </html> |
Latest revision as of 01:18, 27 October 2020