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.

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. – marcvangend Jul 27 '14 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 '12 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. – Midoriconcept Apr 25 '12 at 7:26
  • Have you used Firebug or Chrome's Developer console to check for Javascript errors? – Johnathan Elmore Apr 25 '12 at 13:26
  • 1
    My advice would be to wrap the code in Drupal.behaviour stackoverflow.com/questions/3941426/drupal-behaviours – Web Assistant Dec 10 '12 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, privacy policy and cookie policy

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