jQuery not rendering properly

Question

I'm using this jQuery to render a text box onClick. But, It's not rendering... Also, on a side note I'm using Drupal 7. I have the jQuery in the Head tags of the html.php.

 <script type="text/javascript">

  $(document).ready(function() {

    $("#front-background").hide();

        $(window).load(function() {

            $('#links-top-1').hover(function() {

                $('#front-background').fadeIn(2000);

            });

        });

  });

  </script>

(1) I don't see any click handlers in there. (2) Why are you putting a `$(window).load()` inside a `$(document).ready()`? (3) How about some HTML to go with that JavaScript. — mu is too short, Aug 10 '11 at 03:53
[Difference between $(document).ready and $(window).load in jQuery](http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/) — Mrchief, Aug 10 '11 at 14:06

score 1 · Answer 1 · answered Aug 10 '11 at 03:52

You dont need window load event if you are already using $(document).ready method. Try this.

$(document).ready(function() {

    $("#front-background").hide();

    $('#links-top-1').hover(function() {
       $('#front-background').fadeIn(2000);
    });

});

score 1 · Accepted Answer · answered Aug 10 '11 at 03:54

1

This may also be because of how Drupal handles compatibility with other JavaScript libraries.

You can wrap your jQuery function in:

(function ($) {
    //your existing code
})(jQuery);

or if you're comfortable theming using the template.php file, you can add the JS through the function drupal_add_js().

See http://drupal.org/node/171213 for more details.

answered Aug 10 '11 at 03:54

g_thom

2,810
2
18
18

I have a couple questions on this. 1) Is jQuery built into Drupal 7? I'm using the API and it's not rendering. 2) I'm adding this code to the html.php. But, It's for the page--front.tpl.php. Is the html.php global for all template suggestions? I'm not sure if you need to redefined html.php templates for all new template suggestions. I recently switched to D7 so I'm not sure how I'd redefine the html.php. Thank you. – Graham Aug 10 '11 at 04:07
1) Yes, it is. You may also have to add your JS to the Drupal.behaviors object - see http://drupal.org/node/171213. 2) Yes, the html.tpl.php is the global template - the easiest way to add front-page specific logic is through an override of `yourtheme_preprocess_page` in `template.php`. – g_thom Aug 10 '11 at 04:11
Further to 1, just adding jQuery functions through $(document).ready used to work in Drupal 6, but now 7 makes you wrap your jQuery at least in the container above. – g_thom Aug 10 '11 at 04:12
You can also just include a JS file through the line `scripts[] = js/myscript.js` (or whatever your file's name is) in your `info` file of your theme (as long as you wrap the function, it will work and you don't have to use template files. – g_thom Aug 10 '11 at 04:14
The problem is likely with Drupal, since your JS does work: http://jsfiddle.net/FN4Cr/1/ – g_thom Aug 10 '11 at 04:15

score 0 · Answer 3 · answered Aug 10 '11 at 03:53

I didn't see any onClick functionality there. This should work:

CSS:

#front-background {
    display:none;
}

JQuery hover replacement. Fade in on hover, fadeout on leave

$(function() {
   $('#links-top-1').hover(function() {
      $('#front-background').fadeIn(2000);
   },function(){
      $('#front-background').fadeOut(2000)
   });
});

jQuery not rendering properly

3 Answers3

Linked