client browser/screen width

[RayYates]

Is their any way to detect the client browser/screen width server side in Mivascript?

[Dramatic]

Not directly - that would require window dimensions to be sent to the server with the page request. (As it turns out, that would have been an idea worth including were we redesigning internet protocols from scratch today). Window dimensions can be sent to the server with a cookie, which must be set by javascript. Obviously this doesn't work for the first page visited (wow, a justification for a spash screen!). It is necessary to set sensible fallbacks for cases where the user disallows the cookie or has javascript disabled.

Note that I have said (browser) window. Screen size is of no relevance whatsoever, as you have no idea whether the user has the browser maximised, is using sidebars etc.

I have implemented this in a non-merchant comemrce site in mivascript. The client wanted to display as many products per page as could could be managed with no scrolling (I think we had a minimum of four and a maximum of 20). The site is offline but I could dig out the cookie code if you want it.

[Biffy]

<script language="JavaScript1.2">
<!--
/*
Screen Size Redirect script (By Robert @ http://members.tripod.com/technological_tinker/)
Submitted to Dynamicdrive.com to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
if (screen.width==800||screen.height==600) //if 800x600
window.location.replace("http://www.netscape.com")
else if (screen.width==640||screen.height==480) //if 640x480
window.location.replace("http://www.microsoft.com")
else if (screen.width==1024||screen.height==768) //if 1024x768
window.location.replace("http://www.dynamicdrive.com")
else //if all else
window.location.replace("http://freewarejava.com")
//-->
</script>

[RayYates]

Thanks guys. This is what I suspected.

...The client wanted to display as many products per page as could could be managed...

I had the same problem, however, my solution ment that I no longer need this information.

I set each category product in a box <div class="floatleft"> The makes each item display right next to each other, wrapping when it runs out of screen width.

I tweeked the layout so it would be 3 column format @ 800x 600. As the screen gets wider, more items are displayed on each row.

Ray

[Bruce - PhosphorMedia]

That was going to be my suggesting...<G>

[kayakbabe]

As mentioned a script that detects the users screen width doesn't do much good. Most people I observe using a computer, especially the ones with wider or bigger screens usually have their browser windows set to a smaller width than full screen.

Here's how I detect the browser width.

<script type="text/javascript">

function browserSize() {
var myWidth = 0;
if (typeof window.innerWidth == 'number') {
//Non-IE
myWidth = window.innerWidth;
} else if (document.documentElement && document.documentElement.clientWidth) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if (document.body && document.body.clientWidth) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
alert (myWidth);
</script>


I'll use an onLoad event to trigger this.

You can use this to set div widths, image widths, change the css for a class, etc. It's great if you need to make a div or image wider if someone has a huge browser window.

nesting divs inside with that float:left technique works great. Really makes things look great and fill in the spaces, so the browser window is fully used and not wasted. And it gets the products up there above the first fold. Most people don't like to scroll, so it's better to get those products up there, if there is screen real estate for it.

[kayakbabe]

ya know.. if you go with a css based layout.. then you don't have to do calculations on the server side. On a really busy site, IMHO it makes the most sense to get that kind of calculation off the server anyway.