Question

I’m having an issue trying to figure out how to add a ‘view full site’ link to a mobile version of a site. The mobile version is a limited version of the site and I’d like users to have the option of clicking a link and viewing the full site. This is the best compromise I can come up with as the site is old and I can’t rebuild it for responsiveness. The mobile stylesheet has all the mobile styles wrapped in a media query based on device width.

So, I know I can remove a stylesheet with something like:

$('link[rel=stylesheet]').remove();

But how do I specify a specific stylesheet? Can I add an ID to the mobile stylesheet and target that? How would I trigger this from a link?

The mobile style sheet is:

<link rel="stylesheet" media="screen" type="text/css" href="/scripts/small_devices.css" />

Also, any tips on preserving this state via a cookie? I’m totally baffled by this for some reason.

Any tips appreciated!

Thanks.

Answer 1

OK – I think I’ve figured this out:

I added an ID to the mobile style like so:

<link rel="stylesheet" media="screen" type="text/css" id="mobileSheet" href="small_devices.css" />

And then added the fallowing script and html:

$(document).ready(function () {
$("#removeStyle").click(function () {                           
    jQuery('#mobileSheet').remove();
    });
});

<p id="removeStyle">View Full Site</p>

This seems to work OK. I’m still not sure how to drop a cookie to preserve this state – but at least this is the answer to the first part of my question.