View Full Version : css and the select tag

12-12-2006, 07:49 PM
I am needing to get it so that I have a "main" css file, the two other files that are based off of options that the user picks. The user will pick them using the
select html tag. Here is a very small example of what it is I am trying to do....
NOTICE: I gave you a example html page and 3 different css files ( the maincss.css, bgblack.css, and textwhite.css) so you can see what are would be in them files....

<link rel="stylesheet" type="text/css" href="../maincss.css"/>

<select name="option1" onchange=" ">
<option value="bgblack.css">Black Background
<option value="bgwhite.css">White Background

<select name="option2" onchange=" ">
<option value="textblack.css">Black Text
<option value="textwhite.css">White Text
Blah blah blah....



// NOTE: this is the only thing what would be in this file
p; span {
background-color: black


p; span {
font-color: black


p.chapter {
text-transform: uppercase;
text-align: center;
font-size: 150%;

p.name {
font-size: 130%;
text-align: center

p.read {
font-style: italic;
font-size: 85%

p;span {
text-align: left;
font-size: 100%;
font-style: normal;
text-indent: .75cm

span.i {
font-style: italic

span.b {
font-style: bold

12-13-2006, 06:13 AM

12-13-2006, 01:34 PM
Thanks for that link I got it almost working just like i need it to. I do have one question though how would you make it so you can have 3 select elements?

I need one element so the user can pick the background color, one for the text color, and the last element for the font. Now I got it so I can set the background color, then go to set the text color, now the text is what I pick but the background color went back to the defalt (white).

Now I pick the font, and the font changes but the text color goes back to the defalt (black). After looking at the js file what I think it is doing is when I pick from "element 1" it clears the cookie then writes my choice. Then when I go to set "element 2" it clears the cookie then writes my choice.

I think the cookie needs to have the ability to have multiple "alternate stylesheet sets". Or a different cookie for each of the elements (background, text, and font).

But my js skills are very low and I got know idea where to even start....

12-13-2006, 03:16 PM
OK, well how we go here will depend upon how much javascript experience you have. I will start by assuming that you have a fair amount. Let me know if I am wrong about that. Anyways, the script works by enabling and disabling certain alternate stylesheets. You could have each select run slightly different functions patterned on the main one from this script, functions that only dealt with the stylesheets for their particular type of styling, be it text, background, or whatever.

BUT, big but - do you really want someone to be able to have black text and black background? Wouldn't it be both easier and more sensible to use the script as it was intended, to switch schemes rather than individual styles?

12-13-2006, 08:36 PM
I have a good working knowledge of HTML and CSS, but only know the basics about javascript. It took me about 2 hours....and a good since of logic...and I got it to work JUST how I need it to. Thanks for the help, and insight man.

BTW next fall I start classes for web design....lol....just trying to get a jump on things you know...

This is how I did it for people that would like to know.....I am sure that other people that know what they are doing (unlike me) could shorten this but hey it works....

Ok I have my links to the css files broke down into 3 "elements"....here are one of each that are in my <head>

Changes: rel=" "

<link rel="stylesheet" type="text/css" href="../../css/maincss.css"/>
<link rel="alternate stylesheet bg" type="text/css" media="screen" title="bgblack" href="../../css/bgblack.css"/>
<link rel="alternate stylesheet font" type="text/css" media="screen" title="fontarial" href="../../css/fontarial.css"/>
<link rel="alternate stylesheet text" type="text/css" media="screen" title="textwhite" href="../../css/textwhite.css"/>

In the <body> I have 3 <select> each one with options that link back the the css files above.

Changes: onchange"chooseStyle...bg..text...font..."

<select name="s0" onchange="chooseStylebg(this.options[this.selectedIndex].value, 60)">
<select name="s1" onchange="chooseStyletext(this.options[this.selectedIndex].value, 60)">
<select name="s2" onchange="chooseStylefont(this.options[this.selectedIndex].value, 60)">

So now I go to the js file and make changes to the "chooseStyle" function. I need to make 3 new functions since I just changed the names in the <select>

Changes: To save space I am only showing the changes for the background. In the code below I put "***" around the parts that I changed.

function ***chooseStylebg***(styletitle, days){
if (document.getElementById){
***setCookiebg***(***"mysheetbg***", styletitle, days)

Now the "setStylesheet" function.

Changes: Same as above

function *****setStylesheetbg*****(title, randomize){
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()==*****"alternate stylesheet bg"***** && cacheobj.getAttribute("title")) {
cacheobj.disabled = true
if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false

Now to "setCookie" function

Changes: Same as above.

function ***setCookiebg***(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";

Now to change the "manual_or_random".

Changes: Same as above.

if (manual_or_random=="manual"){
var ***selectedtitlebg***=getCookie("***mysheetbg***")
if (document.getElementById && ***selectedtitlebg***!=null)

NOTE: I deleted all the "if" and "else if" statements since I have no personal use for that part.

Now I just had to copy and paste ALL the changes that I made to the js file. Then change all the "bg" to "text", then the samething for "font". Now give the user as many options as I want for the background color, text color, and font as I like.

12-13-2006, 10:12 PM
Looks good! You get a gold star. I think the setCookie function could be reused by all the stylesheets as long as the name passed to it were unique to each type of stylesheet being saved. Other than that, as I say, very nice. Having the extra cookie functions will not hurt anything.

12-14-2006, 01:09 PM
I ran into a problem that I did not foresee.....I can not use external js files. I do not want to put that code on to all the pages to save space.

I think that I can take all that code and drop it in to the head tag of a blank html page can just have it make a call to that page when needed. But how would i set it up so it would call?

<select name="s0" onchange="'styleswitcher.html.'chooseStylebg(this.options[this.selectedIndex].value, 60)">
<select name="s1" onchange="'styleswitcher.html.'chooseStyletext(this.options[this.selectedIndex].value, 60)">
<select name="s2" onchange="'styleswitcher.html.'chooseStylefont(this.options[this.selectedIndex].value, 60)">

that does not look right to me at all though......plus when i add all the js to the head tag do I just have to add the script tag around it or is there more that I would have to do to it?

12-14-2006, 04:40 PM
External .js files don't work like that. You need the handy dandy external .js file tutorial, be sure to go over it carefully, if you have more questions, let us know:

Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:

<script src="some.js" type="text/javascript"></script>

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:

<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
</script>and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:



5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:

<script src="some.js" type="text/javascript">
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters without which the script won't function.