CODEWITHSUNDEEP
jquerycssif-statement
user3541921
user3541921

Reputation: 105

apply different styles based on window width, jquery

I am trying to check the viewport size, and then apply different styles based on whether the viewport size is between 768px - 992px, using an if and else statement. However, what I've got so far isn't working.

Here is my code...

$(document).ready(function() {
    var windowSize = $(window).width();
    function checkwindowSize() {
        if(windowSize > 768 && windowSize < 992) {
            $('#show-menu').css('visibility', 'hidden', function() {
                $('#slide-menu-container').css('visibility', 'visible');
            });
        }
        else {
            $('#show-menu').css('visibility', 'visible', function() {
                $('#slide-menu-container').css('visibility', 'hidden');
            });
        }
    });
});

Thank you!

Upvotes: 0

Views: 1790

Answers (4)

Mehmet Eren Yener
Mehmet Eren Yener

Reputation: 2036

Here is the if you still want to use Jquery for this purpose Jsfiddle

JS

$( document ).ready(function() {

     if($( window ).width() <= 500)
     {
         $( ".smallerSize" ).css('display','block');
     }
     else
     {
        $( ".biggerSize" ).css('display','block');
     }
});

$( window ).resize(function() {
     if ($( window ).width() <= 500)
     {
         $( ".biggerSize" ).css('display','none');
         $( ".smallerSize" ).css('display','block');
     }
     else
     {
         $( ".smallerSize" ).css('display','none');
         $( ".biggerSize" ).css('display','block');
     }

});

CSS

.smallerSize
{
    display:none;
}

.biggerSize
{
    display:none;
}

HTML

<div class="smallerSize">
    <span>Small Size</span>
</div>

<div class="biggerSize">
    <span>Bigger Size</span>
</div>

Here you have 2 conditions, 1st one is when the page is loaded and 2nd condition is when the browser size is changing.You can see the demo for this approach

Upvotes: 0

Rakesh Kumar
Rakesh Kumar

Reputation: 2855

Try this.

Define your windowSize variable inside the checkwindowSize function.

@media query is preferred then javascript. 

function checkwindowSize() {
    var windowSize = $(window).width();
    if(windowSize > 768 && windowSize < 992) {
        $('#show-menu').css('visibility', 'hidden', function() {
            $('#slide-menu-container').css('visibility', 'visible');
        });
    }
    else {
        $('#show-menu').css('visibility', 'visible', function() {
            $('#slide-menu-container').css('visibility', 'hidden');
        });
    }
}   

checkwindowSize();

$(window).resize(function(){checkwindowSize()});

Fiddle Demo.

Upvotes: 1

Think Different
Think Different

Reputation: 2815

Why not use css?? Like:

@media (min-width: 768px) and (max-width: 992px) { 
    #showmenu{

    }
 }

 @media (min-width: 993px) { 
    #showmenu{

    }
 }
  @media (max-width: 767px) { 
    #showmenu{

    }
 }

Upvotes: 2

Nicolas Beauvais
Nicolas Beauvais

Reputation: 1052

Has Frédéric Hamidi said, CSS media query are the best way to do it.

To answer your question, in your code sample you never call the checkwindowSize() function. Also to improve your code you can call you function every time the browser is resized using the "resize" event. http://api.jquery.com/resize/

Upvotes: 0

Related Questions