 | |
| ayi_102 | Jan 12th, 2009 8:03 pm | |
| change font type, font color, font size and bacground color in listbox
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 |
| sillyboy | Jan 12th, 2009 10:41 pm | |
| Re: change font type, font color, font size and bacground color in listbox
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. |
| ayi_102 | Jan 12th, 2009 10:51 pm | |
| Re: change font type, font color, font size and bacground color in listbox
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) |
| sillyboy | Jan 12th, 2009 10:54 pm | |
| Re: change font type, font color, font size and bacground color in listbox
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. |
| essential | Jan 13th, 2009 4:03 am | |
| Re: change font type, font color, font size and bacground color in listbox
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™" />
</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> |
| ayi_102 | Jan 13th, 2009 4:04 pm | |
| Re: change font type, font color, font size and bacground color in listbox
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 |
| essential | Jan 13th, 2009 9:36 pm | |
| Re: change font type, font color, font size and bacground color in listbox
But its working fine with me! What's your browser? |
| ayi_102 | Jan 13th, 2009 9:44 pm | |
| Re: change font type, font color, font size and bacground color in listbox
internet explorer 7
well thank you for your help anyway
i try to modify it |
| All times are GMT -4. The time now is 3:26 pm. | |
Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2009 DaniWeb® LLC