17 Replies Latest reply: May 4, 2012 1:25 PM by codeDawg RSS

    First time JavaScript user.

    brettbodofsky

      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.

        • 1. Re: First time JavaScript user.
          osgood_ MVP

          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>

          • 2. Re: First time JavaScript user.
            brettbodofsky Community Member

            Well if you take a look at my source code from www.lacrosse-lounge.com youll see that I have put it in the head but it doesnt seem to be working could you take a look at it for me. Ive spent a couple hours now looking for whats wrong and i cant seem to catch it.

            • 3. Re: First time JavaScript user.
              osgood_ MVP

              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>

              • 4. Re: First time JavaScript user.
                codeDawg Community Member

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

                • 5. Re: First time JavaScript user.
                  brettbodofsky Community Member

                  I did as all of you said and its not working http://lacrosse-lounge.com/www.lacrosse-lounge.com/index.html is what i get when i change to

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

                  when i just use index.html and index_800.html i get on googlehttp://www.lacrosse-lounge.com/www.lacrosse-lounge.com/index.html and on IE i get the same thing i have no clue whats going on i did everything suggested thankyou for everyones help but im still in need of more sorry

                  i  took off the code but here what i did have and i  tried it with both the full url and just the index.html    pleaaasee help i took off the javascript so people could still see the website

                   

                  heres the code i had

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                  <html xmlns="http://www.w3.org/1999/xhtml">

                  <head>

                  <title>Lacrosse-Lounge</title>

                  <meta name="description" content="Our store offers local lacrosse players a place to buy equipment from knowledgeable players who own the store. " />

                  <meta name="keywords" content="Lacrosse-Lounge, lacrosse lounge, Delaware, Delaware lacrosse" />

                  <meta name="author" content="Steve Shipe" />

                  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

                  <SCRIPT language="JavaScript">

                  <!--

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

                  {

                  window.location="/index.html";

                  }

                  else

                  {

                    window.location="/index_800.html";

                  }

                  //-->

                  </SCRIPT>

                  <style type="text/css">

                   

                   

                  body {

                            background-color: #CCC;

                            color: #89451f;

                  }

                   

                   

                   

                  #”footer” table tr td {

                            text-align: center;

                  }

                  #”footer” {

                            background-color: #000;

                            text-align: center;

                            color: #FFF139;

                  }

                  .foot {

                            color: #29FF01;

                  }

                  #”container” #”main” {

                            color: #000000;

                            border-left-color: #FFF;

                  }

                  #”container” #”Name” {

                  }

                  #”Name” {

                            font-family: Arial, Helvetica, sans-serif;

                            font-size: 15px;

                            font-weight: bold;

                            color: #2f231e;

                            float: right;

                            padding-top: 0px;

                            padding-right: 20px;

                  }

                  /*

                  #”lax_lounge” p {

                            font-size: 10px;

                            line-height: 10px;

                            color: #89451f;

                  } */

                  #”lax_lounge” p {

                            font-size: 10px;

                            line-height: 10px;

                            color: #89451f;

                  }

                  .style13 {

                            color: #89451f;

                            font-size: 10px;

                  }

                  .style14 {

                            font-size: 20px;

                            color: #000000;

                  }

                  .style15 {

                            font-size: 32px;

                            color: #FFEF3A;

                            text-align: center;

                  }

                  img {

                   

                   

                  display: block;

                   

                   

                  }

                  .style16 {font-size: 24px}

                  .style18 {

                            color: #07FE00;

                            font-style: italic;

                            font-size: 46px;

                            font-weight: bold;

                  }

                  #”container” #”main” div table tr th .style15 {

                            font-size: 36px;

                  }

                  #”container” #”main” div table tr th div .style16 {

                            color: #FFF;

                  }

                  #”container” #”main” div table tr th div p {

                            color: #FFF;

                  }

                  #”container” #”main” div table tr th div .style16 .style18 u {

                            font-size: 40px;

                  }

                   

                   

                  #”container” #”main” div table tr th {

                            border-right-width: 1px;

                            border-right-style: solid;

                            border-right-color: #FFF;

                  }

                  .style19 {color: #FFFFFF}

                  .style20 {font-size: 24px; color: #FFFFFF; }

                  .style22 {color: #FFEF3A}

                  </style>

                  </head>

                  <body>

                  <table width="1280" border="0" align="center" cellpadding="0" cellspacing="0">

                    <tr>

                      <th width="1280" height="995" align="right" valign="top" scope="col"><img src="images/design2-slice_01 (2).jpg" alt="Welcome To Our Home Page" width="1280" height="296" border="0" usemap="#Map" />

                        <table width="1280" border="0" cellpadding="1" cellspacing="1">

                          <tr valign="top">

                            <th width="278" height="622" valign="top" bgcolor="#000000" scope="col"><p align="left" class="style15">              <u>Store Hours:</u><br />

                  Monday: 12-8 <br />

                                Tuesday: 12-8 <br />

                                Wednesday: 12-8 <br />

                                Thursday: 12-8 <br />

                                Friday: 12-8  <br />

                                Saturday: 10-6 <br />

                              Sunday: Closed</p></th>

                            <th width="1000" align="center" bgcolor="#000000" scope="col"> <blockquote>

                                <p align="center" class="style16"><span class="style19" style="font-size: 46px;">WELCOME TO THE:</span><span class="style18"> <u>Lacrosse Lounge</u></span></p>

                                <p align="center" class="style16 style19"> A new store in the Newark area, Our store offers local lacrosse players a place to buy equipment from knowledgeable players who own the store. We are dedicated to help grow the sport in the area,and make efforts to reach out to local organizations.<br />

                              </p>

                  </blockquote>

                              <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">

                                <tr>

                                  <th width="575" height="451" valign="top" scope="col"><img src="images/logos.gif" alt="Brands We Carry" width="573" height="395" /></th>

                                  <th width="415" align="right" valign="top" scope="col"><p><img src="images/lac (3).jpg" alt="Our Store" width="445" height="350" /></p>

                                  <!-- AddThis Button BEGIN -->

                  <div class="addthis_toolbox addthis_default_style ">

                  <a class="addthis_button_preferred_1"></a>

                  <a class="addthis_button_preferred_2"></a>

                  <a class="addthis_button_preferred_3"></a>

                  <a class="addthis_button_preferred_4"></a>

                  <a class="addthis_button_compact"></a>

                  <a class="addthis_counter addthis_bubble_style"></a>

                  </div>

                  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f8d77494a13d053"></script>

                  <!-- AddThis Button END -->

                  <table width="280" border="0" align="right">

                                    <tr>

                                      <th align="right" valign="top" scope="col"><span class="style19">Phone (302) 731-0003<br />

                  Fax (302) 731-0004<br />

                  700 Capital Trail Suite 11E<br />

                  Newark, DE. 19702</span></th>

                                    </tr>

                                  </table>

                                  </th>

                                </tr>

                              </table>             

                            </th>

                          </tr>

                        </table>

                           

                          <div id="primaryContent"></div>        <span class="foot">

                            <!-- end main-->

                        </span>        <span class="foot">

                          <!--end continer-->

                        </span>

                          

                           <table width="1280" cellpadding="0" cellspacing="0">

                          <tr>

                                <td height="19" align="center" valign="top" bgcolor="#000000"><span class="style22">Content copyright 2012. LACROSSE-LOUNGE.COM. All rights reserved. </span></td>

                              </tr>

                        </table>

                          <div id="Name">

                            <p><span class="style14">Steve Shipe</span><br />

                              <span class="style13">Lacrosse-Lounge.com</span></p>

                      </div></th>

                    </tr>

                  </table>

                   

                   

                  <map name="Map" id="Map">

                    <area shape="rect" coords="3,246,123,300" href="index.html" />

                    <area shape="rect" coords="192,243,362,312" href="About_Us.html" />

                    <area shape="rect" coords="400,246,703,316" href="Custom Stringing.html" />

                    <area shape="rect" coords="734,249,1042,341" href="Custom Apparel.html" />

                    <area shape="rect" coords="1056,253,1268,328" href="Contact us.html" />

                  </map>

                  </body>

                  </html>


                  • 6. Re: First time JavaScript user.
                    codeDawg Community Member

                    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?

                    • 7. Re: First time JavaScript user.
                      brettbodofsky Community Member

                      ya wether i use index.html or www.lacrosse-lounge.com/index.html its still does that thing where it takes you tothat page where it keeps refreshing

                      • 8. Re: First time JavaScript user.
                        codeDawg Community Member

                        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.)

                        • 9. Re: First time JavaScript user.
                          brettbodofsky Community Member

                          Okay first id like to thank you so much for all your time and help you spent with me. Second i did as you said and made the seperate pages . It takes you to the bigger page everytime im not sure how to test if you were on a smaller screen that itd actually go to the smaller website. Is there anyway i can check to see if its working. I have a feeling it is not.

                          • 10. Re: First time JavaScript user.
                            codeDawg Community Member

                            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.

                            • 11. Re: First time JavaScript user.
                              brettbodofsky Community Member

                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                              <html xmlns="http://www.w3.org/1999/xhtml">

                              <head>

                              <title>Lacrosse-Lounge</title>

                              <meta name="description" content="Our store offers local lacrosse players a place to buy equipment from knowledgeable players who own the store. " />

                              <meta name="keywords" content="Lacrosse-Lounge, lacrosse lounge, Delaware, Delaware lacrosse" />

                              <meta name="author" content="Steve Shipe" />

                              <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

                              <script type="text/javascript">

                               

                               

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

                               

                               

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

                               

                               

                                              }

                               

                               

                                         else {           

                               

                               

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

                               

                               

                                              }

                               

                               

                                   </script>

                               

                               

                               

                              <style type="text/css">

                               

                               

                              body {

                                        background-color: #CCC;

                                        color: #89451f;

                              }

                               

                               

                               

                              #”footer” table tr td {

                                        text-align: center;

                              }

                              #”footer” {

                                        background-color: #000;

                                        text-align: center;

                                        color: #FFF139;

                              }

                              .foot {

                                        color: #29FF01;

                              }

                              #”container” #”main” {

                                        color: #000000;

                                        border-left-color: #FFF;

                              }

                              #”container” #”Name” {

                              }

                              #”Name” {

                                        font-family: Arial, Helvetica, sans-serif;

                                        font-size: 15px;

                                        font-weight: bold;

                                        color: #2f231e;

                                        float: right;

                                        padding-top: 0px;

                                        padding-right: 20px;

                              }

                              /*

                              #”lax_lounge” p {

                                        font-size: 10px;

                                        line-height: 10px;

                                        color: #89451f;

                              } */

                              #”lax_lounge” p {

                                        font-size: 10px;

                                        line-height: 10px;

                                        color: #89451f;

                              }

                              .style13 {

                                        color: #89451f;

                                        font-size: 10px;

                              }

                              .style14 {

                                        font-size: 20px;

                                        color: #000000;

                              }

                              .style15 {

                                        font-size: 32px;

                                        color: #FFEF3A;

                                        text-align: center;

                              }

                              img {

                               

                               

                              display: block;

                               

                               

                              }

                              .style16 {font-size: 24px}

                              .style18 {

                                        color: #07FE00;

                                        font-style: italic;

                                        font-size: 46px;

                                        font-weight: bold;

                              }

                              #”container” #”main” div table tr th .style15 {

                                        font-size: 36px;

                              }

                              #”container” #”main” div table tr th div .style16 {

                                        color: #FFF;

                              }

                              #”container” #”main” div table tr th div p {

                                        color: #FFF;

                              }

                              #”container” #”main” div table tr th div .style16 .style18 u {

                                        font-size: 40px;

                              }

                               

                               

                              #”container” #”main” div table tr th {

                                        border-right-width: 1px;

                                        border-right-style: solid;

                                        border-right-color: #FFF;

                              }

                              .style19 {color: #FFFFFF}

                              .style20 {font-size: 24px; color: #FFFFFF; }

                              .style22 {color: #FFEF3A}

                              </style>

                              </head>

                              • 12. Re: First time JavaScript user.
                                codeDawg Community Member

                                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.

                                • 13. Re: First time JavaScript user.
                                  brettbodofsky Community Member

                                  IT WORKED!!! Thankyou so much codeDawg for all your help and not giving up on me. I appreciate all the help. Id you dont mind me asking for possible help in the future my email adress is brett.bodofsky@gmail.com id love to have yours as well just in case thankyou sooo much again im so happy. thank you once more.

                                  • 14. Re: First time JavaScript user.
                                    brettbodofsky Community Member

                                    I almost forgot thankyou as well to Os_good you were of a great asicstance too. thankkkkyouu. But Code-dawg im sure you noticed how large it is when it 800x600 as well why is this. How do you reccomend I make a site like this if I was to do it all over again. what sizes setup etc

                                    • 15. Re: First time JavaScript user.
                                      codeDawg Community Member

                                      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

                                      • 16. Re: First time JavaScript user.
                                        brettbodofsky Community Member

                                        So i was switching resolution size and what not on my computer to see how well the codes working and im  thinking it may not be working at all or not that well i need to make it so if your resolution is lower then 1024x 768 it will bring you to the index_800.html  page  i had thought it was working but now i am not sure would you mind taking another look sorry for troubling you.

                                        • 17. Re: First time JavaScript user.
                                          codeDawg Community Member

                                          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>