I work with a mixture between jQuery Splitter and Masonry.

A part of my code is:

var splitter = $('#main_container').split({
orientation: 'vertical',
limit: 100,
position: s1+'px',
onDrag: function(event) {
setCookie("left", splitter.position() );
Splitter();
$('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
horizontalOrder: false
});
}
});

Splitter();
function Splitter(){
if( splitter.position() <500){
$('.grid-item').css("width", "100%");
$('#show_all').fadeOut();
}
else{
$('.grid-item').css("width", "33.3333%");
$('#show_all').fadeIn();
}
}

And I need a command like this: »If the container #container (with a flexible width) is <500px wide, the position has to be again on position: '50%' width the limit: 300.«

How is that possible? Would be so thankful for help! <3

//

EDIT: Something like »Reload the page if #container is <500px wide« would be also okay.

I tried this:

function refreshPage() {
if ($('#container').width() < 900);
}

But it does not work.

0 Answers