Changing the Font colours

Printable View

04-17-2008, 01:40 PM
Irianna

Changing the Font colours

Hello,
First time poster, long time reader.

Currently have the following code on a .asp page, its to show dates once somone selects the course they want on a booking form:

PHP Code:

</script> <script language="JavaScript1.2" fptype="dynamicanimation" src="../animate.js"> </script> <script type="text/javascript"> function setOptions(chosen) { var selbox = document.FrontPage_Form1.date; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); } if (chosen == "AIM (8.30 am - 4.30 pm)") { selbox.options[selbox.options.length] = new Option('4 July 2008','4 July 2008'); selbox.options[selbox.options.length] = new Option('7 July 2008 - 5 places only','7 July 2008 - 5 places only'); selbox.options[selbox.options.length] = new Option('22 July 2008','22 July 2008'); selbox.options[selbox.options.length] = new Option('28 July 2008','28 July 2008');

it goes on a lot futher, but I would like to be able to find away of putting the words FULL, in red bold font at the end of one of the dates,
For Example: 22 July 2008 - FULL
but all it does is show the code in the drop down box instead of coloured text

Could anyone help?

Thanks, Irianna
04-21-2008, 02:39 AM
alexk13

I too am a long time reader, first time post, but I do know a thing or 2 about ASP

In a select menu, you can not change the style of individual words

what you can do is change the style of the option completely, and it will only affect that one option

what I would suggest is change it's backgroud-color, font style and weight, and maybe the color:

Code:

style="background-color:#FF0000; font-style:italic; font-weight:bold; color:#CCCCCC;"

If you can not figure out where in your code to put this, post some more code, and I'll try to help some more.

Alex
04-21-2008, 08:05 AM
Irianna

Hi,

Thanks for your reply
That didnt seem to work, no matter where i put it
here is a little more of the code:

Code:

<html> <head> <title>Training booking form</title> <link rel="stylesheet" href="../style.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> A:link { color:#990000; text-decoration: none } A:visited { color:#990000; text-decoration: none } A:hover { color:#990000; text-decoration: underline } </style> <link rel="stylesheet" href="../style.css" type="text/css"> <link rel="stylesheet" href="../style.css" type="text/css"> <script language="JavaScript" fptype="dynamicanimation">  </script> <script language="JavaScript1.2" fptype="dynamicanimation" src="../animate.js"> </script> <script type="text/javascript"> function setOptions(chosen) { var selbox = document.FrontPage_Form1.date; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); } if (chosen == "AIM (8.30 am - 4.30 pm)") { selbox.options[selbox.options.length] = new Option('4 July 2008','4 July 2008'); selbox.options[selbox.options.length] = new Option('7 July 2008 - 5 places only','7 July 2008 - 5 places only'); selbox.options[selbox.options.length] = new Option('22 July 2008','22 July 2008'); selbox.options[selbox.options.length] = new Option('28 July 2008','28 July 2008'); selbox.options[selbox.options.length] = new Option('8 August 2008','8 August 2008'); selbox.options[selbox.options.length] = new Option('29 August 2008','29 August 2008'); selbox.options[selbox.options.length] = new Option('1 September 2008 - 5 places only','1 September 2008 - 5 places only'); selbox.options[selbox.options.length] = new Option('16 September 2008','16 September 2008'); selbox.options[selbox.options.length] = new Option('17 September 2008','17 September 2008'); selbox.options[selbox.options.length] = new Option('26 September 2008','26 September 2008'); selbox.options[selbox.options.length] = new Option('2 October 2008','2 October 2008'); selbox.options[selbox.options.length] = new Option('10 October 2008','10 October 2008'); selbox.options[selbox.options.length] = new Option('21 October 2008','21 October 2008'); selbox.options[selbox.options.length] = new Option('29 October 2008','29 October 2008'); selbox.options[selbox.options.length] = new Option('3 November 2008 - 5 places only','3 November 2008 - 5 places only'); selbox.options[selbox.options.length] = new Option('13 November 2008','13 November 2008'); selbox.options[selbox.options.length] = new Option('26 November 2008','26 November 2008'); selbox.options[selbox.options.length] = new Option('4 December 2008','4 December 2008'); } if (chosen == "Instructors' Days") { selbox.options[selbox.options.length] = new Option('AIM 31 July 2008','AIM - 31 July 2008'); selbox.options[selbox.options.length] = new Option('ILS 3 October 2008','ILS - 3 October 2008'); } if (chosen == "AIM/ILS (Medical Students Only)") { selbox.options[selbox.options.length] = new Option('AIM - 7 July 2008','AIM - 7 July 2008'); selbox.options[selbox.options.length] = new Option('AIM - 1 September 2008','AIM - 1 September 2008'); selbox.options[selbox.options.length] = new Option('AIM - 3 November 2008','AIM - 3 November 2008'); selbox.options[selbox.options.length] = new Option('ILS - 8 July 2008','ILS - 8 July 2008'); selbox.options[selbox.options.length] = new Option('ILS - 2 September 2008','ILS - 2 September 2008'); selbox.options[selbox.options.length] = new Option('ILS - 4 November 2008','ILS - 4 November 2008'); }

Any more advice anyone has would be great!

Thanks in advance
04-22-2008, 11:51 PM
alexk13

Sorry for the delay

Your code looks more like Javascript client side code than ASP Server Side code, so I'm afraid that is about it for me - unfortunately I'm no where near as good with Javascript as I am with ASP vbScript.

Sorry :(

Anyone else have a clue on this one?
04-23-2008, 01:59 PM
Irianna

Hi,
Thanks for all the help, I managed to find the answer though:

Code:

selbox.options[selbox.options.length-1].style.backgroundColor = "#CC3300"; selbox.options[selbox.options.length-1].style.color = "#FFFFFF";

So for example:

Code:

} if (chosen == "AIM/ILS (Medical Students Only)") { selbox.options[selbox.options.length] = new Option('AIM - 7 July 2008','AIM - 7 July 2008'); selbox.options[selbox.options.length] = new Option('AIM - 1 September 2008','AIM - 1 September 2008'); selbox.options[selbox.options.length-1].style.backgroundColor = "#CC3300"; selbox.options[selbox.options.length-1].style.color = "#FFFFFF"; selbox.options[selbox.options.length] = new Option('AIM - 3 November 2008','AIM - 3 November 2008'); selbox.options[selbox.options.length] = new Option('ILS - 8 July 2008','ILS - 8 July 2008'); selbox.options[selbox.options.length] = new Option('ILS - 2 September 2008','ILS - 2 September 2008'); selbox.options[selbox.options.length] = new Option('ILS - 4 November 2008','ILS - 4 November 2008'); }