How to disable user's input while loading page with jquery?

Question

I have a heavy-jquerized page with some links, various user inputs and such.

I use jquery, with actions defined in a

$(document).ready( function() {
  ....
} );

block.

But while the page is loading (or, even worse - reloading), and a user clicks a link, the href action from it is triggered, as the javascript isn't loaded / active yet.

I wanted to block it somehow. One way that came to my mind is to put a transparent div over whole document, that would recieve the click events instead of the layer below it. Then, in my .ready function in javascript, I could hide that div making it possible to use the page.

Is it a good practice? Or should I try some diffrent approach?

Answer 1

A transparent div could work, assuming it’s positioned above everything. (I’m never quite clear how visible an element has to be to receive click events.)

You might want to make the div visible though; it could be equally confusing for visitors if they can see everything on the page, but not click it.

You’ll probably need to use JavaScript to make the div as tall as the page though.

Answer 2

Another option is to use the jQuery BlockUI plugin (which probably usew the same or similar idea behind the scenes).

Answer 3

The overlay DIV should work. Another option would be to place all the content inside a hidden container visibility: hidden then toggle to visible as the last $(document).ready statement.

Answer 4

If you don't want your links to act like links (ie their href is never meant to followed), why make them links in the first place? You'd be better served by making your clickable elements a div or span (something without a default action), and attaching the click handler as per normal.

I'd really advise against blocking the ui with a div - it seems the entirely wrong approach, making the page non-functional to someone with JS disabled, as well as blocking other common tasks like copying text.

---

In light of the clarification, to block the UI only if JS is enabled, but not yet loaded, I'd suggest the following.

HTML (first thing after body):

<script type="text/javascript">document.write('<div id="UIBlocker">Please wait while we load...</div>')</script>

CSS:

#UIBlocker 
{ 
    position: fixed; /* or absolute, for IE6 */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Or, if you prefer not to use document.write, leave the UIBlocker div as straight HTML at the top of body, but have the following in head

HTML:

<noscript>
    <style type="text/css">
        #UIBlocker { display: none !important; }
    </style>
</noscript>

This will ensure it does not block for non-JS enabled browsers

Answer 5

As you said it yourself javascript isn't loaded yet. Maybe the css isn't loaded either.

so something with visual element will not work i think. IF you want to do some with the viaual elements (css) you have to hardcode it in the html node <tagname style="blabla">

You could possibly add the href behavious in a later stadium when the js is loaded.

What you get is a <span> with a title and this should set the behaviour or something. I used a title, but can be a different attribute.

This doesn't use any jquery, only for loading

    $(document).reade(function () {
        relNoFollow();
    });

function relNoFollow() {
 var FakeLinks = document.getElementsByTagName('span');

 if( FakeLinks.length > 0 ) {
  for( var i = 0; i < FakeLinks.length; i++ ) {
   if( FakeLinks[i].title.indexOf( 'http://' ) != -1 ) {
    FakeLinks[i].onmouseout  = fakelinkMouseOut;
    FakeLinks[i].onmouseover  = fakelinkMouseOver;
    FakeLinks[i].onclick   = fakelinkClick;
   }
  }
 }
}

function fakelinkMouseOver() {
 this.className = 'fakelink-hover';
}

function fakelinkMouseOut() {
 this.className = 'fakelink';
}

function fakelinkClick() {
 window.location.href = this.title;
}