...

View Full Version : Image Detection



sharkey182uk
06-03-2004, 03: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, 03:23 PM
Something like this maybe


<script language="javascript">
<!--
function chk_res(){
w=screen.width

if(w>=1024){
do_this1()
}

if(w==800){
do_this2()
}

}
// -->
</script>

sharkey182uk
06-03-2004, 03: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, 05: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">
<!--
function chk_res(){
w=screen.width

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

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

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

</BODY>
</HTML>

sharkey182uk
06-06-2004, 06:12 PM
Thank you :thumbsup:

mypointofview
12-18-2005, 09: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, 02: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, 09: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, 10:07 PM
Good point there Felgall :thumbsup:

mypointofview
12-22-2005, 04: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, 10:59 PM
You just need to add:

var w = pageWidth();

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum