Остановить jquery для разных размеров экрана.

Question

У меня есть этот код:

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
<script type='text/javascript'> 
//<![CDATA[ 
$(window).load(function(){ 
$('#content-left').css('width', '100%').css('width', '-=320px'); 
$(window).on('resize', function(){ 
$('#content-left').css('width', '100%').css('width', '-=320px'); 
}); 
}); 
//]]> 
</script> 

Приведенный выше код прекрасно работает, но то, что мне нужно для этого кода прекратить работу или переключиться обратно только 100 шириной% (без вычитания 320px), когда размер экрана 768px или менее.

Я сделал некоторые поиски Google и нашел это:

if ($(window).width() <= 768){ 
     // do something here 
    } 

Но я не уверен, как добавить это в существующий код.

---

фона:

Моя боковая панель неподвижная боковая панель на правой стороне страницы на 300px. И у меня есть дополнение 20px между боковой панелью (# content-right) и основной частью (# content-left). В моем основном разделе (# content-left) используется приведенный выше скрипт 100% - 320 пикселей.

Я использую два CSS. Один из них - обычный CSS. Другое использование:

@media all and (max-width: 768px) {} 

спасибо. :)

Answer 1

Используйте простое if/else заявление, поместить код для изменения размера в функции и вызвать эту функцию при загрузке страницы и при изменении размеров окна.

function resize() { 
    if ($(window).width() <= 768) { 
    $('#content-left').css('width', '100%'); 
    } else { 
    $('#content-left').css('width', '100%').css('width', '-=320px'); 

    } 
} 

$(window).load(function() { 
    resize(); 
}); 
$(window).on('resize', function() { 
    resize(); 
}); 

Answer 2

Вы можете комбинировать их так. Это только запускает ваш код, когда окно составляет не менее 769 пикселей. Вот что "!" символ делает, преобразует его в NOT.

$(window).load(function() { 
    if (!$(window).width() <= 768) { 
    $('#content-left').css('width', '100%').css('width', '-=320px'); 
    $(window).on('resize', function() { 
     $('#content-left').css('width', '100%').css('width', '-=320px'); 
    }); 
    } 
});