Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: AnyLink Drop Down Menu Problems

  1. #1
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Drop Down Menu Problems

    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!

  2. #2
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Is there somebody helping on this?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote 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??

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote 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:

    HTML Code:
    //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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If it is only one drop box named 'category' you are hiding, this method will work well - find this line in the script:
    Code:
    function dropdownmenu(obj, e, menucontents, menuwidth){
    Put this line right below it:
    Code:
    if (document.all&&!window.opera){document.all('category').style.visibility='hidden'};
    Then find this line:
    Code:
    function hidemenu(e){
    Put this line right below it:
    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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).

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote 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:
    Code:
    if (document.all&&!window.opera){document.all('category').style.visibility='hidden'};
    to:
    Code:
    if (document.all&&!window.opera){document.all('boxOne').style.visibility='hidden';document.all('boxTwo').style.visibility='hidden'};
    and change the other line we added:
    Code:
    if (document.all&&!window.opera){document.all('category').style.visibility='visible'};
    to:
    Code:
    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:
    HTML Code:
    <select name="category" size="1" onChange="document.change_cat.submit();">
    to:
    HTML Code:
    <select id="boxOne" name="category" size="1" onChange="document.change_cat.submit();">
    Then change this one:
    HTML Code:
    <tr><td><b>Sub Category:</b> </td><td><select name="subcategory" size="1" onChange="document.change_scat.submit();">
    to:
    HTML Code:
    <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:
    HTML Code:
    <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.
    Last edited by jscheuer1; 06-29-2005 at 08:31 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Nov 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!!
    Last edited by che_rish; 06-29-2005 at 11:26 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •