Image Detection

sharkey182uk

06-03-2004, 02:10 PM

Hey because im using css to create a layout which has a banner which always has to be 100% in width this is ok at 1024*786 but at 800*600 it cuts part of it off. So even if you use width:100%; at 800*600 you lose quality. I was wondering if there were either a javascript way or preferably php way to detect if the resolution is 800*600 then give this banner if not give the 1024*786.

Any help is greatly appreciated.
Also i thought this topic suited here the best.

Mr J

06-03-2004, 02:23 PM

Something like this maybe

<script language="javascript">

</script>

sharkey182uk

06-03-2004, 02:33 PM

Hey thanks i know very little about javascript sorry where does the image path go.

Cheers again mate

Mr J

06-03-2004, 04:59 PM

Unless I see your actual layout I cannot relate to your divs but here is an example of how the script would work

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script language="javascript">

</script>
</HEAD>
<BODY onload="chk_res()">
<img name="img1" src="" style="width:100%;height:200px">

</BODY>
</HTML>

sharkey182uk

06-06-2004, 05:12 PM

Thank you :thumbsup:

mypointofview

12-18-2005, 08:01 AM

Fantastic. Exactly what I needed also :)

Just one question though: How could I fine tune this to accomodate (a) the smaller 800 style screens, (b) the rather normal 1024 screens, and (c) those huge 30 inch monitors?

Maybe have 1024 as default, then a rule for all that's bigger and another rule for all that's smaller.

Would the following be correct - do I use the ">=" symbols correctly ?

if(w>=1024){
document.images["img1"].src="pic_huge.jpg"
}

if(w<=800){
document.images["img1"].src="pic_small.jpg"
}

else
document.images["img1"].src="pic_normal.jpg"
}

Mr J

12-18-2005, 01:05 PM

Probably something like

if(w>1024){
document.images["img1"].src="pic_huge.jpg"
}

if(w<=800){
document.images["img1"].src="pic_small.jpg"
}
else{
document.images["img1"].src="pic_normal.jpg"
}

felgall

12-18-2005, 08:00 PM

Why not check the width of the window instead of the screen width. Someone may have a screen width of 1280 but have their browser using a width of 500.

function pageWidth() {return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;}

Mr J

12-18-2005, 09:07 PM

Good point there Felgall :thumbsup:

mypointofview

12-22-2005, 03:09 AM

Mr. J. - unfortunately that doesn't work :(

But I rememembered my steps in AppleScript and I came up with the "else if" command, and guess what :)

if(w>=1680){
document.images["img1"].src="large.jpg"
}

else if(w<=800){
document.images["img1"].src="small.jpg"
}

else{
document.images["img1"].src="medium.jpg"
}

..this did the trick! I can now serve different sized pictures for different screen resolutions. I guess that will also do the trick for the window.open function where I'm then able to serve different sized popup windows...

Martin

felgall

12-22-2005, 09:59 PM

You just need to add:

var w = pageWidth();

to get the actual width within the browser before your if statement.