PDA

View Full Version : Chrome menu over combo box



moody
02-05-2006, 01:31 PM
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
02-05-2006, 10:40 PM
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
03-25-2006, 11:22 PM
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
03-26-2006, 12:23 AM
<a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1');hideBox('box1', 'hide');hideBox('box2', 'hide');"
onmouseout="hideBox('box1', 'show');hideBox('box2', 'show');">Resources</a>

Laban
03-26-2006, 12:35 AM
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
03-26-2006, 03:39 AM
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
03-26-2006, 10:24 AM
I did try but that is something JS error.

I attach a exampel

Laban
03-26-2006, 04:03 PM
Now I have try sometime now but same error


'disappeardelay' is undefined

jscheuer1
03-26-2006, 05:19 PM
Try just substituting the the actual number of milliseconds delay.

Laban
03-26-2006, 05:33 PM
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?

jscheuer1
03-26-2006, 05:46 PM
I meant, in the modified code. In the modified code, just substitute the actual number.

jscheuer1
03-26-2006, 05:54 PM
<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'", 250)
else
setTimeout("document.all['"+id+"'].style.visibility='visible'", 250)
}
</script>

Laban
03-26-2006, 06:00 PM
hmm you dont have any exampel to give me.

I'm not so good in english so I can understand everything what you mean. :o

jscheuer1
03-26-2006, 06:10 PM
We may have cross posted but, my post now just above your last one (if you will look again) is from your example I downloaded and works fine here.

jscheuer1
03-26-2006, 06:25 PM
In fact, using your demo, with its modified chrome.js, this hideBox() function is all you need:


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

Laban
03-26-2006, 06:43 PM
Thank you now it works :)