INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

disable all elements within a div

disable all elements within a div

(OP)
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

RE: disable all elements within a div

2
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
www.jeffemminger.com
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

RE: disable all elements within a div

(OP)
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

RE: disable all elements within a div

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

RE: disable all elements within a div

(OP)
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[i]);
}
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

RE: disable all elements within a div

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????

RE: disable all elements within a div

(OP)
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

RE: disable all elements within a div

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="http://www.microsoft.com/">microsoft</a></td>
                    </tr>
                    <tr>
                      <td><a href="http://www.sun.com/">sun</a></td>
                    </tr>
                    <tr>
                      <td><a href="http://www.sun.com/" onclick="alert('click');">sun link with an onclick</a></td>
                    </tr>
                    <tr>
                      <td><a href="http://www.sun.com/" 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
www.jeffemminger.com
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close