2

I'm trying to get this code to work in Drupal 7.

$(document).ready(function(){

  $("#sample").mouseover(function() {
    $(this).animate({ backgroundColor:'#f00'},1000); }).mouseout(function() {
    $(this).animate({ backgroundColor:'#ccc'},1000);
  });       

});

For some reason, when I paste it into the front--page.tpl template, it doesn't work.

I've also tried including a JavaScript file into the template.php file.

1
  • Drupal modules should use Drupal behaviors, in such cases. I am not clear what you mean by pasting JavaScript code in a template file, and why you would not put the code in a JavaScript file.
    – apaderno
    Jul 12, 2011 at 12:49

4 Answers 4

5

jQuery in D7 is in noConflict mode. You need to use jQuery instead of $, or a closure. See http://drupal.org/node/171213

3
  • Thank you for the fast reply! I read through it and came up with the following: (function($) { $(document).ready(function() { $(".box_teaser").mouseover(function() { $(this).animate({ backgroundColor:'#f00'},1000); }).mouseout(function() { $(this).animate({ backgroundColor:'#ccc'},1000); }); }); }(jQuery)); Its still not working tho. The .js file is in the header when I view source, tried it in a static pace and it was working :(.
    – Peter
    Jul 12, 2011 at 12:49
  • You have an error at the end its })(jQuery); not }(jQuery));
    – iStryker
    Jul 12, 2011 at 14:11
  • @Peter Use jQuery instead of $ (see tshikatshikaaa.blogspot.com/2012/05/…) May 15, 2012 at 21:20
1

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

The .css() function doesn't queue behind running animations, it's instantaneous.

To match the behaviour that you're after, you'd need to do the following:

(function($) { 
  $(document).ready(function() {
    $(".box_teaser").mouseouver(function() {
      var p = $(".box_teaser").css("background-color", "yellow");
      p.hide(1500).show(1500);
      p.queue(function() {
        p.css("background-color", "red");
      });
    });
  });
})(jQuery);

The .queue() function waits for running animations to run out and then fires whatever is in the function supplied.

2
  • Wow, thank you so much! I'm kinda new to programming etc., so I really appreciate your help. Ok, so I copied your script into a script.js, added it in my template file (I can see it in the <head> when I view source). It's still not working. The box should be yellow by now and "fade" to red in 1,5 sec, correct ?
    – Peter
    Jul 12, 2011 at 15:35
  • yes, thats what it should do. Also in front--page.tpl, add this line drupal_add_js(drupal_get_path('theme', 'MYTHEME') . '/js/my-new-js-file.js'). Then create /js/my-new-js-file.js and put your code in there. This will help with debugging. Also use firebug, with the console enabled.
    – iStryker
    Jul 12, 2011 at 15:52
0

Or try:

$(document).ready(function(){
  /* your function inside here */
});
-1

Try in this way: create your script example.js that have this code for example:

**var $ob= jQuery.noconflict();
$ob(function(){

$ob("a").fadeOut(); });**

1
  • where are you invoking jQuery.noconflict(); This is a no,no just wrap in in ({ })(jQuery); Plus fadeOut is not what Peter is trying to do
    – iStryker
    Jul 12, 2011 at 14:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.