1,105,546 Community Members

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

Member Avatar
ayi_102
Light Poster
27 posts since Nov 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
sillyboy
Practically a Master Poster
686 posts since Mar 2007
Reputation Points: 43 [?]
Q&As Helped to Solve: 66 [?]
Skill Endorsements: 0 [?]
 
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.

Member Avatar
ayi_102
Light Poster
27 posts since Nov 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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)

Member Avatar
sillyboy
Practically a Master Poster
686 posts since Mar 2007
Reputation Points: 43 [?]
Q&As Helped to Solve: 66 [?]
Skill Endorsements: 0 [?]
 
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.

Member Avatar
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 84 [?]
Q&As Helped to Solve: 138 [?]
Skill Endorsements: 0 [?]
Featured
 
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>
Member Avatar
ayi_102
Light Poster
27 posts since Nov 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 84 [?]
Q&As Helped to Solve: 138 [?]
Skill Endorsements: 0 [?]
Featured
 
1
 

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

Member Avatar
ayi_102
Light Poster
27 posts since Nov 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

internet explorer 7

well thank you for your help anyway

i try to modify it

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