Jezra.net: "disable" a web app's buttons using javascript and css

"disable" a web app's buttons using javascript and css

2009-07-11

This week, while working on a large Pyjamas project, I got to the point where Pyjamas widgets just didn't do what I needed them to do. Simply put, I need a way to 'disable' part of a web app when a user clicks a button. Before implementing what I thought of as a fix in my Pyjamas code, I first wanted to determine how to do what I wanted using Javascript and CSS.

What I wanted to was was have the entire app interface grey out when a user clicks a button. To accomplish this an empty black div with 50% opacity was placed on top of the interface via the zindex attribute and then what I want to be the users focus is placed on top of the empty div. Here is the sample code.

<html>
<head><title>UI Overlay Test</title>
<script type="text/javascript">
function b1_click()
{
    //show the shade div and the return div
    document.getElementById("shade").style.display='block';
    document.getElementById("return").style.display='block';
}
function b2_click()
{
    alert("second button clicked");
}
function b3_click()
{
    //hide the shade div and the return div
    document.getElementById("shade").style.display='none';
    document.getElementById("return").style.display='none';
}
</script>

<style type="text/css">
body { background-color:#EEEEEE; }
#shade
{
    height:100%;
    background-color:#330000;
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    zIndex:-5;
    opacity:0.5;
    display:none;
}
#return
{
    left:50px;
    top:50px;
    display:none;
    border:2px solid black;
    background-color:#EEEEEE;
    zIndex:10;
    position:absolute;
    
}
#return input
{
    margin:30px;
}
</style>
</head>
<body>
    <input type='button' value='Click Me First' onClick="b1_click();">
    <input type='button' value='Click Me Second' onClick="b2_click();">
    <br>
    <div id="shade"></div>
    <div id="return">
     <input type='button' value='Resume' onClick="b3_click();">
    </div>
</body>
</html>

The finished product can be viewed at www.jezra.net/code_examples/ui_overlay_test.htm

Although the empty div effectively blocks users from clicking on buttons, the buttons can still be accessed by the TAB key. For my needs this is acceptable since I am more interested in a visual way of letting the user know what to focus on. Now it is time to implement similar behavior in the original Pyjamas code that was giving me grief.

On a completely unrelated note, I was invited to a horseshoe throwing contest today and was eliminated in the second round after a nail biting best of three third game.

"disable" a web app's buttons using javascript and css from jezra.net

Comments

Name:		not required
Email:		not required (will not be displayed)
Website:		not required (will link your name to your site)
Comment:		required Please do not post HTML code or bbcode unless you want it to show up as code in your post. (or if you are a blog spammer, in which case, you probably aren't reading this anyway).
Prove you are human by solving a math problem! I'm sorry, but due to an increase of blog spam, I've had to implement a CAPTCHA.
Problem:	6 minus 1
Answer:		required