Browse DevX
Sign up for e-mail newsletters from DevX


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.

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