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

Thread: Chrome menu over combo box

  1. #1
    Join Date
    Feb 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Chrome menu over combo box

    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?

  2. #2
    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

    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:

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

    Code:
    <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.
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    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

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

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

  5. #5
    Join Date
    Mar 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

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

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

  6. #6
    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

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

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

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

    Code:
    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):

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

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

  7. #7
    Join Date
    Mar 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I did try but that is something JS error.

    I attach a exampel

  8. #8
    Join Date
    Mar 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Now I have try sometime now but same error

    Code:
    'disappeardelay' is undefined

  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

    Try just substituting the the actual number of milliseconds delay.
    - John
    ________________________

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

  10. #10
    Join Date
    Mar 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I change the
    Code:
    disappeardelay: 250
    to

    Code:
    disappeardelay: 450
    same error

    then I change to
    Code:
    disappeardelay: 4050
    same error

    and last I change to
    Code:
    disappeardelay: 50
    same error


    I maybe do something wrong?

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
  •