Chrome menu over combo box

[moody]

I downloaded chrome menu script and wrote some HTM pages using it.
Typically when the drop down menu drops, it appears over any text that is in the page below it. But, on a certain form I have a combo box - when the drop down menu drops, the combo box apears over the menu (so that the menu items are hidden by the combo box).
Any explenation for this behavior? How do you rectify this?

[jscheuer1]

It is an IE bug, or feature, depending upon if it works for you or against what you are trying to do. This will not happen in other browsers. The best solution is to move the form element and/or the menu so that the menu can never drop down over it.

Another approach is to add to the code so that the form element becomes temporarily invisible when the menu is activated. This looks sloppy though, no matter how it is done and can be complicated, depending upon the script. You can try putting this script in the head of your page:

<script type="text/javascript">
function hideBox(id, state){
if (!document.body.filters)
return;
var box=document.getElementById? document.getElementById(id) : document.all[id]
if (state=='hide')
box.style.visibility='hidden'
else if (document.getElementById)
setTimeout("document.getElementById('"+id+"').style.visibility='visible'", disappeardelay)
else
setTimeout("document.all['"+id+"'].style.visibility='visible'", disappeardelay)
}
</script>

and adding to the markup, like so for the box(es) that need it on the menus that might cover them:

<div id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1');hideBox('box1', 'hide');"
 onmouseout="hideBox('box1', 'show');">Resources</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')">News</a></li>
</ul>
</div>

Where 'box1' is the id of the select or other form element that you want to hide.

Remember, at different resolutions and window sizes, the menu and form element(s) may line up differently.

[Laban]

Hmm intresting.
I can make my combo hide but that dont show when I'm not on the menu

Can I control more then one combo?

[jscheuer1]

<a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1');hideBox('box1', 'hide');hideBox('box2', 'hide');"
 onmouseout="hideBox('box1', 'show');hideBox('box2', 'show');">Resources</a>

[Laban]

Thanks I have guess that already but I have problem

is something with the onmouseOut that dont work.

I did create a basic Javascript and have a alert inside that
Then I try to make my onmouseOut to call that but that dont work.

Only time that work is when I dont have any onmouseOver and only onmouseOut then it work

exampel this basic script

this dont work

<li><a href="#" class="meny" onmouseOver="cssdropdown.dropit(this,event,'dropmenu1');" onmouseOut="hello();">Hello</a></li>

This work

<li><a href="#" class="meny" onmouseOut="hello();">Hello</a></li>

[jscheuer1]

That's because, as I began to suspect and soon discovered to be true when you mentioned this that, the chrome.js script overwrites the onmouseout event. Here is where it does it (in chrome.js):

obj.onmouseout=function(){cssdropdown.delayhidemenu()}

If you wish to add to the onmouseout for the menu's drop downs, the above or the delayhide() function is where to do it. I'd vote for the above line, like so:

obj.onmouseout=function(){cssdropdown.delayhidemenu();hideBox('box1', 'show');hideBox('box2', 'show');}

Perhaps even:

obj.onmouseout=function(){cssdropdown.delayhidemenu();setTimeout("hideBox('box1', 'show');hideBox('box2', 'show');",cssdropdown.disappeardelay);}

This latter method would look better if it works as expected (doesn't cause an error).

You could also try going to the delayhidemenu() function in chrome.js instead (additions red):

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden';hideBox('box1', 'show');hideBox('box2', 'show');",this.disappeardelay)
},

[Laban]

I did try but that is something JS error.

I attach a exampel

[Laban]

Now I have try sometime now but same error

'disappeardelay' is undefined

[jscheuer1]

Try just substituting the the actual number of milliseconds delay.

[Laban]

I change the

disappeardelay: 250

to

disappeardelay: 450

same error

then I change to

disappeardelay: 4050

same error

and last I change to

disappeardelay: 50

same error


I maybe do something wrong?