1

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.

3 Answers 3

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

1
  • +1 for using Drupal.behaviors. I would recommend to change body {display:none;} to .js body {display:none;}. The 'js' class is automatically added to the html element if javascript is enabled. This way the body remains visible for visitors who have javascript disabled. Jul 27, 2014 at 8:25
0

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.

4
  • Also, if the page needs a bit longer to load, the user will see the content while loading. Only after complete load the body disappears and fades in again. Questionable. Further, instead of $(document) you can also use jQuery(document) in Drupal 7.
    – Paul
    Apr 24, 2012 at 16:14
  • Hi actually I tried to use the script but nothing happens. The site will be an internal site for some touch screen, so size is not an issue (everything will be local) and I am trying to add some eyecandy. The Body was a test mostly, I will use some blocks instead. But really nothing moves. Apr 25, 2012 at 7:26
  • Have you used Firebug or Chrome's Developer console to check for Javascript errors? Apr 25, 2012 at 13:26
  • 1
    My advice would be to wrap the code in Drupal.behaviour stackoverflow.com/questions/3941426/drupal-behaviours Dec 10, 2012 at 21:45
0

I set the css to

body {
   display:none;
}

and then display it with a script

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

    })(jQuery);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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