I am using this method shown here http://leihu.com/thoughts/e/switching-styles-silently
Here is my head
<link href="default.css" title="common-styles" type="text/css" rel="stylesheet" class="theme">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
And here is my html and script for the stylesheet switcher. While its working to toggle back and fourth between the 2 sheets , on page refresh its not remembering the last stylesheet chosen.
<ul class="themes">
<li><a href="#" rel="default.css">Default</a></li>
<li><a href="#" rel="alternative.css">Alternative</a></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.themes a').on('click',function(){
$('.theme').attr('href',$(this).attr('rel'));
$.cookie('theme-cookie',$(this).attr('rel'), {expires: 365, path: '/', domain: '.mysite.com'});
return false;
});
});
</script>
I have changed mysite.com to my own site ofc , and i think i have done everything correctly but not setting a cookie for some reason.
You forgot to set it when you load the page:
$(document).ready(function(){
// ==============
// theme switcher
// ==============
// load css from cookie!
$(".theme").attr("href", $.cookie('theme-cookie'));
// listen for clicks on the a links within .themes
$('.themes a').on('click',function(){
// change the href of link.theme to match the rel of this
$('.theme').attr('href',$(this).attr('rel'));
// set a cookie to remember
$.cookie('theme-cookie', $(this).attr('rel'), {expires: 365, path: '/', domain: '.nitrografixx.com'});
// prevent this from reloading the browser
return false;
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments