Page 4 of 6 FirstFirst ... 23456 LastLast
Results 31 to 40 of 56

Thread: [DHTML] Multi-level Effect Menu

  1. #31
    Join Date
    Aug 2004
    Posts
    9,893
    Thanks
    3
    Thanked 966 Times in 954 Posts
    Blog Entries
    15

    Default

    Great, that was fast. Ok, script on DD updated to the latest build at this point: http://www.dynamicdrive.com/dynamici...menu/index.htm

  2. #32
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    v1.1 released!
    Available at: http://www.webtech101.com/index.php?page=effect-menu
    version with included documentation: http://www.webtech101.com/uploads/mleffect/mleffect.zip

    Changelog

    Feature Changes
    • Pure CSS backup menu. In most browers(Firefox,Opera,IE7) a dropdown menu will be produced without javascript
    • Sub menus are hidden by default and must be shown with "accessible" switch for IE6 without javascript
    • removed one of the effects(blink) for various reasons
    • Two new switches trail and left(details on linked page)
    • delay switch wait time has been increased


    Code Changes
    • more CSS, less javascript
    • onload event handler modified to play nice with other scripts
    • IE conditional comment changed to not effect IE7 which does not need it
    • CSS almost completely re-written to work better and look nicer
    • Various bug were fixed
    • Browser detection removed(in favor of a try..catch)

  3. #33
    Join Date
    Aug 2004
    Posts
    9,893
    Thanks
    3
    Thanked 966 Times in 954 Posts
    Blog Entries
    15

    Default

    Looking good! I'll get to updating this script in the next few days.

  4. #34
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,990
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    This is becoming and looking to become an even more useful script. I applaud the emphasis on style over script to the point of the navigation being available to non-javascript enabled browsers. That is a really great move! Moving away from browsers detection is also a very good idea. However, try {} catch(){} is not usually required and will create problems in older browsers. The real use for try/catch, in my opinion, is for debugging a particularly difficult error. A better substitute for browser detection is object detection, sometimes also called feature detection. The classic example being:

    Code:
    if (document.getElementById)
    var el=document.getElementById('id');
    else if (document.all)
    var el=document.all['id'];
    Generally, anything that you can test for with try/catch can be tested for in this sort of way. Sometimes one needs to get a bit creative, like checking for the 'typeof' something before processing it but, this is also object detection and doesn't require any particular browser, just a browser that recognises what objects you are using and what objects you want to use in conjunction with them.
    - John
    ________________________

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

  5. #35
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    Yes, I would rather use object detection, but I can't. I need the try catch to counter a Firefox bug(I did eventuallly find it in bugzilla, and has been open since Firefox 1). If a script even tries to use object detection on any property of relatedTarget(property of an event) when relatedTarget is a textarea Firefox throws a security error. That is why it was so hard to fix. How do you detect the problem before it occurs? My solution is to not try and wait for firefox to throw the error.

  6. #36
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,990
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I'm not clear on this bug, could you supply a link to it at bugzilla? However, in FF, the type (comment, text, HTML element, whatever) of a node can be detected before anything else is done to or with it, so can its value - which must be null for it to be an element.

    I realize that identifying it as the relatedTarget() may be too late for this sort of detection but, with a bit of thought (combined with the predictable flow of the code involved), a way could probably be found to identify and test it before it is accessed via the relatedTarget() object.

    Once that is determined, it may become unnecessary to even use the relatedTarget() object.
    - John
    ________________________

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

  7. #37
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    hmm...can seem to find where I had it bookmarked.With multiple computers and multiple browsers on each I may never find it. However, I have prepared a quick demo here. This shows exactly what the bug does. As far as I can tell it occurs in every version of firefox I have (1,1.5,2 RC2). Simply move your mouse from the textarea to the div and back, and watch the errors pile up.

  8. #38
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,990
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Hmm, that does on its face seem a good candidate for try/catch. However, it doesn't work at all in IE, even when you use window.event.relatedTarget. IE has mouseenter and mouseleave events (that don’t react to event bubbling), specific to that browser (from 5.5 on) that may or may not be of any use in this case. I am assuming that you've worked out a way to carry out the functionality for this in FF. If that is the case, that method probably could also be used by most other browsers, eliminating the use of both relatedTarget and try/catch.

    I'm thinking that this could be real useful in preventing a sub-menu from disappearing if its trigger is moused out but the sub-menu itself is being moused over and visa versa. A variable timeout delayed disappearance function that gets cleared by the appropriate subsequent mouse over(s) can accomplish this same thing. Were you using it for anything else?
    - John
    ________________________

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

  9. #39
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    Quote Originally Posted by jscheuer1
    However, it doesn't work at all in IE, even when you use window.event.relatedTarget. IE has mouseenter and mouseleave events (that donít react to event bubbling), specific to that browser (from 5.5 on) that may or may not be of any use in this case.
    IE supports window.event.toElement(mouseout) and window.event.fromElement(mouseover) that the same thing as relatedTarget. That is what I am using in the full script.
    I am assuming that you've worked out a way to carry out the functionality for this in FF.
    Yes and no. When I was using browser detection I had another version that still used relatedTarget, but did not try and access any properties. This avoided the bug in Firefox.
    If that is the case, that method probably could also be used by most other browsers, eliminating the use of both relatedTarget and try/catch.
    That was what I originally did until I found out that it didn't work in Opera.(or IE5, but I don't worry about that browser)
    I'm thinking that this could be real useful in preventing a sub-menu from disappearing if its trigger is moused out but the sub-menu itself is being moused over and visa versa. A variable timeout delayed disappearance function that gets cleared by the appropriate subsequent mouse over(s) can accomplish this same thing. Were you using it for anything else?
    That is exactly what I am using it for.The timeout is something I hadn't thought of will look into.

  10. #40
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,990
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    This setTimeout/clearTimeout scheme is used with many of DD's menus. An example is in AnyLink Drop Down Menu:

    http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    The code is a little confused (I didn't write it) because the (e) parameter is included in some of the functions but, not used by all of the functions it is included for and things are a bit more complex than necessary.

    The basic idea is:

    onmouseout="disappear_var=setTimeout('disappear_function()', 20);"

    and:

    onmouseover="clearTimeout(disappear_var);"
    - 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
  •