Difference between revisions of "Team:SDU-Denmark/navbar/jquery"

 
(81 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
$(document).ready(function () {
+
function activateElement(element,menuElement){
−
  $(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.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
+
−
          $('.tab-content a').removeClass("active");
+
−
          currLink.addClass("active");   
+
−
        }
+
−
        else{
+
−
          currLink.removeClass("active");
+
−
        }
+
−
 
+
−
  function activateElement(element,menuElement){
+
 
     $('#menu1').removeClass("in");
 
     $('#menu1').removeClass("in");
 
     $('#menu1').removeClass("active");
 
     $('#menu1').removeClass("active");
Line 34: Line 19:
  
 
                
 
                
−
    $('#navbarPresentation').removeClass("active");
 
 
     $('#navbarIntroduction').removeClass("active");
 
     $('#navbarIntroduction').removeClass("active");
 
     $('#navbarProject').removeClass("active");
 
     $('#navbarProject').removeClass("active");
 
     $('#navbarProcedures').removeClass("active");
 
     $('#navbarProcedures').removeClass("active");
 
     $('#navbarPractices').removeClass("active");
 
     $('#navbarPractices').removeClass("active");
−
     $('#navbarProspects').removeClass("active");               
+
     $('#navbarProspects').removeClass("active");
 +
    $('#navbarCredits').removeClass("active");               
 
                
 
                
 
     element.addClass("active");
 
     element.addClass("active");
 
     element.addClass("in");
 
     element.addClass("in");
 
     menuElement.addClass("active");
 
     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) {
 +
          $('.tab-content a').removeClass("active");
 +
          currLink.addClass("active");
 +
   
 +
                 
 +
    if ((currLink.attr('href') === "#home"  || currLink.attr('href') === "#introduction"  || currLink.attr('href') === "#achievements"  || currLink.attr('href') === "#world-situation"  || currLink.attr('href') === "#our-solution") && !$('#menu1').hasClass("active")){
 +
      activateElement($('#menu1'),$('#navbarIntroduction'));
 
     }
 
     }
−
           
+
     else if ((currLink.attr('href') === "#project-and-results" || currLink.attr('href') === "#project-design"  || currLink.attr('href') === "#demonstration-and-results") && !$('#menu2').hasClass("active")){
−
     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($('#menu2'),$('#navbarProject'));
−
      activateElement($('#menu1'),$('#navbarPresentation'));
+
     }
−
     }  
+
     else if ((currLink.attr('href') === "#parts-and-procedures" || currLink.attr('href') === "#parts"  || currLink.attr('href') === "#notebook"  || currLink.attr('href') === "#sops-and-protocols"  || currLink.attr('href') === "#safety") && !$('#menu3').hasClass("active")){
−
     else if ((currLink.attr('href') === "#introduction" || currLink.attr('href') === "#description"  || currLink.attr('href') === "#outreach") && !$('#menu2').hasClass("active")){
+
      activateElement($('#menu3'),$('#navbarProcedures'));
−
        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")){
+
     else if ((currLink.attr('href') === "#practices"  || currLink.attr('href') === "#bioethics"  || currLink.attr('href') === "#integrated-practices"  || currLink.attr('href') === "#education-and-public-engagement") && !$('#menu4').hasClass("active")){
−
       activateElement($('#menu3'),$('#navbarProject'));
+
       activateElement($('#menu4'),$('#navbarPractices'));
 
     }  
 
     }  
−
     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")){
+
     else if ((currLink.attr('href') === "#prospects"  || currLink.attr('href') === "#perspectives"  || currLink.attr('href') === "#future-igem-teams") && !$('#menu5').hasClass("active")){
−
       activateElement($('#menu4'),$('#navbarProcedures'));
+
       activateElement($('#menu5'),$('#navbarProspects'));
 
     }  
 
     }  
−
     else if ((currLink.attr('href') === "#practices"  || currLink.attr('href') === "#bioethics"  || currLink.attr('href') === "#integrated"  || currLink.attr('href') === "#events") && !$('#menu5').hasClass("active")){
+
     else if ((currLink.attr('href') === "#credits"  || currLink.attr('href') === "#team"  || currLink.attr('href') === "#attributions"  || currLink.attr('href') === "#collaborations"  || currLink.attr('href') === "#final-words") && !$('#menu6').hasClass("active")){
−
       activateElement($('#menu5'),$('#navbarPractices'));
+
       activateElement($('#menu6'),$('#navbarCredits'));
 
     }  
 
     }  
−
     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="introductionContent"]').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="projectContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="introductionContent"]').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="proceduresContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="introductionContent"]').height() + $('[id="projectContent"]').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="practicesContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="introductionContent"]').height() + $('[id="projectContent"]').height() + $('[id="proceduresContent"]').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="prospectsContent"]').height(), winheight = $(window).height(), previousprogress = $('[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);
 +
    $(".progressBar5").css("width",totalScroll+"%");
 +
   
 +
  });
 +
});
 +
 +
$(document).ready(function(){
 +
 +
  $(window).scroll(function() {
 +
    var wintop = $(window).scrollTop(), docheight = $('[id="creditsContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="introductionContent"]').height() + $('[id="projectContent"]').height() + $('[id="proceduresContent"]').height() + $('[id="practicesContent"]').height() + $('[id="prospectsContent"]').height();
 +
    console.log(wintop);
 +
    var winheight = $(window).height();
 +
    var totalScroll = ((wintop-previousprogress)/(docheight-winheight))*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");
 +
      $('.highlighted-image').toggleClass("active");
 +
      $('.highlighted-div').toggleClass("active");
 +
      $('.list').toggleClass("active");
 +
    });
 +
 +
    $('.reference').click(function(){
 +
      $('.reference').toggleClass("active");
 +
    });
 +
 +
    $('.reference-2').click(function(){
 +
      $('.reference-2').toggleClass("active");
 +
    });

Latest revision as of 00:38, 2 November 2017

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");



   $('#navbarIntroduction').removeClass("active");
   $('#navbarProject').removeClass("active");
   $('#navbarProcedures').removeClass("active");
   $('#navbarPractices').removeClass("active");
   $('#navbarProspects').removeClass("active");
   $('#navbarCredits').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) {
         $('.tab-content a').removeClass("active");
         currLink.addClass("active");
   
                 
   if ((currLink.attr('href') === "#home"  || currLink.attr('href') === "#introduction"  || currLink.attr('href') === "#achievements"  || currLink.attr('href') === "#world-situation"  || currLink.attr('href') === "#our-solution") && !$('#menu1').hasClass("active")){
     activateElement($('#menu1'),$('#navbarIntroduction'));
   }
   else if ((currLink.attr('href') === "#project-and-results" || currLink.attr('href') === "#project-design"  || currLink.attr('href') === "#demonstration-and-results") && !$('#menu2').hasClass("active")){
       activateElement($('#menu2'),$('#navbarProject'));
   }
   else if ((currLink.attr('href') === "#parts-and-procedures"  || currLink.attr('href') === "#parts"  || currLink.attr('href') === "#notebook"  || currLink.attr('href') === "#sops-and-protocols"  || currLink.attr('href') === "#safety") && !$('#menu3').hasClass("active")){
     activateElement($('#menu3'),$('#navbarProcedures'));
   }
   else if ((currLink.attr('href') === "#practices"  || currLink.attr('href') === "#bioethics"  || currLink.attr('href') === "#integrated-practices"  || currLink.attr('href') === "#education-and-public-engagement") && !$('#menu4').hasClass("active")){
     activateElement($('#menu4'),$('#navbarPractices'));
   } 
   else if ((currLink.attr('href') === "#prospects"  || currLink.attr('href') === "#perspectives"  || currLink.attr('href') === "#future-igem-teams") && !$('#menu5').hasClass("active")){
     activateElement($('#menu5'),$('#navbarProspects'));
   } 
   else if ((currLink.attr('href') === "#credits"  || currLink.attr('href') === "#team"  || currLink.attr('href') === "#attributions"  || currLink.attr('href') === "#collaborations"  || currLink.attr('href') === "#final-words") && !$('#menu6').hasClass("active")){
     activateElement($('#menu6'),$('#navbarCredits'));
   } 
 }  
 });

} 


$(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="introductionContent"]').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="projectContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="introductionContent"]').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="proceduresContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="introductionContent"]').height() + $('[id="projectContent"]').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="practicesContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="introductionContent"]').height() + $('[id="projectContent"]').height() + $('[id="proceduresContent"]').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="prospectsContent"]').height(), winheight = $(window).height(), previousprogress = $('[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);
   $(".progressBar5").css("width",totalScroll+"%");
   
 });

});

$(document).ready(function(){ 

 $(window).scroll(function() {
   var wintop = $(window).scrollTop(), docheight = $('[id="creditsContent"]').height(), winheight = $(window).height(), previousprogress = $('[id="introductionContent"]').height() + $('[id="projectContent"]').height() + $('[id="proceduresContent"]').height() + $('[id="practicesContent"]').height() + $('[id="prospectsContent"]').height();
   console.log(wintop);
   var winheight = $(window).height();
   var totalScroll = ((wintop-previousprogress)/(docheight-winheight))*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");
     $('.highlighted-image').toggleClass("active");
     $('.highlighted-div').toggleClass("active");
     $('.list').toggleClass("active");
   });

   $('.reference').click(function(){
     $('.reference').toggleClass("active");
   });

   $('.reference-2').click(function(){
     $('.reference-2').toggleClass("active");
   });