Log in

View Full Version : Changing the Font colours


Irianna
04-17-2008, 01:40 PM
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:



</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
alexk13
04-21-2008, 02:39 AM
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:


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
Irianna
04-21-2008, 08:05 AM
Hi,

Thanks for your reply
That didnt seem to work, no matter where i put it
here is a little more of the 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">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</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
alexk13
04-22-2008, 11:51 PM
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?
Irianna
04-23-2008, 01:59 PM
Hi,
Thanks for all the help, I managed to find the answer though:



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

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



So for example:


}
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');
}