Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2009
    Thanked 0 Times in 0 Posts

    Expandable buttons (on hover) - adds additional width issue

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


    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"),
                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.


  2. #2
    New Coder
    Join Date
    Jan 2009
    Thanked 0 Times in 0 Posts
    I've tried removing the custom font, letter spacing & reduced the font size in the CSS but still the issue remains. Even with 0 padding on everything, I'm not sure why its calculating the width wrong?

    It must be in the script? If I remove "inline-block" from the span using firebug, the text displays as it should expanded. But then again, hovering over the buttons which triggers the script then displays the extra spacing :s


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts