Welcome to the MetaMod and Chameleon Support Forums.

Before posting, please check out the FAQs.



Need extra help with your Joomla site? Consider paid Joomla support by the developer of Chameleon and MetaMod.


mediaqueries with metamod chameleon

mediaqueries with metamod chameleon


i don't test metamod and chameleon so what i write could have  non sense .

a- i test many responsive design and focus on menu . Some RWD use 2 menu that are load in the client side .If we use small phone screen width , the menu ( desktop) is hidden and the menu for mobile is show. For manage menu different javascript code is use for  manage each menu . Does metadmod  chameleon can be use for send ( select) different  menu ( module ? and so css js ) refer to information send by client and store in cookies ( i think of speed , resolution screen,  width of screen only ) .

  b-in a way a different css or js can be the only thing to use if  the html  structure of  menu don't change ( this can be manage by media queries ) . In this cases does metamod or chameleon can manage this ( change toggle css js file only )  to load the specific data instead all the data that ll nt be use for the specific width screen device ? .

c- Does the css js files that are store in external file but manage by  the module and metamod chameleon can be still minimize concat with a joomla extension like JCH optimize   joomla extension ?

d- Since user agent  can return false information , does metamod chamelon integrate functionnalities implemented in project like mobile ok pythia plug in

thank's for any feedback .


Beginner Modder
1 Posts
Administrator has disabled public posting

Re: mediaqueries with metamod chameleon

Hi "selfish",

thanks for your questions - they are good and relevant questions, and lots of people want to solve these sorts of problems that they encounter with RWD.

I have done some preliminary work trying to integrate WURFL with Chameleon, but this is neither complete nor part of the shipping Chameleon version.

The big challenge for any server-side tool like Chameleon to help with RWD is the "first page" problem. Because things like window size can only be determined client-side with JS, the first page that you serve will not already know about the window size - it can't until the first page "reports back" either via a cookie sent with the 2nd page request, or via AJAX. So the only way to determine some basic device characteristics for the 1st served page to a client is via a lookup tool like WURFL. These depend almost entirely on user agent, but that of course can be spoofed. Personally I don't think spoofing is a huge problem. If people mess with their UA and this messes up the site for them then that's their problem. It's not generally a security issue.

Anyway, the 1st page problem means that you can't get the screen resolution for the 1st page unless you send a quick "fake" first page that runs some JS, sets a cookie, and redirects to the true front page. I've never been keen on that idea, mostly because of what happens for browsers with no JS or no cookies. You would have to be so careful handling those so that they don't get stuck in a redirect loop, or don't keep getting sent the fake page for every single page request they make. (this would happen since there's no way for the server to distinguish between a client that's arriving for the first time and has no cookie set, and a client that has already been accessing the site but has JS or cookies disabled).

Chameleon has some basic but effective browser/client detection built in. I've integrated something called Categorizr that takes a mobile-first approach to browser detection and is reasonably accurate at classifying clients as mobile, tablet, desktop or tv.

Using this functionality you an get Chameleon to do various things that you have asked about.

In answer to your questions then:
a - Chameleon itself doesn't deal with modules, but MetaMod does. It can use Categorizr results to load a different menu module depending on whether the client is mobile or not, for example. Also if you have set any cookies client-side then you could read them in MetaMod and use that as a basis for switching.

Note that many Joomla templates don't use menu modules for the main menu, but instead do their own menu processing. In that case neither MetaMod nor Chameleon will help you, and you'd have to work with the coding in the template itself.

If all you need to do to change the menu style is to change the JS/CSS used, then Chameleon can be used for that. Chameleon is able to add JS/CSS directly or via file reference to the <head> of the document and could do this based on mobile detection or cookies, whatever you like. A new feature due in the next version of Chameleon also allows regex search and replace on the page HTML, so could be used for removing or changing existing CSS/JS imports on the page.

b - Yes, see last paragraph. Chameleon would handle this nicely based on generic mobile detection and/or cookied information.

c - Yes, Chameleon can add a new file import for JS/CSS rather than including the JS/CSS directly in the head section. This means that JCH optimise should still be able to do its thing.

d - see discussion above about WURFL etc.

I hope that helps,

Stephen Brandon
MetaMod / Chameleon developer
If you use MetaMod or Chameleon, please post a rating and a review at the Joomla! Extensions Directory: Chameleon | MetaMod

3330 Posts
User info in posts
Administrator has disabled public posting

Board Info

Board Stats:
Total Topics:
Total Polls:
Total Posts:
Total Posts Today:
User Info:
Total Users:
Newest User:
Members Online:
Guests Online:


Forum Legend:

 New Sticky