JavaScript命令：»如果div宽度<500px ...«

Question

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.

Answer 1

If you want to reload the page if the container is less than 500px wide try:

setInterval(function(){
  if($("#container").width < 500){
    location.reload()
  }
}, 100);

This sets a timer to happen 10 times a second that checks if the container width is less than 500, if it is less than 500, it will reload the page.