Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Relayout problem with Isotope and Responsive CSS3 Slit Slider

I use isotope on my css3 driven website and I use a percentage width for my elements. At first, it was updating the layout when resizing the window, it did only on page load.

Then I found this reLayout function and included it like this:

$(window).resize(function () {
        $container
          .isotope('reLayout');
        return false;
        });

After I did this, the layout was updating perfectly when resizing the window BUT my responsive slider, on the same size, stopped updating his layout on window resize. It did before, perfectly but not anymore after placing this snippet to make the isotope work.

What I use is the "Responsive CSS3 Slit Slide":

http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

Now I am looking for a solution to make it both work. You can view my website here:

http://mark-i-mark.com

Right now, the relayout function is disabled. That makes the slider look good but the isotope not working as supposed. If I enable the reLayout function, the slider will not resize but the isotope will work well.

Any Ideas?

User Gravatar

mark

Posted Jun 13 2013 10:03 UTC

$10


  • Assigned To NBoychev
  • Solved
  • jquery
    isotope
  • 5250 Views

2 Replies


Hello mark,

The problem in your code is that you are blocking the resize event with return false.

So if you remove that line, other code that listen for the resize event will work fine.

The cleanest code that you can use is:

$(window).on('resize', function(){
    $('#container').isotope('reLayout')
});

Where $('#container') is isotope's container. I've tested this on your site, and it works perfectly.

Regards, Nikola Boychev

User Gravatar

NBoychev

Posted Jun 13 2013 20:37 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi Nikola,

this is amazing, it is working perfectly. I really appreciate your help. What a wonderful community we have....

Have a great day.

Mark

User Gravatar

mark

Posted Jun 14 2013 0:24 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions