ColdFusion in Context: Screen Resolution

Suppose you want to adjust your window layout based on the available screen width. This tip provides a way to get that information from the client's browser and pass it into ColdFusion.

Plan

The client knows the screen resolution; the server doesn't. You'll use javascript to read the screen resolution. However, javascript runs on the client. Consider the available methods to get information from the client to the server. The server can only receive client data via a URL, cookie, or form variable. Therefore, the screen resolution has to be checked before it's needed. It can't be checked by the page that really needs it (unless the user submits the page again). Since the resolution has to be read ahead of time and will probably remain stable for the life of the session, it's convenient to read it at login.

This raises another point. The object of reading the screen resolution is to adjust your window layout based on what the user is able to see, not what the user chooses to see. If you plan to readjust the display to fit a two-inch window, you're building a funhouse mirror, not a serious application. The user can resize the window at any time. If you want to set the display based on the current window width and then the user resizes the window (again!), you'll need to read this information every time the page is refreshed and then pass the new dimensions to the application after every refresh if that's your criterion for success. This path is neither easy nor necessary.

If the user can easily make the window large enough to see your content, allowing for your navigation bar as well as the user's toolbars, then you've succeeded. Although it's possible to read the window size, it's probably better not to bother. Reading the screen size lets you determine the dimensions readily available to the window.

So, let's plan to read the available screen dimensions at login.

Read

Put this code in login.cfm. In addition to the usual fields present at login, you'll want to add hidden fields to read the available screen and height after operating system toolbars are accounted for. This is available (in pixels) from both Netscape Navigator and Internet Explorer. You could integrate the script with the form for IE, but Netscape insists on being a bit more formal. So, start by defining a function that will copy the information you need into hidden fields of the form, and then activate the form when the body has finished loading. Be sure to use the same character case for the form name (Login in this instance) that you use when you actually name the form later on. 

<script language="javascript">
<!--
function screenDimensionsGet() {
  if (self.screen.availWidth) {
    document.Login.ScreenWidth.value =
    self.screen.availWidth;
  }
  if (self.screen.availHeight) {
    document.Login.ScreenHeight.value =
    self.screen.availHeight;
  }
}
// -->
</script>
<body onLoad="screenDimensionsGet()">

Now define a typical login form named Login. In addition to Username and Password, give it hidden fields to hold the settings to (hopefully) be provided by the javascript above. If the informatation can't be obtained - perhaps javascript is off - provide default values. Most monitors can handle at least 800 x 600. Subtracting the status bar leaves 800 x 567 when I set my resolution this low. 

<form name="Login" method="post" action="gate.cfm">
Please log in
<p>
Username: <input type="text" name="Username" value=""><br>
Password: <input type="password" name="Password" value=""><br>
<input type="hidden" name="ScreenWidth" value="800">
<input type="hidden" name="ScreenHeight" value="567"><br>
<input type="submit" name="Go" value="Send">
</form>

Display

Normally, you'd use this information. The purpose of this demonstration is to show that you can obtain it. So, the page that receives data from the form merely displays it. Put this code in gate.cfm. You could use cfdump to show the form structure. Instead, here's the naive method: 

<cfparam name="form.Go" default="">
<cfif len(trim(form.Go))>
	<cfoutput>
	Username: #form.Username#<br>
	Password: #form.Password#<br>
	Available Screen Width: #form.ScreenWidth#<br>
	Available Screen Height: #form.ScreenHeight#
	</cfoutput>
</cfif>

Observations

Once the server knows the screen dimensions, it would be a good idea to make this information available to every page by storing it in session memory. If you know the screen dimensions, you can estimate the dimensions that the user could provide to the main window of your application. Knowing this information, you can estimate the best fit for pictures and text. Add screen dimensions to the list of parameters you read at login. Use them to fine-tune your layout. =Marty= [For the on-line demonstration of this tip, clarification was added to the login screen to emphasize that any login will do.]