Question

I am using both JQuery Masonry and Twitter bootstrap together but experiencing a few problems. I do not think that the problem is caused by any conflict between the two.

I am using Bootstrap Thumbnails, to provide image/text divs and then using Masonry to arrange them all more nicely.

I’m keen that in the future new content inserted into each of these thumbnail divs is not constrained too much, as some of it will be dynamically loaded and I want the divs to be able to expand as they need to. I would like to have the flexibility to toggle content visibility or have flyout content on hovers etc which as it happens triggers Masonry to reset its layout positions.

To test how Masonry will respond to this I have changed the CSS of the .thumbnail class so that when hovering the thumbnail div (each has class ‘.thumbnail’) it gains bottom padding (which is forcing it’s height to expand).

When Masonry loads it works great and positions everything based on it’s initial size.

When you hover the thumbnails the css hover kicks in and makes containers expand in height but forces them to overlap the thumbnail below.

To overcome this I have linked to an external .js file and have added some custom jquery, it’s nice and simple and just executes a function on hover over each thumbnail which tells Masonry to refresh/reload. This works well while hovering over the thumbnails, the css hover kicks in, div expands and then Masonry repositions all the divs for best fit to accomodate the new div size.

MY PROBLEM: when you then move the mouse out of the thumbnail Masonry does not recognise the change in the ‘css hover’ back to its original state and so the thumbnail’s height reduces and leaves a gap between itself and the thumbnail below. It’s like Masonry is not recognising the new height values when the Div reduces in height but does recognise when the Div height expands?

I am running the same function in my custom external .js for both states of the jQuery hover and was hoping that Masonry would respond okay, but has not. Any ideas?

I define all the initial Masonry with:

<script type="text/javascript">
$(window).load(function(){
    $('.container-fluid').masonry({
    itemSelector: '.thumbnail',
    isAnimated: true,
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
        }   
    });    
})              
</script>  

and my custom .js file contains:

$(document).ready(function(){
$('.thumbnail').hover( 
    function(){run()},
    function(){run()}                     
);
});

function run() {$('.container-fluid').masonry('reload');}

Any help would be appreciated.

Thanks

Answer 1

As I suspected, it seems to be a time-related, or event ordering issue.

This is not guaranteed, but I think that the handlerOut trigger is called before the browser resizes the not hover anymore .thumbnail. But this is just wild guessing.

Anyway, this is what you should use :

$('.thumbnail').hover( 
    function(){run()},
    function(){setTimeout(function(){run()}, 200)}                     
);

The timeout allows things to happen in between, the value is a bit random, as long as it doesn’t disturb user-experience.

Seems to works in this jsfiddle.