Here is a bit of code I wrote that includes some HTML (table and image code) based on the width of the browser. It works in Firefox. I am not sure if it works for IE. (Need to test.)
<script type="text/javascript"><!--
var winWidth = window.innerWidth;
if (winWidth > 750) {
document.write('<td><img src="http://www.yourdomain.com/images/yourspace.jpg"></td>');
document.write('<td><img height="280px" src="http://www.yourdomain.com/images/yourimage.jpg"></td>');
}
//-->
</script>
---------- Post updated at 04:34 ---------- Previous update was at 04:27 ----------
Update: Does not work in IE, only Firefox so far. (Have not tested in Opera).
---------- Post updated at 04:49 ---------- Previous update was at 04:34 ----------
Ha! Seems like window.innerWidth is supported on most browsers EXCEPT IE according to this site:
W3C DOM Compatibility - CSS Object Model View
To compensate for IE, we need something like:
var winWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
winWidth = window.innerWidth;
} else if( document.documentElement && document.documentElement.clientWidth ) {
//IE 6+ in 'standards compliant mode'
winWidth = document.documentElement.clientWidth;
} else if( document.body && document.body.clientWidth ) {
//IE 4 compatible
winWidth = document.body.clientWidth;
}