Сброс после функции Jquery

Я использую немного jquery для расширения div при нажатии другого:

    <script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".module").slideToggle("slow");
        });
    });
</script>

Это мой html:

<div class="flip"></div>
        <div class="module"></div>

И у него много текста в модуле div. Это мой css:

 .module {
    width:374px;
    height:100%;
    float:left;
    padding:5px;
    display:none;
}
    .flip {
    width:100%;
    height:25px;
    background-image:url(menu.gif);
    cursor:pointer;

}

Мой сайт отзывчив, поэтому при изменении размера окна браузера указанный выше css отображается, когда экран меньше 800 пикселей. Поэтому при тестировании я нажимаю на свою кнопку, что делает мой модуль расширяющимся без проблем, и когда я снова нажимаю кнопку, модуль сворачивается и скрывает свое содержимое, так что все хорошо. Однако, когда я изменяю размер своего окна, скажем, на 1000 пикселей, и я скрываю содержимое модуля, когда мой экран был меньше, содержимое по-прежнему скрыто, когда окно браузера возвращается к 1000 пикселей, и я скрыл кнопку для больших экранов, потому что это необязательно. Итак, есть ли способ сбросить эффекты jquery, когда размер окна браузера изменяется до размера, превышающего 800 пикселей?


javascript html jquery css hidden
person Ellouise    schedule 23.08.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward 

$(window).resize(function() {
 if($(window).width() > 800) {
  location.reload();
 }
});

Используйте этот скрипт для проверки размера окна и перезагрузки

person Manu M    schedule 23.08.2013
comment
Большое спасибо. Работает отлично. - person Ellouise; 23.08.2013

arrow_upward
0
arrow_downward

Вы можете использовать enquire.js библиотеку, которая добавляет обратные вызовы мультимедийных запросов в javascript.

person jcubic    schedule 23.08.2013

arrow_upward
0
arrow_downward

Используйте $.resize(), который используется в качестве обработчика события изменения размера, а затем проверьте, соответствует ли ширина измерению.

$(window).resize(function() {
    if($(window).width() > 800) {
        $(".module").show();
    }
    else{
        $(".module").hide();
    }
});
person Jithin    schedule 23.08.2013