|
Detecting and Controlling the Client's Environment Detecting the browser type, version, and operating system The first and most important thing we need to be able to do is detect which browser and version the client is using. Type the follow code into CodeRunner below:
Preview this example. It should pop up and tell you information about your browser. Here are some examples of what you will see with different browsers and operating systems:
You see, Netscape puts the actual version number just after the "Mozilla/" whereas Microsoft puts the version after the MSIE. Both browsers, say Mozilla because they both use code from the original browser Mosaic created at NCSA in the early 90's. We can also use navigator.appName which returns only the name of the user's browser and none of theversion or operating system information. Try using navigator.appName instead of navigator.userAgent and see that it returns Netscape for netscape users and Microsoft Internet Explorer for Internet Explorer users. Also, if we use Navigator.appVersion then it returns the same stuff as Navigator.userAgent only without the word Mozilla. Now suppose you want to check for people using Netscape 4.0 or higher and respond somehow (later we'll do this to adapt our code to make things work in a cross browser way). Try the following: Type the follow code into CodeRunner below:
Preveiw this (make sure that if you copy and pasted that there are no return characters where they shouldn't be). That's pretty much how we detect the browser type and version of the user and check for it. In Later tutorials we will be using this method to make our DHTML code and javascript work on both Netscape and Internet Explorer. Detecting window and screen size Type the follow code into CodeRunner below:
Preview this and make sure it works for you. All of the values are in pixels. The screen.availWidth and screen.availHeight are the measurements of your monitors current resolution. Typical values are 640 width by 480 height, or 800 width by 600 height. Notice that we had to check for the browser type before we checked for the window width. This is because Netscape and Internet explorer have two different ways of accessing the width and height of the window. In Internet Explorer we use document.body.clientWidth and document.body.clientHeight but in Netscape we use window.innerWidth and window.innerHeight Both Netscape and Internet Explorer use screen.availWidth and screen.availHeight to get the height and width of your screen, by some strange accident. Now you may be wondering for what purposes you might want to know the screen sizes and window sizes. Well, you may want to open a new window and set the size as a percentage of the screen size. Screen sizes vary radically from system to system, from 640 by 480 up to 1600 by 1200. If you open a screen to fit in one quarter of the screen for a 640 by 480 then it will be way to small for people using 1600 by 1200! An frequent use for the knowing browser window size will come up when we animiate things on the web page later on, so I'll show you an example of opening a window as a percentage of the screen size. Type the follow code into CodeRunner below:
Preview this, and click the button to see if it works for you. Then, see if you can figure out what's going on. Notice we used eval() so that we could get the variables in where a string is expected? It is a very common pratice to use eval this way. We also used parseInt because we can only use integers for the numbers for the width and height properties, but it is likely that half of the screen size will return numbers with decimal points. TRY CHANGING THE .5 TO SOME OTHER NUMBERS LESS THAT 1 AND SEE WHAT HAPPENS. This is enough for now. We will have plenty of oppurtunities to use these methods in later DHTML lessons...See you there! |