By oriweissman on

Hi everybody!
I would like to add this jQuery code: http://jsfiddle.net/mekwall/up4nu/ to my drupal 7 site.
I tried do that as the drupal doc says but it doesnt work... how can I implement this code?

thanks!

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

You could read Managing JavaScript in Drupal 7, particularly "Using jQuery" and "Behaviors"

oriweissman’s picture

oriweissman commented

Thanks for the fast reply!
To be honest, I dont have a lot of experience with jQuery... I read this url you gave me but still having problems with that specific code.
I dont need to built a module, only to use this jQuery code as is..

Thanks

WorldFallz’s picture

WorldFallz commented

It's not clear what that code does, but you can't just add random jquery code to your site and expect it to work. Reading the link nevets listed is the best way to get a clue on how to add jquery to a drupal site.

If you don't want to do that, then you're probably better off finding/hiring someone to do it for you.

jaypan’s picture

jaypan
Location Victoria, BC
commented

To add to WorldFallz comment, you've posted in the module development and code questions forum. We assist people in writing modules and code, but we don't just write it for you. Our purpose is in assisting people to become better coders, and to help ease the frustrations of trying to code within Drupal (as it can be frustrating at the start when you don't understand). If you spend some time and try to make a go of writing your own code (which will require a custom module), you'll find we're happy to show you where you are going right, and where you are going wrong. But if you just want us to write code, then as WorldFallz said, you're better to hire someone to do it, and you can post a request in the Paid Services section of the forum (you will get lots of responses).

Contact me to contract me for D7 -> D10/11 migrations.
Or anything really. I'm friendly, and open to work or conversation.
oriweissman’s picture

oriweissman commented

Thanks, well:
I have a menu named #superfish-1, which contains # links (for anchors on one long page).
1 - The code goal is to:
* set the menu item to active as I click on it.
* Smooth scroll to the anchor
* as I scroll, set the corresponding menu item to active
2 - I added this line in the .info file: scripts[] = js/test.js
3 - this is the test.js code:

jQuery(document).ready(function($){

// Cache selectors
var lastId,
    topMenu = $("#superfish-1"),
    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; }
    });

// 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;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // 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");
   }                   
});

})(jQuery);

This is not working... any ideas?