PDA

View Full Version : Help with Style Sheet Selector



mmmwowmmm
08-30-2006, 03:35 AM
1) Script Title: Style Sheet Switcher (v1.0)

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

3) Describe problem:

I'd like to modify the script so that a user can select multiple stylesheets at once, using radio buttons (or multiple select menus) so that they could choose one alternate stylesheet for the font color, then another for the background, etc., and the page would be using these alternate stylesheets simutaneously. I've tried several things, like changing both instances of:

element.type=="select-one"

to:

element.type=="select-multiple"

but I don't really know what I'm doing, as I'm not a java guy. Is there a way to do this?

Thanks,
Phil

ipuck
08-30-2006, 03:47 AM
I don't think you can do that.

You may want to use a scrip to change the background and another to change the page background. But I don't think you can do both at the same time.

mmmwowmmm
08-30-2006, 05:49 AM
Thanks, ipuck. Why do you think it isn't possible? If I understand it correctly, you are using more than one style sheet at a time anyway:

"The script lets you maintain a primary style sheet on the page that is never disabled while letting the user choose from a list of alternate style sheets to add to the page"

It seems like a small step to include more than one stylesheet - but then, like I said, I don't really know javascript... I was just wondering what you were basing your statement on, so I could have something to go on.

Thanks,
Phil

mwinter
08-30-2006, 02:31 PM
I'd like to modify the script so that a user can select multiple stylesheets at once, using radio buttons (or multiple select menus) so that they could choose one alternate stylesheet for the font color, then another for the background, etc., and the page would be using these alternate stylesheets simutaneously.

You seem to have misunderstood the concept of alternate style sheets: each alternate group is mutually exclusive. That is, by enabling one group, the others are automatically disabled.

The administrator (ddadmin) and I recently discussed this in the thread entitled style switching not work on IE, but works on everything else (http://www.dynamicdrive.com/forums/showthread.php?t=12108).



... I don't really know what I'm doing, as I'm not a java guy.

Good news then: client-side scripting isn't Java! :p

You could still implement your idea using (markup) classes. Rather than using separate style sheet groups, you'd alter the class attribute of the body element and prefix the different theme rules with the classes you create.

Take the following trivial example:



/* Default */
body {
background: #ffffff;
color: #000000;
}
p.warning {
background: transparent;
color: #c00000;
}


/* Inverse scheme */
body.inverse {
background: #000000;
color: #ffffff;
}
.inverse p.warning {
background: #c00000;
color: #ffffff;
}

By adding "inverse" to the class attribute, you can switch the colour scheme.

I'd generally be wary of doing something like this as you might give the user the ability to make very poor combinations, perhaps making the site unreadable and unusable for some users. However, you could also use style sheet switching to provide overall themes, and then add slight variations using class switching (for want of a better expression).

Mike