JavaScript - Javascript Floating Menu Timing

Hi, i'm not a Javascript programmer but have adapted this slideshow from an open source online and i need some help in adding some touches and finishing it off.

www.sixtydegreedays.com

I want to add timings to the main images so they scroll through at a set interval, as well as being able to be clicked through as they are now, can someone help with this?

Also, i cannot figure out where the first image (horsebox) goes once i have clicked through the other links - if i click back to horsebox, the image disappears!

These are the two most important things, but it would also be helpful if someone could help me pre-load the images to cut down on load time.

Hopefully these are quick fixes and someone can take the time to help.

Cheers

Hi,

I have a javascript function that is formatting data before it is being passed along to an Ajax call. The same function is formatting data for two variables but it seems as though the first call to the is being preempted by the same function call for the second variable's data formatting. On top of that the function does not seem to finish execution by the time it reaches the Ajax call so none of the data seems to be passed along.

Here's a condensed version at what I'm dealing with:

Code:

var data_group1 = FormatData('type_1');
var data_group2 = FormatData('type_2');

Ajax(data_group1, data_group2);

How can I ensure that the first call to FormatData is finished before the next call to it begins. Additional how can I prevent the Ajax function from executing until the first two lines have executed.

Thanks a ton.

Hello, hoping someone can help. Have built a slide show for header using following, but there is a very annoying time lag between the photo changing and the caption changing (ie photo changes, then a brief moment later the caption changes). Can anyone tell me how to correct this so that the caption and the photo change simultaneously? Thanks in advance!
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx: 'fade',
timeout: 3000,
after: function() {
$('#caption').html(this.alt);
}
});
});
</script>

Hello guys,

I'm new to Javascript and my question involves text appearing upon a button click or after a set time.

I have the following code:

Code:

<script type="text/javascript">
function timedMsg()
{
	document.write("Timed Messege.");
}

And the button:

Code:

<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()" />
</form>[

I guess document.write is not the correct command to use in such situations, since it just replaces the whole page.

Which command should I use so that the wanted text appears within the page, without reloading or replacing it?

Thanks in advance.
I could not find a proper command in my search.

I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code:

var NoOffFirstLineMenus=7; // Number of first level items
var LowBgColor='white'; // Background color when mouse is not over
var LowSubBgColor='white'; // Background color when mouse is not over on subs
var HighBgColor='black'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='black'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='white'; // Font color when mouse is over
var FontSubHighColor='white'; // Font color subs when mouse is over
var BorderColor='black'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="arial,comic sans ms,technical" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right'
var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.2; // horizontal overlap child/ parent
var ChildVerticalOverlap=.2; // vertical overlap child/ parent
var StartTop=05; // Menu offset x coordinate
var StartLeft=05; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}


// Menu tree
// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
// For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg"

Menu1=new Array("Home","","",3);
Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150);
Menu1_2=new Array("Acknow","Acknowledgement.htm","",0);
Menu1_3=new Array("Prayer","Prayer.htm","",0);

Menu2=new Array("About Us","","",4);
Menu2_1=new Array("Debra","bio.htm","",0,20,150);
Menu2_2=new Array("Seamus","Seamus.htm","",0);
Menu2_3=new Array("Locations","location.htm","",0);
Menu2_4=new Array("Contact Us","contact.htm","",0);

Menu3=new Array("Services","","",7);
Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150);
Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0);
Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0);
Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0);
Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0);
Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0);
Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0);

Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0);

Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0);

Menu6=new Array("Articles","","",3);
Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150);
Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0);
Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0);

Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0);

Hi,

I am working on modifying a menu, and trying to add a sub-sub menu under Mfg & Dist, where Operations would expand to show Reports and Content. However, I can't get it to work. I think some javascript modification is needed, but I don't know much javascript. Can anyone help me find what I would need to change?


