Welcome to the MetaMod and Chameleon Support Forums.

Before posting, please check out the FAQs.

helpme

 

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

 

Change template when using mobile devices or small resolution

Change template when using mobile devices or small resolution

Hi,

Can anyone help me how I can setup Chameleon? I want to change template when using mobile devices or below a certain resolution. I'm not a coder, so I hope this will be possible in the settings of my purchased Chameleon and without all sort of PHP coding.

regards,
Wouter

wassie
Beginner Modder
ranks
useravatar
Offline
2 Posts
Administrator has disabled public posting

Re: Change template when using mobile devices or small resolution

Hi Wouter,

the answer is mostly "no" to this, although it may be possible. Let me explain.

When the browser sends through a request to the server, it does not contain the screen resolution. The server cannot know this from the request alone, ESPECIALLY on the very first request that it receives from a browser.

What you can do for requests AFTER the first request, is to put a snippet of JS on the page (you can put it in your template or perhaps on a module assigned to every page) that puts the resolution into a cookie. Then subsequent page requests will send this information through to the server.

Then it's pretty easy in Chameleon to use a snippet of PHP to check the value of that cookie and return a true or false value to test it and make the rule succeed or fail (and hence change template).

e.g. in the PHP box in Chameleon:

if (@$_COOKIE['xresolution'] != '' and @$_COOKIE['xresolution'] < 200) return true;
else return false;

Of course you need to have already set that particular cookie using JS. You can google for how to do that.

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

metamodguy
useravatar
Offline
3312 Posts
User info in posts
Administrator has disabled public posting

Re: Change template when using mobile devices or small resolution

thank you for your quick reply! Great service!

If I understand it right, I really need some coding to do. JS isn't my cup of tea. I have a little knowledge of PHP. But I find it very difficult to use Chameleon. I was excspeting a easy to use module, but so far I don't think it is.
I also know that within responsive webdesign, css is working with media queries. Within css there is no need to communicate with the server first. Why isn't that possible within Chameleon?

wassie
Beginner Modder
ranks
useravatar
Offline
2 Posts
Administrator has disabled public posting

Re: Change template when using mobile devices or small resolution

wassie wrote:

Why isn't that possible within Chameleon?

That's a good question, and cuts to the heart of why RWD is different to server-side programming.

Chameleon works at server level. It detects things that happen as a result of a request from a client, because it operates on the server and only knows about the client when the client makes a request.

As a result of the request, Joomla (and Chameleon) get told a few things: the IP address of the client, the user agent, the URL of the request, the type of request (GET, POST etc), and the cookies (plus a few extra little things that don't matter so much).

Notably, a web request does not contain info like the size of the window or viewport etc. unless these are in cookies, which means they have to have been set as a result of a PREVIOUS page request. So the 1st request from a client can never contain this information.

Chameleon can act on whatever information it has available from the request or from the server or external sources. As a result of this information it can make changes to the way the page is constructed before it sends the HTML of the page to the client. e.g. it can change the template, remove menu items, remove plugins, or add extra CSS/JS code to the page, among other actions.

This is different to what happens with responsive CSS. With responsive CSS:

- the server receives a request
- the server sends the client a page and/or CSS resources. The CSS is set up allowing for media queries. Using these queries, the client can make decisions about how to render the HTML depending on viewport sizes etc.
- any JS on the page is also able to run once the client has received it, and this can detect certain features and make changes to the page accordingly.

In this case, the JS and CSS has to be generated even on the 1st page request, before the server can know anything about the viewport etc. So it's fairly generic (not catering to a particular viewport size, but usually to a variety of sizes).

I wish that the server was told about the viewport size as part of a general HTTP request... that would make Chameleon able to respond to that information right from the very first request. Unfortunately that's just not possible.

I hope that helps to answer your question. It's all about a limitation in the way that the web works.

Cheers,
Stephen

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

metamodguy
useravatar
Offline
3312 Posts
User info in posts
Administrator has disabled public posting

Board Info

Board Stats:
 
Total Topics:
1666
Total Polls:
6
Total Posts:
5909
Dormant:
User Info:
 
Total Users:
10093
Newest User:
lamanaudio
Members Online:
0
Guests Online:
182

Online: 
There are no members online

Forum Legend:

 Topic
 New
 Locked
 Sticky
 Active
 New/Active
 New/Locked
 New Sticky
 Locked/Active
 Active/Sticky
 Sticky/Locked
 Sticky/Active/Locked