Динамически переключать класс на основе ширины div

Question

Итак, у меня есть контейнер с содержимым и двумя боковыми ящиками (слева/справа), которые при открытии сжимают ширину содержимого.

<div class="container"> 
    <div">sidepanel-left</div> 
    <div class="content">content</div> 
    <div>sidepanel-right</div> 
</div> 

Например: когда оба боковых панели слева и справа близки, ширина «содержимого» составляет 1000 пикселей. Когда одна боковая панель открыта, div «content» помещается на 800 пикселей, потому что боковая панель имеет ширину 200 пикселей. Когда обе боковые панели открыты, тогда div «content» равен 600px.

Мне нужен сценарий, который добавляет/удаляет класс «.small» динамически в div «content», когда он меньше/больше 700 пикселей.

Таким образом, если вы открываете или закрываете какую-либо или обе боковые панели, то «content» div получит свой класс «.small» без изменения размера окна или перезагрузки страницы.

Я буду использовать этот класс, чтобы скрыть/показать другой div внутри раздела «content» div.

Я пробовал этот плагин (http://benalman.com/code/projects/jquery-resize/examples/resize/), но он не будет динамически добавлять/удалять класс. Он добавляет класс, когда я открываю две боковые панели, но если я закрою один, что делает div «content» размером более 700 пикселей, он не удалит его.

jQuery(document).ready(function($) {  
    $(".content").resize(function() { 
     if ($(".content").width() < 700) { 
      $('.content').addClass('small'); 
     } else { 
      $('.content').removeClass('small'); 
     } 
    }); 
}); 

Заранее спасибо :)

Б.

[EDIT]

сайт: www.unicyclist.info sidepanels можно активировать, нажав на кнопку [...] в верхнем правом и левом углу.

Answer 1

Удовлетворительно var является вашей ошибкой.

jQuery(document).ready(function($) {  
    $(".content").resize(function() { 
     $(this).toggleClass('small', ($(this).width() < 700));  
    }); 
}); 

Answer 2

JQuery изменения размера() включается только при изменении окна браузера!

Вы можете создать свою собственную функцию, чтобы проверить, если размер DIV изменилось:

contentWidth = -1; 

function checkForSizeChange() { 
    var $content = $('.content'), 
     width = $content.width(); 

    if(contentWidth != width) { 
     if(width < 700) { 
      $content.addClass('small'); 
     } else { 
      $content.removeClass('small'); 
     }  
     contentWidth = width; 
    } 
} 

setInterval(checkForSizeChange, 100);