Contact US

Question

disable all elements within a div

NorthStarDA (IS/IT--Management)

(OP)

23 Sep 05 21:32

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 (Programmer) · Answer 1 · 2005-09-24 00:08:38

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

NorthStarDA (IS/IT--Management) · Answer 2 · 2005-09-24 01:13:35

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 (Programmer) · Answer 3 · 2005-09-24 22:11:30

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 (IS/IT--Management) · Answer 4 · 2005-09-27 20:08:58

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

theniteowl (Programmer) · Answer 5 · 2005-09-27 20:15:35

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 (IS/IT--Management) · Answer 6 · 2005-09-27 21:33:24

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 (Programmer) · Answer 7 · 2005-09-28 10:12:57

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

Come Join Us!

Posting Guidelines

disable all elements within a div
3

disable all elements within a div

disable all elements within a div

RE: disable all elements within a div

CODE

RE: disable all elements within a div

RE: disable all elements within a div

CODE

RE: disable all elements within a div

RE: disable all elements within a div

RE: disable all elements within a div

RE: disable all elements within a div

CODE

Red Flag This Post

Red Flag Submitted

Reply To This Thread

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

Join Tek-Tips^® Today!

Contact US

Come Join Us!

Posting Guidelines

disable all elements within a div 3

disable all elements within a div

disable all elements within a div

RE: disable all elements within a div

CODE

RE: disable all elements within a div

RE: disable all elements within a div

CODE

RE: disable all elements within a div

RE: disable all elements within a div

RE: disable all elements within a div

RE: disable all elements within a div

CODE

Red Flag This Post

Red Flag Submitted

Reply To This Thread

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

Join Tek-Tips® Today!

disable all elements within a div
3

Join Tek-Tips^® Today!