2015-01-12 1 views
0

В настоящее время я создаю сайт для портфолио, и я хочу, чтобы боковая панель была скрыта по умолчанию на мобильных устройствах с ее довольно большого количества атлетов, вы можете проверить это здесь: www.dosh.dk/rofl/Проверьте ширину видового экрана на боковую нагрузку, затем добавьте класс в тело, если он меньше X

Боковая панель скроет, если тело имеет класс «боковая панель-неактивна», и поэтому я хочу сделать одну проверку в окне просмотра, когда сайт загружен, а затем добавить класс, если ниже X

Im используя coffeescript и ive сделал следующий код, но он, похоже, не работает, никаких идей?

$ -> 
    $(".inner_content").hide() 
    $("#myskills").show() 
    $("#site").addClass 'loaded' 

    if $(window).width < 600 
    $("body").addClass 'sidebar-inactive' 
+1

.width() -> это функция, то не пропустите **() ** –

+1

Не проверять ширину окна просмотра, используя ширину окна, используйте 'window.matchMedia' вместо, обработки крест прокрутки браузера браузера: https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia. См. polyfill для поддержки IE10 <: https://github.com/paulirish/matchMedia.js/ –

+0

Спасибо за быстрые ответы, полностью забыл() –

ответ

0

Как насчет решения, отличного от JavaScript, с использованием запросов в формате CSS?

@media (max-width: 599px) { 
    .sidebar { 
    display: none; 
    } 
} 

Это скроет элементы с sidebar класса, когда на экране меньше, чем 600px в ширину и будет обновляться, как браузер изменен.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Смежные вопросы