Advertisement
by Jeffrey Way
Difficulty:IntermediateLength:QuickLanguages:
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 = $('<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.
Advertisement
Weekly email summary
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Advertisement
Translations
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this postPowered by

Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.