Best way to load Jquery Mobile?
Permalink
Hey All,
Working on a mobile theme for my site and decided to give Jquery mobile a try. I'm wondering if anyone has a best practice on how to load up the JQM to avoid any conflicts with the instance of Jquery that concrete loads.
Any help appreciated.
Working on a mobile theme for my site and decided to give Jquery mobile a try. I'm wondering if anyone has a best practice on how to load up the JQM to avoid any conflicts with the instance of Jquery that concrete loads.
Any help appreciated.
I don't find JQM painful. The results are looking good so far. And it beats the hell out of Bootstrap IMO.
I see a conflict when I'm logged in and using a mobile user agent - the site won't load due to Concrete's Jquery, and the JQM mobile version that loads.
Seeing as how you can't really do much editing with a mobile device anyways, not such a big deal.
I see a conflict when I'm logged in and using a mobile user agent - the site won't load due to Concrete's Jquery, and the JQM mobile version that loads.
Seeing as how you can't really do much editing with a mobile device anyways, not such a big deal.
Well perhaps my last sentence was a bit over the top. I'm glad to hear you've getting good results with it.
To answer your initial question I believe you'd be able to handle this by overriding the element file header_required.php, and editing it to dynamically swap the version of jquery.js that is loaded from the core, with the one from JQM.
The test in this file would be along the lines of 'swap the jquery version if loading up the mobile theme'.. so you may need to either dig into whether a variable/constant is set up to allow you to test for this, or do some browser detection again, i.e. http://www.concrete5.org/community/forums/installation/need-to-add-...
(I don't approach styling for mobiles with a separate theme, so I'm not 100% sure of the way concrete5 does the detection and swaps the themes - I'm sure someone can comment in more detail about how to handle this)
To answer your initial question I believe you'd be able to handle this by overriding the element file header_required.php, and editing it to dynamically swap the version of jquery.js that is loaded from the core, with the one from JQM.
The test in this file would be along the lines of 'swap the jquery version if loading up the mobile theme'.. so you may need to either dig into whether a variable/constant is set up to allow you to test for this, or do some browser detection again, i.e. http://www.concrete5.org/community/forums/installation/need-to-add-...
(I don't approach styling for mobiles with a separate theme, so I'm not 100% sure of the way concrete5 does the detection and swaps the themes - I'm sure someone can comment in more detail about how to handle this)
Yeah, I was thinking something like that, but it starts to get beyond my skillset.
I designed the site as a desktop-first site (analytics said the mobile audience was very small). But I think this might is a fun exercise, and I've done separate mobile themes in the past with success. Plus its an excuse to play with JQM.
I designed the site as a desktop-first site (analytics said the mobile audience was very small). But I think this might is a fun exercise, and I've done separate mobile themes in the past with success. Plus its an excuse to play with JQM.
I'd perhaps suggest looking at a more general responsive CSS framework, like Bootstrap Twitter, Foundation, Gumby, or something more bare-bones like Skeleton. In these cases you'd probably still need to do a fair bit of work to make them work well for your site.
Keep in mind that the marketplace has lots of these CSS framework driven themes, where devs have already solved the problems you may face (Bootstrap by Hostco looks pretty impressive for example and has lots of block templates ready to go). You could even just find a mobile responsive theme and use that for your mobile interface.
Just wanting to save you from a world of pain.