Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Browser Res Detection and Includes....

    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
    PHP magpie | And President Of The Marmalade Atkins Fan Club | Crowds Design

  • #2
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ?

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

    Crowds
    PHP magpie | And President Of The Marmalade Atkins Fan Club | Crowds Design

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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

  • #5
    Senior Coder
    Join Date
    Aug 2003
    Location
    One step ahead of you.
    Posts
    2,815
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Huh? The screen cannot be maximized/minimized.
    I'm not sure if this was any help, but I hope it didn't make you stupider.

    Experience is something you get just after you really need it.
    PHP Installation Guide Feedback welcome.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.

    Code:
    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;}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote 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.)

  • #9
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What you mean is - you can try.
    You can say that about any javascript.

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •