disable all elements within a div 3

NorthStarDA · Sep 23, 2005

Hi,

I am writing divs to be used in place of alerts in my application. Any time i would normally alert the user with something, i'll pass that to the div content and make it visible. That part is working great, I would like to extend this so that when this div is visible, other content divs are 'grayed out' and disabled to prevent any user interacting with the other divs while my alert div is showing. I have a css class to change the opacity of my underlying divs, but i need to know how to take all buttons, form fields, etc.. in the content div and make them so they can not be clicked on.

is that making sense?

thanks

=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

jemminger · Sep 23, 2005

i must be bored, 'cause here's a full test harness:

Code:

<html>
	<head>
		<title>test</title>

		<script type="text/javascript">
			function toggleAlert() {
				var alertDiv = document.getElementById("alert");
				alertDiv.style.display = alertDiv.style.display == "block" ? "none" : "block";
				toggleDisabled(document.getElementById("content"));
			}
			
			function toggleDisabled(el) {
				try {
					el.disabled = el.disabled ? false : true;
				}
				catch(E){}
				
				if (el.childNodes && el.childNodes.length > 0) {
					for (var x = 0; x < el.childNodes.length; x++) {
						toggleDisabled(el.childNodes[x]);
					}
				}
			}
		</script>

		<style type="text/css">
			#alert {
				display:none;
				background:#ffc;
				padding:5px;
				border:1px solid red;
			}
		</style>
	</head>

	<body>
		<form>
			<div id="content">
				<table>
					<tr>
						<td><input type="text" name="foo" /></td>
					</tr>
					<tr>
						<td>
							<select name="bar">
							<option>a</option>
							<option>b</option>
							<option>c</option>
							</select>
						</td>
					</tr>
				</table>
			</div>
			<div id="alert">error</div>
			<input type="button" value="toggleAlert()" onclick="toggleAlert()" />
		</form>
	</body>
</html>

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

NorthStarDA · Sep 23, 2005

this is awesome, the script works great- if i may ask 1 more thing, would you know how to modify it to disable all links as well?

=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

elegidito · Sep 24, 2005

Doesn't technically disable everything, but they can't click on the objects in the div(s)...here's a working version (tested in IE6 and FF1.0.7):

Code:

<html>
<head>
<script type='text/javascript'>
cDivs = new Array();
function disableDivs()
{
d = document.getElementsByTagName("BODY")[0];
for(x=0;x<arguments.length;x++)
{
	if (document.getElementById(arguments[x]))
	{
	xPos = document.getElementById(arguments[x]).offsetLeft;
	yPos = document.getElementById(arguments[x]).offsetTop;
	oWidth = document.getElementById(arguments[x]).offsetWidth;	
	oHeight = document.getElementById(arguments[x]).offsetHeight;
	cDivs[cDivs.length] = document.createElement("DIV");
	cDivs[cDivs.length-1].style.width = oWidth+"px";
	cDivs[cDivs.length-1].style.height = oHeight+"px";
	cDivs[cDivs.length-1].style.position = "absolute";
	cDivs[cDivs.length-1].style.left = xPos+"px";
	cDivs[cDivs.length-1].style.top = yPos+"px";
	cDivs[cDivs.length-1].style.backgroundColor = "#999999";
	cDivs[cDivs.length-1].style.opacity = .6;
	cDivs[cDivs.length-1].style.filter = "alpha(opacity=60)";
	d.appendChild(cDivs[cDivs.length-1]);
	}
}
}
function hideCDivs()
{
for (hippopotamus=0;hippopotamus<cDivs.length;hippopotamus++)
{
document.getElementsByTagName("BODY")[0].removeChild(cDivs[hippopotamus]);
}
cDivs = [];
}
</script>
</head>
<body>
<div id='d1'>
<a href=''>div with</a><BR>
<input type='button' value='stuff to'><BR>
<a href=''>click</a>
</div><BR><BR>
<div id='d2'>
<a href=''>another div with</a><BR>
<input type='button' value='stuff to'><BR>
<a href=''>click</a>
</div><BR><BR><BR>
<input type='button' value='Disable Those Divs' onClick="disableDivs('d1','d2')">
<input type='button' value='Remove Cover Divs' onClick='hideCDivs()'>
</body>
</html>

I think that does what you asked...hopefully. Hope it helps.

"It is the mark of an educated mind to be able to entertain a thought without accepting it." - Aristotle

NorthStarDA · Sep 27, 2005

