Firefox 3 Broke My Code

Yesterday, I had to install Firefox 3, because my most recent work stopped functioning properly in the new Firefox. I wanted to wait a little longer for Firefox 3 to be more stable, but had no other choice. Who would have thought the new version of my beloved Firefox would break my code? Basically, it had to do with my 3 Javascript functions that I wrote: OnMouseOver, OnMouseOut and OnClick. In the OnMouseOver function, I used the innerHTML property to replace some div text. I'm not sure if anybody else had this problem with the new Firefox, but the innerHTML property prevented my OnClick function from being called. I figured this out using my favorite Javascript debug method: alert('test'); It took me the whole day yesterday debugging and researching on Google, but still came out clueless. I ended up throwing away the innerHTML code and used the image src property instead. From experience, I've found sometimes it's best to throw away my current non-working solution and start fresh.

Flash and Javascript

A useful function to interact with Flash movie with Javascript. Works in most browsers. Thanks Permadi.com! :)

function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(movieName);
}
}

Cross-Browser getElementById()

A useful Javascript function to return the ID of an element that is supposed to work on most browsers.Thanks Netlobo.com! :)

function returnObjById( id )
{
if (document.getElementById)
var returnVar = document.getElementById(id);
else if (document.all)
var returnVar = document.all[id];
else if (document.layers)
var returnVar = document.layers[id];
return returnVar;
}

Display and Hide DIVs Using Javascript and CSS

Suppose I have some text within <div id="div1"></div> tags, it's easy to display and hide this block of text with the help of some Javascript code and CSS.

To hide the block of text, do the following:

<script language="javascript">
document.getElementById('div1').style.display = 'none';
</script>

To display the block of text, just remove the word 'none' from the code above as follows:

<script language="javascript">
document.getElementById('div1').style.display = '';
</script>

To further extend this capability, we can put the code above in a Javascript function, which can be called using the OnClick event. This can be easily done with a form checkbox as follows:

<input type="checkbox" id="CheckBoxID" OnClick="ShowHideDIV();">

function ShowHideDIV()
{
var blnCheckbox = document.getElementById('CheckBoxID')
if(blnCheckbox.checked)
{
document.getElementById('div1').style.display = 'none';
}
else
{
document.getElementById('div1').style.display = '';
}
}

Javascript to disable user from using the browser’s Back button

The following Javascript code would disable the user from using the browser's Back button.

<script language="javascript">
window.history.forward(1);
</script>

Javascript Keywords

break case continue delete do else false for function if in new null return switch this true typeof var void while with

Reserved keywords but not used by Javascript
catch class const debugger default enum export extends finally import super try

Javascript window.innerWidth vs. document.body.offsetWidth

var winW = parseInt("630"), winH = parseInt("460");
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}

The above code returns the width and height of the browser window regardless if it's Netscape or IE. If the browser is Netscape, we use innerWidth and innerHeight properties of the window object to return the width and height respectively of the browser window. If the browser is IE we use the offsetWidth and offsetHeight properties of the body object of the document object to return the width and height respectively of the browser window.

Javascript document.onmouseover

document.onmouseover=GetCoordinates;
function GetCoordinates(e){
if (navigator.appName=="Netscape") {
xVal = parseInt(e.pageX);
yVal = parseInt(e.pageY);
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
xVal=parseInt(event.x);
yVal=parseInt(event.y);
}
}

This line of code document.onmouseover=GetCoordinates; causes the onmouseover to be fired and calls function GetCoordinates, which is used to keep track of every single mouse movement. Also, the appName property of the javascript navigator object is used to identify the user's browser. If the browser is Netscape, e.pageX and e.pageY return the (X,Y) coordinates of the mouse pointer. Otherwise, event.x and event.y are used to return the (X,Y) coordinates of the mouse pointer in IE.

Javascript document.onclick

document.onclick=WindowClickEventExplorer;
function WindowClickEventExplorer(e){
if (navigator.appName=="Netscape") {
popIt=0;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
var WinEvent = window.event.srcElement.tagName;
if (WinEvent =='INPUT' || WinEvent =='IMG' || WinEvent =='A' || WinEvent =='B' || WinEvent =='SELECT') popIt=0;
}
}

The above code captures all the click events within the document inside the current browser and calls function WindowClickEventExplorer at the mouse click. Inside function WindowClickEventExplorer, appName property of javascript navigator object is used to identify the user's browser, which in this case is either Netscape or IE. If the browser is IE, we can use the following line of code window.event.srcElement.tageName to identify the tag name of the source that generates the click event.

Javascript Location Object

The Javascript location object has 3 important properties: href, host, and protocol and 2 methods: replace() and reload()

location.href - returns the current URL
location.host - returns the current Host
location.protocol - returns the protocol used
window.location.href = "http://www.newurl.com" - sends user to "http://www.newurl.com"
window.location.replace("http://www.newurl.com") - sends user to "http://www.newurl.com"
setTimeout("location.reload()",100000) - refreshes the current page every 100 seconds