1.11M Members

change font type, font color, font size and bacground color in listbox

 
0
 

Hi

i make list box to change the font type, font color, font size and bacground color in listbox

this is what i made so far

<html>

<head>

<!--Function to do the background color-->
<script language="JavaScript">
var backColor = new Array(); // don't change this
backColor[0] = 'red';
backColor[1] = '#00FF00';
backColor[2] = '#0000FF';
backColor[3] = '#FFFFFF';

function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
</script>

<!--Function to do the font color-->
<script language="JavaScript">
var fontColor = new Array(); // don't change this
fontColor[0] = 'red';
fontColor[1] = '#00FF00';
fontColor[2] = '#0000FF';
fontColor[3] = '#FFFFFF';

function changefont(whichColor){
document.fgColor = fontColor[whichColor];
}
</script>

<!--Function to do the font type-->
<script language="JavaScript">
var fontType = new Array(); // don't change this
fontType[0] = 'Arial';
fontType[1] = 'Verdana';
fontType[2] = 'Tahoma';

function changetype(whichType){
document.fontFamily = fontType[whichColor];
}
</script>


<!--Function to do the font size-->
<script language="JavaScript">
var fontSize = new Array(); // don't change this
fontSize[0] = '12';
fontSize[1] = '14';
fontSize[2] = '16';
fontSize[3] = '18';

function changesize(whichSize){
document.fontWeight = fontSize[whichSize];
}
</script>






</head>

<body>

<form>

<center>

<!--<option value ="">Backgroun Color</option>-->
<select OnClick="location.href=this.options[this.selectedIndex].value">
<option value = "javascript:changeBG(0);">Red 
<option value = "javascript:changeBG(1);">Green
<option value = "javascript:changeBG(2);">Blue
<option value = "javascript:changeBG(3);"> White 
</select>

<!--<option value ="">Font Color</option>-->
<select OnClick="document.href=this.options[this.selectedIndex].value">
<option value = "javascript:changefont(0);">Red Font
<option value = "javascript:changefont(1);">Green Font
<option value = "javascript:changefont(2);">Blue Font
<option value = "javascript:changefont(3);">White Font
</select>

<!--<option value ="">Font Size</option>-->
<select OnClick="document.href=this.options[this.selectedIndex].value">
<option value = "javascript:changetype(0);">Arial
<option value = "javascript:changetype(1);">Verdana
<option value = "javascript:changetype(2);">Tahoma
</select>

<!--<option value ="">Font Type</option>-->
<select OnClick="document.href=this.options[this.selectedIndex].value">
<option value = "javascript:changesize(0);">12
<option value = "javascript:changesize(1);">14
<option value = "javascript:changesize(2);">16
<option value = "javascript:changesize(3);">18
</select>





</br>
BLA BLA BLA test font




<input type=button value="Go!" onClick="javascript:changeBG(this)">

</form>

</body>

</html>

the only one that works just the background color

can u guys help me with this?

thank you

 
0
 

well since background works, why not use the same location.href? You are also making use of deprecated code, you might want to rethink how you are changing the properties.

 
0
 

it is not working
i can change the font type using button click
but i cannot use combo box

<a onClick=document.getElementById('hey').style.fontFamily='verdana'> Make it VERDANA!!!</a>

this code change the text with <body id=hey>

and then the text inside body change

but i cannot get the font style into the combobox(listbox)

 
0
 

what makes you think there is such a thing as document.fontFamily?
as I said, make sure you are using up-to-date and correct properties.

 
0
 

You can try this one...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <title>Demo</title>
      <style type="text/css">
/* <![CDATA[ */
html, body {
   min-width: 800px;
   max-width: 1024px;
   width: auto;
}

body {
   background-color: #fff;
   color: #000;
   font: 80% Arial, sans-serif;
   text-align: center;
}

div { border: 0; margin: 0; padding: 0; }

body #wrapper {
   margin: 0 auto;
   max-width: 1000px;
   width: 100%;
}

div #tube {
   background-color: #FF4500;
   color: #000;
   clear: both;
   float: left;
   border: 1px solid #000;
   position: relative;
}

div #l-side {
   background-color: #F80;
   color: #000;
   float: left;
   width: 25%;
}

div #rside {
   float: right;
   width: 75%;
}

div.pad {
   margin: 0 auto;
   padding-left: 1em; 
   position: relative;
   text-align: left;
}
div select { width: 93%;  }
/* ]]> */
      </style>
      <script type="text/javascript">
/* <![CDATA[ */

function bg(colour) {
layout = document.getElementsByTagName('div');
layout['tube'].style.backgroundColor = colour;
}

function fc(colour) {
layout['tube'].style.color = colour;
}

function cf(thisSize) {
document.body.style.fontSize = thisSize;
}

function ff(thisAttribute) {
document.body.setAttribute('style',thisAttribute);
}
function demo() {
var form = document.forms['frm'];   
var opt = form.lst.options;

switch(form.lst.selectedIndex)
{ 
case 0 : bg(opt[0].value); break;
case 1 : bg(opt[1].value); break;
case 2 : fc(opt[2].value); break;
case 3 : fc(opt[3].value); break; 
case 4 : cf(opt[4].value); break;
case 5 : cf(opt[5].value); break;
case 6 : ff(opt[6].value); break;
case 7 : ff(opt[7].value); break;
  default : alert('And Now We\'re done!'); }

}

document.onchange = demo;
/* ]]> */
</script>
   <link rev="start" href="./" title="Essential's Demo&#8482;" />
   </head>
   <body>
      <div id="wrapper">
         <div id="tube">
            <div id="l-side">
               <div class="pad">
                  <form action="javascript:void(0);" id="frm">
                     <div>
                        <select name="lst" size="1">
                           
<optgroup  label="Background Color">
                              <option value="#F40" selected="selected">Red</option>
                              <option value="#F80">Orange</option>

</optgroup>                  
                           
<optgroup  label="Font Color">
                              <option value="#000">Black</option>
                              <option value="#FFF">White</option>

</optgroup>                  

<optgroup  label="Font Size">
                              <option value="80%">80% percent</option>
                              <option value="160%">160% percent</option>

</optgroup>                  
                           
<optgroup  label="Font Family">
                              <option value="font-family:'Trebuchet MS'">Trebuchet MS</option>
                             <option value="font-family:Verdana">Verdana</option>

</optgroup>                  
                           
                                                                     
                        </select>
                     </div>
                  </form>
               </div>
            </div>
            <div id="rside">
               <div class="pad">
                  <h3>JavaScript Demo</h3>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
 
0
 

to essential

the code you gave me is not working

it does not change the background and the font

i try to put text under div id="tube" but nothing happened

can you help me please

thank you

 
1
 

But its working fine with me! What's your browser?

 
0
 

internet explorer 7

well thank you for your help anyway

i try to modify it

Question Answered as of 5 Years Ago by sillyboy and essential
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article