JQuery если заявление с CSS медиа-запросов - PullRequest
Новая
       7

JQuery если заявление с CSS медиа-запросов

0 голосов
/ 20 июня 2011

Я пытаюсь использовать медиа-запросы, чтобы отключить функцию с плавающей запятой при определенной ширине браузера.Это утверждение if работает только если я перезагрузить страницу для текущего размера.Возможно ли, чтобы jQuery применил это изменение при изменении свойства CSS? 

if($('.two-column li').css('float') == 'left') {
    $('.two-column li').equalHeights();
}

, и я, вероятно, должен использовать $ (this) или что-то во втором $ ('. Two-column li') но я не знаю, почему это не работает.Я не слишком много знаю о jQuery.

edit:

По умолчанию стиль для двух столбцов li похож на 

.two-column li {
    float: left;
}

, а затем скажем... 

@media only screen and (max-width: 767px) {
    .two-column li {
        float: none;
    }
}

Это работает.Когда ширина ниже 767 пикселей, он перестает плавать.Ужасный jquery, который я имею выше, кажется, работает частично.По умолчанию плагин equalheights запускается, но когда ширина меньше 767px, плагин не запускается.Моя проблема в том, что он запускается или нет, зависит от того, какой размер был у браузера при загрузке страницы.Я пытаюсь сделать его динамичным, как медиа-запрос в адаптивном дизайне.

И я назвал его готовым документом.

С помощью дополнительных исследований и комментариев ниже, этотеперь, например, в том числе готовый документ ... все еще не делает этого при изменении размера, но нуждается в обновлении. 

$(document).ready(function () {
    $('.two-column li').filter(function(index) {
        return $(this).css('float') != 'none'
    }).equalHeights();
});

Ответы [ 4 ]

1 голос
/ 20 июня 2011

modernizr обеспечивает тестирование медиа-запросов . кроме того, вы также можете прикрепить обработчик событий к $(window).resize()

0 голосов
/ 20 июня 2011

Ладно ... итак, после дополнительных исследований и некоторого возни, я, кажется, получил ту функциональность, которая мне нужна. Я не могу написать правильный код jQuery, может кто-нибудь сказать мне, что я делаю неправильно, чтобы сделать его более элегантным? 

var $float = $('.two-column li');
$float.filter(function(index) {
    return $(this).css('float') != 'none'
}).equalHeights();
$(window).resize(function () {
    $float.filter(function(index) {
        if ($(this).css('float') != 'none') {
            $float.equalHeights();
        }
        else {
            $float.height('auto');
        }
    });
});
0 голосов
/ 20 июня 2011

Вы можете сделать это, используя $(window).resize()

$('div#first').addClass("right");

$(window).resize(function() {

    $('#first').toggleClass("right", $(this).width() > '500');

});
  1. убедитесь, что div получает класс с float, поэтому добавьте его вне функции изменения размера.
  2. когда размер окна изменяется, включите или выключите класс (то есть с плавающей точкой или без плавающей) в зависимости от размера окна. В этом случае переключение происходит, когда окно больше 500 пикселей. И наоборот, когда он меньше, класс удаляется.
  3. установите ширину в соответствии с вашими предпочтениями.

http://jsfiddle.net/jasongennaro/7qc8e/3/

Измените размер окна, чтобы оно работало.

0 голосов
/ 20 июня 2011

Пример кода, который вы вставили, немного неправильный, он не будет делать то, что вы ожидаете.Что вам нужно сделать, это выбрать все элементы, с которыми вы хотите работать, а затем отфильтровать их по значению их стиля float.Затем, после фильтрации, примените нужные операции к фильтрованному набору.Например, если вы хотите запустить плагин equalHeights на множестве всех элементов «.two-column li» с плавающей запятой, установленной на «left», попробуйте следующий код: 

$('.two-column li').filter(function(index) {
    if($(this).css('float') == 'left') return true;
}).equalHeights();

С учетом сказанного,Похоже, корень вашей проблемы в том, что ваш медиа-запрос CSS не активируется должным образом при изменении размера браузера.Не могли бы вы опубликовать свой код медиа-запроса, чтобы узнать, есть ли там более простое решение?

...