Javascript & CSS Media Queries : css classes applied to an element

Question

Please READ THE QUESTION CAREFULLY

When using bootstrap, Consider the following scenario where col-lg-6 is applied for large screen sizes and col-sm-12 on small screens.

The demo markup is

 <div class="col-lg-6 col-sm-12">

     <!--some content -->

 </div>

Rules defined in col-sm-12 are not applied unless the screen size is SMALL so I want to perform some action with jquery when user resizes the screen and rules defined in col-sm-12 is applicable for current element. Don't want to go with javascript workaround for measuring screen size!

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

Write your own media queries in your css file:

@media (max-width: 768px) {
   .contentShown{
       display:none;
     }

    .contenthidden{
       display:block;
     }
}

As for preforming an action like loading new content on window resize then you have to listen for the event and when the size is the desired width call you action via ajax and load in new content:

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.height() >= 820) { /* ... */ }
      if (win.width() >= 1280) { /* ... */ }
});

Full answer for this here

edited May 23 '17 at 11:47

Community

1
1

answered Oct 20 '16 at 11:44

ThunD3eR

3,216
5
50
94

I want to perform some perform some action using javascript/jquery when rules defined in specific class are applied! I have written the media queries! – Arjun Oct 20 '16 at 11:48
Sorry I missunderstood your question. You can not prefom any action if you will not measure screenSize via javascript/jquery. What you can do is define which elements on the page that should be visible in css. Ill edit my answer – ThunD3eR Oct 20 '16 at 11:52

score 0 · Answer 2 · answered Jan 04 '16 at 00:56

The bootstap website has the default breakpoints, http://getbootstrap.com/css/#grid-media-queries. This will tell you at what sizes col-sm-12 and col-lg-6 are being applied.

As far as hiding and showing elements, you will have to create classes to do this and then add them to the style sheet using the media queries bootstrap uses.

score -1 · Answer 3 · answered Jan 04 '16 at 01:08

-1

If you are using jquery then use the is() function to check the class of the wrapper or any elements of a page if ($(".wrapper").is(".col-sm-12")) { // do an action here };

My code seems pretty basic Hope it helps

answered Jan 04 '16 at 01:08

Norvert John Abella

250
4
15

Then you should used `$(window).bind('resize', function () { alert('resize'); });` – Norvert John Abella Jan 04 '16 at 02:33
not working ! tried here at JSBin. Check out the link - https://jsbin.com/hajogenegi/edit?html,js,output – Arjun Oct 20 '16 at 11:26
It's about media queries and jquery – Arjun Oct 20 '16 at 11:30

Javascript & CSS Media Queries : css classes applied to an element

3 Answers3