subscribe
Tags:
 
2010
July
June
May
April
March
February
January
2009
December
November
October
September
August
July
June
May
April
March
February
January
2008
December
November
October
September
August
June
May
April
"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:
0 plus 1
Answer:
required
  • Tags: