Skip to content

Instantly share code, notes, and snippets.

@flashadvocate

flashadvocate/index.html

Forked from pixeline/index.html
Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flashadvocate/52377fd21eb19e98d73b to your computer and use it in GitHub Desktop.
Save flashadvocate/52377fd21eb19e98d73b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<link rel="stylesheet" title="main" href="normalize.min.css" type="text/css">
<link rel="stylesheet" title="main" href="main.css" type="text/css">
<link rel="alternate stylesheet" title="red" href="red.css" type="text/css">
<link rel="alternate stylesheet" title="blue" href="blue.css" type="text/css">
</head>
<body>
<p>Hello World</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="stylesheet-switcher.js"></script>
</body>
</html>
Raw
stylesheet-switcher.js
// STYLESHEET SWITCHER
(function($)
{
// All Alternate stylesheets Selector
var $links = $('link[rel*=alternate][title]');
$('body').prepend('<div id="toolbar"><select id="css-selector"></select></div>');
var options= '<option value="">Select stylesheet:</option>';
$links.each(function(index,value){
options +='<option value="'+$(this).attr('href')+'">'+$(this).attr('title')+'</option>';
});
$links.remove();
$('#css-selector').append(options)
.bind('change',function(){
$('link[rel*=jquery]').remove();
$('head').append('<link rel="stylesheet jquery" href="'+$(this).val()+'" type="text/css" />');
});
}
)(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment