View Full Version : Anixpand Buttons - Updated!

12-13-2008, 12:00 PM

Anixpand Buttons


Josh Lizarraga


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



12-13-2008, 04:31 PM
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.

12-13-2008, 06:30 PM
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.

12-14-2008, 12:49 AM
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.

12-14-2008, 01:21 AM
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.

12-14-2008, 04:12 AM
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. :)

12-15-2008, 08:11 AM
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. :)

12-15-2008, 08:14 AM
Yes! Sign this one up dd!

12-15-2008, 06:18 PM
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.

12-15-2008, 06:45 PM
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. :)

12-15-2008, 11:07 PM
Some nice improvements in v0.2! One issue I see occurs in IE8beta2- the buttons seem to stop animating (stays static) after their first run. It could just be beta software jitters (I've run into some JavaScript problems that can't seem to be explained any other way), but it might also signal a problem with the event handling somewhere in your script.

12-16-2008, 05:46 PM
Poopers. Guess I'll have to add that IE7 meta tag thingy.

Given that it *seems* to work flawlessly (since the update) in FF2/3, IE6/7, Safari 3, and Opera 9, I'm gonna guess that it's in IE8 issue. I'll see if I can find something though.