The following are some simple cut and paste JavaScript code samples to illustrate the use of the client-side
screen object which contains information about the display screen resolution and colors.
The JavaScript1.2 code utilizes the familiar object-based syntax:
screen.propertyName
For example, we can access the screen object properties for the following button
which will open a window according to the user's full screen size:
The HTML code for the form button is simple enough:
<![CDATA[
<FORM>
<INPUT TYPE=button VALUE="Open to fullscreen" onClick="myFullscreen();">
</FORM>
]]>
A click event occurs when the button on the form is clicked. When a click event occurs,
the onClick event handler executes, in this case, a single JavaScript function:
<![CDATA[
<SCRIPT LANGUAGE="JavaScript1.2">
function myFullscreen() {
window.open('http://home.netscape.com','myName',
'width='+screen.width+',height='+screen.height+',top=0,left=0');
}
</SCRIPT>
]]>
The JavaScript code makes use of the screen.width and the screen.height object properties
in order to specify
the width and height of the screen in pixels for the specified windowFeature values for the
open (window object).
There are more screen object
properties, such as screen.availTop and screen.availLeft
to specify the available client-side screen top and left values,
in pixels, minus permanent or semi-permanent user interface features displayed by the operating
system, such as the Taskbar on Windows.
Therefore, you can open a window precisely where you want according the user's display screen resolution.
For example, let's say we wanted to open a long narrow navigation window (100 pixels wide)
and display it right in the very top, left corner of the user's screen.
We could just set the windowFeature top and left values to zero (0), and the height to 400 pixels or whatever;
but then the window could get hidden behind something like the user's Taskbar if they have it sticking out in any of those areas.
Using the screen object properties availTop, availLeft, availHeight, the following example
opens a narrow window according the user's screen display:
So, if you have your Taskbar properties set so that it's currently
displayed from the bottom, left, or top, then that window should have been opened and positioned accordingly.
See the following code:
<![CDATA[
<SCRIPT LANGUAGE="JavaScript1.2">
function myAvailable() {
window.open('about:blank','myName',
'width=100,height='+screen.availHeight+',top='+screen.availTop+',left='+screen.availLeft);
}
</SCRIPT>
]]>
<![CDATA[
<FORM>
<INPUT TYPE=button VALUE="Open to available" onClick="myAvailable();">
</FORM>
]]>
As you can see from these copy and pastes
screen object
examples, you can write code to size and position windows
according your users' display screen resolution.
- Related Reading
Any sample code included above is provided for your use on an "AS IS" basis, under the Netscape License Agreement - Terms of Use
