ColdFusion TIPS PLUS
Issue 00140 http://www.cftipsplus.com
I. My CommentsII. ColdFusion In Context: Screen Resolution
By R. Martin Ladner
martin.ladner@charter.net
I. Comments:
OutSourcing?
http://www.nsnd.com/blog/display_blog.cfm?bid=7&day=22&startmonth=03&startyear=2004
I have been busy with work and the baby. Needless to say life is NOT normal yet. Not sure it every will be again. <grin> However my newest son is so cute and I do plan to get the other pictures I have of him up someday.
Keep Coding,
Nathan Stanford
http://www.cftipsplus.com
If you have suggestions for articles send them to us.
If you would like to write for cftipsplus.com
send us an email to:
NathanS<at>nsnd.com
IF YOU WANT TO BE AN AUTHOR SEND IN YOUR COLDFUSION TIPS.
Remember this is a great way to get your name known in the
ColdFusion Community.
II. ColdFusion in Context: Screen Resolution
By R. Martin Ladner
martin.ladner@charter.net
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=
Publisher and Creator:
Nathan Stanford,
NathanS<at>nsnd.com
http://www.cftipsplus.com
Macromedia and ColdFusion are U.S. registered trademarks.
Copyright (c) 2000 - 2004
CFTIPSPLUS.COM and NSND.COM
Permission is granted to circulate this publication via
MANUAL forwarding by email to friends provided that the text is
forwarded in its entirety and no fee is charged.
