Results 1 to 5 of 5

Thread: Mouseover with Smart Folding Menu Tree Script

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

    Default Mouseover with Smart Folding Menu Tree Script

    In the original script the user has to click on the foldheader to get the submenu(s) to display however I need it to be a mouseover event. I need the user to simply mouseover the image and have the submenu(s) displayed. I've changed the document.onclick=checkcontained to document.onmouseover=checkcontained and it went haywire. So, I changed that line of code from
    if (ie4||ns6)
    document.onclick=checkcontained

    with:

    function fmenu(){
    if (ie4||ns6){
    checkcontained();}
    }
    and then encased each menu as such:
    <div id="foldmenu" onmouseover="fmenu();">

    menu here

    </div>

    However that still doesn't work. Any suggestions??? I'm clueless right now.

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

    Default

    My bad, this is in reference to this script
    DD Smart Folding Menu Tree Script
    http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

  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

    Careful what you ask for, you just might get it. There are several problems that arise once these smartfolding unordered lists get triggered onmouseOver. For one a list extends all the way across a page unless contained within a fixed width element. I had the best luck with a table but still the list extends to the largest possible area it can logically encompass, making the mouse over target area much larger than one might like. That somewhat solved, in IE, the most widely used browser, lists extend for the entire height of their contained elements, once again expanding the target area for mouse over beyond what one would prefer. I came up with a way of restricting the target area but, it excludes the folder image, a decent compromise under the circumstances and it did away with the need for a container like the table I mentioned above. Remember though, that before all this, a click was required to expand/contract a list. Now, a mouse over does this. As a result, things jump around sometimes when you least expect it but, as I said at the beginning, that's what you asked for. Here's how:

    Change this line in the script:
    Code:
    cur=ns6? e.target : event.srcElement
    to:
    Code:
    cur=ns6? e : event.srcElement
    and get rid of these two lines:
    Code:
    if (ie4||ns6)
    document.onclick=checkcontained
    Now, the html markup has to change, where it once looked like this:
    HTML Code:
    <li id="foldheader">News</li>
    make it look like this:
    HTML Code:
    <li id="foldheader"><span onmouseOver="checkcontained(this.parentNode)">News</span></li>
    Make this change only for those li's that have the foldheader id. That's all there is to it. I have a feeling you will either want further modifications though, or decide that onclick wasn't so bad after all.
    - John
    ________________________

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

  4. #4
    Join Date
    May 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Actually this does what I need it to do. Thanks a million!!!

  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

    You're welcome,

    One other thing I left out but, it is only to allow it to degrade more gracefully in browsers that do not support its features. These lines should be added:
    Code:
    if (!(ie4||ns6))
    return;
    right after this line:
    Code:
    function checkcontained(e){
    - John
    ________________________

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

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
  •