1
Hi All,
I am trying to assist my wife, by making a simple menu system for the website.
The web page is a .php4 file and does an include of the navigation file. Before it includes that file at the top I have the following line of code to include my .js file.
<script src="scripts/SideNav.js" language="JavaScript" type="text/javascript"></script>
that is inside the <head> tag. It used to work fine with a more hard coded version of the menu system. I am trying to generalize it a little bit.
The .js file looks like the following.
var MenuObject = new Array();
MenuObject[ 0 ] = "NoChoices";
MenuObject[ 1 ] = "Location01";
MenuObject[ 2 ] = "BookChoices";
MenuObject[ 3 ] = "NewsChoices";
MenuObject[ 4 ] = "PeekInsideChoices";
MenuObject[ 5 ] = "ReadReviewsChoices";
MenuObject[ 6 ] = "AuthorChoices";
MenuObject[ 7 ] = "ConsultingChoices";
MenuObject[ 8 ] = "ResourcesChoices";
function DoNothing()
{
}
function CancelEvent()
{
event.cancelBubble=true;
event.returnValue=false;
}
function PageEnter( menuobj, menustring )
{
CloseAllChoices( menuobj, menustring );
}
function LocateChoiceIndex( menuobj, menustring )
{
var RetVal = null; // Currently an ILLEGAL index value.
// Go through looking for the correct index value.
for( var IdxVal=0; (IdxVal < menuobj.length); IdxVal++ )
{
// See if the string at the Index Value Matches what we are looking for.
if ( menustring == menuobj[IdxVal] )
{
RetVal = IdxVal; // If we found the IndexValue then Great.
break;
}
}
return ( RetVal );
}
function ShowGroup( menuobj, menuname )
{
CloseAllChoices( menuobj, menuname );
OpenChoice( menuname );
}
function OpenChoice( groupname )
{
document.getElementById( groupname ).className = "NavChoicesShow";
}
function CloseChoice( groupname )
{
document.getElementById( groupname ).className = "NavChoicesHide";
}
function CloseAllChoices( menuobj, menustring )
{
var StartingChoiceIdx = LocateChoiceIndex( menuobj, menustring );
var IdxVal = 0; // Use this as a loop Counter to go through all the menu choices.
var MenuNameStr = menuobj[0];
CloseChoice( MenuNameStr ); // Use the Proper Name String.
// Code never gets here, because it doesn't seem to return from CloseChoice() call above.
// I have tried it with a return and without.
alert( MenuNameStr );
MenuNameStr = menuobj[1];
CloseChoice( MenuNameStr ); // Use the Proper Name String.
MenuNameStr = menuobj[2];
CloseChoice( MenuNameStr ); // Use the Proper Name String.
MenuNameStr = menuobj[3];
CloseChoice( MenuNameStr ); // Use the Proper Name String.
MenuNameStr = menuobj[4];
CloseChoice( MenuNameStr ); // Use the Proper Name String.
MenuNameStr = menuobj[5];
CloseChoice( MenuNameStr ); // Use the Proper Name String.
MenuNameStr = menuobj[6];
CloseChoice( MenuNameStr ); // Use the Proper Name String.
MenuNameStr = menuobj[7];
CloseChoice( MenuNameStr ); // Use the Proper Name String.
MenuNameStr = menuobj[8];
CloseChoice( MenuNameStr ); // Use the Proper Name String.
alert( MenuNameStr );
// Ensure we have a Valid Index Value.
if ( StartingChoiceIdx != null )
{
/*
** Go Through All of the MenuChoices turning off the ones We don't currently have open.
*/
alert( 'Valid index.' );
for( IdxVal=StartingChoiceIdx+1; (IdxVal < menuobj.length); IdxVal++ )
{
// Close the Current Menu Choice.
CloseChoice( menuobj[IdxVal] ); // Use the Proper Name String.
}
}
else
{
alert( 'Can\'t find a valid index.' );
/*
** Here if the Index Value was ILLEGAL.
** Therefore Close ALL choices.
*/
// Go through Closing ALL menu Choices.
for( IdxVal=0; (IdxVal < menuobj.length); IdxVal++ )
{
// Close this Specific Menu Choice.
CloseChoice( menuobj[IdxVal] ); // Use the Proper Name String.
}
}
}
Then in the navigation file that gets included, I have sections that look like the following.
<span id="Location01" name="Location01" class="NavChoicesShow"
onMouseOver="ShowGroup( MenuObject, MenuObject[1] );" onMouseOut="CancelEvent();" >
</span>
<a name="Book" href="/index.php4" class="SideNav"
onMouseOver="ShowGroup( MenuObject, MenuObject[2] );" onMouseOut="CancelEvent();">The Book</a>
<br />
<span id="BookChoices" name="BookChoices" class="NavChoicesShow" >
<a name="BuyItNow" href="/buyitnow.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[2]);" onMouseOut="CancelEvent();" >- Bookstore Links</a>
<br />
</span>
<img src="/includes/whiteline2.gif" width="112" height="14"><br />
<a name="News" href="/press/index.php4" class="SideNav"
onMouseOver="ShowGroup( MenuObject, MenuObject[3] );" onMouseOut="CancelEvent();">News & Press</a>
<br />
<span id="NewsChoices" name="NewsChoices" class="NavChoicesShow" >
</span>
<img src="/includes/whiteline2.gif" width="112" height="14"><br />
<a name="PeekInside" href="/sneakpeek/index.php4" class="SideNav"
onMouseOver="ShowGroup( MenuObject, MenuObject[4] );" onMouseOut="CancelEvent();">Peek Inside</a>
<br />
<span id="PeekInsideChoices" name="PeekInsideChoices" class="NavChoicesShow" >
<a name="TOC" href="../sneakpeek/index.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[4] );" onMouseOut="CancelEvent();" >- Table of Contents</a>
<br />
<a name="Excerpts" href="../sneakpeek/excerpts.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[4] );" onMouseOut="CancelEvent();" >- Excerpts</a>
<br />
<a name="Book Cover" href="../sneakpeek/backcover.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[4] );" onMouseOut="CancelEvent();" >- Back Cover</a>
<br />
</span>
<img src="/includes/whiteline2.gif" width="112" height="14"><br />
<a name="ReadReviews" href="/reviews/index.php4" class="SideNav"
onMouseOver="ShowGroup( MenuObject, MenuObject[5] );" onMouseOut="CancelEvent();">Reviews</a>
<br />
<span id="ReadReviewsChoices" name="ReadReviewsChoices" class="NavChoicesShow" >
</span>
<img src="/includes/whiteline2.gif" width="112" height="14"><br />
<a name="Author" href="/theauthor/index.php4" class="SideNav"
onMouseOver="ShowGroup( MenuObject, MenuObject[6] );" onMouseOut="CancelEvent();">The Author</a>
<br />
<span id="AuthorChoices" name="AuthorChoices" class="NavChoicesShow" >
</span>
<img src="/includes/whiteline2.gif" width="112" height="14"><br />
<a name="Consulting" href="/consultingservices.php4" class="SideNav"
onMouseOver="ShowGroup( MenuObject, MenuObject[7] );" onMouseOut="CancelEvent();">Consulting Services</a>
<br />
<span id="ConsultingChoices" name="ConsultingChoices" class="NavChoicesShow" >
</span>
<img src="/includes/whiteline2.gif" width="112" height="14"><br />
<a name="Resources" href="/resources/index2.php4" class="SideNav"
onMouseOver="ShowGroup( MenuObject, MenuObject[8] );" onMouseOut="CancelEvent();">Free Resources</a>
<br />
<span id="ResourcesChoices" name="ResourcesChoices" class="NavChoicesShow" >
<a name="DiscussionGroup" href="../MessageBoard/index.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[8] );" onMouseOut="CancelEvent();" >- Discussion Group</a>
<br />
<a name="Articles" href="../resources/article_1.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[8] );" onMouseOut="CancelEvent();" >- Articles</a>
<br />
<a name="AskTheAuthor" href="../resources/index.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[8] );" onMouseOut="CancelEvent();" >- Ask the Author</a>
<br />
<a name="Links" href="../resources/toolslinks.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[8] );" onMouseOut="CancelEvent();" >- Links</a>
<br />
<a name="Bookstore" href="../resources/bookpicks.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[8] );" onMouseOut="CancelEvent();" >- Bookstore</a>
<br />
<a name="CoolStuff" href="../resources/getequipped.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[8] );" onMouseOut="CancelEvent();" >- Cool Stuff!</a>
<br />
<a name="Charity" href="../CharityInfo/CharityPage.php4" class="NavChoices"
onMouseOver="ShowGroup( MenuObject, MenuObject[8] );" onMouseOut="CancelEvent();" >- Charity Info</a>
<br />
</span>
<img src="/includes/whiteline2.gif" width="112" height="14"><br />
However, the darn thing doesn't work.
I have placed a few "alert()" calls to see where the code is getting, and try to see where my problem is. It looks like once inside the "CloseAllChoices()" function if I move the alert() above the first " CloseChoice( MenuNameStr );" call that I can see the alert and then things end. However, when the alert() comes after that call, I never even see the Alert Dialog box. I have no idea why this code just seems to stop and never come back. In addition I have tried adding "return()" to the functions to see if that was causing it for some reason, but to no avail.
Please help. I think this should be an easy one for someone who knows Javascript, but I just don't have any real exposure to the language.
Also, I use a Mac, is there anything I can use to actually try to debug this stuff?
Sincerely,
Kevin Shapiro
