By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,852 Members | 994 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,852 IT Pros & Developers. It's quick & easy.

Using <div> to cover page contents

P: 74
I'm using Ajax to help make my webpage appear to be smoother.

When a control has submitted, I would like to prevent any controls within that control from resubmitting until the request has completed.

Because my forum has many buttons on it, it would take a long time to disable each one upon submitting the forum (using JavaScript).

So instead, I plan on using a <div> that will "shield" my buttons and prevent the user from clicking any button under that <div>.

My problem is that I can't seem to get this <div> to display over the content.

Eg (simplified example)
Expand|Select|Wrap|Line Numbers
  1. <div id="theContainerOfMyControls">
  2.     <div id="theButtonShieldingDiv" style="background-color:black; position:absolute; height:100%; width:100%; display:none;"></div>
  3.    <!-- a bunch of other <div>s containing buttons are here that I need to "cover up" -->
  4. </div>
  5.  
So, basically I set the display of the "theButtonShieldingDiv" from "none" to "block" when the page is submitted to the server.

This will cover the entire contents of the screen that's being displayed; however, when the user scrolls down, the section previously hidden is not covered by the <div>...making it still possible for the user to submit the page more than once.

Is there a way to make the "theButtonShieldingDiv" span the contents of "theContainerOfMyControl" instead of the whole page?

(Basically I'd like to use "position:relative" but I'm not having luck with this)

If this isn't possible, is there a way to make sure that the <div> is 100% of the content instead of 100% of the page content being displayed?

Any suggestions are welcome!

Thanks a lot
-LilOlMe
Feb 11 '08 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
I have to think about this (as I'm walking out the door) but I just closed a thread a few minutes ago that I think is related. Check that one out. "How to place a div on top of another div"
Feb 11 '08 #2

P: 74
I have to think about this (as I'm walking out the door) but I just closed a thread a few minutes ago that I think is related. Check that one out. "How to place a div on top of another div"
I saw the thread that you just closed.
It still doesn't help me.

I learned that the "position:absolute" does work relative to it's parent container but only if you don't set the top, bottom, left, or right css attributes.

I'm still experiencing a problem with the "covering" <div> not becoming height:100% of the containing <div>...it only goes to the bottom of the browser and when you scroll down the rest of the page is still visible.

Thanks for your help,

-LilOlMe
Feb 11 '08 #3

Death Slaught
100+
P: 1,137
Try giving your division a z-index of 100.

Hope it helps, Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Feb 11 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.