3

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.

Improve this question
4
  • 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. 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. 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. 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. Commented Sep 1, 2010 at 13:55

4 Answers 4

Reset to default
3

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 accomplish 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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I couldn't agree more. I think this is the best way.
1 
$('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?

Improve this answer

5 Comments

"just not attach a click event until it's loaded" +1
The click event is not in the $(document).ready or the $(window).load at all its just in my main code. I don't want to add it to the $(window).load section because I have so many other things that are loading in that section it will really slow down my page.
Putting handlers directly in your code is generally regarded as icky, @Jenn, and putting them in the "ready" handler won't slow your code down - the browser already has to deal with them being stuffed into the markup anyway, so it's still doing the same amount of work.
I agree with Pointy, but if for some reason you can't touch that code, the above snippet should definitely work.
Thank you! the return false did the trick. I added a return true in the window.load section to make it work again. Thanks for the help
1

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 become "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.

Improve this answer

2 Comments

An alternative to unbinding the handler(s) would be to associate some state flag with the image elements, and in the document (or per-image) "load" event handler, set the state flag to "enabled". Then the event handler(s) for "click" events would simply check the flag before doing anything, and return false if the flag isn't enabled.
I tried to unbind it in the but that prevents it from working even after the page has loaded.
0

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").

Improve this answer

4 Comments

It's what things like the jQuery UI dialog do to make dialogs be modal.
The only issue I have with this is that my code requires the first element on my page to be the first page.. It automatically gives it the class 'current' and I have the page divs loading externally, so if i were to insert a loading div either from the javascript/jquery or just a straight div in the code alone, it would mess up the pages div's.. I hope that makes sense! But I am going to keep trying with this
first page as in first div.. showing a cover image for a magazine or book., after that is all of the other pages images in seperate divs.
The "shroud" div can be anywhere in the markup, since you're going to make it "position: absolute" anyway.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.