Media query using jquery

Question

I am using the same view page (with CSS) in 3 different areas where resolutions are different. My problem is that I want some block of media query at some condition only.

Like:

if( a == 20)
{
@media (max-width : 900px) and (min-width :500px){
// some code 
}
}
if( a == 40)
{
@media (max-width : 900px) and (min-width :500px){
// some code 
}
}

Is this possible?

What is the "some condition" you speak of? Can this not be handled on the server side, allowing you to only load relevant CSS files when necessary? — James Donnelly
– James Donnelly, Commented Feb 2, 2015 at 9:58
It may be more appropriate to define a class in the elements for each condition, and applying the CSS for each class. — Vítor Marques
– Vítor Marques, Commented Feb 2, 2015 at 10:07
@JamesDonnelly i have only one css but using that view page in different resolutions of site — Arjun
– Arjun, Commented Feb 2, 2015 at 13:43
@VítorMarques yeah! it work's but its very tough for me right now due to large number of elements so i m trying for alternative — Arjun
– Arjun, Commented Feb 2, 2015 at 13:44

RyanS · Accepted Answer · 2015-11-26 23:36:32Z

1

I think Crossfire's suggestion is probably the best. Just add a class to your HTML tag based on the conditions.

If you're looking for a JS only solution, you can use window.matchMedia

For instance:

 if( a == 20)
 {
     window.matchMedia('screen and (max-width: 900px) and (min-width:500px)') 
     {
     // some code 
     }
 }
 if( a == 40)
 {
     window.matchMedia('screen and (max-width: 900px) and (min-width:500px)')
     {
     // some code 
     }
 }

This is basically a media query in JS and it also pretty much works the same. Please note that this solution is not supported in IE9 or lower.

Edit: here's a solution that also works in IE9 or lower. What this does is simply call the function on window resize or load. Then you can add in conditions as you wish. You should be able to work with this.

  $(function() {

      window.responsive = function responsive() {
         //get the width of the window
         var width = $(window).width();

         if (width > 500 && width < 900) {
                //width is larger than 500px and smaller than 900px
                $('div').addClass('md-screen');
         }
       }

  });
  //Call the function on load and resize
  $(window).on('ready load resize orientationchange',function(){responsive();});

edited Nov 26, 2015 at 23:36

RyanS

6371 gold badge10 silver badges26 bronze badges

answered Feb 2, 2015 at 10:34

Anwardo

7206 silver badges16 bronze badges

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

5 Comments

Anwardo Over a year ago

I edited my answer with a solution that will also work in IE9 and lower. Hope this helps.

Arjun Over a year ago

this will works but i need to and classes for each and ever element which i want to resize

Anwardo Over a year ago

Nope. You can just add a class to the parent or the html and then address the elements like html.added-class .regularclass {/*add width specific styles here*/} when the class on the parent/html is not active all your styles will be as normal.

abcid d Over a year ago

@ Anwardo, After 5 years, your code is still working well! I really like a way you catch windown's width, but I don't know what is "window.responsive = function responsive()" about? Can you please explain?

Anwardo Over a year ago

@abcidd, thanks for your comment! That statement is just assigning a (named) function as a global variable (the window scope). The fact that the function is named doesn't really serve any purpose in this code, it could have been an anonymous function as well. Looking at the code now I would certainly change a few things. Mostly there is no need to assign the width checking function to the global scope. Both the function and the event handler could have simply be scoped to the $(function() {});.

Collectives™ on Stack Overflow

Media query using jquery

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related