JQuery Добавить/удаление классов на Window Width

Попытка написать небольшой скрипт, который добавляет/удаляет классы, основанные от окна с,JQuery Добавить/удаление классов на Window Width

любая помощь будет оценена.

<script type="text/javascript"> 
    $(document).ready(function() { 
    if ($(window).width() < 500) { 
    $('.single-post-rating').removeClass('col-xs-3'); 
    $('.single-post-rating').addClass('col-xs-12'); 
    $('.guide-excerpt').removeClass('col-xs-9'); 
    $('.guide-excerpt').addClass('col-xs-12'); 
    } 
    else { 
    $('.single-post-rating').addClass('col-xs-3'); 
    $('.single-post-rating').removeClass('col-xs-12'); 
    $('.guide-excerpt').addClass('col-xs-9'); 
    $('.guide-excerpt').removeClass('col-xs-12'); 
    } 
    }); 
</script>

источник

2013-09-19 Keyfer Mathewson

В чем проблема с кодом? –

Я думаю, что после ширины окна просмотра.

Вы можете получить доступ, что с

var viewPortWidth = document.documentElement.clientWidth;

Как и в сторону, вы можете сделать много хороших отзывчивых макетов через CSS медиа-запросов только.

источник

2013-09-19 21:54:00 Meximize

Полностью. Все остальное в моем документе связано с медиа-запросами, эта часть просто сложна, потому что я использую столбцы Bootstrap, но добавляю более мелкие. –

Есть ли в вашем случае код в моем примере? Я не слишком уверен, как его использовать. –

Если вы хотите продолжить на этом пути, это один из лучших решений для управления шириной окна: добавить класс управления Css, с мин-с имуществом и назначить этот класс в контейнер

CSS:

.mediaquerycontrol { 
    min-width: 0px; 
} 

@media (min-width: 992px) { 

    .mediaquerycontrol { 
     min-width: 992px; 
    } 
} 
@media (min-width: 768px) and (max-width: 991px) { 

    .mediaquerycontrol { 
     min-width: 768px; 
    } 
} 
@media (min-width: 1200px) { 

    .mediaquerycontrol { 
     min-width: 1200px; 
    } 
}

HTML:

<body> 
    <div class="container mediaquerycontrol"> 
...

JavaScript:

<script type="text/javascript"> 
    $(document).ready(function() { 
    var pageWidth = parseInt($(".mediaquerycontrol").css("min-width").replace(/[^-\d\.]/g, '')) 

    if (pageWidth < 500) { 
    $('.single-post-rating').removeClass('col-xs-3').addClass('col-xs-12'); 
    $('.guide-excerpt').removeClass('col-xs-9').addClass('col-xs-12'); 
    } 
    else { 
    $('.single-post-rating').addClass('col-xs-3').removeClass('col-xs-12'); 
    $('.guide-excerpt').addClass('col-xs-9').removeClass('col-xs-12'); 
    } 
    }); 
</script>

но мой совет - использовать функции бутстрапа, а если вам нужны меньшие столбцы, вы можете увеличить количество столбцов по умолчанию (например, от 12 до 24, если вы используете версию 2.3.2)

http://getbootstrap.com/2.3.2/customize.html

источник

2013-09-19 22:36:18 ReDEyeS

JQuery Добавить/удаление классов на Window Width

ответ

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