Below is the code I have thus far. Thank you!




Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<body>
<style>
.tab{line-height: 36px; text-decoration: none; font-family: Geneva,Tahoma,"Nimbus Sans L",sans-serif; font-size: 12px; color: #ffffff; cursor:pointer;}
.asd{text-decoration: none; font-family: Geneva,Tahoma,"Nimbus Sans L",sans-serif; font-size: 11px; color: #ffffff; cursor:pointer;}
.box {border-top: 1px solid #274f40; border-left: 1px solid #274f40; border-right: 1px solid #274f40; width: 148px; margin: 0; padding: 7px 8px 6px 10px; background-color:#4F7F6D;}
td.menuborder {background: #33735B url(http://dl.dropbox.com/u/16052106/58545.PNG);background-repeat: repeat-x; border-top:1px solid #1E3C31; border-bottom:1px solid #ABB8BB;}
td.menudiv {background: url(http://dl.dropbox.com/u/16052106/58546.PNG) no-repeat scroll 50% -2px transparent; padding-right: 20px;}
</style>
</head>



<script language=javascript>
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var menuActive = 0;
var menuOn = 0;
var onLayer;
var timeOn = null;

function showLayer(layerName,aa){
var x =document.getElementById(aa);
var tt =findPosX(x) - 11; 
var ww =findPosY(x) + 41; 

<!-- x.style.backgroundColor = '#6B8F81'; -->

if (timeOn != null) {
clearTimeout(timeOn);
hideLayer(onLayer);
}
if (IE4) {
var layers = eval('document.all["'+layerName+'"].style');
layers.left = tt;
layers.top = ww;
eval('document.all["'+layerName+'"].style.visibility="visible"');
}
else {
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'visible';
elementRef.style.left = tt;
elementRef.style.top = ww;
}
}
}
onLayer = layerName
}

function Indicator(n)
{
var box = document.getElementByID(n);
box.style.backgroundcolor='#000000';	
}

function hideLayer(layerName){
if (menuActive == 0)
{
if (IE4){
eval('document.all["'+layerName+'"].style.visibility="hidden"');
} 
else{
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'hidden';
}
}
}
}
}

function btnTimer() {
timeOn = setTimeout("btnOut()",600);

}

function btnOut(layerName){

if (menuActive == 0){
hideLayer(onLayer)
}
}

var item;

function menuOver(itemName){
item=itemName;
itemName.style.backgroundColor = '#33735B'; //background color change on mouse over 
clearTimeout(timeOn);
menuActive = 1
}

function menuOut(itemName){
if(item)
itemName.style.backgroundColor = '#4F7F6D';
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 100)
}

function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
</script>

<table valign=top cellpadding=0 cellspacing=0 width=100% border=0>
<tr><td class="menuborder">
<table align=left>
<tr>
<!-- td>&nbsp; &nbsp; </td -->
<td id=mm0 align=left><a class=tab href="/portal/page/portal/ABCEmp"><div><span> <b>&nbsp; &nbsp; Home</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm7 align=left> <a class=tab href="/portal/page/portal/ABCEmp/EngIT"> <div><span><b>Eng/IT</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm6 align=left> <a class=tab href="/portal/page/portal/ABCEmp/Finance"> <div><span><b>Finance</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm2 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu2",'mm2')> <b>Human Resources</b></td>
<td class="menudiv"></td>
<td id=mm3 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu3",'mm3')>  <b>Market Segments</b></td>
<td class="menudiv"></td>
<td id=mm4 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu4",'mm4')> <b>Mfg &amp; Dist</b></td>
<td class="menudiv"></td>
<td id=mm5 align=left> <a class=tab href="/portal/page/portal/ABCEmp/NBD"> <div><span><b>New Bus Dev</b></span></div></a></td>
<td class="menudiv"></td>
<!-- td id=mm5 align=left> <a class=tab href="/portal/page/portal/ABCEmp/NBD"> <b>New Bus Dev</b></a></td>
<td class="menudiv"></td -->
<!--			<td id=5 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("Menu2",'2')><a class=tab href="/portal/page/portal/ABCEmp/IT">  <b>IT</b></a></td>
<td> &nbsp; &nbsp; </td>
-->
</tr>
</table>


<!-- <div id=MainMenu1 style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000;">



</div> -->

<div id=MainMenu3 style="position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000">

<div>
<a  class=asd href="/portal/page/portal/ABCEmp/MktSeg/BCS"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;BCS &nbsp;&nbsp; &nbsp;</p></a> 
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/AquPlan"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;BLS &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/BusServ"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Business Services &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/ClntServ"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Client Services &nbsp; &nbsp; &nbsp;</p></a>
</div>

<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Est"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Estimating &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Mark"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Marketing &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Pap"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Paper</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Sal"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Sales &nbsp; &nbsp; &nbsp;</p></a>
</div>
<!-- div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/LTS"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Long Term Sched &nbsp; &nbsp; &nbsp;</p></a>
</div -->

</div>
<div id=MainMenu2 style="position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000">

<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>  
&nbsp;HR Home &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Job"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Job Postings &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Saf"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Safety &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/ShrServ"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Shared Services &nbsp; &nbsp; &nbsp;</p></a>
</div>

<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Trans"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Transformation &nbsp; &nbsp; &nbsp;</p></a>
</div>
</div>
<div id=MainMenu4 style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000;">

<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Man"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Manufacturing &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=showLayer("Reports",'mm8')>
<b>Operations</b></p></a>


</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/SupChn"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Supply Chain &nbsp; &nbsp; &nbsp;</p></a>
</div>

</div>

<div id=Reports style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1001;">
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops/rep"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Reports &nbsp; &nbsp; &nbsp;</p></a>
</div>

<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops/con"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Content &nbsp; &nbsp; &nbsp;</p></a>
</div>
</div>


</td>
</tr></table>
</body>
</html>

-Krzysztof

Hi I am a total newbie to javascript and css and have a menu that I am trying to get to work.
Also in the attachments the on.png need's to go in the images folder (Flyout menu.zip/Flyout menu/images/)
To start I downloaded a template that I liked. But I have a problem because if you look at the attached html page (you need to download all of them to get it to work) when you move your mouse over a menu item that has an '>' it expands with a submenu. The problem is that when you move your mouse onto one of the submenu items the main item that it came from doesn't stay lit up which makes it hard to tell which one you came from (I also think that it doesn't look good). If anyone can edit/add to the java/css/html files and make it work I will be very happy (I have been trying for days now).

Another minor problem probably to do with the css is that I would like the arrows (currently they are just text greater than signs '>') to be images and aligned right and the text to stay aligned left.

Thanks for any help

My Javascript dropdown menu drops down behind my embedded music player on my website (http://www.blackoutplaylists.com). I need help fixing this, I've tried everything and can't seem to get it fixed. Any suggestions?

Okay I am looking for some good free scripts of dynamic javascript menu (I dont know how to call them properly). A type of menu where let say on the left you click on item and on the right it updates content to cliced item. Any ideas where could I find some good or how are those called?





Reply With Quote




01-24-2015, 11:31 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

I think you need to be more specific.

Do you mean you want to do this all in one HTML page? So that the displayed content changes depending on what tab or button the user clicks on? That's not quite the same thing as what is normally called a navigation menu, where more often then not you are using the menu to get to ANOTHER html page.

Hello guys,

The title says it all, my javascript hover menu is running perfect in chrome, but really slow in IE.

Take a look here - the menu is called "Produkter"

Thanks in regard

Hi

Only a very simple beginner (thicko) so please don't laugh :-)

I have a very basic allwebco website and in the root I have menu.js which puts a small menu on the top right of every webpage that calls it.

The index.html page in the root calls this menu.js and also another page in a folder from the root calls it (I prefix menu.js in this page with '../' so as to step back to the root). Also on this sub-page I call another page which is in the same folder. This also calls up 'menu.js' and again I prefix it '../' in order to access it from the root, which is the preceding folder.

However, on this second page, it does not display the menu.

I have tried everything by prefixing it with '/', './', '../' and just leaving it as 'menu.js' but it will not find it.

I suppose it is because it is a 'recursive' situation. ie keeps calling itself over and over? Can anyone help please?

Thanks.

Barry

I am using a drop down menu for a website I'm working on to display menu items under categories. I'm using the same code to do this on two different pages with the actual content of the menu's loading from a MySQL database using PHP scripts.

www.browniepointscatering.com/menu.php
www.browniepointscatering.com/seasonal.php

On the menu.php page I left the code below in the mix which drops down the first category listed on the left.

On the seasonal.php page I took the code below out and it no longer drops down any menu by default when the page is loaded.

What I'd like to do is drop down nothing initially when the page is loaded but if someone opens up the "Cupcakes" category and clicks on an item it would keep that category open when it loads the item details in the center column.

If you need to see more code let me know!

<!-- Add-On Code: Show Select Containers On Load -->
<script type="text/javascript">/* <![CDATA[ */if(!qmad.sopen){qmad.sopen=new Object();qmad.sopen.log=new Array();if(window.attachEvent)window.attachEvent("onload",qm_sopen_init);else if(window.addEventListener)window.addEventListener("load",qm_sopen_init,1);};function qm_sopen_init(e,go){if(window.qmv)return;if(!go){setTimeout("qm_sopen_init(null,1)",10);return;}var i;var ql=qmad.sopen.log;for(i=0;i<10;i++){var a;if(a=document.getElementById("qm"+i)){var dd=a.getElementsByTagName("DIV");for(var j=0;j<dd.length;j++){if(dd[j].idiv.className.indexOf("qm-startopen")+1){ql.push(dd[j].idiv);var f=dd[j][qp];if(!qm_a(f)){var b=false;for(var k=0;k<ql.length;k++){if(ql[k]==f.idiv)ql[k]=null;}ql.push(f.idiv);f=f[qp];}}}}}var se=0;var sc=0;if(qmad.tree){se=qmad.tree.etype;sc=qmad.tree.ctype;qmad.tree.etype=0;qmad.tree.ctype=0;}for(i= ql.length-1;i>=0;i--){if(ql[i]){qm_oo(new Object(),ql[i],1);qm_li=null;}}if(qmad.tree){qmad.tree.etype=se;qmad.tree.ctype=sc;}}/* ]]> */</script>

I've building a site for a letting agents using Joomla and JomEstate Pro. I've got everything working great and am quite happy with it. However, there is an accordion 'property filter' menu on the right which works fine in every other browser, but not in IE. Would anyone be able to tell me why it is doing this or at least if there is any way i can find out what is wrong.

Sample site is at www.dspadtest.co.uk/tapton

Thanks.

Hi everyone, I'm needing some help with a code and looking for some guidance. I'm trying to create two drop down menus that work together.

the first dropdown box displays the country with two titles, Can and USA.
the other dropdown box displays the province/state.

when Can is selected, 10 provinces is listed in the second box.
when USA is selected, 50 states is listed in the second box

The second menu is disabled until they select from the first menu

any help is appreciated!

1) Script Title:
Arrow Side Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...menu-arrow.htm

3.) My Test Pg.
http://macmajor.homeip.net/shadow_test/shadow.html

3) Describe problem:

After customizing this menu to suit my needs, I find that it flickers (and jumps) between headers ONLY in FF (3.0.15) on the Mac. This is also the case with the Demo on Dynamic Drive. For example, if you hold your mouse on a header item and your mouse moves by a slight hair, it automatically jumps and highlights another menu item without moving your mouse (for some even weirder reason, the item it highlights is always 2up from the one your mouse is positioned over). Sometimes it just flickers between them, other times it ‘moves’ and completely highlights the other item in it’s selected state (as if you moved your mouse there).

If you know of a fix, I would certainly appreciate it.

Thanks in advance!
Tracy