I have been following the Kevin Luck example of the javascript css switcher. http://www.kelvinluck.com/assets/jquery/styleswitch/index.html
I got it to work on my local projects. My problem / question is, when I use the old javascript Kevin Luck uses, it works. When I try to update the jQuery version, it will break. How can I update this example to use the newest 1.10.2 jQuery?
The index page looks like this (relevant part)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Public Identity</title>
<link rel="stylesheet" type="text/css" href="css/collegeStyles.css" title="college" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/corporateStyles.css" title="corporate" media="screen" />
<!-- Google CDN jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!-- // <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->
<!-- css style switcher -->
<script type="text/javascript" src="styleswitch.js"></script>
jQuery (styleswitcher.js) looks like this
/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
})(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
// /cookie functions
The only relevant css is the style sheet names, which are referred to as college and corporate. You can see them in the php / html code above. I'm pretty confused as to why this would break, and am not sure how to fix. Any ideas would be really helpful. Thanks!
