AnyLink Drop Down Menu Problems

[nicoldreamlover]

Hi,

Currently I am using this script to display a drop down menu onClick upon user onClick a button. The problem now is in IE, the menu will hide behind combo drop down. I am attaching an image for easy visualization for you all.

One more issue, can we kind of "force" the menu to drop down in one way, in this case, i want it to drop down on the bottom way instead of showing on top of the button when the browser's space is limited on the bottom part.

Thanks for your help!

[nicoldreamlover]

Is there somebody helping on this?

[jscheuer1]

Are those form boxes? If so, the best work around is to have them become invisible while the menu is dropping down.

[che_rish]

Originally Posted by jscheuer1

Are those form boxes? If so, the best work around is to have them become invisible while the menu is dropping down.

Hello! I'm having the same problem. I wonder how do I do what you suggested? Should I use onmouse event w/ the form boxes??

[jscheuer1]

Have a look at this post and the thread it is in. A slightly different script but, the same solution. Let me know if you have more questions.

http://www.dynamicdrive.com/forums/s...ad.php?p=11343

[che_rish]

Originally Posted by jscheuer1

Have a look at this post and the thread it is in. A slightly different script but, the same solution. Let me know if you have more questions.

http://www.dynamicdrive.com/forums/s...ad.php?p=11343

Hello! Thanks so much for your quick reply. I'm not really that good w/ javascript and I'm not sure where to apply the script in that link you gave me. I did try to put it in the following line:

//Contents for Management:
var menu5=new Array()
menu5[0]='<ul><li><a href="view_users.php" class="menuskin">.: View Users</a></li></ul>'
menu5[1]='<ul><li><a href="add_user.php" class="menuskin">.: Add User</a></li></ul>'
menu5[2]='<ul><li><a href="work_log.php" class="menuskin">.: Staff Work Report</a></li></ul>'
menu5[3]='<ul><li><a href="upload_file.php" class="menuskin">.: Upload File</a></li></ul>'
menu5[4]='<ul><li><a href="view_uploads.php" class="menuskin">.: View Uploaded Files</a></li></ul>'


var menuwidth='165px' //default menu width
var menubgcolor='#ccc'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
// Original script:
//document.write('<div id="menuskin" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

// Applying your suggestion: 
document.write('<div id="menuskin" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="if (document.all&&!window.opera){document.all('category').style.visibility='hidden'};clearhidemenu()" onMouseout="dynamichide(event);if (document.all&&!window.opera){document.all('category').style.visibility='visible'};"></div>')

(Please take note on the "Applying your suggestion" comment in the last few lines).

I'm pretty sure I'm doing something wrong because the dropdown is still showing behind the <select> tag.

[jscheuer1]

If it is only one drop box named 'category' you are hiding, this method will work well - find this line in the script:

function dropdownmenu(obj, e, menucontents, menuwidth){

Put this line right below it:

if (document.all&&!window.opera){document.all('category').style.visibility='hidden'};

Then find this line:

function hidemenu(e){

Put this line right below it:

if (document.all&&!window.opera){document.all('category').style.visibility='visible'};

Leave everything else the way it was before you made the changes reported in your above post.

[che_rish]

Hello jscheuer1!

First of all thanks for your time in helping me with this problem. Really appreciate it.

I tried your suggestion. However, the "anylink dropdown" menu would not show at all. Here's the web page so you can see:

1) Before applying your suggestion: http://admin.saipanmall-net.com/original.php

2) After applying your suggestion: http://admin.saipanmall-net.com/problem.php

Note: The AnyLink DropDown Menu works fine with Mozilla Firefox 5.0 without making the changes you suggested. But its not working w/ IE 6.0 (the one that's installed in my computer).

[jscheuer1]

Originally Posted by me

If it is only one drop box named 'category' you are hiding, this method will work well

You've got 3 input items named 'category' (I know the others are hidden and not actual select boxes but, it still messes things up), so we will have to do something else. Also, you have no beginning <html> tag on your page. It belongs right after the doctype. OK, change:

if (document.all&&!window.opera){document.all('category').style.visibility='hidden'};

to:

if (document.all&&!window.opera){document.all('boxOne').style.visibility='hidden';document.all('boxTwo').style.visibility='hidden'};

and change the other line we added:

if (document.all&&!window.opera){document.all('category').style.visibility='visible'};

to:

if (document.all&&!window.opera){document.all('boxOne').style.visibility='visible';document.all('boxTwo').style.visibility='visible'};

Now, in the HTML part of the document, change this:

<select name="category" size="1" onChange="document.change_cat.submit();">

to:

<select id="boxOne" name="category" size="1" onChange="document.change_cat.submit();">

Then change this one:

<tr><td><b>Sub Category:</b> </td><td><select name="subcategory" size="1" onChange="document.change_scat.submit();">

to:

<tr><td><b>Sub Category:</b> </td><td><select id="boxTwo" name="subcategory" size="1" onChange="document.change_scat.submit();">

I chose those two because they seem to be the only two that conflict with the drop downs. I would have further limited it to only the first drop down but, at narrower screen or window widths, other drop downs come into play. I'm not real happy with the look though but, it does eliminate the original problem. A better solution for this layout would be to arrange things so that the form is farther down the page so that the problem never comes up. Perhaps a graphic, representative of what the form is about, could fill the space or just reformatting the intro text to require three double spaced lines:

<small>Please fill in the following form.<br>&nbsp;<br>Only the Description field is optional.<br>&nbsp;<br>All others are required to successfully add your item to the database.</small>

The word 'successfully' was misspelled, I changed the language slightly as well.

[che_rish]

It worked!! Thanks so much! Your suggestion on making the form farther down the page makes sense too. I'm leaning towards that, but I want to thank you all the same for showing me how to fix this (I really like learning new things).

Thanks for finding those small errors too (<html> and the misspelled word).

One last thing, I saw in some forums like codeguru (http://www.codeguru.com/forum/) that their menu has a dropdown too, but it doesn't disappear when you move the mouse pointer away from it. How do I do this? (Try clicking on their "QuickLinks" menu).

Thanks again!!