Publishing System Settings Logout Login Register
How To Make A Funky Website Style Switcher Using jQuery or Moo Tools
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on May 8th, 2011
1573 views
JavaScript

Whats the point in having a style switcher I hear you ask? Well… It helps with user interaction. Adds some uniqueness to your site, allows users to change the looks of the site. The list goes on! Well, today, im going to show you how its done. Its nothing complex so you dont need to worry about failing. OK, Lets Go.

Step 1: Create your seperate stylesheets, and name them whatever you want.

Step 2: now, insert the following code into an html, where you want the style switcher to be:

$(".styleswitch").click(function(){$('link[rel=stylesheet]').attr('href,$(this).attr('rel'));});Dark | 
Light

The above code is all that you need to create a styleswitcher.from the top line, its saying the element with the class of styleswitch, when clicked, will change the stylesheet of the document. The stylesheet is linked on the anchor tags under a “rel” attribute. Thats all to it! Jazzing up your sites could never be easier.

Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
AJ Designs

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top