If you are developing and testing with Netscape 4, and are drawing some HTML with Javascript, you may have noticed an odd tag creep into your rendered code: the 'Ttyle' tag. This is the result of a bug with Javascript and Netscape 4, and inserting HTML code that contains a 'style' tag. Whenever you have Javascript write a 'style' property with a document.write, for instance,
<span style='position: relative; width:150px;'>Testing</span>
you may notice that when looking at your rendered code that there will be a
<SPAN Ttyle='position: relative; width:150px;'>Testing</SPAN>
This extraneous line may cause displaying issues, and the solution is simple: do not have Javascript write anything with a 'style' property. The most logical choice would be to create a CSS file, and give the element that needs a 'style' property a class or id, and set the desired properties through CSS.
Cookie Errors - There is a limit (20 cookies at about 4k each) to how much information that you can store in a cookie. A work around for this error is to make a framed page. The top frame has the form that you want the user to enter data into. The bottom frame (with a height of 0px to make it hidden) has duplicate form to collect the information. Use a JavaScript call on a button to validate (if necessary) and then collect the data from the top form and then place it in the bottom form. When you finally do a print preview, or e-mail, just re-assemble the information by pulling it from the bottom frame and the re-creating the top frame with that information in a document.write(). With this method of data collection, you can send people through multiple steps of forms, collect data, and there is no limit to how much information that you can store. Please remember to kill the frame when the user leaves the site.
Date Error - date.getYear() - isNS - With isNS the year in the getYear() function is off by 1900. We believe this is due to a Y2K issue with isNS, but the NS site claims that they are calculating the year correctly and all other browsers are wrong. Either way, if(isNS) you need to add 1900 to the year to get the 'real' year.
Date Error - date.getTime() - isOpera - For some reason the epoch time (the number of seconds expired since midnight on January 1, 1970) returns the figure as calculated in GMT (Greenwich Mean Time). Therefore you will also need to know how far off you are from GMT for your time zone, to accurately calculate the epoch.
Detecting Browser and OS - The following is the javascript code on how to detect specific browsers and OS.
To use the detection scripts, include whatever variable you need, and then create an if statement such as: if(isNS6Pc) That will return true if it isNS6Pc and false for everything else, so you can customize your scripts depending upon what browser that you need to.
Detecting Plugins - Can really only be done through Netscape, since IE doesn't allow for JavaScript to 'peek'
into the plugin's installed on a computer. Therefore, assumptions need to be made about IE. It's best to assume that a browser
doesn't have a plugin, so have a version of the web page without, and encourage the user to get the plugin (ie: provide a link.)
var browserName = navigator.appName;
var browserVersion = navigator.appVersion;
if (browserName != "Netscape" && (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] != -1))
{
// No Netscape and has and version of Flash so display the Flash
}
else
{
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] == -1)
{
// Netscape with no Flash Plugin
}
else
{
var browserPlugin = navigator.plugins["Shockwave Flash"].description;
if (browserName == "Netscape" && (browserPlugin.indexOf('4.') != -1 || browserPlugin.indexOf('5.') != -1))
{
// Netscape with at least Flash 4
}
else
{
// Netscape without Flash 4 plugin
}
}
}
Detecting Window Width - The only time that knowing a window width is helpful (for us) is when a designer is
trying to center a <div> or dynamically positing a child <div> in relation to a centered
parent <div>. The following is the JavaScript code to determing the leftValue (global variable) to
position a <div>.
var leftValue = 0; //Initializing the leftValue before you position a <div> (global value)
var divWidth = 550; //The width in pixels of the div that you are trying to center (global value)
function getWindowWidth()
{
if (isNS || isOpera)
{
leftValue = (Math.round((innerWidth - divWidth)/2));
}
else //By default the remaining browser isIE
{
leftValue = (Math.round((document.body.clientWidth - divWidth)/2));
}
if (leftValue < 0) //This will make sure that the leftValue is never negative.
{
leftValue = 0;
}
}
Printing Issues - Printing dynamic content (having a document.write(); to print out variables) has limitations:
Positioning a <div> - There are many issues in positioning a <div>. The JavaScript
code that follows will help explain what is going on.
var isNS = (navigator.appName == "Netscape");
var isNS4 = ((navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Gecko") == -1) );
var isOpera = (navigator.userAgent.indexOf("Opera") != -1);
var layerRef = (isNS4) ? "document." : "document.getElementById('";
//if (isNS4) then layerRef is "document." else "document.getElementById('"
var styleRef = (isNS4) ? "" : "').style";
//if (isNS4) then styleRef is "" else "').style"
var leftRef = (isOpera) ? '.pixelLeft = "' : '.left = "';
//if (isOpera) then leftRef is '.pixelLeft = "' else '.left = "'
var topRef = (isOpera) ? '.pixelTop = "' : '.top = "';
//if (isOpera) then leftRef is '.pixelTop = "' else '.top = "'
var labelRef = (isNS4 || isOpera) ? '"' : 'px"';
//if (isNS4 || isOpera) then labelRef is '"' else 'px"'
var visibleRef = ".visibility = 'visible'";
//This is the visibile code.
var hiddenRef = ".visibility = 'hidden'";
//This is the hidden code.
function moveDiv()
{//The eval statement puts all of the variables together and then 'evaluates' the code.
eval (layerRef + "Box1" + styleRef + leftRef + "300" + labelRef);
//Move Box1 300px from the left of the window.
eval (layerRef + "Box1" + styleRef + topRef + "200" + labelRef);
//Move Box1 200px from the top of the window.
}
function layerHide()
{
eval (layerRef + "Box1" + styleRef + hiddenRef);
//Make Box1 hidden.
}
function layerVisible()
{
eval (layerRef + "Box1" + styleRef + visibleRef);
//Make Box1 visible.
}
No underscore in id="xxx" name (isNS6Pc) - This is an error with the isNS6 implementation of the DOM. There is no workaround, other than "Don't use Underscores in names." (See also the note 'No Underscore isNS6' in the CSS section.)
isOpera <div> extension - All versions of isOpera (through isOpera5) has a problem with limiting the width of the <div>. If you have a <div> that is 200px wide positioned 50 pixels from the left of the window, isOpera will display it properly, but also continue that layer past the 200px width through the rest of the page on the right. To fix that issue you must use the following <div style="width:200px"> to limit the layer to just 200px. The problem is that if you have any links that are 'behind' the layer, you will not be able to get to them, even if you can see the links. Hopefully future releases of isOpera will not have that problem.
Clipping and isOpera and isNS4 - Neither isOpera or isNS4 has implemented a style.clip attribute. If you are going to use clipping, you should also have a non clipping function for the <div> such as just making the layer visible or hidden.
Motion - Motion is actually simulated by moving a <div> a small step, waiting
for a short time, and then moving the <div> again. The JavaScript code is as follows:
var NewLocation = 10; //This is a global value of the top location of the <div>
var Destination = 200; //This is the destination location of your <div>
function divAnnimation();
{
if(NewLocation > Destination) //If you haven't reached your destination yet
{
setTimeout("moveDiv()",25); //Wait 25 hundredths of a second and then call
the moveDiv() function which changes the location of the div and resets the NewLocation, which then calls the
divAnnimation() function
}
else //You have reached your destination
{
//Do whatever you want after you've reached the destination.
}
}
Visibility - There are no issues with the style.visibility="visible||hidden" other than the isNS6 underscore issue. The code is listed above in the Positioning a <div> section. (See also the note 'No Underscore isNS6' in the CSS section.)
Dynamic building of <div> and isOpera - There is an issue with how the page is drawn, versus the page being interpreted. You can dynamically build <div> with JavaScript, but if you also dynamically position the <div>, then you must wait until after the page is loaded before changing the position, visibility, etc. In isOpera, the page loads, builds the dynamic <div> per the JavaScript commands, moves the <div> where ever you tell it to, then loads the CSS file, and re-positions the <div> back where your CSS told it to go. To over ride this, you must call a function after the page is interpreted, and the CSS applied, then you can position the <div> where they need to be... OR you can find a function that is called frequently, and if (isOpera) then call the positioning script.