Dynamic template switcher based on user selection |
[eluser]Unknown[/eluser]
Hello guys I just developed 2 templates for my custom CI CMS and I use user agent library to choose template based on device of the visitor like Code: $this->load->library('user_agent'); Code: if($this->agent->is_mobile()){ So far everything works fine but I want the visitor to switch template ( back and forth ) if he/she is browsing the site on mobile device. I can't wrap my head around this I want to do it like Code: < a href="www.mysite.com?template=desktop">Desktop Version</a> or Please help! Thanks!
[eluser]Richard Testani[/eluser]
You can either handle it the way you are suggesting and test for device, or simply use CSS Media Queries: http://css-tricks.com/resolution-specific-stylesheets/ The latter responds to the size of your screen and you can potentially restyle the entire page. If you have a need to load two separate templates, then instead of on or off, maybe: <?php $template = 'desktop'; if($this->agent->is_mobile()){ $template = 'mobile'; } $this->load->view($template, $data); ?>
[eluser]Unknown[/eluser]
Thanks Richard. As I mentioned above I already did that. All I need is to make user to be able to switch between both templates by clicking a button or link? I might need to store a cookie about user preference? I've no clue how to do that.
[eluser]Richard Testani[/eluser]
I guess I replied as I did because I questioned why a user might want to switch out desktop and mobile versions. From a user standpoint they most likely don't want to have to choose. You are really best handling this with media query styles, since styles can be updated as a change occurs in the browser - namely size of the screen. With that said, you can switch out content or styles on the fly with a little bit of jQuery then if you want the keep the state persistent, a session or cookie could take care of this. Here's a simple example I threw together: http://jsfiddle.net/Y5AMU/ While I included the template in the html, it could be a separate view and loaded with ajax. Hope this gives you some direction. |
Welcome Guest, Not a member yet? Register Sign In |