Web 2.0 Effects and Rich Client Applications, Page 2
Here is one example of setting a style for the DIV and the overlaying popup dialog. Notice that the z-index property (in green) of the "filler" DIV is smaller then z-index of the dialog, but both are higher then the page (which is 0 by default). Also, notice that the "filler" DIV is set to be transparent with the alpha channel opacity; the same effect can be reliably achieved by setting a transparent image as a background for the "filler" DIV.
<style>
.shade{
background-color black;
position:absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
filter:alpha(opacity=25);
-moz-opacity:.25;
opacity:.25;
z-index:5;
padding: 0px;
margin: 0px;
}
.popup{
background-color:#EEEEEE;
position:absolute;
top: 200px;
left: 200px;
width:200;
height:100;
border:1px solid black;
padding:5px;
z-index:10;
text-align:center;
}
</style>
<body>
<textarea rows="5">Type here if you can...</textarea><br>
<!–Visible Shadow Glass element that will cover the whole page –>
<div class="shade" id="smokeglass"
style="visibility:hidden"></div>
<!– Sample PopUp Dialog box –>
<div class="popup" id="box"
style="visibility:hidden">
</body>
If the browser window is resized, the "filler" DIV also needs to be resized accordingly.
Here is a JavaScript function to calculate visible view-port dimensions:
Digg
del.icio.us
Slashdot
DZone
Reddit
StumbleUpon
Facebook
FriendFeed
Furl
Newsvine
Google
LinkedIn
MySpace
Technorati
Twitter
Windows Live
YahooBuzzAnd here is the call back function assigned to the window.onresize event.
function calcSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [myWidth, myHeight];
}
window.onresize=function captureResize(){
document.getElementById("smokeglass").style.width =
calcSize()[0];
document.getElementById("smokeglass").style.height =
calcSize()[1];
};
So, when all of these pieces come together, the result will look something like this:
Or this:
Conclusion
In this article, I have covered the evolution of the Web UI effects and effect technologies. I have described what Web 2.0 effects are, which toolkits help with their creation, and how they are used on the popular sites. So far, the evolution of the Web UI has been a slow process, with periods of acceleration brought upon by the new technologies such as AJAX or Flash. It will be interesting to see how the Web UI evolves in the future and what our interaction with the computers will be like five or ten years from now.
References
- Fidelity Labs: http://www.fidelitylabs.com/
- Kayak: http://www.Kayak.com
- DealOgre.com: http://www.DealOgre.com
- Yahoo.com: http://www.Yahoo.com
About the Author
Vlad Kofman is working on enterprise-scale projects for major Wall Street firms. He has also worked on defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.
Comment and Contribute
