Triggering jquery with css media queries

Question

I am using css media queries on my project to create a site that will work with any sized screen. I am looking to trigger difference jquery functions just like I would with

Answer 1

The Modernizr library supports making direct JavaScript calls that evaluate media queries.

If you don't want to do that, you could have your different CSS rules drive some property of a hidden element, and you could then use ".css()" to check the value from jQuery. In other words, the rule for "bigger than 1000px wide" could set a hidden

to "width: 1000px", and you could then check

if ( $("#widthIndicator").css("width") === "1000px") {
  // whatever

Here is a dumb jsfiddle demonstrating. Drag the middle separator bar left and right to see that the JavaScript code (in the interval timer) detects the change to effective "width" of the hidden element.

If you refer to a responsive design then you could also trigger an existing element's property without adding markup to your html,for example

if ( $("#navigation li").css("float") === "none") {

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...