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

Line 1: Line 1:
 
$(document).ready(function () {
 
$(document).ready(function () {
−
    $(document).on("scroll", onScroll);
 
−
   
 
−
    $('.tab-content a[href*="#"]').on('click', function (e) {
 
−
        e.preventDefault();
 
−
        $(document).off("scroll");
 
−
       
 
−
        $('a').each(function () {
 
−
            $(this).removeClass('active');
 
−
        });
 
−
        $(this).addClass('active');
 
−
     
 
−
        var target = this.hash,
 
−
          $target = $(target);
 
−
        $('html, body').stop().animate({
 
−
            'scrollTop': $target.offset().top+2
 
−
        }, 500, 'swing', function () {
 
−
            window.location.hash = target;
 
−
            $(document).on("scroll", onScroll);
 
−
        });
 
−
    });
 
−
 
 
   $(document).on("scroll", onScroll);
 
   $(document).on("scroll", onScroll);
 
     function onScroll(event){
 
     function onScroll(event){
Line 35: Line 14:
 
         }
 
         }
  
 +
  function activateElement(element,menuElement){
 
   function activateElement(element,menuElement){
 
   function activateElement(element,menuElement){
 
     $('#menu1').removeClass("in");
 
     $('#menu1').removeClass("in");
Line 55: Line 35:
  
 
                
 
                
 +
    $('#navbarPresentation').removeClass("active");
 
     $('#navbarIntroduction').removeClass("active");
 
     $('#navbarIntroduction').removeClass("active");
−
    $('#navbarPresentation').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");            
−
             
+
 
                
 
                
 
     element.addClass("active");
 
     element.addClass("active");
Line 68: Line 47:
 
     }
 
     }
 
              
 
              
−
     if((currLink.attr('href') === "#presentation"  || currLink.attr('href') === "#team"  || currLink.attr('href') === "#attributions"  || currLink.attr('href') === "#collaborations"  || currLink.attr('href') === "#achievements") && !$('#menu1').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($('#menu1'),$('#navbarPresentation'));
 
       activateElement($('#menu1'),$('#navbarPresentation'));
 
     }  
 
     }  
Line 74: Line 53:
 
         activateElement($('#menu2'),$('#navbarIntroduction'));
 
         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'));
 +
    }
 
       });
 
       });
 
     }
 
     }
−
 
 
});
 
});

Revision as of 12:35, 15 August 2017

$(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.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){
 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");
   }
           
   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'));
   } 
     });
   }

});