Forum Moderators: open
I have a site with a table to the left of width 780, so that it fits fine for 800x600 resolution. Now over 50% of all my browsers have resolution of over 800x600, so I want to add an added graphic when the browser has a width suitable for 200 extra pixels.
An example of this is at:
[skysports.com...]
They have an advert loading on the right that only displays when the width of the browser is suitable (resize the browser manually and it will disappear!)
I was wondering if anyone knows how to do this, and are there any scripts out there already, I had a look at how skyports do it, and it seems to be iframes and javascript.... Something I know very little about.
Thanks for your help,
W.
Position your image absolutely, with right & top properties.
Set display to "none".
JS: (! replace ¦¦ with unbroken pipes!)
onload = function()
{
var img = document.getElementById("_img_id_")
checkImage(img)
window.onresize = function(){checkimage(img)}
}function checkImage(img)
{
var minW = 1000
var ieW = document.innerWidth
var moW = document.body.clientWidth
var show = (ieW && ieW > minW)¦¦(moW && moW > minW)img.style.display = show? "block":"none"
}
If you have a <body onload = "blah()">, then put the contents of the the above onload into blah.
Don't assign the var name (ie: img) to anything else within function, onload.
[I should add that I haven't tested this code]
