The JavaScript Diaries: Part 10/Page 3

[previous] [next]

The JavaScript Diaries: Part 10

The screen Object

This object provides information about the user's video display and color settings. Using the screen object, we can gain information that will help to properly format data that's displayed in the user's screen.

Properties

availHeight
availWidth

These properties return the actual displayable area within the window of the browser (the viewable portion of the screen within the browser), as opposed to the height and width properties, which give the actual size of the entire screen, in pixels.

To resize a window to the maximum allowable size, use the following script:

window.moveTo (0,0);
window.resizeTo (screen.availWidth,
  screen.availHeight); // combine with line above

1. First, we tell the browser to move to the top left hand corner.
2. Next, we tell the browser to resize to the available room within the screen, starting at the present position (the current upper left-hand position of the browser). If we change the position in the moveTo method, the screen in IE will resize from there. For instance:

window.moveTo (30,15);
window.resizeTo (screen.availWidth,
  screen.availHeight);  // combine with line above

In Internet Explorer, this script will cause the screen to move 30 pixels from the left of the screen and 15 pixels down from the top of the screen. Then it will resize to the available height and width, starting from the upper left-hand position where it was moved.

For further study, check out these links:

Utilizing Window Features Center Expand

height
width

These properties return the actual height and width of the resolution of the monitor. You could use the following script to obtain the information:

  var wide = screen.width
  var high = screen.height
  alert("Your monitor is set at " + wide + "X" + high);

Click this button to see it work:

1. Here, we declared the variable wide and initialized it with the value of the screen.width property.
2. Next, we declared the variable high and initialized it with the value of the screen.height property.
3. Then we printed out the results with an alert window. (I feel by now you know how to read the statement listed with the alert window. If you're having difficulties, have a look at some of the previous lessons.)

Actually, you could just write it as:

alert(screen.height, "<br>", screen.width);

It's not fancy but you get the idea.

You can use the property to tailor images to fit the screen width:

if (screen.width < 639) {
  document.write("Hello there")
}
else if (screen.width == 640) {
  document.write("<img src=630px.gif>")
}
else if (screen.width == 800) {
  document.write("<img src=750px.gif>")
}
else (screen.width >= 1024) {
  document.write("<img src=850px.gif>")
}

For further study, check out these links:

• Screen Dimensions
• Style Sheets by Resolution

colorDepth
pixelDepth

These properties determine the number of color bits set in the user's monitor. This is beneficial when loading images. For instance, consider the following script (with thanks to Danny Goodman):

  if (screen.colorDepth > 8) {
    document.write("<img src='logoHI.jpg
      height='60' width='100'>"); // combine with line above
  }
  else {
    document.write("<img src='logoLO.jpg
      height='60' width='100'>"); // combine with line above
  }

This script states that, if the color depth of the monitor is set to more than 8 bits, then display the high resolution graphic. If the color bit is set to 8 or under, then it will display the low resolution graphic.

For further study, check out this link:

• Color Bit Depth

[previous] [next]

Created: October 14, 2005

URL: