search

JoshBarr / on-media-query

A neat way to trigger JS when media queries change. No jQuery required.
283 stars 33 forks source link

Browser Support #7

Closed dnwhte closed 11 years ago

dnwhte commented 12 years ago

I'm currently looking for a solid way to do this. I just read an article that talks about font-family not working in Opera and some other browsers. Then they present another method. What are your thoughts? Here is the article.

http://adactio.com/journal/5429/

JoshBarr commented 12 years ago

Why not use both? Test to see if the body:after content returns properly, if not, fall back to checking font-family.

All these solutions are hacks anyway :)

Josh

On 28/06/2012, at 4:09 AM, danwhite85reply@reply.github.com wrote:

I'm currently looking for a solid way to do this. I just read an article that talks about font-family not working in Opera and some other browsers. Then they present another method. What are your thoughts? Here is the article.

http://adactio.com/journal/5429/

Reply to this email directly or view it on GitHub: https://github.com/JoshBarr/js-media-queries/issues/7

mhulse commented 12 years ago

I'm working on a fork here (with demo here) where I'm trying to incorporate after and font-family for broader browser support... I just started working on things today, so I have yet to cross-browser test and iron out the any bugs... Josh, if you're interested, once I'm done browser testing, I can do a pull request (hopefully you don't mind some of the reorganizing that I've done)?

JoshBarr commented 12 years ago

Sounds awesome Micky. I've been experimenting with setting font-family on a non-rendering element like the head or the script tag, but enumerating the property via JS returns some weird results (often the font-family of the parent, or the first element that font-family is valid on).

Happy to merge this back and do some testing for you. One thing to watch is the 'call in each context' bool. We might need to rewrite the API with an init() that can belong to multiple contexts, and oncontextchange() method for each breakpoint. Often we want the same function to fire for tablet and desktop, with mobile doing something different.

Thanks for your work on this!

Josh

On 23/07/2012, at 7:38 PM, Micky Hulsereply@reply.github.com wrote:

I'm working on a branch here (with demo here) where I'm trying to incorporate after and font-family for broader browser support... I just started working on things today, so I have yet to cross-browser test and iron out the any bugs... Josh, if you're interested, once I'm done browser testing, I can do a pull request (hopefully you don't mind some of the reorganizing that I've done)?

Reply to this email directly or view it on GitHub: https://github.com/JoshBarr/js-media-queries/issues/7#issuecomment-7172031

mhulse commented 12 years ago

That's great! Thanks for info and quick reply. :)

By the way, I completely understand if you end up not wanting to merge my fork... I kinda changed a lot of stuff (but the JS is still fundamentally the same).

So, I've done some more work today. The master branch is stable. I've tested the code in all the browsers mentioned in the CHANGELOG. I've got it working all the way back to IE6 (with the help of respond.js), and Opera is happy with the :after generated content. Check out the demo here (you might need to do a shift-refresh to dump cache).

I'm currently working on a development branch. In this branch, I've setup real private methods (i.e. I've completely hidden the methods not being used in the public API). I'm thinking about merging this branch into the master branch at some point in the near future.

Going back to what you've said about the context bool and rewriting ini(): I'm not sure if I fully follow you... What would be an example where the current code fails? I think I have not used the code in enough situations to fully understand where the pitfalls lie.

On the other hand, I thought it would be cool if we could create instances of the MQ object where each could be manipulated and used in different ways (does that make sense?). For example, using the existing closure pattern, calling a setter applies to both MQ variables:

http://jsbin.com/oqojuy/edit

... seems like it would be nice to create "instances" of the MQ object (kinda like a jQuery plugin might do).

Lastly, (sorry in advance if this is a silly question) when you say "we want the same function to fire for tablet and desktop, with mobile doing something different"... Sorry for my ignorance, but isn't that what q2 = MQ.addQuery({ context : ['small', 'medium'], ... }); does?

Thanks again!

mhulse commented 11 years ago

Closing.