Browser Res Detection and Includes....

[Crowds]

I know that being server side, php cannot detect screen res. But I am wondering If I could use Javascript to detect the screen res and then use PHP to load the appropriate include ().
What I have is a site that ports well between different resolutions apart from its header (which contains the main nav and search input box) which hangs off the right hand side. As the header is an include I figure that I could make two versions of this include. And load the appropriate one depending on a screen width varible say < 1024 or > 1024.

Would you say this is possible ?

Crowds

[degsy]

You can use Javascript to detect the resolution (secreenwidth) and then add it to a querystring or hidden form variable.
Submit this and PHP can then grab the variable.

It's rare these days for people to have different pages for screen res.
You can use PHP with Dynamic Style sheets to change the look of a site.

[Crowds]

Thanks degsys,
In most circumstances I would css to create a 'liquid' header but it is not practical in this case. And I am loath to create two seperate sites (one 800 and another 1024) when it is just the header that is broken under 800x600.

Ok before I query the php side further
Would this javascript establish the variables before PHP grabs it ?

<script language='Javascript'>
<!--
if (screen.width <= 800){var sr = "800";}
else if (screen.width <= 1024){var sr = "1024";}
//-->
</script>

Cheers

Crowds

[Bill Posters]

Try to remember that not everyone has their browser windows maximised, so detecting the screen res isn't really going to help.
You need to detect the viewport dimensions.

http://www.codingforums.com/showthre...199#post429199

[marek_mar]

Huh? The screen cannot be maximized/minimized.

[felgall]

You can't change the window size someone is using to view your page. If they want to only use 1/4 of their screen for the browser because they are doing other things in the rest of the screen then that is THEIR choice. Most browsers will only allow you to resize a window that you open (unless the browser owner has disabled the function so that you can't resize at all).

Even if you could maximise - any fixed toolbars they have on the screen will reduce the available space for the browser plus different browsers use different amounts of space for their own toolbars etc.

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;}

[degsy]

You can't change the window size someone is using to view your page. If they want to only use 1/4 of their screen for the browser because they are doing other things in the rest of the screen then that is THEIR choice

You can change the size, position and fullscreen state of a window. You cannot change the toolbar properties unless it is a popup.

Would this javascript establish the variables before PHP grabs it ?

You have to pass it to PHP. You either do this by putting those javascript variables into a querystring then loading the page using location or you put them into hidden formvariables and submit the form.

[Bill Posters]

Originally Posted by degsy

You can change the size, position and fullscreen state of a window. You cannot change the toolbar properties unless it is a popup.

What you mean is - you can try.
With many browsers now natively offering users a way to prevent this kind of manipulation, the attempt isn't always going to be successful.
For that matter, the attempt isn't always going to be welcomed by users, hence the addition of moveTo/resizeTo blockers by popular request.

You have to pass it to PHP. You either do this by putting those javascript variables into a querystring then loading the page using location or you put them into hidden formvariables and submit the form.

You could also 'bounce' the value from js to PHP using cookies.
i.e. write the cookie with js and follow up by reading the cookie with PHP.
(of course, dependent on the user accepting cookies.)

[degsy]

What you mean is - you can try.

You can say that about any javascript.

[Bill Posters]

Indeed. I'm frequently reminding people that they can't always rely on js-dependent techniques to work, if I think it isn't already clear to them.
I considered the point needed making here, particularly as you can't even rely on the technique working for all those users who actually have js-enabled UAs.

[degsy]

Considering that PHP cannot detect the screen properties then there isn't much choice if that's what he wants to do.

I don't agree with the method i'm just mentioning the various solutions.

[felgall]

Since it is easy to turn off the ability of javascript to resize any window so that browser windows display the size that you want them at and not be dictated to by the author of a web page the best way of handling the situation is to check the actual space available in the window rather than the screen resolution (which tells you nothing about how high or wide the available area is even for a maximized window since you have to subtract for any fixed toolbard and the browser chrome - all of which can vary significantly).

If I were to place toolbars down the right side of my screen that take up 100 pixels of the screen width then a maximized browser window will be 100 pixels narrower than you would expect from looking at screen.width because the browser will not overlap the toolbars. Admittedly most people put the toolbars at the bottom of the screen but nothing says anything about where they have to be so you can move them if you want to.

The only time capturing screen.width is at all useful is if you want it for statistical purposes (x% of javascript enabled visitors use a certain resolution).