0
Welcome Guest! Login
0 items Join Now

You are not authorized to access that page, please login...

Add .active to one page menu element

    • PreArt's Avatar
    • PreArt
    • Sr. Rocketeer
    • Posts: 107
    • Thanks: 0

    Add .active to one page menu element

    Posted 8 years 2 months ago
    • Hello.
      My site:
      muwo1.zawada.kylos.pl/

      This is one page website and I want menu element to be set to active when I click or scroll down to sections.
      I tried to add this code to "Custom Content" in "Head properties" (in gantry template), but it doesn't work.
      In Firefox debuger i get "TypeError: topMenu is null" - I don't know what to do with this.

      Hoe can I fix this?
      <script type="text/javascript">
      // Cache selectors
      var lastId,
          topMenu = $("#g-toplevel"),
          topMenuHeight = topMenu.outerHeight()+15,
          // All list items
          menuItems = topMenu.find("a"),
          // Anchors corresponding to menu items
          scrollItems = menuItems.map(function(){
            var item = $($(this).attr("href"));
            if (item.length) { return item; }
          }),
          noScrollAction = false;
      
      // Bind click handler to menu items
      // so we can get a fancy scroll animation
      menuItems.click(function(e){
          var href = $(this).attr("href"),
              offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
          noScrollAction = true;
          $('html, body').stop().animate({ 
              scrollTop: offsetTop
          },{
              duration: 300,
              complete: function() {
                  menuItems
                      .parent().removeClass("active")
                      .end().filter("[href=" + href +"]").parent().addClass("active");
                  setTimeout(function(){ noScrollAction = false; }, 10);
              }
          });
          e.preventDefault();
      });
      
      // Bind to scroll
      $(window).scroll(function(){
         if(!noScrollAction){
             // Get container scroll position
             var fromTop = $(this).scrollTop()+topMenuHeight;
      
             // Get id of current scroll item
             var cur = scrollItems.map(function(){
               if ($(this).offset().top < fromTop)
                 return this;
             });
             // Get the id of the current element
             cur = cur[cur.length-1];
             var id = cur && cur.length ? cur[0].id : "";
      
             if (lastId !== id) {
                 lastId = id;
                 // Set/remove active class
                 menuItems
                   .parent().removeClass("active")
                   .end().filter("[href=#"+id+"]").parent().addClass("active");
             }
         }    
      });
      </script>
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Add .active to one page menu element

    Posted 8 years 2 months ago
    • g-toplevel is a class not an ID so that's why you can't find it with jquery you are looking for it as an ID "#" instead of class ".".

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • PreArt's Avatar
    • PreArt
    • Sr. Rocketeer
    • Posts: 107
    • Thanks: 0

    Re: Add .active to one page menu element

    Posted 8 years 2 months ago
    • Hello.
      I've changed it to .g-toplevel and it still doesn't work :-(
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Add .active to one page menu element

    Posted 8 years 1 month ago
    • 1. You are loading multiple copies of jquery and different versions (see screenshots).
      2. Your script is not waiting for the dom to be loaded before it executes therefore the class won't even have been rendered at the time the script executes.
      3. Mootools is also being loaded and this can often conflict with jquery (especially if you just use "$" instead "jquery"
      4. This is nothing to do with Gantry or any RT products. This is bespoke custom development that you are undertaking which is really beyond the scope of the support we can offer in this forum.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.052 seconds