CODEWITHSUNDEEP
javascriptjquerydrupal-7
Graham
Graham

Reputation: 1473

jQuery not rendering properly

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>

Upvotes: 1

Views: 369

Answers (3)

g_thom
g_thom

Reputation: 2810

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.

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 77956

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)
   });
});

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

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);
    });

});

Upvotes: 1

Related Questions