Posted by corypark on June 27, 2011 at 8:43pm
Check out this sweet little jQuery script I found recently. It switches classes and ID names based on browser width. It's pretty slick and even features a built in debug mode.
http://www.csslab.cl/2009/07/22/jquery-browsersizr/
Comments
You should also check out
You should also check out Nathan Smith's http://adapt.960.gs/ It is a bit lighter and a truly decent replacement for the CSS based media query.
Best,
-- Zach (attack) Meyer
This might be even simpler
See the "Doing it with jQuery" heading at http://css-tricks.com/6206-resolution-specific-stylesheets/
Seems pretty light to me!
James Sinkiewicz
Drupal Site Builder and Generalist
http://MyDrupalJourney.com
Thanks... This was much than
Thanks...
This was much than media query in my case since I just need to hide some fixed images in narrow/mobile browsers so as to not cover the content. Are there any advantages media query has over this method, besides not having the quick flash of original CSS and running with no java?
*much better
*much better
IE8 and below do not support Media Query Properties
So you have to use another method, like javascript, to hack around it.
One thing I did not think about at first, was that changing the height and width of an img object to fit on a smaller screen (via media query or javascript) does not change the number of bytes that have to be downloaded. Let's face it, that 320px mobile phone probably does not have the bandwitdh available the desktop has.
That's when you have to look at solutions like that proposed at http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-w...
James Sinkiewicz
Drupal Site Builder and Generalist
http://MyDrupalJourney.com