Expandable buttons (on hover), additional width issue?

[grimski]

“
On a site I’m working on, I have various buttons which are displayed as icons, when the buttons are hovered over the text slides out. Then returns to its collapsed state when the user moves off the button. I thought I had this working but when I added more buttons which had longer text in them, I noticed a problem, there seemed to be additional width added the longer the text was.

As I don’t know what the length of the expanded button will be, I need to animate to width: auto, so I used Darcy Clarke’s fix for this.

Here is my example page (Tried to add it to CodePen but it didn’t seem to function correctly):

http://moymadethis.com/buttons/sample-buttons.html

Also at the minute, when you hover over a button all of them will open (quite handy for this demo/test actually), as I couldn’t get just the child of the item hovered over to trigger ;)

As you can see on the very bottom button it looks as if it works fine but when more text is added, so is additional width – and I can’t figure out where its coming from! Even removed all padding from the buttons and the issue still occurred.

Additional Notes: In the CSS/JS the reason I have an initial width of 1px set on the span is because ‘0’ worked in everthing (even IE7) aside from Safari, which needed a width on the inline-block element to work.

Heres the javascript I’m using:

$(".btn-alt").bind("hover", function(e){
        $(".btn-alt span").animateAuto("width", 150); 
    });

    $(".btn-alt").bind("mouseleave", function(e){
        // $(".btn-alt span").animateAuto("width", 0)
        $(".btn-alt span").animate({"width":1}, 50, null);
    });

    jQuery.fn.animateAuto = function(prop, speed, callback){
        var elem, height, width;
        return this.each(function(i, el){
            el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
            height = elem.css("height"),
            width = elem.css("width"),
            elem.remove();

            if(prop === "height")
                el.animate({"height":height}, speed, callback);
            else if(prop === "width")
                el.animate({"width":width}, speed, callback);  
            else if(prop === "both")
                el.animate({"width":width,"height":height}, speed, callback);
        });  
    }

Obviously I’m hoping this is something very simple and something I’m over looking but if someone can help on this matter I’d be so grateful! Let me know if you need anymore info.

Thanks,
Steve
“

[Author]

Posts