CODEWITHSUNDEEP
jquerycssmedia-queries
davey
davey

Reputation: 1564

Media Queries and JQuery issue

I'm using media queries for mobile/tablet screens for my site. When the screen is sized down for mobile i use quite a few jquery toggle functions so i can shrink some content but allow it to expanded if need be.

My problem is if I toggle an item and expands(shows) and then I rotate the device to landscape the item will remain expanded however a different media query is in use stating for that div or whatvere to be hidden . I think this is because Jquery toggle adds style attributes to the actual HTML rather then CSS. Is there a way to get the correct page, so reset the toggle? if that makes sense?

Thanks

Dave

Upvotes: 2

Views: 279

Answers (2)

Robot Woods
Robot Woods

Reputation: 5687

in your functions, you can rewrite the css rules, like so:

document.styleSheets[0].cssRules[1].style.some_attribute='some value';

the 1 there is the order of the rules (begins at 0)

Upvotes: 0

mortimer
mortimer

Reputation: 66

If you add the following code to your site it will add a class to the body node of either landscape or portrait which you can then use in your css. Hopefully this should help.

window.onorientationchange = function() {
  var orientation = window.orientation;
  if (orientation == 0) {
    document.body.setAttribute("class","portrait");
  }else{
    document.body.setAttribute("class","landscape");  
  }
}

Upvotes: 2

Related Questions