Question

I have seen many css switchers which place a button allowing the user to change styles to suit their taste. I am looking for a similar solution that I have not yet found.

This is the closest: http://net.tutsplus.com/demos/03_jQueryStyleSwitcher/demo/index.php#

I want my page to fade from one style sheet to the next every x seconds, so css completely changes every x seconds. I want to do it in jquery for simplicity and some nice transitions. Again, I want this to happen AUTOMATICALLY, without the click of any button. Anybody see any code out there that can do this?

Answer 1

You could scavenge the code that actually loads the stylesheet and trigger it from a setInterval call instead of a button click. You’d need to supply the url for the stylesheet. This could be stored in a javascript array and you could simply rotate through the elements of the array (or pick one randomly) in the function triggered by the interval timer. You’d then advance the index (mod array size) to get the next style to display.

var styles = [ '/example.com/css/style1.css', '/example.com/css/style2.css' ];
var currentStyle = 0;

setInterval( function() {
       currentStyle = (currentStyle + 1) % styles.length;
       loadStylesheet( currentStyle );
}, 5000 );

Update: I spent some time today converting the example into a plugin that works for me with a select. You can find the code on my blog, http://farm-fresh-code.blogspot.com/2009/08/jquery-theme-manager-plugin.html. Here’s how I would probably proceed to use it. This would work with theme1.css, theme2.css, etc. That is styles at the urls: /example.com/styles/theme1.css, …

Script:

var currentTheme = 0;
var themes = $('.theme');
themes.retheme({
   baseUrl: '/example.com/styles',
   loadingImg: '/example.com/images/image.gif'
});

setInterval( function() {
    currentTheme = (currentTheme + 1) % themes.length;
    themes.eq(currentTheme).trigger('click');
});

Html:

<input type='hidden' class='theme' value='theme1' />
<input type='hidden' class='theme' value='theme2' />
<input type='hidden' class='theme' value='theme3' />

Demo:

A demo of the code using both a select and links can be found at http://myweb.uiowa.edu/timv/retheme-demo.