RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.



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