Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Twelve Dynamic HTML Lessons : Page 12

From Cascading Style Sheets to higlighted text to toggling images on and off the page, here are twelve fancy things that you can learn to do today in DHMTL.


advertisement
The Right Alignment
When you see DHTML used for animations and effects you most often see everything based on top left corner of the browser window. I suppose I could have gone along happily ever after basing everything on that location but I'm not one to settle for just what I'm handed; I always want more. Since I tell people to strive to create Liquid Web pages I thought I'd best learn to create a liquid DHTML page.

I knew there was a way to determine the right and bottom edge location of the browser so I spent a morning pulling my hair and sifting through documentation in an effort to find out how. After several hours I had found my solution!

It's really quite simple so I'm surprised that I had to look so hard to find an answer. Here's how to do it in IE4:



rightEdge = document.body.offsetWidth; bottomEdge = document.body.offsetHeight;

And since we want to keep pages compatible with both 4.0 browsers, here's how you do it using Netscape Navigator's DOM:

rightEdge = innerWidth; bottomEdge = innerHeight;

Knowing how to do that in both browsers means we can combine that information into one small JavaScript function that finds our edges for us:

findEdges(){ if (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ){ rightEdge = document.body.offsetWidth; bottomEdge = document.body.offsetHeight; } else { rightEdge = innerWidth; bottomEdge = innerHeight; } }

Pretty simple really, first check to see if the browser is IE4 or higher, if it is then set the edges the IE4 way, if it's not, then set the edges the NN4 way. It's important to remember that this code is 4.0 specific so make sure you're not calling this in a 3.0 or smaller browser.

Now what can you do with this information? You can amaze your audience with Liquid DHTML. The possibilities are endless.



Comment and Contribute

 

 

 

 

 


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

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date