Search code examples
javascriptjqueryhtmldommootools

Make a Web Page Appear Fully Loaded, or jQuery to MooTools Translation

I want a web page to appear in the browser only after it finished loading all its elements.

My usual solution is to delay showing the page until after all the elements finished loading. I use this in CSS:

body {
opacity: 0;
}

– and place this jQuery snippet in the <head> of the page

<script type="text/javascript">
$(window).load(function() {
        $('body').animate({opacity: 1}, 300);
}); 
</script>

– to smoothly fade in the complete page.

However, the page I'm working on has MooTools library linked to it. I do not want to make the page even heavier by linking jQuery to it, as well, but I'm unfamiliar with MooTools, and could use a bit of help.

Question: what's the exact MooTools translation of the jQuery snippet I typed above?

Thank you in advance for your help!

Solution

  • I belive you are looking for this:

    window.addEvent('load', function() {
  $$('body').set('morph', {duration: 300}).morph({'opacity': '1'});
});

    source here

    morph instead of animate in mootools source here

    Further Info

    So $('block') is like saying getElementById('block') gets <div id="block"></div>

    $$('body') is like getElementsByTagName(body) gets <body></body>

    $$('.block') will also get <div class="block"></div>

    great source here