CODEWITHSUNDEEP
javascriptshow-hideviewport
user123
user123

Reputation: 399

viewport js show hide div

I need to show a mobile navigation when viewport is smaller as (lets say:) 367px;. I don't want to use media viewport (use that too but need to fix this with js for IE old etc.)

The solution:

<script type="text/javascript"> 
 $(window).resize(function() {

    if ($(window).width() < 767) {
        $(".nav-mob").show();
        $(".nav-wide").hide();
    }
    else {
        $(".nav-wide").show();
        $(".nav-mob").hide();
    }
});
</script>

<style>
.nav-mob ul {display: none;}
.nav-mob{display: none;}
.nav-wide{display:block;}

@media screen and (max-width: 767px) {
.nav-wide {display: none!important;}
.nav-mob {display: block!important;}
}
</style>

Wrong one:

jQuery(document).resize(function () {
    var screen = $(window)    
    if (screen.width < 367) {
        $(".nav-mob").hide();
        $(".nav").show();
    }
    else {
        $(".nav").hide();
        $(".nav-mob").show();
    }
});


<div class="nav-mob" style="display:none; height:50px; width:200px; padding:30px; background:#f0c; margin:200px; position:absolute;">mobile</div>

<div class="nav" style="height:100px; width:300px; padding:30px; background:#cfc; margin:20px; position:absolute;">wide</div>

Check fiddle: http://jsfiddle.net/fvt8T/

Upvotes: 0

Views: 450

Answers (1)

Ani
Ani

Reputation: 4523

This works for me:

 $(window).resize(function() {

    if ($(window).width() < 367) {
        $(".nav-mob").hide();
        $(".nav").show();
    }
    else {
        $(".nav").hide();
        $(".nav-mob").show();
    }
});

Upvotes: 1

Related Questions