this has worked out great, i thank you both for the assistance. I got this working and added to it so i can load content into the div (which contains an IFRAME) on the fly. the only bug i can find with it is if the cdivs are created and the window is resized, the user could possibly get to the page content that i am blocking cuz the covering divs to not resize, but i think i can work that one out.

cDivs = new Array();
function disableDivs()
{
d = document.getElementsByTagName("BODY")[0];
if(document.getElementById('cDiv_0')){
enableDivs();
}
else{

for(x=0;x<arguments.length;x++)
{
if (document.getElementById(arguments[x]))
{
xPos = document.getElementById(arguments[x]).offsetLeft;
yPos = document.getElementById(arguments[x]).offsetTop;
oWidth = document.getElementById(arguments[x]).offsetWidth;
oHeight = document.getElementById(arguments[x]).offsetHeight;
cDivs[cDivs.length] = document.createElement("DIV");
cDivs[cDivs.length-1].style.width = oWidth+"px";
cDivs[cDivs.length-1].style.height = oHeight+"px";
cDivs[cDivs.length-1].style.position = "absolute";
cDivs[cDivs.length-1].style.left = xPos+"px";
cDivs[cDivs.length-1].style.top = yPos+"px";
cDivs[cDivs.length-1].style.backgroundColor = "#CCCCCC";
cDivs[cDivs.length-1].style.opacity = .4;
cDivs[cDivs.length-1].style.filter = "alpha(opacity=40)";
cDivs[cDivs.length-1].id = ("cDiv_" + x);
d.appendChild(cDivs[cDivs.length-1]);
}
}
}

}
function enableDivs()
{
for (i=0;i<cDivs.length;i++)
{
document.getElementsByTagName("BODY")[0].removeChild(cDivs);
}
cDivs = [];
}

var state = 'hidden';
function showAlert(layer_ref,script_ref,height,width) {

if (state == 'visible') {
state = 'hidden';
}
else {
document.getElementById('popupFrame').src=script_ref;
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}

=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

theniteowl · Sep 27, 2005

Just as a thought that I have not tested...
What if you had duplicate sized divs with their opacity set that you float on top of the other divs?
Or one full page div that sits as a layer between the rest of the page and your div on the top?

All you would be doing is changing the position of a couple layers rather than altering lots of properties of multiple divs.

Paranoid? ME?? WHO WANTS TO KNOW????

NorthStarDA · Sep 27, 2005

i had been thinking the exact same thing, here is what i have so far, this will show a div that covers the entire screen, and show my popup. accepts dimensions for the popup and re-centers it in the window

function showPopup(script_ref,height,width) {
IE5=NN4=NN6=OPA=false
if(navigator.userAgent.toLowerCase().indexOf("opera")+1)OPA=true
else if(document.all)IE5=true
else if(document.layers)NN4=true
else if(document.getElementById)NN6=true

//Change the source of the iframe popup
document.getElementById('popupFrame').src=script_ref;

//Change the dimensions of the popup
document.getElementById('popupDiv').style.width = width+"px";
document.getElementById('popupDiv').style.height = height+"px";

//Re-center the div on the page
if(NN4) myObj=document.popupDiv
else myObj=document.getElementById("popupDiv").style

if(NN4||NN6) {
xc=Math.round((window.innerWidth/2)-(width/2))
yc=Math.round((window.innerHeight/2)-(height/2))
} else {
xc=Math.round((document.body.clientWidth/2)-(width/2))
yc=Math.round((document.body.clientHeight/2)-(height/2))
}
// reposition div
if(this.NN4) {
myObj.moveTo(xc,yc)
} else {
myObj.left = xc + "px"
myObj.top = yc + "px"
}

//Show the shadow div
document.getElementById('shadowDiv').style.visibility = 'visible';
document.getElementById('shadowDiv').style.opacity = .4;
document.getElementById('shadowDiv').filter = "alpha(opacity=40)";

if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all.popupDiv.style.visibility = 'visible'");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers['popupDiv'].visibility = 'visible';
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById('popupDiv');
maxwell_smart.style.visibility = 'visible';
}
}

function hidePopup(){
//Clear out my iframe content so users don't see a previous page right when iframe becomes visible
document.getElementById('popupFrame').src="about:blank";

//Hide the shadow div
document.getElementById('shadowDiv').style.visibility = 'hidden';

if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all.popupDiv.style.visibility = 'hidden'");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers['popupDiv'].visibility = 'hidden';
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById('popupDiv');
maxwell_smart.style.visibility = 'hidden';
}
}

