Last week a client of mine asked to have a responsive design in place of their current design, as the site is pretty big and recently built I decided to go adaptive and use mediaqueries to get the desired effect. All was going well until my client asked could we have a “view full site” link that you would see on a mobile site. Not everyone likes responsive and adaptive designs so I could see the clients point of view.
I decided jQuery would be the best way to attack the issue and experimented with several ideas until I came up with this:
function a_onClick() {
jQuery('link[rel=stylesheet][href~="http://example.com/mediaqueries.css"]').remove();
jQuery('meta[name=viewport]').remove();
jQuery('head').prepend('');
}
And for the HTML link to make it happen:
View Full Site
This basically removes the mediaqueries stylesheet and adds a different set of viewport choices when the link is clicked.
I also opted to hide the link on the “desktop” view:
#full {display:none;}
But wanted to show it on the re-sized pages:
#full {display:inline;}
Whilst it was a different kind of request I enjoyed the challenge of working around it (although it was a *slightly* hacky fix…)
If this helps someone out that’s awesome, BUT if someone knows a better way working around this please do feel free to share, if there is a “proper” solution to this I would love to try it out myself!
Nice fix there Paul, although I’d prefer to see the onclick attribute removed from the html, ya’know, to keep js and html separate and all that
You’ve got an id on that link so why not use that to hook on to:
$(function() { $('#full').on('click', function(e) { e.preventDefault(); //your function code here. }); });Maybe you should think about setting a session variable to remember the user’s display preferences between new page loads.
Jay.
@letsallplaygolf
Cheers Jay, I didn’t think about hooking it to the ID.. that’s what frustration does to you it seems
Definitely the next step would be a session variable of sorts! Thanks for the feedback and cleaner suggestion
Where’s the +1 button on this post?!
I keep meaning to add some share buttons
There we go!!! w00t!
Also, I didn’t get an email notification that you replied. Just sayin’.
Slick solution, although as mentioned above, you’d snap back to a responsive design as soon as a link was clicked!
I tried something similar:
http://russellbishop.co.uk/writes/code/responsive-web-design-opt-out/
Yeah that is the case! I did a small cookie and that seems to work a treat! Yours looks great, nice work!