View Full Version : Combining styles on Style Sheet Switcher

12-04-2012, 08:35 AM
1) Script Title: Style Sheet Switcher (v1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

3) Describe problem: I was wondering if the Style Sheet Switcher be able to combine styles, so let's say i have a style set for colors and a style set for patterns each of the set have 10 selections. What i want to happen is that when i click the yellow from the colors set and concrete from patterns set i want them to be applied at the same time. My problem is that when i clicked the yellow the pattern resets to default instead of combining them.

This one is a good example of what im talking about: syrup.zicedemo.com/

12-12-2012, 06:14 AM
The site you linked to's code is obfuscated. So it's hard to say with certainty how they're doing it. It looks like they're using the DD Style Switcher script. They do have its code associated with the page. I think they're only using it for the color schemes, using other code to change background image.

I have a jQuery based style switcher I'm working on. It's in beta, but it's stable and can handle as many groups of alternate stylesheets as you like with as many sheets as you want in each group. Here's a pretty basic demo:


Use your browser's View Source to get its fairly well documented code. It has three groups of alternate stylesheets with 4 sheets each in two of them and 3 in the other group. Each group works independently from the others. The script is (right click and 'Save As'):


It requires jQuery 1.7 or later. I'm using 1.8.3.

12-12-2012, 10:51 AM
Good stuff John!

So many possibilities with the school sites I work on :)

Will this go onto the official DD script listings or shall I takle a copy now before it disappears into the ether?

12-12-2012, 05:02 PM
Thanks Beverleyh!

I intend to submit it to DD and it will probably be picked up. But I will be updating the beta in the meantime. In fact I just updated it to use a less generic class name ('active' becomes 'activeStylesheetTrigger') to designate the active triggers (changes to main.css, script code on the demo page and in the script) and to make more of the code publicly accessible via extending more elements of it to the main function. It had the main function and the findIndexes function. The cookie unit and aggregate jQuery alternate stylesheet object were added making a "Reset All" function more feasible. That's added on the demo page for a button that appears there now, but I will make it part of the main script as a configurable option. It also opens up possibilities for the designer using this script to perhaps do other things. I want to add the option to further customize what happens when a trigger is activated, and perhaps create code for common scenarios like radios (which now is a custom job on the demo page) and select elements, others if I can think of them. These would probably be called into play via trigger element detection, with the option of being overridden via customization of the initialization options for that instance.

So I would say for now, grab it. Check back for updates. But as I might not be keeping an update trail of the betas, you might want to in case you get an unstable version or decide you like an earlier version for some other reason.

If you (or anyone other than the person who started this thread) want to continue this discussion (general comments on this script), please open a new thread in the javascript forum on it so as not to distract too much from the original question in this thread. And please refer back to this thread.

In fact, I will probably be doing that soon for public comment on this script, at which point I will move this post and yours over to there.