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