Jquery Horizontal Accordion Webkit Bug

StackOverflow https://stackoverflow.com/questions/1054045

Question

I'm trying to build a horizontal accordion with Jquery. It seems to be working "ok" in Firefox. But in Webkit (Safari 3 + 4, and Chrome) the sub-level UL flashes after the Hide function. Any help would be greatly appreciated. To see a working demo: http://ableobject.com/horaccordion1.html

Here is what I'm working on:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <title>untitled</title>
    <style type="text/css">
    #container {
        display: table; 
        margin: 0 auto; 
        text-align: center; /* for IE */
    }
            ul{
                    list-style: none;
                    background-color: yellow;
                    margin: 0;
                    padding: 0;
                    float: left;
                    height: 20px; /* For testing */     
            }
            ul li {
                   background-color: aqua;
                    float: left;
            }
            ul li ul {
                   background-color: blue;
                    display: none;
            }
            ul li ul li {
                   background-color: green;
            }
            a, a:link, a:hover, a:visited, a:active {
                    color: black;
                    text-decoration: none;
                    float: left;
            }
    </style>

   <script type="text/javascript">
/* Care of Hunter Daley */
    var $current = null;
        $(document).ready(function(){
         $("ul li ul").hide();  // hide submenus by default on load

           $("ul li a").click(function(){
              var $sub = $(this).next(); 
              if ($sub.css("display") == "none")
              {
                 if ($current != null)
                    $current.animate({ width: 'hide' }); // if you want to only show one sub at a time
                 $sub.animate({ width: 'show' }); 
                 $current = $sub;
              }
              else
              {
                 $sub.animate({ width: 'hide' });
                 $current = null;
              }
           });
        });
    </script>
</head>

<body>
    <div id="container">
    <ul>
            <li>
                    <a href="#">Top-level 1</a>
            </li>
            <li>
                    <a href="#">Top-level 2</a>

                    <ul>
                            <li><a href="#">Bottom Level A1</a></li>
                            <li><a href="#">Bottom Level A2</a></li>
                            <li><a href="#">Bottom Level A3</a></li>
                            <li><a href="#">Bottom Level A4</a></li>
                    </ul>
            </li>

            <li>
                    <a href="#">Top-level 3</a>
                    <ul>
                            <li><a href="#">Bottom Level B1</a></li>
                            <li><a href="#">Bottom Level B2</a></li>
                    </ul>
            </li>

            <li>
                    <a href="#">Top-level 4</a>
            </li>
    </ul>
</div>
</body>
Was it helpful?

Solution

This sounds like it is related to an issue I had a little while ago with webkit. There is a webkit bug that sometimes causes an element's parent to revert to its original size after an animation that reduces the elements' width. After the animation, the element's parent jumps back to its original size in order to accommodate its content.

Edit: Removed comments about jQueryUI. Not sure why I thought you were using it.

The bug was discussed here, which details a workaround.

I submitted a bug report to jQuery as well.

Basically, you would need to simultaneously reduce the width of your $sub element's parent by the same amount as $sub is being reduced. So if the width of $sub is 100px, there would be a separate animate() to reduce the parent by 100px.

I haven't tested any of this with your example, but I think it is probably the key.

Edit 2: A new version using divs

CSS:

.title {
       list-style: none;
       margin: 0;
       padding: 0;
       float: left;
       height: 32px; /* For testing */
       font-family: helvetica;
       font-size: 18px;
       clip: auto; overflow: hidden;
}
.menu {
       height: 32px; /* For testing */
       clip: auto; overflow: hidden;
       float: left;
}
a, a:link, a:hover, a:visited, a:active {
       color: black;
       text-decoration: none;
       padding: 12px;
       font-weight: 700;
       float: left;
       color: #222;
}

 .menu a, .menu a:link, .menu a:hover, .menu a:visited, .menu a:active {
   color: black;
   text-decoration: none;
   padding: 12px;
   font-weight: normal;
   float: left;

}

javascript:

    // Prevents us from having to check for null.
    var $current = $('#someFictionalElement');
    var $previous = null;
    $(document).ready(function(){
    $(".menu").css({width: 0});  // hide submenus by default on load

    $(".title").click(
        function() {
            $previous = $current;
            $current = $(this);
            var $currentMenu = $current.next();

            $previous.next().animate({ width: 0 }, {duration: 1000, queue: false} );

    // Make sure that if there's no menu text (like Top Level 1 and 4) that it does not animate.
    // This is because of the pixels added for Firefox (see comment below)
            if( $currentMenu.width() == 0 && $currentMenu.text() != ''  ) {

    // Expand the menu but keep it hidden so we can get its width
                $currentMenu.css({visibility: 'hidden', width: ''});

    // Store the width, and add a few pixels for Firefox
                var currentWidth = $currentMenu.width() + 3;

    // Make menu visible and set with to 0 in preparation for the animation
                $currentMenu.css({visibility: 'visible', width: 0})
                            .animate({ width: currentWidth }, 1000);
            }
    });

    $(".title a").hover(
        function(){$(this).animate ({ opacity: 0.7 }, 200);},
        function(){$(this).animate ({ opacity: 1 }, 600);}
    );
});

HTML:

