Difference between revisions of "Team:Utrecht/js/myFunctions"

Line 1: Line 1:
 +
//Content exchange Teampage
 +
 
function tellStory(story){
 
function tellStory(story){
 
$(".story").html(story);
 
$(".story").html(story);
 
}
 
}
−
 
−
// When the user scrolls the page, execute myFunction
 
−
 
−
function scrollFunction2(id){
 
−
var scrollPos = $('#'+ id).offset();
 
−
window.scrollTo(0, scrollPos.top - 185);
 
−
}
 
−
 
−
window.onscroll = function() {scrollFunction()};
 
−
 
−
function scrollFunction() {
 
−
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 
−
        document.getElementById("BackToTop").style.display = "block";
 
−
    } else {
 
−
        document.getElementById("BackToTop").style.display = "none";
 
−
    }
 
−
}
 
−
 
−
// When the user clicks on the button, scroll to the top of the document
 
−
function topFunction() {
 
−
    document.body.scrollTop = 0; // For Safari
 
−
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 
−
}
 
−
 
  
 
//Definitions of Submenus
 
//Definitions of Submenus
Line 96: Line 74:
 
         $(defActive).addClass('active');
 
         $(defActive).addClass('active');
 
}
 
}
 +
 +
 +
//Sidenav
 +
 +
 +
let mainNavLinks = document.querySelectorAll(".sidenav ul li a");;
 +
 +
let lastId;
 +
let cur = [];
 +
 +
 +
var topMenu = $("#top-menu"),
 +
    sideMenu = $("#side-menu"),
 +
    topMenuHeight = topMenu.outerHeight()+15,
 +
    menuItems = sideMenu.find("a");
 +
 +
 +
// Bind click handler to menu items
 +
menuItems.click(function(e){
 +
  var href = $(this).attr("href"),
 +
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
 +
  $('html, body').stop().animate({
 +
      scrollTop: offsetTop
 +
  }, 300);
 +
  e.preventDefault();
 +
});
 +
 +
window.addEventListener("scroll", event => {
 +
  let fromTop = window.scrollY;
 +
  mainNavLinks.forEach(link => {
 +
    let section = document.querySelector(link.hash);
 +
    if (((section.offsetTop - topMenuHeight - 10) <= fromTop) ) {
 +
      if ((section.offsetTop + section.offsetHeight  - topMenuHeight - 10)> fromTop){
 +
        link.classList.add("current");
 +
      } else {
 +
        link.classList.remove("current");
 +
      }
 +
    }
 +
    else {
 +
      link.classList.remove("current");
 +
    }
 +
  });
 +
});
 +
  
  

Revision as of 14:46, 2 October 2018

//Content exchange Teampage

function tellStory(story){ $(".story").html(story); }

//Definitions of Submenus

var submenuProject = '<a href= "https://2018.igem.org/Team:Utrecht/ProjectOverview" id = "submenuProjectOverview"> Overview</a> <a href="https://2018.igem.org/Team:Utrecht/Description" id = "submenuDescription" >Description</a> <a href="https://2018.igem.org/Team:Utrecht/Design" id = "submenuDesign">Design</a> <a href="https://2018.igem.org/Team:Utrecht/Model" id = "submenuModel">Model</a> <a href="https://2018.igem.org/Team:Utrecht/Parts" id = "submenuBiobricks">Biobricks</a> <a href="https://2018.igem.org/Team:Utrecht/SafeByDesign" id = "submenuSafeByDesign">Safety&Risks</a>';

var submenuLab = '<a href="https://2018.igem.org/Team:Utrecht/Notebook" id = "submenuNotebook">Lab Notebook</a> <a href="https://2018.igem.org/Team:Utrecht/Protocol" id = "submenuProtocol">Protocol</a> <a href="https://2018.igem.org/Team:Utrecht/Safety" id = "submenuSafety">Safety</a> <a href="https://2018.igem.org/Team:Utrecht/Results" id = "submenuResults">Results</a> <a href="https://2018.igem.org/Team:Utrecht/InterLab" id = "submenuInterLab">Interlab</a>';

var submenuHP = '<a href="https://2018.igem.org/Team:Utrecht/IntegratedHP" id = "submenuIntegratedHP">Integrated HP</a> <a href="https://2018.igem.org/Team:Utrecht/PublicEngagement" id = "submenuPE">PE</a> <a href="https://2018.igem.org/Team:Utrecht/MeetUps" id = "submenuMeetUps">Meet-Ups</a>';

var submenuJamboree = '<a href="https://2018.igem.org/Team:Utrecht/Vlogs" id = "submenuVlogs">Vlogs</a> <a href="https://2018.igem.org/Team:Utrecht/AfterJamboree" id = "submenuAJ">After Jamboree</a>';

var submenuAboutUs = '<a href="https://2018.igem.org/Team:Utrecht/Team" id = "submenuTeam">Team</a> <a href="https://2018.igem.org/Team:Utrecht/TeamBuilding" id = "submenuTeamBuilding">Team Building</a> <a href="https://2018.igem.org/Team:Utrecht/Collaborations" id = "submenuCollaborations">Collabs</a>';

var submenuCredit = '<a href="https://2018.igem.org/Team:Utrecht/Attributions" id = "submenuAtributions">Attributions</a> <a href="https://2018.igem.org/Team:Utrecht/Sponsors" id = "submenuSponsors">Sponsors</a>';


//Changes Submenu

$(document).ready(function(){

$("#menuProject").hoverIntent(function(){ 

       $("#mySubmenu").stop();

$("#mySubmenu").html(submenuProject); 

       $(defActive).addClass('active');

});

$("#menuAboutUs").hoverIntent(function(){ 

       $("#mySubmenu").stop();

$("#mySubmenu").html(submenuAboutUs); 

       $(defActive).addClass('active');

});

$("#menuLaboratory").hoverIntent(function(){ 

       $("#mySubmenu").stop();

$("#mySubmenu").html(submenuLab); 

       $(defActive).addClass('active');

});

$("#menuHumanPractices").hoverIntent(function(){ 

       $("#mySubmenu").stop();

$("#mySubmenu").html(submenuHP); 

       $(defActive).addClass('active');

});

$("#menuJamboree").hoverIntent(function(){ 

       $("#mySubmenu").stop();

$("#mySubmenu").html(submenuJamboree); 

       $(defActive).addClass('active');

});

$("#menuCredit").hoverIntent(function(){ 

       $("#mySubmenu").stop();

$("#mySubmenu").html(submenuCredit); 

       $(defActive).addClass('active');

});



$(".topnav").mouseleave(resetSubmenu);

});

var defSubmenu = ; var defActive = ;

var resetSubmenu = function(){ $("#mySubmenu").html(defSubmenu); 

       $(defActive).addClass('active');

}


//Sidenav


let mainNavLinks = document.querySelectorAll(".sidenav ul li a");;

let lastId; let cur = [];


var topMenu = $("#top-menu"), 

   sideMenu = $("#side-menu"),
   topMenuHeight = topMenu.outerHeight()+15,
   menuItems = sideMenu.find("a");


// Bind click handler to menu items menuItems.click(function(e){ 

 var href = $(this).attr("href"),
     offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
 $('html, body').stop().animate({ 
     scrollTop: offsetTop
 }, 300);
 e.preventDefault();

});

window.addEventListener("scroll", event => { 

 let fromTop = window.scrollY;
 mainNavLinks.forEach(link => {
   let section = document.querySelector(link.hash);
   if (((section.offsetTop - topMenuHeight - 10) <= fromTop) ) {
     if ((section.offsetTop + section.offsetHeight  - topMenuHeight - 10)> fromTop){
       link.classList.add("current");
     } else {
       link.classList.remove("current");
     }
   } 
   else {
     link.classList.remove("current");
   }
 });

});



//Mobile Menu /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction(y) { 

   var x = document.getElementById("myMenu");
   if (x.className === "menuM") {
       x.className += " open";
   } else {
       x.className = "menuM";
   }

y.classList.toggle("change"); }