September 2, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Web 2.0 Effects and Rich Client Applications

  • October 15, 2007
  • By Vlad Kofman
  • Send Email »
  • More Articles »

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:

And 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

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.





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel