Javascript Tricks and Tips
   | |
Window Status MouseOvers function hiLite(imgID,imgName) { Actual Call to the Rollover Function:
The most comprehensive reference to JavaScript can be found at http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm where you can lookup certain functions, methods, etc. and determine what version of Netscape they were implemented in.
It is safest to end each line of code with a semi-colon ";", or at least be consistent.
It is good style to declare variables with the syntax
var varname [= value] [..., varname [= value] ]
When using a non-breaking space ( ) in a JavaScript string, first define it as a separate string using: var space = " "; and then include it in the middle of your string instead of the actual ANSI code for the nbsp character such as: htmlcode = 'test'+space+'test'; because it can sometimes be interpreted before the page loads, putting spaces in the actual code (which are ignored by browsers) instead of on the actual page.
When building a multi-line string appending several smaller strings (such as building HTML code), end each smaller string with a newline character "\n", for example:
htmlcode = '<select>\n';
htmlcode += '<option>Option 1\n';
htmlcode += '<option>Option 2\n';
. . .
document.writeln(htmlcode);
Because the string can get very long very fast, some browsers (particularly older ones) may have a cut-off limit on a line length in the resulting HTML code or it may even end up crashing the page or the browser.
When implementing browser detection for browser version, use:
parseInt(navigator.appVersion) to get an integer from the long appVersion string, but keep in mind that all versions of the Internet Explorer browser (on PCs) will return an integer one less than the actual version, for example: IE 3.01 returns 2 and IE 4.01 returns 3, etc.
When implementing browser detection for browser name, use navigator.appName which will return either "Microsoft Internet Explorer" or "Netscape."
When implementing operating system detection, use:
navigator.appVersion.toLowerCase().indexOf("mac") and
navigator.appVersion.toLowerCase().indexOf("win")
To prevent a form from submitting itself before doing some form validation or other code, use onSubmit="return preSubmit();" inside the <FORM ...> tag where preSubmit can be named anything and the definition of the function should end in return false; and have in it a statement that will return true; if everything is correct.
If you wish to submit a form from within JavaScript code, you can use: document.formname.submit()
To view the generated HTML source code of a page after any document.write's or document.writeln's have been performed, preface the URL in the location box with view-source:wysiwyg://0/ such as view-source:wysiwyg://0/http://www.server.com/file.html
If you want the clicking of a link to only execute some JavaScript code and not link to anything, instead of using an onClick="..." in the anchor tag, put javascript:yourcode in the HREF attribute, such as:
<A HREF="javascript:alert("Hello");"> instead of
<A HREF="#" onClick="alert('Hello');">
<a href="/sample.htm"
onmouseover="window.status='Sample'; return true;"
onmouseout="window.status=' '; return true;">Sample</a>
Rollover Effect on Images:
if (document.images) {
// defining the image locations and their sizes
img1_off = new Image(138,15);
img1_off.src = "/images/pic_off.gif";
img1_on = new Image(138,15);
img1_on.src = "/images/pic_on.gif";
. . .
}
// the function that actual does the switching of the images on the page
if (document.images) {
document.images[imgID].src = eval(imgName + ".src");
}
}
<a href="page.html" onmouseover="hiLite('img1','img1_on'); onmouseout="hiLite('img1','img1_off');>
Function to Strip Whitespace From a String:
function strip_spaces(mystr) {
var newstring = "";
if (mystr.indexOf(' ') != -1) {
string = mystr.split(' ');
for (var i=0;)
newstring += string[i];
}
return newstring;
} else { return mystr; }
}
Function to Prevent the User From Submitting
the Form More Than Once at a Time:
function clickOnce() {
if (clicks == 1) { return true; }
else { return false; }
}
and in the body tag:
<body... onLoad="clicks=0;">
and in the form tag: <form ... onSubmit="clicks++; return clickOnce();">
