How to pass media queries with jQuery CSS method

Question

I have a media query like this:

@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

I need to change the style like:

 $( "#heightSet" ).change(function() {
              var choice = $(this).val();
              if (choice == "50"){
                $(".navbar-nav > li > a").css({"padding-top":"15px","padding-bottom":"15px"});
              }
                if (choice == "60"){
                $(".navbar-nav > li > a").css({"padding-top":"20px","padding-bottom":"20px"});
              }
});

How can I take care of the @media (min-width: 768px) on the .CSS() so the code is affected only on that specific view port?

Add rules to your CSS involving those height choices and a set of classes to choose between them instead of directly modifying the styles of DOM elements. — Pointy
– Pointy, Commented Apr 7, 2014 at 17:11
Hi Pointy, thanks for comment but what do you mean by "Add rules to your CSS involving those height choices.."? — Mona Coder
– Mona Coder, Commented Apr 7, 2014 at 17:13
See the answer given by @isherwood . You can't involve media queries with per-element style rules; there's just no mechanism for that. — Pointy
– Pointy, Commented Apr 7, 2014 at 17:38

isherwood · Accepted Answer · 2014-04-07 17:22:48Z

1

.my-class-15 {padding-top: 15px; padding-bottom: 15px;}
.my-class-20 {padding-top: 20px; padding-bottom: 20px;}

$("#heightSet").change(function () {
    var choice = $(this).val();

    if (choice == "50") {
        $(".navbar-nav > li > a").addClass('my-class-15');
    }
    if (choice == "60") {
        $(".navbar-nav > li > a").addClass('my-class-20');
    }
});

Here's a fiddle, but it's not very useful without your HTML.

http://jsfiddle.net/isherwood/nf5tP/

answered Apr 7, 2014 at 17:22

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

Collectives™ on Stack Overflow

How to pass media queries with jQuery CSS method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related