[Ben CParticipant]

Does this theme support jQuery?

I modified a generic script for binding to the scroll event of a container in order to create a dynamic menu that changes as the user scrolls down the page. I included the jQuery file in the view > global > _header.php but it isn’t working. I tested my code in JSFiddle and it’s working fine there, so I’m wondering if there’s a conflict with X Theme core files, assuming this theme supports jQuery.

[Ben CParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in.

X theme depends on jQuery, so it should have no problem with jQuery. You can add your existin jQuery script at Admin > Appearance > Customizer > Custom > Javascript.

Or you can add this code at your child theme’s functions.php

add_action('wp_footer', 'my_custom_jquery', 9999 );
functions my_custom_jquery () { ?> <script type="text/javascript">

// Selectors
var lastId,
    topMenu = jQuery("#menu-mainmenu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = jQuery(jQuery(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
menuItems.click(function(e){
  var href = jQuery(this).attr("href"),
      offsetTop = href === "#" ? 0 : jQuery(href).offset().top-topMenuHeight+1;
  jQuery('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
jQuery(window).scroll(function(){
   // Get container scroll position
   var fromTop = jQuery(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if (jQuery(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><?php }

You will have to clear your caching plugin’s cache first, or just disable it while you’re working at your site, else, your changes will not reflect on realtime.

Hope this helps.

[Ben CParticipant]

This reply has been marked as private.

[Ben CParticipant]

This reply has been marked as private.

[NicoModerator]

Nice glad to know!

Cheers!

[Author]

Posts