PDA

View Full Version : AnyLink Drop Down Menu Problems



nicoldreamlover
06-09-2005, 06:55 AM
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
06-10-2005, 01:42 AM
Is there somebody helping on this?

jscheuer1
06-10-2005, 05:15 AM
Are those form boxes? If so, the best work around is to have them become invisible while the menu is dropping down.

che_rish
06-27-2005, 05:53 AM
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?? :confused:

jscheuer1
06-27-2005, 06:13 AM
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/showthread.php?p=11343

che_rish
06-27-2005, 07:32 AM
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/showthread.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
06-27-2005, 08:23 AM
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
06-29-2005, 05:49 AM
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
06-29-2005, 07:52 AM
If it is only one drop box named 'category' you are hiding, this method will work wellYou'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
06-29-2005, 11:23 PM
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!! :)

jscheuer1
06-30-2005, 08:47 AM
I checked out the link you suggested but, was unable to find the 'quick links' option or any menus that behaved that way. You need to be a little careful though, any drop down that doesn't go away can potentially become a problem for users of your page if it obscures something they want to see after it has dropped down. Couple this with the fact that with different fonts, font sizes, resolutions and window sizes the drop down may drop in a different place than you anticipate. With all that in mind, simply eliminating the functionality of the 'function hidemenu(e){' function by making its first line be like this:
function hidemenu(e){
return;Will make it so the drop downs only go away when another one drops down. This will also disable the custom code we added to make the select boxes reappear. So, if you are still using that code, things will get messy. This is as far as we can take this script in this direction because all drop downs use the same element for their container, replacing oneanother in it and moving it to their location as they are activated. Some of the other more advanced menus at DD and elsewhere may be able to have all sub menus remain visible once activated, some perhaps, even through their configuration.

che_rish
06-30-2005, 11:12 PM
Thanks so much for your reply. It was very informative. I'll keep in mind what you said about changing the dropdown's behavior. :)