Skip navigation
Currently Being Moderated

First time JavaScript user.

Apr 27, 2012 6:28 AM

Tags: #help #spacing #resolution #new #javascript #beginner #sniffer #gaps

So im a highschool student trying to make some extra money with freelancing but I can figure out where or how to use this code. What I want to do is make it so if it detects the visitors resolution to be lower then 1000 itll redirect it to the 800px web site i made but im not sure how to use this code to make just that work

Sniff the visitors screen resolution with this .js

*/
if (screen.width==800¦¦screen.height==600) //if 800x600
window.location.replace("index800.htm")

else if (screen.width==640¦¦screen.height==480) //if 640x480
window.location.replace("index800.htm")

<end>

If you have any ideas id be most appreciative thankyou for your time.

 
Replies
  • Currently Being Moderated
    Apr 27, 2012 6:51 AM   in reply to brettbodofsky

    You insert it in the <head></head> section of your pages code with <script> tags around it (see below). So go into your pages code view and look for the closing </head> tag (it will be near the top of the page)

     

    <script type="text/javascript">

    if ((screen.width<=800) && (screen.height<=600)) {

    window.location.replace('index800.html');

    }

    else {

    if ((screen.width<=640) && (screen.height<=480)) {

    window.location.replace('index800.html');

    }

    }

    </script>

    </head>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2012 7:10 AM   in reply to brettbodofsky

    Move the <SCRIPT></SCRIPT> above the <style type="text/css">

     

     

    <style type="text/css">

    <SCRIPT language="JavaScript">

    <!--

    if ((screen.width>=1024) && (screen.height>=768))

    {

    window.location="index.html";

    }

    else

    {

      window.location="index_800.html";

    }

    //-->

    </SCRIPT>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2012 7:21 AM   in reply to brettbodofsky

    First, do what osgood_ suggested above.

    You have your jscript embedded in the css section.

    Keep them separate in their own sections.

     

    Then just a guess - try the full url in your window.location lines:

     

         window.location="www.lacrosse-lounge.com/index.html";
         window.location="
    www.lacrosse-lounge.com/index_800.html";

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2012 8:13 PM   in reply to brettbodofsky

    OK - looks like you seprated out your CSS and your jscript nicely.

     

    I checked your site and the jscript is missing from the page.

     

    I'm not clear on what's happening when you put your jscript back in.

    Hard to tell from your post, but it also looks like putting in the full url in the window.location line resulted in a "broken" address?

    And the same thing happens when you go back to the relative url's?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 12:52 AM   in reply to brettbodofsky

    Ok - since you don't have the jscript in your page right now, this is just a guess.

    You say the "page keeps refreshing".  Maybe that makes sense

     

    The user goes to your page.

    The page checks the screen dimensions and redirects the user back to the index page or to the "small" page.

    Well, that index page is just gonna' run the same jscript - resulting in constant page refreshes.

    Likewise, if you have the same jscript in the "small" page - constant page refreshes.

     

    The solution is to create 3 pages and put the jscript only on the index page.

    1)  Your normal index.html page with the "resolution sniffer" jscript.

    2)  A new "big" page without the jscript.

    3)  A new "small" page without the jscript

     

    Don't put the "resolution sniffer" on the big page or the small page.

     

    This jscript code only goes in your index.html page:

         <script type="text/javascript">

               if ((screen.width>=1024) && (screen.height>=768)){

                    window.location.replace('index1024.html');  /* this is the big page */

                    }

               else {            

                    window.location.replace('index800.html');  /* this is the small page */

                    }

         </script>

     

    Give it a try and let's see how it goes.
    (We can probably accomplish the same thing with only 2 pages but let's see if this solves the problem.)

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 2:39 PM   in reply to brettbodofsky

    Nope - it is not working.  Sends me to the "big" page regardless of my browser window size.

    (But hey - that's an improvement over where you started!)

     

    Can you post the <head> section of your index.html page?

    I need to see what it looks like in the current version.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 11:47 PM   in reply to brettbodofsky

    Ok - I think it is working.

     

    Sorry, I had a total brain-fart over here.  I was "testing" by resizing my browser window - which isn't what you're trying to switch on.  You are trying to switch on screen resolution - which will stay the same regardless of browser size.

     

    So, how do we test your script?

     

    In Windows, go to your display settings and change the resolution there.

    Try 800x600

    Then point your browser at your index.html page.

    Your browser should end up on your "small" page.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 5:48 PM   in reply to brettbodofsky

    You're Welcome!

     

    Last thought - you can accomplish the same thing with only 2 files, index.html and the "small" page.

    First, index.html should be "built" for the large screen resolutions - i.e., a copy of the "big" page.

     

    Then change your jscript in index.html to the following:

     

         <script type="text/javascript">

              if ((screen.width<1024) && (screen.height<768)){

                   window.location.replace('index_800.html');  /* this is the small page */

                   }

          </script>

     

    This new script basically says that if the screen resolution is "small" go to the "small page", otherwise, stay on this (index.html) page.

    With this in place, there is no longer a need for index_1280.html.

     

    It's probably not a good idea to post your email address in the forums.  You might want to think about going back and editing it out of your post.  All forum members can use "private message" to reach each other.  In most cases, it's better to post up the questions.  That way everybody benefits. 

     

    Yup - funny how that works.  The "small" page actually looks bigger .

    Fewer pixels to fill up the screen, so the pixels have to "be bigger".

     

    Different site designers handle the various screen resolutions differently. 

    A lot of designers code for a "normal" or "average" resolution.  (They make their page widths either 980 or 1024 pixels, depending on who you ask.)

    This "average" resolution goes up, seemingly every year, as new displays are built with higher resolutions.

    You might find this link interesting: http://www.w3schools.com/browsers/browsers_display.asp

     

    And then there are all those smart phones and tablets.  Most designers use CSS to manage these displays.

    Lots of help and opinion on the web for this stuff.

    Dive in and code-on!

     

    ~codeDawg

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2012 1:25 PM   in reply to brettbodofsky

    The jscript looks good.  Can you be a little more specific about what you see when you test?

    My resolution is 1680x1050 and your site takes me to "index.html" just fine.

     

    Also, just to be safe wiith older browsers, replace your jscript with this:

    <script type="text/javascript">

    <!--

    if ((screen.width<1024) && (screen.height<768)){

        window.location.replace('index_800.html');  /* this is the small page */

        }

    //-->  

    </script>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points