This won't work using:

$('div#menuBar,#goLeftBtn,#goRightBtn').attr('disabled', true);

in the document.ready

Any ideas? Thanks!

EDIT:
My html is basically like this:

  <div id="floatRight">
       <img src="./images/all_left.png" id="goAllLeft" class="arrow" />
       <img src="./images/left.png" id="goLeft" class="arrow" />
       <img src="./images/right.png" id="goRight" class="arrow"/>
       <img src="./images/all_right.png" id="goAllRight" class="arrow" />
    </div>

I know those aren't the exact image names in the jquery code above, but that is how all of my img's are basically set up & for that particular line of code I only need those img's to be disabled.

This won't work using:

$('div#menuBar,#goLeftBtn,#goRightBtn').attr('disabled', true);

in the document.ready

Any ideas? Thanks!

EDIT:
My html is basically like this:

  <div id="floatRight">
       <img src="./images/all_left.png" id="goAllLeft" class="arrow" />
       <img src="./images/left.png" id="goLeft" class="arrow" />
       <img src="./images/right.png" id="goRight" class="arrow"/>
       <img src="./images/all_right.png" id="goAllRight" class="arrow" />
    </div>

I know those aren't the exact image names in the jquery code above, but that is how all of my img's are basically set up & for that particular line of code I only need those img's to be disabled.

• javascript
• jquery

• What "click function" are you talking about here? Is it your own event handler, or are your "images" actually <input> elements of type "image"? You don't provide very much information in your question. – Pointy Commented Sep 1, 2010 at 13:21
• The click function itself has nothing to do with it really. It does many different things when the image is clicked. I just want to know how to disable a user from clicking the images until the page is loaded. After it is loaded, I want them to be able to click it. – Jenn Commented Sep 1, 2010 at 13:27
• Also just as a note: "div#menuBar" should probably be just "#menuBar", since the id "menuBar" has to be unique on the page anyway. It's a little faster when you leave off the tag name, because jQuery will check for it even though it's sort-of not useful. – Pointy Commented Sep 1, 2010 at 13:34
• Can you post some of your HTML? I would like to see if your <img /> tags are wrapped in <a /> which I'm guessing they are. – hunter Commented Sep 1, 2010 at 13:55

4 Answers 4

Rather than trying to disable while loading can you not bind the click events until the document is loaded?

If these are all images without being wrapped by anchor tags you can acplish this easily.

<img id="menuBar" />
<img id="goLeftBtn" />
<img id="goRightBtn" />

currently no click events bound so there's really nothing to disable

<script type="text/javascript">
    $(function(){
        $("#goLeftBtn").click(function() { /* go left */ });
        $("#goRightBtn").click(function() { /* go right */ });
        $("#menuBar").click(function() { /* go menu? */ });
    });
</script>

if you're wrapping these in anchor tags you won't be able to call e.preventDefault to stop the click event from happening since the page isn't finished loading and the jQuery events are not bound.

And if you've bound your click events inline (might not be a good idea) like so:

<img id="menuBar" onclick="return DoMenuStuff();" />
<img id="goLeftBtn" onclick="return GoLeft();" />
<img id="goRightBtn" onclick="return GoRight();" />

You can always do something like this:

<script type="text/javascript">
    var loaded = false;
    $(function(){
        loaded = true; // page done loading
    });

    function DoMenuStuff()
    {
        if(loaded) { /* do stuff */ }
    }

    function GoLeft()
    {
        if(loaded) { /* do stuff */ }
    }

    function GoRight()
    {
        if(loaded) { /* do stuff */ }
    }
</script>

$('div#menuBar,#goLeftBtn,#goRightBtn').click(function() { return false; });

will work until you're ready to activate it.

Or actually why don't you just not attach a click event until it's loaded?

This actually would work, which means this would add a disabled attribute to #menuBar, #goLeftBtn and #goRightBtn.
Unfortunatly that doesn't help to cancle the event handler, since an <img> can't bee "disabled".

So you need to remove/unbind the handler itself. That again depends on how you are binding the click event. If you're doing it with jQuery, you can use .unbind().

If you are using an inline event handler, you need to remove or modify it, to prevent the click handler from execution.

You could put a <div> on the page, positioned absolutely to cover the entire viewport, and make it transparent but visible with a big z-index. That should block all clicks from making it through to the real page elements. In your document "load" handler, make that "shroud" <div> go away (or make it "display: none").