Looking for the previous guiStuff?
It's still here, the content didn't go anywhere. You may want to check out this new guiStuff though -- It's rather informative.
References/Tutorials:
Intro Documents:
guiStuff:
::Stuff for the multi-spec coder;
Coding, formats, standards, and other practical things.
<!-- JavaScript
Reading Environmental Variables
JavaScript makes it very easy to find out different environmental variables from the user's computer. With a little bit of code, you can find out the user’s operating system, browser, and plenty of other information. The reason is that when an individual accesses a server by connecting to an
http:// address,
the browser is required to report certain information, including the IP address
and what information is needed. There is also optional information that may be
included regarding platform information and browsers when a JavaScript, also
known as a client side script, is used.Basic Detection
Accessing this information requires that you use a server-side script or a client-side script. The client-side script, JavaScript, will be discussed in this instance (although, technically, there is also server-side JavaScript available). In order to detect environmental codes regarding browser you would use the following code to accomplish your goal with the objectnavigator.appName:
<script language="javascript">
document.write('You are using ' + navigator.appName + ' to read this page!');
</script>
document.write('You are using ' + navigator.appName + ' to read this page!');
</script>
Running this script would result in the following being displayed on the user’s screen:
document.write('You are using ' + navigator.appName + ' to read this page!');
That of course is as simple as it gets -- using the information usually requires the use of if-then statements, as well as string processing.
Accessing the Navigator
The necessary script to show all of the important information regarding a user’s client-side is as follows:
<html>
<body>
<script type="text/javascript">
var x = navigator
document.write("CodeName=" + x.appCodeName)
document.write("<br />")
document.write("MinorVersion=" + x.appMinorVersion)
document.write("<br />")
document.write("Name=" + x.appName)
document.write("<br />")
document.write("Version=" + x.appVersion)
document.write("<br />")
document.write("CookieEnabled=" + x.cookieEnabled)
document.write("<br />")
document.write("CPUClass=" + x.cpuClass)
document.write("<br />")
document.write("OnLine=" + x.onLine)
document.write("<br />")
document.write("Platform=" + x.platform)
document.write("<br />")
document.write("UA=" + x.userAgent)
document.write("<br />")
document.write("BrowserLanguage=" + x.browserLanguage)
document.write("<br />")
document.write("SystemLanguage=" + x.systemLanguage)
document.write("<br />")
document.write("UserLanguage=" + x.userLanguage)
</script>
</body>
</html>
The
navigator Object is placed within the x variable, and then different aspects
of it are accessed, and, in this case, displayed using document.write().
Here is what the above code displays when you access it:Of course, you may not have a need for all of the user’s information and may want to concentrate on just the monitor resolution, browser version, or other, specific, information.
Monitor/Browser Resolution
All modern browsers allow detection of screen resolution through properties of screen height and width. The user’s computer screen resolution is important to know because it allows websites to send the correct version of its web page to different users. The different properties contain the information regarding the width and height pixel length of a user’s screen. An example code that allows users to check their screen resolution and the necessary resolution to view a particular page is the following:
<A HREF="javascript:alert('Your resolution is '+screen.width+'x'+screen.height);">
Click for your screen resolution</A>
Click for your screen resolution</A>
Many web designers find this a very helpful way to allow users to determine if their screen resolution is at the same level as the resolution the website was designed for. Of course, when the user accesses the page and the code determines the user’s resolution it will immediately know to send the user to the high resolution page because their browser and monitor are capable of viewing at this resolution, or to send them to a lower resolution page with the following code:
<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="highres.html";
}
else
{
window.location="lowres.html";
}
//-->
</SCRIPT>
This simple code is very useful because it allows a site to be viewable at high resolutions by capable systems, and a lower resolution page viewable to those with lower resolution capabilities.
Browser Type/Version
The following script is very useful as it allows the user’s browser type and version to be accessed. This information is really important to web developers and designers because certain browsers or versions may be redirected to other sites, or use different versions of JavaScript code. Having this information allows the user to receive the information he/she is seeking in the format that works best for his/her browser type or version.
<html>
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("Browser name: "+ browser)
document.write("<br />")
document.write("Browser version: "+ version)
</script>
</body>
</html>
Conclusion
Keeping tabs on your visitor's client information is vital to creating cross-browser scripts, as well as websites that properly adapt to their viewer's settings. The more fine-tuned the script, the wider the range of different system configurations you'll be able to react to. While it's true that there are mainly two major players in the browser arena, Explorer and Firefox, you should also consider Opera users, and the fact that browsers are compiled for different operating systems, and the same browser on a different OS doesn't function the exact same way.Return to the JavaScript section, or go the to Main page.