SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Megs's Avatar
    Join Date
    Oct 2000
    Location
    Kitchener, Ontario
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Conditional includes?

    Alright, my site is curerntly using server side includes (hoping to switch it all over to PHP soon). What I would like to do is include a different file depending on screen resolution. Does anyone know how to do this?
    Megan Jack
    Proud to be Canadian
    http://www.meganjack.com
    Moderator at The Webmaster Forums and EDevCafe Forums

  2. #2
    Dumb PHP codin' cat
    Join Date
    Aug 2000
    Location
    San Diego, CA
    Posts
    5,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I know, this is a client side technology(screen resolution), that is. SSI and PHP are parsed on the server long before they reach the client(browser). So you can't change what the server has already done, after it gives the file to the browser. Your best bet would be to use javascript to detect screen resolution then redirect to a specific page based on screen res. You could have a spash page whose sole function is to use js to detct screen res. then redirect to a PHP page passing some variable to denote screen res. and then use PHP to conditionally include a file based on the variable that was sent. Example

    splash page
    ==============
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <
    html>
    <
    head>
        <
    title>Untitled</title>
    <
    script language="JavaScript1.2" type="text/javascript">
    <!--
    var 
    = (navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4) && (parseInt(navigator.appVersion) < 5) ? 1:0
    var ie = (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4) ? 1:0
    var domc document.getElementById 1:0
    var screenWidth "";
    function 
    init() {
        if (
    n) {
            
    screenWidth window.innerWidth;
            }
        if (
    domc) {
            
    screenWidth = (document.body.clientWidth document.body.clientWidth window.innerWidth) + 18;
            }
        if (
    ie) {
            
    screenWidth document.body.clientWidth 18;
            }
        
    location.href="screentest.php?screenVar="+screenWidth;
        }
    //-->
    </script>
    </head>

    <body onLoad="init();">



    </body>
    </html> 

    screentest.php
    ============================
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
        <title>Untitled</title>
    </head>

    <body>
    <?
    if($screenVar 800) {
        
    //include small res stuff
        
    }
    elseif((
    $screenVar 800) && ($screenVar 1024)) {
        
    //include med res stuff
        
    }
    else {
        
    //include large res stuff
        
    }
    ?>


    </body>
    </html>








    Hope that helps
    Please don't PM me with questions.
    Use the forums, that is what they are here for.

  3. #3
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Detecting screen resolution with javascript is a bit dodgy, as the values retruned will be the size of the screen, NOT the size of the browser window. Remember that many people (especially people with high resolution screens) don't have their browser window maximised, so you could end up serving them a page much bigger than the browser window they are using.

    A better alternative in my opinion is to design sites using "stretchy tables" so that they resize themselves automatically to fit whatever resolution the user is using - www.planethalflife.com is an example of a site that does this.

  4. #4
    I am the night... bman's Avatar
    Join Date
    Mar 2001
    Location
    In a van... down by the river.
    Posts
    366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Skunk
    Detecting screen resolution with javascript is a bit dodgy, as the values retruned will be the size of the screen, NOT the size of the browser window.
    window.innerWidth and document.body.clientWidth give the size of the browser window, not the size of the screen, so the code freddydoesphp posted will work with browsers that are not maximized. of course you still have the problem with people not having javascript turn on or something like that, but to get around that you just put a meta refresh tag in some <noscript> tags and redirect to a "Lite" version of the page.
    ----
    i do agree with skunk though, "stretchy tables" are probably a much better way to go..
    ---
    Last edited by bman; Jun 19, 2001 at 07:58.
    Some say the world will end in fire, Some say in ice.
    From what I've tasted of desire
    I hold with those who favor fire.

  5. #5
    SitePoint Zealot Megs's Avatar
    Join Date
    Oct 2000
    Location
    Kitchener, Ontario
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stretchy tables is the way that I usually do go. However, the design I have in this case is going to have to be fixed at 760 px for various reasons, so I'd like to provide an alternative for my 640x480 audience (which is currently 9.25% for this particular site). So, the innerwidth thing isn't really a big issue in this case. Of course I could take the easy way out and make it fixed at 600 but I usually find that too narrow at 1024 and higher.

    Another problem is that stretchy works well up until about 1024, but people using higher resolutions than that often complain that they don't like stretchy sites, so it would be nice to be able to use stretchy until a certain width and then provide anyone running anything bigger with a fixed width version. Edit: just learned about the CSS-2 max-width attribute - will try that one

    Thanks for the code - I haven' t started with php yet but I'll keep that handy for when I do get going with it. Your code has already taught me a little bit though
    Last edited by Megs; Jun 19, 2001 at 10:00.
    Megan Jack
    Proud to be Canadian
    http://www.meganjack.com
    Moderator at The Webmaster Forums and EDevCafe Forums

  6. #6
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooh I didn't know about the innerWidth and clientWidth variables - ta for that


Bookmarks

Posting Permissions

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