Last active
May 26, 2019 03:44
-
-
Save pixeline/8248531 to your computer and use it in GitHub Desktop.
Simple way to implement a stylesheet switcher, using jquery and proper html.
Add your stylesheets to your <head> tag:
<link rel="alternate stylesheet" title="red" href="css/red.css" type="text/css">
Include the jquery stylesheet switcher. Done.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
Just a suggestion I haven't actually tested the code but am just wondering there's no option to switch the style sheet.. For instance input type ="button" value ="theme" onclick=" switchFunction();"
where the switchFucntion(); would enable you to switch the alternative css. From glancing through I notice only hello world on the page. nothing else. May be am mistaken somewhere?