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.
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:
9 minus 3
Answer:
required
  • Tags:
subscribe
 
2016
2015
2014
2013
2012
2011
2010
December
November
October
September
August
July
June
May
April
March
February
January
2009
December
November
October
September
August
July
June
May
April
March
February
January
2008