css - Fade out div over the whole site to (simulate) do a preloader with (Mootools) Jquery -

I have created a page, 3 columns, tableless and CSS (as it should be). Sometimes the browser does not do anything at its place. So I created a fake preloader in a DIV id = "preloader" and created a material wrapper in another div id = "container".

First I made the entire outer constellation (not there, as opposed to visibility, which only "hides").

css

  #container {display: none} #preloader {display: block}  

Again, with Mittul, I Changed its values ​​when the entire document was loaded, so when the container was visible (block) it is fully prepared to be skinned by CSS (images and everything included).

<$$ ('div # preloader') setstyle ('display', 'none'); $$ ('Div # container'). SetStyle ('Display', 'Block');});

So good yet, but as I could not feel happy there, I wanted to add some spices to the solution. I decided to use a fade out effect for the preloader div, or fade in effect for the container, I thought that there are many things inside the container and the fade in effect can turn into a "not very good" effect, So I decided to fade the preloader div on the container's device.

Then there was trouble I am not a programmer, I am a graphic designer, and whenever I am very good at unveiling the code and shaping my bad urge, this time I am very much from mutual documents Failure to understand something (I was the worst example of them and the lack of tutorials of all time), I finally came to:

  window.addEvent ('load', Function ($) ($ div # container). SetStyle ('$$ (' div # preloader '). Fade (' out ' ); $$ ('div # preloader') setstyle ('display', 'none');});  

This works! But I need to give more time to the preloader Actually, this problem is that I just felt that I need some var = myFade and then it's going to give a parameter of the period, but I dig a lot and I can not find anything Especially when there are instructions for a button click.

Let me tell you about this. I want to ask people to help. This should be too much.

First of all, Javascript should be used to fix CSS layout issues. Very, very last resort.

Try to work your layout in a web-based browser (like Firefox, Chrome), so that you start with a solid foundation. Then try to fix the remaining (browser-specific) problems while using additional CSS properties (like display: Inline for IE6 double margin floating bug).

If you still do not issue your layout and really want to use JavaScript / MooTools, try using it:

An HTML element from the ID To select, use $ ('id'), $$ ('# id'). $$ returns an array of elements, which is why $$ ('div # preloader'). Get ('tween') does not work $ ('preloader') ('Twin') works without problems.

Next, using Events Learn about events or function chaining, you can set the preloader's display at any time:

  $ ('preloader' ). Set ('twil', {onComplete: function () {$ ('preloder'). Set-style ('display', 'none')}}). Fade (0);  

or using function chaining (supports the start () function):

  $ ('preloader'). Get ('tween'). ('Opacity', 0). Chain (function () {$ ('preloader'). Set-style ('display', 'none'););  

As you see, it's really easy not to be afraid of getting your hands dirty ...