apply different styles based on window width, jquery

Question

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!

I don't know why I didn't think of using media queries! Just out of interest though, is there anything you can see that is wrong with my code? Thank you! — user3541921
– user3541921, Commented Jun 13, 2014 at 13:20
if(windowSize > 768 && windowSize < 992) { $('#show-menu').show(, function() { — user3541921
– user3541921, Commented Jun 13, 2014 at 13:21
because i want to run another event as well as this one in the if statement! — user3541921
– user3541921, Commented Jun 13, 2014 at 13:22

Think Different · Accepted Answer · 2014-06-13 13:24:06Z

2

Why not use css?? Like:

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

    }
 }

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

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

    }
 }

answered Jun 13, 2014 at 13:24

Think Different

2,8251 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rakesh Kumar · Accepted Answer · 2014-06-13 13:28:55Z

1

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.

answered Jun 13, 2014 at 13:28

Rakesh Kumar

2,8631 gold badge22 silver badges37 bronze badges

Comments

Nicolas Beauvais · Accepted Answer · 2014-06-13 13:21:54Z

0

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/

answered Jun 13, 2014 at 13:21

Nicolas Beauvais

1,07214 silver badges20 bronze badges

Comments

Mehmet Eren Yener · Accepted Answer · 2014-06-13 13:30:39Z

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

Collectives™ on Stack Overflow

apply different styles based on window width, jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related