Tech-Eclectic Code

Tips For Using Internet Explorer Will Appear Here Randomly

Let`s see about this one...
Hmmmm...

I recently modified:

Scripts Page
Backgrounds Page
HTML Page
Code Page

[ This Window Closes Itself... ]

Tech-Eclectic Code

Welcome to my code page. This page assumes you have a basic understanding of what a script is and how to include it in your page. It is not designed to teach you scripts, but offers solutions to problems making scripts work in the majority of browsers. Okay, 2 important facts about scripts; they must be inbetween <script></script> tags, and they usually are written inside the <head></head> tags in your page. If you don't understand that, I would recommend looking for some training on javascripts before trying to use information from here.

Over 90% of my visitors are using IE as their browser. But I think is a good idea to design your page so it looks similar in the majority of browsers used by your visitors. A simple script will allow you to determine the browser being used, then use this determination in your scripts to display the page more accurately.

( pssst... did you add me to your favorite places yet? )

Browser Detection Technique & Use

Here is a simple way to determine if vistors are using Netscape as their browser. Set a variable (isNS) true or false based on the application name.

var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);

You can use this variable to set other actions:

/* They can be used in place of hidden and visible
because on occasion Navigator has problems with the two */
var HIDDEN = (isNS) ? 'hide' : 'hidden';
var VISIBLE = (isNS) ? 'show' : 'visible';

/* Create shortcut variables for different absolutely positioned elements */
var menu1 = (isNS) ? document.menu1 : document.all.menu1.style;
var menu2 = (isNS) ? document.menu2 : document.all.menu2.style;

Cross-Browser Compatibility Techniques

One of the best methods to determine which browser is being used, especially in javascript functions, is to check how the browser refers to objects. Each of the 3 main browsers use unique ways of refering to objects. Here is a way to determine the browser used:

if (document.layers) {
//Netscape 4 specific code
}

if (document.getElementById) {
//Netscape 6 specific code
}

if (document.all) {
//IE4+ specific code
}

Now that you know how to determine the browser type, you can use variables to hide the differences in object variables between browsers. The following script creates "pre" and "post" variables to disguise object management access differences between the browsers. By hiding the object differences, it makes no difference which browser executes the code.

if (document.layers) {
pre = 'document.';
post = ' ';
}

if (document.getElementById) {
pre = 'document.getElementById(" ';
post = ' ").style';
}

if (document.all) {
pre = 'document.all.';
post = '.style';
}

Note that because IE5 supports both getElementById(), and document.all(), the pre and post variables are set twice, once during the document.getElementByID test and again in the document.all test. After setting the pre and post variables, you can reference objects in all three browsers using a simple eval() statement.

var myLayer = eval(pre + 'someLayerID' + post);
myLayer.top = 100;

The preceding code uses the pre and post variables to retrieve a reference to a <div> object whose id is set to "someLayerID". The last line sets the top property to 100.

Cross-Browser Window Size Detection

IE uses a proprietary property while both Netscape versions favor the W3C's standard properties:

if(document.all) {
availW = document.body.clientWidth;
availH = document.body.clientHeight;
}
else {
availW = innerWidth;
availH = innerHeight;
}

Because IE uses a body property to determine height and width, you have to execute this script after the body tag, or in the body tag with an onLoad script call.

Cross-Browser Rollover Buttons

To make buttons change as the mouse moves over them needs to be treated differently depending on the browser in use. You should preload your images for better response, and give each image a unique name. The following function works by determing the browser, and selecting one of two images by name and number. Here is the code for one button. You can have as many as you want, but be aware... the more you have, the slower your page will load.

// Preload Images

menu1t1 = new Image();
menu1t1.src = "ltblue.sitelinks.anim-v.open.gif";
menu1t2 = new Image();
menu1t2.src = "ltblue.sitelinks.anim-v.close.gif";

Here is the link code to activate the onMouseover and onMouseout actions:

Here is the function to change the image:

In the example above, bttn1 is the layer in which the link is located. If the link is not in a layer, simply send an empty string('') instead of 'bttn1' in the onMouseover and onMouseout calls to the change function.

Use the menus at the top of the page to access the areas of my site. This is a project in the works so not all the pages have been coded yet... but I'm working on it!