CODEWITHSUNDEEP
jqueryhtmljquery-masonryoverlappingexpandable
Vinzenz
Vinzenz

Reputation: 31

jQuery Masonry overlapping divs on slideToggle event

currently i'm experiencing a annoying bug with the jQuery Masonry plugin. Here's the deal: i want to do a two-column FAQ page, where i float the divs with masonry. Inside this div is a h3-Tag, which will trigger a slideToggle event, and expands a hidden div (div.answer). The problem is, if i click the h3-tag and trigger the event, div.answer expands, but overlays the div below for a few seconds, until it reaches the final and correct position.

Here is the script for the slideToggle event: (as you can see, i already tried to recall the masonry function at several positions inside the script, but it didnt solve the problem)

$(document).ready(function() {
            $('.answer').hide();
            $('#container').masonry();
            $('.show').click(function() {
                imgelem = $(this);
                $(this).parent().next().stop().slideToggle("slow", function() {
                    $('#container').masonry('reload');
                    if ($(this).css("display") == "none") {

                        imgelem.attr("src", "images/expand.png");
                    }
                    else {
                        imgelem.attr("src", "images/collapse.png");
                    }
                });
                    $('#container').masonry();
            }); 
            $('#container').masonry('reload');  
        });

Here you can see the problem: http://jsfiddle.net/2huZd/3/

I hope someone can help me!

Edit: no one can solve this problem? :(

Upvotes: 3

Views: 1106

Answers (2)

Alvaro Flaño Larrondo
Alvaro Flaño Larrondo

Reputation: 5734

You can use the step option on the slideToggle() function and tell masonry to recalculate the positions on each step... but may be too much information to process if you have too much elements on your grid.

Upvotes: 1

Tudor Ravoiu
Tudor Ravoiu

Reputation: 2150

I had the same problem with another masonr-like plugin (shapeshift). The thing is that the callback event of the slideToggle is triggered only after the slide effect is completly ready. There isn't (i havn't found atleast) any "during" event that would reinitialize masonry on each slide step.

the only solution i have found was to replace the slide effect with the show/hide toggle. The annoying overlapping effect of the boxes won't be visible anymore and also the UX will be better in my opinion.

Upvotes: 0

Related Questions