here is the shadow div
<div id="shadowDiv" style="width:100%; height:100%; position:absolute; background-color:#CCCCCC; left:1px; top:1px; visibility:hidden;"></div>

here is the popup container
<div id="popupDiv" style="position: absolute; visibility:hidden; z-index:9999;>

really cool looking table goes here for the popup border.

inside the table goes your iframe
<iframe id="popupFrame" width="100%" height="100%" scrolling="auto" src="" frameborder="0"></iframe>

</div>

that's it!

=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

jemminger · Sep 28, 2005

here's my test harness again with the addition of disabling links.

Code:

<html>
    <head>
        <title>test</title>

        <script type="text/javascript">
            function toggleAlert() {
                var alertDiv = document.getElementById("alert");
                alertDiv.style.display = alertDiv.style.display == "block" ? "none" : "block";
                toggleDisabled(document.getElementById("content"));
            }
            
            function toggleDisabled(el) {
                try {
                    el.disabled = el.disabled ? false : true;
                    
                    //  if this is a link
                    if (el.tagName && el.tagName.toLowerCase() == "a") {
                      var link = LinkCache.get(el);
                      
                      //  disable or enable it
                      if (el.disabled) {
                        link.disable();
                      }
                      else {
                        link.enable();
                      }
                    }
                }
                catch(E){ }
                
                if (el.childNodes && el.childNodes.length > 0) {
                    for (var x = 0; x < el.childNodes.length; x++) {
                        toggleDisabled(el.childNodes[x]);
                    }
                }
            }
            
            /**
             * represents a link element
             */
            function Link(el) {
              function generateId(el) {
                self.Link_ids = self.Link_ids || 0;
                var id = "_link_" + self.Link_ids++ + "_" + new Date().getTime();
                el.id = id;
                return id;
              }
              
              this.disable = function() {
                this.element.onclick = function(){ return false; };
              }
              
              this.enable = function() {
                this.element.onclick = this.onclick;
              }
              
              this.element = el;
              this.id = el.id || generateId(el);
              this.href = el.href;
              this.onclick = el.onclick;
                            
              return this;
            }
            
            /**
             * stores Links
             */
            function LinkCache() {
              function getCache() {
                this._cache = this._cache || [];
                return this._cache;
              }
              
              /** add a Link to the cache */
              function add(l) {
                getCache().push(l);
              }
              
              /** get a Link from cache */
              function get(el) {
                var _cache = getCache();
                var link = null;
                var id = el.id;
                
                //  see if el exists in cache
                FIND:
                for (var x = 0; x < _cache.length; x++) {
                  if (_cache[x].id == id) {
                    link = _cache[x];
                    break FIND;
                  }
                }
                
                //  if still null, create Link
                if (link == null) LinkCache.add( link = new Link(el) );
                return link;
              }
            }
        </script>

        <style type="text/css">
            #alert {
                display:none;
                background:#ffc;
                padding:5px;
                border:1px solid red;
            }
        </style>
    </head>

    <body>
        <form>
            <div id="content">
                <table>
                    <tr>
                        <td><input type="text" name="foo" /></td>
                    </tr>
                    <tr>
                        <td>
                            <select name="bar">
                            <option>a</option>
                            <option>b</option>
                            <option>c</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                      <td><a href="[URL unfurl="true"]http://www.microsoft.com/">microsoft</a></td>[/URL]
                    </tr>
                    <tr>
                      <td><a href="[URL unfurl="true"]http://www.sun.com/">sun</a></td>[/URL]
                    </tr>
                    <tr>
                      <td><a href="[URL unfurl="true"]http://www.sun.com/"[/URL] onclick="alert('click');">sun link with an onclick</a></td>
                    </tr>
                    <tr>
                      <td><a href="[URL unfurl="true"]http://www.sun.com/"[/URL] id="myId">sun link with existing id</a></td>
                    </tr>
                </table>
            </div>
            <div id="alert">error</div>
            <div><input type="button" value="toggleAlert()" onclick="toggleAlert()" /></div>
        </form>
    </body>
</html>

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

disable all elements within a div 3

NorthStarDA

IS-IT--Management

jemminger

Programmer

NorthStarDA

IS-IT--Management

elegidito

Programmer

NorthStarDA

IS-IT--Management

theniteowl

Programmer

NorthStarDA

IS-IT--Management

jemminger

Programmer

Similar threads

Part and Inventory Search

Sponsor