JQuery FadeIn effect and Omega Theme

Question

I am trying to use the fade in effect in Drupal when I load a page.

In my Omega sub-theme I have included the following line in its .info file.

scripts[] = '/js/custom.js'

In the script, I have included the following code.

$(document).ready(function() {

$("body").css("display", "none");
$("body").fadeIn(2000);

});

If I load the page, I see no effect at all, but I clearly see that my JavaScript is in the header.

<script type="text/javascript" src="http://localhost/innodru/sites/all/themes/CHILDTHEME/js/custom.js?m2zpiw"></script>

I have cleaned the cache and tried a lot of things, but it does not look like is working. I am using Drupal 7.

Answer 1

You should not be using document.ready. Instead you should use drupal behaviors. Even though document.ready will work. Behaviors is the drupal 7 way to do things as these behaviors get called after ajax calls too.

css

body {display:none;}

javascript

(function ($) {
    Drupal.behaviors.fadein = {
            attach:function(context, settings){
                    $('body', $context).once().fadeIn(2000);
            }
    };
})(jQuery);

And FYI
Omega adds a 'responsivelayout' event that will get fired every time the layout is set/changed including when the page loads so you could potentially make the page display straight away on mobiles and fade in on others.

(function ($) {
    Drupal.behaviors.fadein = {
            attach:function(context, settings){
                $('body', context).bind('responsivelayout', function(e) {
                    if($('body', context).hasClass('responsive-layout-mobile')){
                            $('body').once().show();
                    }else{
                            $('body').once().fadeIn(2000);
                    }
                });
            }
    };
})(jQuery);

I have not tested the code BTW, but you get the idea

Answer 2

In Drupal 7 you need to wrap your jQuery in another function to use the $ alias. See https://stackoverflow.com/questions/4681309/using-jquery-in-drupal-7

(function ($) {
  $(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(2000);
  });
})(jQuery);

But trying to fade in the entire body of a page sounds dubious, especially with the Omega theme which contains a lot of special JS and CSS to handle automatic re-sizing... I don't know how friendly your fade in will play with the resizer stuff from Omega.

Answer 3

I set the css to

body {
   display:none;
}

and then display it with a script

 (function($) {     
        $(document).ready(function() {
        $('body').fadeIn();
    });

    })(jQuery);