CSS Selection based on Resolution

Closing your thread lets others reading it know that the solution or information supplied has proven to be working, and they can apply it. Don't forget to thank anyone that may have helped you before closing the thread. Closing your thread also cuts down on redundant posts other members may write that are not needed once a solid working solution is presented.

Are you sure you wish to close this thread?

CSS Selection based on Resolution

Apr 25, 2011 dreamtosuccess wrote:

Hey everyone,

I'm kind of stuck on a very basic issue currently. After the script runs all conditions if the monitor has not met one of the requirements its suppose to go to a default css script. The "else" is not working. Please provide some incite.

I am running this script:
<script type="text/javascript">

/*
1920 x 1200 Planner and conf room
1920 x 1080 Planner wall and all new bigger monitors
1280 x 1040 Most Amtrak users desks
1024 x 768 iPad iPad (future)
1280 x 800 Laptops
*/

if ((screen.width == 1280) && (screen.height == 800))
       {document.write("<link href='css/InteractivePageTemplate800.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1024) && (screen.height == 768))
        { document.write("<link href='css/InteractivePageTemplate768.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1280) && (screen.height == 1040))
        {document.write("<link href='css/InteractivePageTemplate1040.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1600) && (screen.height == 900))
        {document.write("<link href='css/InteractivePageTemplate900.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1920) && (screen.height == 1080))
        {document.write("<link href='css/InteractivePageTemplate1080.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1920) && (screen.height == 1200))
        { document.write("<link href='css/InteractivePageTemplate1200.css' rel='stylesheet' type='text/css'>")}

        else
        {document.write("<link href='css/InteractivePageTemplateDEFAULT.css' rel='stylesheet' type='text/css'>")}
</script>

Re:CSS Selection based on Resolution

Apr 25, 2011 dreamtosuccess responded with:

Issue: Resolved

Apparently the else statement will not work.... So instead I went ahead and place a linking css script at the top of the webpage. So when the javascript did not find a compatible match it essentially went with the default script.

So here it is:

<head>
<link href='css/InteractivePageTemplateDEFAULT.css' rel='stylesheet' type='text/css'>
</head>

<body>
<script type="text/javascript">

if ((screen.width == 1280) && (screen.height == 800))
       {document.write("<link href='css/InteractivePageTemplate800.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1024) && (screen.height == 768))
        { document.write("<link href='css/InteractivePageTemplate768.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1280) && (screen.height == 1040))
        {document.write("<link href='css/InteractivePageTemplate1040.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1600) && (screen.height == 900))
        {document.write("<link href='css/InteractivePageTemplate900.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1920) && (screen.height == 1080))
        {document.write("<link href='css/InteractivePageTemplate1080.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1920) && (screen.height == 1200))
        { document.write("<link href='css/InteractivePageTemplate1200.css' rel='stylesheet' type='text/css'>")}

</script>
</body>

Re:CSS Selection based on Resolution

Apr 25, 2011 tjamin responded with:

try using the css media queries. Its great for this.

DevelopPHP.com 2011 Forum Discussion(not active)