Skip to content

Instantly share code, notes, and snippets.

@agustibr
Last active December 17, 2015 00:39
Show Gist options
  • Save agustibr/5522533 to your computer and use it in GitHub Desktop.
Save agustibr/5522533 to your computer and use it in GitHub Desktop.
Stylesheet toggler
<!doctype html>
<html lang="en">
<head>
<title>Stylesheet toggler</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/one.css" title="one">
<link rel="stylesheet" type="text/css" href="css/two.css" title="two">
</head>
<body>
<p>Version: <a href="#" rel="one" class="styleswitch">1</a> | <a href="#" rel="two" class="styleswitch">2</a></p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/switcher.js"></script>
<script type="text/javascript">
$(function() {
$.stylesheetInit();
$('.styleswitch').bind('click',function(e) {
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
});
});
</script>
</body>
</html>
// a stylesheet toggle from: https://github.com/Jinksi/Browser-Style-Tile-Template/blob/master/js/switcher.js
// Adapted from: http://www.kelvinluck.com/assets/jquery/styleswitch/toggle.html (extensively modified)
/**
* Stylesheet toggle variation on styleswitch stylesheet switcher.
* Built on jQuery.
* Under an CC Attribution, Share Alike License.
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($) {
// What's up?
var availableStylesheets = [];
var activeStylesheetIndex = 0;
// Switcheroo.
$.stylesheetSwitch = function(styleName)
{
$('link[@rel*=style][title]').each(
function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) {
this.disabled = false;
activeStylesheetIndex = i;
}
}
);
};
// That's what's up.
$.stylesheetInit = function()
{
$('link[rel*=style][title]').each(
function(i)
{
availableStylesheets.push(this.getAttribute('title'));
}
);
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment