Give this a whirl. Just copy/paste into a blank web document and save as a plain HTML file on your test server. Load the page and see what it does. Then resize your browser window and do a hard-refresh of the page to see the changes. Client-side scripting handles the fun parts and can be modified to load images dynamically.
(BTW needs some extra tweaks for IE).
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testy McScreeny</title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function GetChrome(){
var mHeight = window.innerHeight;
var mWidth = window.innerWidth;
var msg = document.getElementById("wrapper");
mHeight = window.innerHeight;
mWidth = window.innerWidth;
var str = "Your screen resolution is set to\nWidth:"+screen.width+"\nHeight:"+screen.height;
str += "<p/>Browser real estate is "+mWidth+" wide and "+mHeight+" tall.";
str += "<p/>Here's a box showing the border shrunk in by 25 pixels.<p/>";
msg.innerHTML = str;
msg.style.minHeight = (mHeight-25)+"px";
msg.style.width = (mWidth-25)+"px";
msg.style.top = "5px";
msg.style.left = "5px";
msg.style.border = "1px solid #cccccc"
msg.style.margin = "0 auto"
}
/*]]>*/
</script>
<style type="text/css">
/*<![CDATA[*/
#wrapper{
text-align:center;
font-weight:bold;
}
/*]]>*/
</style>
</head>
<body onLoad="GetChrome()">
<div id="wrapper"></div>
</body>
</html>
Check out
this sample as well.
_________________
Why I do believe it's pants-less o'clock! - Lar deSouza
”The mind is like a parachute, it doesn’t work if it isn’t open.” - Frank Zappa
Created using photoshop and absolutely no talent. - reyrey
