Post by Screen Size

By Joe Burns

...use these to jump around or read it all

[Redirection Choice]
[Internal Page Choice]

     Allow me to tell you a little about your monitor:

     I posted that info with a simple little JavaScript. It looks like this:

<SCRIPT LANGUAGE="javascript">
var width = screen.width
var height = screen.height
document.write("<B>You're set to "+width+ "X" +height+"</B>")
</SCRIPT>

     Cool, huh? But knowing this information goes well beyond simply making paranoid people think you're watching them through their computer screens. If you know the size of the person's monitor, then you can use that information to your advantage.

     I get letters all the time asking me how to make pages look good on all size computer screens. I've offered some tips in the past, but it's still been a problem.

     In this tutorial, I'm going to offer two scripts. One will act as a general, overall direction script. The user will be sent to a page designed for his or her screen. The second script will be an internal script that will write items to the page depending on the user's screen settings. Let's start with the Big One.


Redirection Choice

     This little script works just like the traditional Browser Choice script. The script sits on a page by itself. The user logs into the page and, depending on their screen settings, the user is sent to a specific page made for their screen settings.

     The script only checks the user's monitor width settings to make the choice. Since scrolling is common on the net, I don't see a need to check the height of the page.

     The JavaScript code that returns the user's screen settings width is screen.width. So, using that info, we come up with the script that will redirect the user. Remember, this script will probably never be seen by the user. You point your readers at a page that contains this script simply to get the redirecting effect. Thus, there is no need for images, extra text, or a lot of other fancy thing.

     You should, however, put Meta Commands to the page if you intend to submit it to search engines.

Click for the Script

See the Script in Action

     Remember, you won't see the script. It will simply take you to a new page created for your own screen setting.

     The script is set to test for the most common screen width settings: 1600, 1280, 1152, 1024, 800, 640, and those below 640. I talked to a few of my computer friends and they informed me that the chanced you'll run into a screen width setting that differs from this is quote small if there at all.

     Let me give you the basic concept of the script.


if (screen.width == 1600)
     {parent.location.href='/legacy/beyond/javascript/1600page.html'}

     The script is set up as a series of IF statements. The browser checks one after the other down the line until the setting match. Notice the double equal sign. That's JavaScript for "is equal to".

     Once equality is found then the line of code within the curly brackets is triggered. In all cases, that code created a link in the parent window (the top level window), and the hypertext link is enacted. The script is written so that at least one of the IF statements will be true.


Internal Page Choice

     OK, the page redirection is usually enough to solve the situation, but it also means that you have to create multiple pages. That's a bit of work, and for some things might be overkill.

     Let's say you have an image that is 850 pixels wide. On 800 and 640 and below screen settings, that banner will roll off the screen and create a horizontal scroll bar. Not good. The easiest way to solve the problem is to create a 750px and a 630px version of the image for 800 ad 640px browsers. All you need is a script that will read the browser width settings and write the image code to the page so the correct image is posted. I happen to have such a script right here:

See the Script

See the Script in Action

     This script works on much the same format at the script we just played with, but I make a couple more assumptions. You'll notice the same general IF statement set up.

if (screen.width < 639)
{document.write("Hello there")}

if (screen.width == 640)
{document.write("<IMG SRC=630px.gif>")}

if (screen.width == 800)
{document.write("<IMG SRC=750px.gif>")}

if (screen.width >= 1024)
{document.write("<IMG SRC=850px.gif>")}


     It starts with the monitor tests. If the monitor setting is less than 639, then the text "Hello there" is posted. My assumption is that a large image cannot be shrunk overly far so there comes a point where you post text rather than a smaller image.

     Next, the text looks for 640, 800, and anything 1024 and above. Note the ">=". That means "greater than or equal to". If you want you can continue the "equal to" format for all of the screen sizes and create images for all. I just figured that once the screen was wide enough - why keep making images?

     Finally notice that I get the image tag text to the page using a "document.write" statement. Document.write does what it says. It writes text to the page. In this case, it writes the tag for a specific image to the page. Just remember have any text you want written to the page in double quotes so the JavaScript understands it is a text string and not a command to be followed.

     The real beauty of this kind of scripting is that you only need one page. On that page is a script that posts differing items due to conditions. It's a very clever deal. In fact, I feel it's so clever that I have a tutorial on just this topic right here.

     What more can I say? You've got the tools now to make so that your pages fit the user's screen settings. Use it to make better, and better displaying, pages.

 

Enjoy!

 

[Redirection Choice]
[Internal Page Choice]



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date