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

Thread: Anixpand Buttons - Updated!

  1. #1
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Cool Anixpand Buttons - Updated!

    1) CODE TITLE:

    Anixpand Buttons

    2) AUTHOR NAME/NOTES:

    Josh Lizarraga

    3) DESCRIPTION:

    Animated, expanding mini-menu-thingy buttons. Created from simple unordered lists and styled via CSS. No Javascript configuration for this script - just add the "anixList" class to the <ul> and the "anixTitle" class to the first <li>.

    This script is very flexible, cross-browser friendly, extremely easy to style, and degrades gracefully for users without Javascript.

    4) URL TO CODE:

    http://www.autofusion.com/developmen...emos/anixpand/
    Last edited by jlizarraga; 12-15-2008 at 07:12 AM. Reason: updated

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Very nice! I did notice though that in IE 7, Opera 9, and FF 3 that if I moved the mouse over the examples in the central area from top to bottom at even just a moderate speed, they all opened and remained open. Same thing when moving up.
    - John
    ________________________

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

  3. #3
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    The only way I found to get the closing functionality to work properly was by setting a timer that is activated by mouseout of the inner <li>'s (and cleared by mouseover of the same <li>'s). I would definitely prefer they close themselves in that situation.

    Is there a way that I can check to see if the mouse is currently within the the boundaries of the <ul> at any given time, say like when the opening animation completes? I had a lot of problems (especially in IE) with trying to listen for mouseout of the <ul>.

    I'm stoked that you like it. When I joined this place in April, I didn't know any Javascript at all. Everyone here (especially you) has been awesome at answering all my questions and helping me learn how to make stuff like this.

  4. #4
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    I agree, not bad at all! I particularly like the design- the first LI being used as the title for the rest of the drop down contents.

    Is there a way that I can check to see if the mouse is currently within the the boundaries of the <ul> at any given time, say like when the opening animation completes? I had a lot of problems (especially in IE) with trying to listen for mouseout of the <ul>.
    Personally I'm not familiar with YUI, though in jQuery, I can think of a couple of events (ie: mouseenter/ mouseleave) that may be helpful here. I reckon YUI probably supports something similiar.
    DD Admin

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Without checking over the code, I imagine that instead of having a separate instance for each mouseover/out event of a given Anixpand Button, they are all serviced by one global (or same level) set of variable(s) and function(s). This is what I imagine cancels the mouseout of one Anixpand Button while the next one is being mousedover.

    When I have more time I will look into it. The cure (if my diagnosis is correct) is to have one Object Oriented function that can service each Anixpand Button separately without bleed through when processing another Anixpand Button.

    If ddadmin's idea would institute such a regime (these various script libraries can often keep things separate for you to a certain extent), I'm all for it. But generally, even with the assistance of a script library, you still need to set things up as separate instances to prevent event, variable, and/or functional bleed through.
    - John
    ________________________

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

  6. #6
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    I *think* my code is object oriented (I'm as green as they come - JS is my first programming language so far).

    Once the DOM is constructed, the init function looks at each anixList, then sets up an individual mouseover listener for each one. The callback function takes in an object reference to that individual anixList, and goes from there. I think this creates a separate instance of the callback function for each anixList.

    ddadmin - big thanks for mouseenter/mouseleave info. I don't know if YUI supports these but if jQuery does I'm guessing so. I didn't fully understand the "bubbling" and such of events until I researched this from your post. I think I can fix up the script now.

  7. #7
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Turns out YUI doesn't have non-IE emulation for mouseenter/mouseleave. It works for IE, but nothing happens in FF/Safari/Opera. But I found the light with stopPropagation and removeListener.

    The menus no longer stay open after dragging the mouse across, and I added focus/blur support.

    Thanks for your help guys! Glad you liked the script. I'm going to add some more practical examples to the demo page.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Yes! Sign this one up dd!
    - John
    ________________________

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

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,382
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Very nice script.
    One problem, thought: if, in IE6, you move the mouse over the first LI (having class="anixTitle"), then the text flickers. I guess this is an opacity problem. Is there a quick solution for this?
    ===
    Arie Molendijk.

  10. #10
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    The problem with IE6 has to do with Windows XP's "ClearType" font-smoothing feature.
    When ClearType is enabled and when certain "filters" are applied (in this case the opacity filter, IE6's proprietary way of altering an element's opacity), the text becomes all jagged and crappy looking. So while this is unavoidable for IE6+ClearType users, the script checks for IE6 after each fading animation, and if found removes the "filter" so that the text will appear normal again.

    Short answer: IE6 will always muck up Javascript fading, but in this case only during the animation and it doesn't hurt (AFAIK) accessibility or usability one bit for IE6 users.

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
  •