CODEWITHSUNDEEP
javascriptjqueryhtmlcsshidden
Ellouise
Ellouise

Reputation: 53

Reset after Jquery function

I am using a bit of jquery to expand a div when another is clicked:

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

This is my html:

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

And it has a lot of text in the module div. This is my css:

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

}

My site is responsive, so when the browser window is resized the above css is displayed when the screen is less than 800px. So when testing, I click on my button which makes my module expand not a problem, and when I click the button again, the module collapses and hides it's content, so that's all good. However, when I resize my window back to say 1000px, and I had hidden the module content when my screen was smaller, the content is still hidden when the browser window is back to 1000px and I've hidden the button for the larger screens because it's not necessary. So is there any way to reset the effects of the jquery when the browser window is resized to a size larger than 800px?

Upvotes: 0

Views: 915

Answers (3)

Jithin
Jithin

Reputation: 2604

Use $.resize() which is used as resize event handler and then check whether the width hit the dimension.

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

Upvotes: 0

Manu M
Manu M

Reputation: 1064

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

Use this script to check window size and reload

Upvotes: 1

jcubic
jcubic

Reputation: 66520

You can use enquire.js a library that add media query callbacks to javascript.

Upvotes: 0

Related Questions