Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 2232

Sep 21st, 2006

Javascript causes page to crash

Expand Post »

Hi all i will try to be as clear as possible!

I am currently working on a site for a customer at www.privacymaker.com/gcs/dev/ (where im developing it, the main site location is www.gerbercentral.com)

well here is the issue i am running into.

I have decided to go with mouseovers that change the innerHTML of an element, at first if you tried to mouse over the tags while the page was loading it would cause the page to abort loading and you would get an error message.

I decided that it may be due to me trying to reference an HTML element that had not been drawn yet.

so i inserted the line

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
document.getElementById && document.getElementById("LEFTNAV"))
{//continue code}
document.getElementById && document.getElementById("LEFTNAV"))
{//continue code}

thinking that it would only execute the script if it could find the required element and only if the browser supported it...well i guess i was wrong because i am still getting crashes.

here is a copy of important HTML and the javascript file itself

[html]
<div align="justify">

<a href="./networking.php" onMouseOver="displayNav( 'networking', '1' )" onMouseOut="restoreNav()">Networking</a> |
<a href="./hardsoft.php" onMouseOver="displayNav( 'hardwaresoftware', '1')" onMouseOut="restoreNav()">Hardware/Software</a> |
<a href="./viruses.php" onMouseOver="displayNav('virus', '1')" onMouseOut="restoreNav()">Viruses</a> |
<a href="./os.php" onMouseOver="displayNav('os', '1')" onMouseOut="restoreNav()">Operating Systems</a> |
<a href="./helpticket.php" onMouseOver="displayNav('webhelp', '1')" onMouseOut="restoreNav()">Web Based Help Tickets</a> |
<a href="./webdesign.php" onMouseOver="displayNav('webdes', '1')" onMouseOut="restoreNav()">Web Design</a> |
<a href="./training.php" onMouseOver="displayNav('training', '1')" onMouseOut="restoreNav()">Training</a>


<a href="./login.php">Customer Login</a>

</div>[/html]

this calls the functions and here are the functions

[html]
function displayNav( location, level )
{
var path;
//if the document has not loaded yet do NOT do this procedure
//will cause a browser crash due to elements needed not being renderd yet
if(document.getElementById && document.getElementById("LEFTNAV") && document.getElementById("navhead")){ //is required piece loaded?
stopDelay();
//check to see what level they are on
if(level == 1) {
//top level directory
path = "./";
path += location;
} else {
//level two
path = "../";
path += location;
}

switch(location)
{
case "networking":
document.getElementById("LEFTNAV").innerHTML = "<table align=\"left\" class=\"rpxtable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Wire(less) Networking</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Microsoft Servers</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Linux Servers</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">VLAN / VPN</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Cable Installation</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Network Hardware Setup</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Remote Support</a></td></tr><tr><td class=\"shader\"></td></tr></table>"
document.getElementById("navhead").innerHTML = "Networking"
break
case "hardwaresoftware":
document.getElementById("LEFTNAV").innerHTML = "<table align=\"left\" class=\"rpxtable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\" ><a href=\"#\">Install/Removal</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Upgrades</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Hardware Cleaning</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Troubleshooting</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Data Backup</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Recovery Disks</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Drivers Disk</a></td></tr><tr><td class=\"shader\"></td></tr></table>"
document.getElementById("navhead").innerHTML = "Hardware/Software"
break
case "virus":
document.getElementById("LEFTNAV").innerHTML ="<table align=\"left\" class=\"rpxtable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Detection and Removal</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Preventative Software</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Adware / Spyware</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Preventative Maintanence</a></td></tr><tr><td class=\"shader\"></td></tr></table>"
document.getElementById("navhead").innerHTML = "Viruses"
break
case "os":
document.getElementById("LEFTNAV").innerHTML ="<table align=\"left\" class=\"rpxtable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Microsoft Windows</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Linux</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Macintosh</a></td></tr><tr><td class=\"shader\"></td></tr></table>"
document.getElementById("navhead").innerHTML = "Operating Systems"
break
case "webhelp":
document.getElementById("LEFTNAV").innerHTML ="<table align=\"left\" class=\"rpxtable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Web Based Help Tickets</a></td></tr><tr><td class=\"shader\"></td></tr></table>"
document.getElementById("navhead").innerHTML = "Online Help Tickets"
break
case "webdes":
document.getElementById("LEFTNAV").innerHTML ="<table align=\"left\" class=\"rpxtable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Logo Design</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Web Scripting</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Database Work</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Layouts</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Templates</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Shopping Carts</a></td></tr><tr><td class=\"shader\"></td></tr></table>"
document.getElementById("navhead").innerHTML = "Web Design"
break
case "training":document.getElementById("LEFTNAV").innerHTML ="<table align=\"left\" class=\"rpxtable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Windows OS</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Universal Linux/Unix Training</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Office Suites Training</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">PC Security</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Preventative Maintanence</a></td></tr><tr><td class=\"shader\"></td></tr><tr><td height=\"21px\" onMouseOver=\"this.className='yellowBG'\" onMouseOut=\"this.className='normal'\"><a href=\"#\">Heald College Cisco Certification</a></td></tr><tr><td class=\"shader\"></td></tr></table>"
document.getElementById("navhead").innerHTML = "Training"
break
default:
restoreNav();}
}

}
[/html]
and the other function
[html]
var timer;
function restoreNav(){
{
stopDelay();
timer = setTimeout("restore()", 1250);
delete timer;
}
function restore()
{
if(document.getElementById && document.getElementById("LEFTNAV")) { //only restor nav if they are using IE5+ or NS6 or Some version of FireFox
document.getElementById("LEFTNAV").innerHTML = currentSection;
document.getElementById("navhead").innerHTML = currentHead;
}
}
function stopDelay(){
//clear the timer
if(typeof timer == 'undefined'){
//nothing to stop
}
else{clearTimeout(timer);}
}
[/html]

Similar Threads

Passing variable value from javascript to jsp page at run time in JSP
change the font/color of the selected text on a web page through javascript in JavaScript / DHTML / AJAX
Javascript/VBScript within VB6 application in Visual Basic 4 / 5 / 6
Conflicting javascript slideshows on same page in JavaScript / DHTML / AJAX
Getting data from ASP page A to ASP page B using javascript in ASP.NET

Killer_Typo

Reputation Points: 152

Solved Threads: 39

Master Poster

Offline

778 posts
since Apr 2004

Permalink

Sep 21st, 2006

Re: Javascript causes page to crash

Have you tried using onload to keep the displayNav function from being read until after the page loads?

FC Jamison

Team Colleague

Reputation Points: 92

Solved Threads: 21

Posting Pro in Training

Offline

436 posts
since Jun 2004

Permalink

Sep 21st, 2006

Re: Javascript causes page to crash

Click to Expand / Collapse Quote originally posted by FC Jamison ...

Have you tried using onload to keep the displayNav function from being read until after the page loads?

i tried using

if(document.onload)

but it didnt work...the mouse over just never seemed to start up!! :lol:

Killer_Typo

Reputation Points: 152

Solved Threads: 39

Master Poster

Offline

778 posts
since Apr 2004

Permalink

Sep 21st, 2006

Re: Javascript causes page to crash

w00t i figured out what my problem was and fixed it.

i needed to include the if(document.getElementById) statement in the restoreNav() funciton as it was also trying to reference the ID before it had been loaded.

problem solved

Killer_Typo

Reputation Points: 152

Solved Threads: 39

Master Poster

Offline

778 posts
since Apr 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: javascript image animation not working????

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Are U Sing Dreamweaver?

DaniWeb Message

Cancel Changes

User Name
Password