<body>
    <div id="container">
        <div class='title' id='level1'>
            <a href="#">Top-level 1</a>
        </div>
        <div class='menu'></div>
        <div class='title' id='level2'>
            <a href="#">Top-level 2</a>
        </div>
        <div class='menu'>                         
            <a href="#">Bottom Level A1</a>
            <a href="#">Bottom Level A2</a>
            <a href="#">Bottom Level A3</a>
            <a href="#">Bottom Level A4</a>
        </div>
        <div class='title' id='level3'>
            <a href="#">Top-level 3</a>
        </div>
        <div class='menu'>
            <a href="#">Bottom Level B1</a>
            <a href="#">Bottom Level B2</a>
        </div>
        <div class='title' id='level4'>
            <a href="#">Top-level 4</a>
        </div>      
        <div class='menu'></div>
    </div>
</body>

OTHER TIPS

I'm posting this as a separate answer just in case you still find the previous one useful.

Please note the following:

  • I have not tested this in ie.
  • This goes back to a 'nested' version, so I changed the class and variable names a little.
  • An empty menu is no longer needed when there is no menu to display.
  • The width of each menu's 'container' is now being reduced the same amount as the menu. This is what eliminates webkit's temporary flash (which was the original strategy).
  • You'll notice the the timing of the animation of the menu is slightly different than that of the menu's container. Basically, you want the container to be a little ahead when expanding, and the menu to be a little ahead when reducing. If the timing is set to be equal, you can get some flashing of the menu.
  • As explained in the comments, at the beginning, each menu 'memorizes' its width when fully expanded by setting a previously non-existent attribute called 'fullWidth'. It then retrieves the value of this attribute when needed. You could just as easily use global variables, or jQuery's data() function to store the info. The point is that things are simplified if each menu is aware of how wide it should be when it is expanded.

So here it is. Hope it helps!

CSS

#container {
    margin: 0 auto 0 auto; 
    text-align: center;
    display: table;
}

.menuContainer {
       margin: 0;
       padding: 0;
       float: left;
       height: 32px; /* For testing */
       font-family: helvetica;
       font-size: 18px;
       clip: auto; overflow: hidden;
}
.menu {
       height: 32px; /* For testing */
       clip: auto; overflow: hidden;
       float: left;
}
a, a:link, a:hover, a:visited, a:active {
       color: black;
       text-decoration: none;
       padding: 12px;
       font-weight: 700;
       float: left;
       color: #222;
}

.menu a, .menu a:link, .menu a:hover, .menu a:visited, .menu a:active {
   color: black;
   text-decoration: none;
   padding: 12px;
   font-weight: normal;
   float: left;
}

javascript

var $currentMenuContainer = $('#someFictionalElement');
var $previousMenuContainer = null;

$(document).ready(function() {

// Iterate through each .menu element, setting the full width of each menu to a 'custom'
//        attribute called 'fullWidth'. Since the full width should never change, this
//        makes it easy to recall it quickly. You could use global variables instead.
// After setting 'fullWidth', it then collapses each menu and title.
$(".menu").each(function() {
    var $theMenu = $(this);
    var $theMenuContainer = $theMenu.parent();
    $theMenu.attr({fullWidth: ($theMenu.width() + 3)});   // Add a few pixels for firefox
    var menuContainerWidth = $theMenuContainer.width() - $theMenu.attr('fullWidth') + 6;  // Add DOUBLE the pixels here
    $theMenu.css({width: 0});
    $theMenuContainer.css({width: menuContainerWidth});
});

    $(".menuContainer a").click(
        function() {
// Set the current and previous elements properly
            $previousMenuContainer = $currentMenuContainer;
            $currentMenuContainer = $(this).parent();
            var $previousMenu = $previousMenuContainer.find('.menu');
            var $currentMenu = $currentMenuContainer.find('.menu');

// Collapse the previous menu
            $previousMenu.animate({ width: 0 }, {duration: 480, queue: false} );

// Subtract the width of the previous menuContainer's menu from the menuContainer (only if its menu is displayed)
            if($previousMenu.width() > 0) $previousMenuContainer.animate({width: ('-=' + $previousMenu.attr('fullWidth'))}, 500);

// Expand the current menu and its menuContainer if it's not showing
            if($currentMenu.width() == 0) {
                // Increase the menuContainer width by the full width of its menu
                $currentMenuContainer.animate({width: ('+=' + $currentMenu.attr('fullWidth'))}, 480);
                // Increase the menuContainer to its full width
                $currentMenu.animate({ width: $currentMenu.attr('fullWidth') }, 500);
            }
    });

    $(".menuContainer a").hover(
        function(){$(this).animate ({ opacity: 0.7 }, 200);},
        function(){$(this).animate ({ opacity: 1 }, 600);}
    );
});

HTML

<div id="container">
    <div class='menuContainer'>
        <a href="#">Top-level 1</a>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 2</a>
        <div class='menu'>                         
            <a href="#">Bottom Level A1</a>
            <a href="#">Bottom Level A2</a>
            <a href="#">Bottom Level A3</a>
            <a href="#">Bottom Level A4</a>
        </div>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 3</a>
        <div class='menu'>
            <a href="#">Bottom Level B1</a>
            <a href="#">Bottom Level B2</a>
        </div>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 4</a>
    </div>
</div>

Edit: Add the following DTD to the top of your page-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top