CODEWITHSUNDEEP
jquerylayoutstylesresponsive-designjquery-isotope
freaky
freaky

Reputation: 1010

jquery isotope container height width when toggle layout

I have a script that allows to toggle layout between masonryHorizontal and masonry. The toggle function seems to works correctly.

However I have a problem with the container isotope dimension.

With horizontal masonry layout, I want to always have the container height equals to 3 items height. It works fine, but when I toggle everything breaks. It's buggy.

When I resize the windows browser on masonry layout the behaviour is very strange. The container seems to be more larger than the windows width. The behaviour looks like to masonryHorizontal.

I think a part of the bug comes from the toggle click function:

$('.toggle-view').click( function() {
    $('.prev').toggleClass('hidden');
    $('.next').toggleClass('hidden');
    $('.scrollable').toggleClass('hidden');
    $('#container-scroll').toggleClass('horizontal');
    $('#container-scroll').toggleClass('vertical');
    $('#container').toggleClass('vertical');
    isVertical = !isVertical;
    var sizeStyle = isVertical ?
       { width: '100%', maxWidth: '100%', height:  height } :
       { width: '100%', maxWidth: '100%', height: '100%' };
    var redraw = $container[0].offsetHeight;
    $container.removeClass('no-transition')
    .isotope({
        layoutMode: isVertical ? 'masonryHorizontal' : 'perfectMasonry' 
    });
});

Here a fiddle : http://jsfiddle.net/bB9WC/1/

I spend maybe 15hours to solve the problem without success.

I think it a problem of jquery style width and height container. Here the script that allows to calculate the container height for the two layout.

function checkContainerHeight() {
if ($('#container-scroll').hasClass('horizontal')) {
    height = Math.round(colW*ratio)*HIsotopeRows+20;
    $('#container-scroll').css({ minHeight: height });
    $('#container').css({ minHeight: height });
    }
if ($('#container-scroll').hasClass('vertical')) {
    $('#container-scroll').css({ minHeight: '100%' });
    $('#container').css({ minHeight: '100%' });
    }
}

$(window).smartresize(function() {
    checkContainerHeight();
})

Upvotes: 3

Views: 2353

Answers (1)

lolo
lolo

Reputation: 237

You don't correctly set up the height style of your container. Don't apply any style in toggle click function.

You must add minHeight, maxHeight and height. And clear all when you toggle layout.

Here a fiddle correctly works : http://jsfiddle.net/e5YMf/1/

function checkContainerHeight() {
if ($('#container-scroll').hasClass('horizontal')) {
    height = Math.round(colW*ratio)*HIsotopeRows+20;
    $('#container-scroll').css({ height: '' });
    $('#container').css({ height: '' });
    $('#container-scroll').css({ minHeight: height });
    $('#container').css({ minHeight: height });
    $('#container-scroll').css({ maxHeight: height });
    $('#container').css({ maxHeight: height });
    }
if ($('#container-scroll').hasClass('vertical')) {
    $('#container-scroll').css({ maxHeight: '' });
    $('#container').css({ maxHeight: '' });
    $('#container-scroll').css({ height: '100%' });
    $('#container').css({ height: '100%' });
    }
}

function InitializeIsotope() {
$('#container').isotope({
    layoutMode: 'masonryHorizontal',
    masonryHorizontal: {
    rowHeight:  Math.round(colW*ratio),
    }
});
}

function checkIsotope() {   
if ($('#container-scroll').hasClass('horizontal')) {
    $container.isotope({
        layoutMode: 'masonryHorizontal',
        masonryHorizontal: {
        rowHeight:  Math.round(colW*ratio),
        }
    });
}
if ($('#container-scroll').hasClass('vertical')) {
    $container.isotope({
        layoutMode: 'perfectMasonry',
        perfectMasonry: {
        columnWidth: colW,
        rowHeight:  Math.round(colW*ratio),
            },
        });
        }
}

$(window).smartresize(function() {
    checkWidth();
    checkContainerHeight();
    checkIsotope(); 
})

checkWidth();
checkContainerHeight();
checkIsotope();
InitializeIsotope();


$('.toggle-view').click( function() {
$('.prev').toggleClass('hidden');
$('.next').toggleClass('hidden');
$('.scrollable').toggleClass('hidden');
$('#container-scroll').toggleClass('horizontal');
$('#container-scroll').toggleClass('vertical');
$('#container').toggleClass('horizontal');
$('#container').toggleClass('vertical');
checkWidth();   
checkContainerHeight(); 
checkIsotope();
$('#container').isotope( 'reLayout', $items, callback );
});

Upvotes: 2

Related Questions