function activateElement(element,menuElement){
$('#menu1').removeClass("in"); $('#menu1').removeClass("active"); $('#menu2').removeClass("active"); $('#menu2').removeClass("in");
$('#menu3').removeClass("active"); $('#menu3').removeClass("in");
$('#menu4').removeClass("active"); $('#menu4').removeClass("in");
$('#menu5').removeClass("active"); $('#menu5').removeClass("in");
$('#menu6').removeClass("active"); $('#menu6').removeClass("in");
$('#navbarPresentation').removeClass("active"); $('#navbarIntroduction').removeClass("active"); $('#navbarProject').removeClass("active"); $('#navbarProcedures').removeClass("active"); $('#navbarPractices').removeClass("active"); $('#navbarProspects').removeClass("active"); element.addClass("active"); element.addClass("in"); menuElement.addClass("active");
}
$(document).ready(function () {
$(document).on("scroll", onScroll); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('.tab-content a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.offset().top-50 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { setTimeout(function(){$('.tab-content a').removeClass("active"); currLink.addClass("active");}, 500); if ((currLink.attr('href') === "#presentation" || currLink.attr('href') === "#team" || currLink.attr('href') === "#attributions" || currLink.attr('href') === "#collaborations" || currLink.attr('href') === "#achievements") && !$('#menu1').hasClass("active")){ activateElement($('#menu1'),$('#navbarPresentation')); } else if ((currLink.attr('href') === "#introduction" || currLink.attr('href') === "#description" || currLink.attr('href') === "#outreach") && !$('#menu2').hasClass("active")){ activateElement($('#menu2'),$('#navbarIntroduction')); } else if ((currLink.attr('href') === "#project" || currLink.attr('href') === "#design" || currLink.attr('href') === "#modelling" || currLink.attr('href') === "#experiments" || currLink.attr('href') === "#demonstration") && !$('#menu3').hasClass("active")){ activateElement($('#menu3'),$('#navbarProject')); } else if ((currLink.attr('href') === "#procedures" || currLink.attr('href') === "#parts" || currLink.attr('href') === "#notebook" || currLink.attr('href') === "#protocols" || currLink.attr('href') === "#labsafety") && !$('#menu4').hasClass("active")){ activateElement($('#menu4'),$('#navbarProcedures')); } else if ((currLink.attr('href') === "#practices" || currLink.attr('href') === "#bioethics" || currLink.attr('href') === "#integrated" || currLink.attr('href') === "#events") && !$('#menu5').hasClass("active")){ activateElement($('#menu5'),$('#navbarPractices')); } else if ((currLink.attr('href') === "#prospects" || currLink.attr('href') === "#perspectives" || currLink.attr('href') === "#future" || currLink.attr('href') === "#final") && !$('#menu6').hasClass("active")){ activateElement($('#menu6'),$('#navbarProspects')); } } });
}
$(document).on("scroll", onScroll); $('.tab-content a[href*="#"]').on('click', function (e) { var target = this.hash; var $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () {
}); });
});
// This is the progress bar
$(document).ready(function(){
$(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $('[id="presentationContent"]').height(), winheight = $(window).height(); console.log(wintop); var totalScroll = (wintop/(docheight))*100; console.log("total scroll" + totalScroll); $(".progressBar1").css("width",totalScroll+"%"); });
});
$(document).ready(function(){
$(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $('[id="introductionContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="presentationContent"]').height(); console.log(wintop); var totalScroll = ((wintop-previousprogress)/(docheight))*100; console.log("total scroll" + totalScroll); $(".progressBar2").css("width",totalScroll+"%"); });
});
$(document).ready(function(){
$(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $('[id="projectContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="presentationContent"]').height() + $('[id="introductionContent"]').height(); console.log(wintop); var totalScroll = ((wintop-previousprogress)/(docheight))*100; console.log("total scroll" + totalScroll); $(".progressBar3").css("width",totalScroll+"%"); });
});
$(document).ready(function(){
$(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $('[id="proceduresContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="presentationContent"]').height() + $('[id="introductionContent"]').height() + $('[id="projectContent"]').height(); console.log(wintop); var totalScroll = ((wintop-previousprogress)/(docheight))*100; console.log("total scroll" + totalScroll); $(".progressBar4").css("width",totalScroll+"%"); });
});
$(document).ready(function(){
$(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $('[id="practicesContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="presentationContent"]').height() + $('[id="introductionContent"]').height() + $('[id="projectContent"]').height() + $('[id="proceduresContent"]').height(); console.log(wintop); var totalScroll = ((wintop-previousprogress)/(docheight))*100; console.log("total scroll" + totalScroll); $(".progressBar5").css("width",totalScroll+"%"); });
});
$(document).ready(function(){
$(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $('[id="prospectsContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="presentationContent"]').height() + $('[id="introductionContent"]').height() + $('[id="projectContent"]').height() + $('[id="proceduresContent"]').height() + $('[id="practicesContent"]').height(); console.log(wintop); var totalScroll = ((wintop-previousprogress)/(docheight))*100; console.log("total scroll" + totalScroll); $(".progressBar6").css("width",totalScroll+"%"); });
});
$('#highlightToggle').click(function(){ $('.slider').toggleClass("active"); $('.switch').toggleClass("active"); $('.highlighted').toggleClass("active"); $('.highlightOverlay').toggleClass("active"); $('p').toggleClass("active"); $('#editorsHighlights').toggleClass("active"); });