0

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

M.F
  • 143
  • 4
  • 17
  • Tested a bit, and it seems to work fine. Are you sure that the handlerOut listener is called after the resizing ? If you could reproduce the bug on [jsfiddle](http://jsfiddle.net/) – Sherbrow Jun 26 '12 at 17:05
  • Thanks Sherbrow, I appreciate your help. I've transferred to jsfiddle and still seem to be experiencing the same problem. You might have to expand your 'results' window to see the masonry in action. It looks like it works and if you take your mouse directly out of the div and on to one next to it then the mouseenter of the new div triggers the repositioning ok. If you extend so you have 3 columns, top row is a 3 span div and a 6 span div to the right. Enter the 6 span div, hover will change its height, but leave to the right of the div and on to body not a new div, you should see problem, – M.F Jun 26 '12 at 23:02
  • Here is the jsfiddle Sherbrow, thanks for your help: http://jsfiddle.net/MFire/Wqd6w/45/ – M.F Jun 26 '12 at 23:04

1 Answers1

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.

Sherbrow
  • 17,279
  • 3
  • 64
  • 77
  • Sherbrow, this works brilliantly and I'm not experiencing any other problems at the moment by using the setTimeout. Nice job, thanks for helping. – M.F Jun 27 '12 at 11:46