Quick Tip: How to Create a Theme-Switcher in 200 Seconds
Have you ever seen sites that offer some kind of “color-switcher” within the header section? Want to know how easy it is to replicate? I’ll show you in 200 seconds, using jQuery.
The Screencast
Granted, this is a very simple example. What more do you expect in 200 seconds! But, this can easily be extended to import new stylesheets, if you wish.
The Final jQuery
var colorOptions = 'black, blue, orange, red, green'.split(', '), colorDivs = [], colorsContainer = $('#colorsContainer'); for ( var i = 0, len = colorOptions.length; i < len; i++ ) { var div = $(' ').css('background', colorOptions[i])[0]; colorDivs.push(div); } colorsContainer.append(colorDivs); $('#header').hover(function() { colorsContainer .fadeIn(200) .children('div') .hover(function() { $('h2').css('color', $(this).css('backgroundColor')); }); }, function() { colorsContainer.fadeOut(200); });
Conclusion
I had to zoom through this screencast, so feel free to discuss/ask questions in the comments! I hope you enjoyed it! Are you liking the “two-a-week” quick tips that all of the Tuts sites are now doing?
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.