I'm having a very frustrating issue with jquery. I am trying to co-oped some jquery script, css, and text from ProPublica to use as a republished work on my company website (publicsource.org). The code that I am trying to use is here:
$(document).ready(function() {
var tabCommon = $(".frack-show-common");
tabCommon.addClass("active");
var tabSick = $(".frack-show-sick");
var tabWeird = $(".frack-show-weird");
tabCommon.click(function(e) {
e.preventDefault();
$("#common").fadeIn("slow");
$("#sick").hide();
$("#weird").hide();
tabCommon.addClass("active");
tabSick.removeClass("active");
tabWeird.removeClass("active");
});
tabSick.click(function(e) {
e.preventDefault();
$("#common").hide();
$("#sick").fadeIn("slow");
$("#weird").hide();
tabCommon.removeClass("active");
tabSick.addClass("active");
tabWeird.removeClass("active");
});
tabWeird.click(function(e) {
e.preventDefault();
$("#common").hide();
$("#sick").hide();
$("#weird").fadeIn("slow");
tabCommon.removeClass("active");
tabSick.removeClass("active");
tabWeird.addClass("active");
});
}); Pretty simple, pretty straight forward... but it won't work. I've tried putting it in the body, I've tried putting it in the template.php. Nothing works, for my default, custom theme that is. Now when I save a few revisions and go to look at it under revisions > view it works just fine.
I'm good enough with jquery that I know that all of my classes are lining up and referenced correctly.
I've searched for answers, but nothing really seems to apply to me. I was wondering if anyone has come up against this before and if there are some things I can look at....
Thanks so much. Allie
Comments
Can't say if this will help
Can't say if this will help with your issue or not, but the best place to put scripts that you'd like to run on doc ready is inside a drupal behaviors wrapper.
(function($) {
Drupal.behaviors.NAMESPACE = { //replace NAMESPACE with however you'd like to categorize your contained functions. For site wide functions I usually use my theme name.
attach: function(context) {
//your code goes here
}
} (jQuery));
Using behaviors makes sure that the code will run at doc ready and after any content has been added or removed via ajax, and helps avoid conflicts. If the latter is causing your problem this might help.
Would I put this code in my
Would I put this code in my theme template.php file? Or do I need to put it in a custom module? I don't have much experience with that sort of thing, but I could certainly work at it!
allie
This wraps the code in your
This wraps the code in your .js file that you add to your theme by any of the normal Drupal means (.info, drupal_add_js, etc.).
The javascript documentation for Drupal was pretty lacking last time I checked, but if you search "Drupal behaviors" you can find some stuff. I have the bad habit of wanting to treat js as if I was working from scratch, ignore the system and add mine on top as if it weren't there, but I try to follow the guidelines. In the long run things seem to work out better that way.
Oh slam dunk! That did the
Oh slam dunk! That did the trick RobW! Thanks so much for all your help.
I also used http://drupal.org/node/304258 as a helper document.
Best.
Glad it helped. Any time, any
Glad it helped. Any time, any time.