Lianaevans (Talk | contribs) m |
Lianaevans (Talk | contribs) m |
||
(109 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
<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 11: | 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 foodItems2 = document.getElementsByClassName("food-item"); | ||
var team = document.getElementsByClassName("overlay"); | var team = document.getElementsByClassName("overlay"); | ||
var navbarLinks = document.getElementsByClassName("navbar-links"); | var navbarLinks = document.getElementsByClassName("navbar-links"); | ||
Line 22: | 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++) | for(i = 0; i < dropdownLinks.length; i++) | ||
Line 104: | Line 108: | ||
navbarLinks[0].style.height = "100%"; | navbarLinks[0].style.height = "100%"; | ||
var navBtn = document.getElementById("nav-icon"); | var navBtn = document.getElementById("nav-icon"); | ||
+ | var navLinks = document.getElementsByClassName("navbar-links")[0]; | ||
navBtn.setAttribute("onclick", "closeMobileNav()"); | navBtn.setAttribute("onclick", "closeMobileNav()"); | ||
+ | navBtn.classList.toggle("toggle-nav"); | ||
+ | navBtn.title = "Close Nav"; | ||
+ | navLinks.classList.toggle("openNavLinks"); | ||
+ | |||
} | } | ||
function closeMobileNav() { | function closeMobileNav() { | ||
− | closeSubmenus(); | + | //closeSubmenus();// |
navbarLinks[0].style.height = 0; | navbarLinks[0].style.height = 0; | ||
var navBtn = document.getElementById("nav-icon"); | var navBtn = document.getElementById("nav-icon"); | ||
+ | var navLinks = document.getElementsByClassName("navbar-links")[0]; | ||
navBtn.setAttribute("onclick", "openMobileNav()"); | navBtn.setAttribute("onclick", "openMobileNav()"); | ||
+ | navBtn.classList.toggle("toggle-nav"); | ||
+ | navBtn.title = "Open Nav"; | ||
+ | navLinks.classList.toggle("openNavLinks"); | ||
} | } | ||
Line 131: | Line 144: | ||
function flipFood(x) { | 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() { | + | 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 159: | Line 165: | ||
function toInteractive() { | function toInteractive() { | ||
var startOfInteractive = (document.getElementById("home-welcome").offsetHeight) + (document.getElementsByClassName("navbar")[0].offsetHeight); | var startOfInteractive = (document.getElementById("home-welcome").offsetHeight) + (document.getElementsByClassName("navbar")[0].offsetHeight); | ||
− | window.scrollTo(0, startOfInteractive); | + | //window.scrollTo(0, startOfInteractive); |
+ | window.scroll({top: startOfInteractive, left: 0, behaviour: 'smooth'}); | ||
+ | console.log("It should have just scrolled"); | ||
} | } | ||
Line 165: | 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'); | ||
Line 172: | Line 184: | ||
function mobileNav() { | function mobileNav() { | ||
if(window.innerWidth <= 1024) { | if(window.innerWidth <= 1024) { | ||
− | + | var navBtn = document.getElementById("nav-icon"); | |
− | + | if(navBtn.classList.contains("toggle-nav")) { | |
− | + | closeMobileNav(); | |
− | + | } | |
+ | else { | ||
+ | navbarLinks[0].style.height = 0; | ||
+ | } | ||
} | } | ||
else { | 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) | |
− | + | ||
} | } | ||
} | } | ||
Line 242: | Line 256: | ||
/*Script for opening video overlay*/ | /*Script for opening video overlay*/ | ||
function toggle(){ | function toggle(){ | ||
− | var | + | // 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 video = document.querySelector("video") | + | 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.pause(); | ||
video.currentTime = 0; | video.currentTime = 0; | ||
+ | } | ||
+ | |||
+ | function pauseHomeVideo() { | ||
+ | var video = document.querySelector(".actual-intro-video") | ||
+ | video.pause(); | ||
} | } | ||
Line 253: | Line 297: | ||
var loaderVar; | var loaderVar; | ||
function loaderFunc() { | function loaderFunc() { | ||
− | loaderVar = setTimeout(showPage, | + | loaderVar = setTimeout(showPage, 3000); |
} | } | ||
function showPage() { | function showPage() { | ||
− | document.getElementById("loader- | + | document.getElementById("loader-wrapper").style.display = "none"; |
document.getElementById("main-content").style.display = "block"; | 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> |
Latest revision as of 01:18, 27 October 2020