JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

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

 
0
  #1
Jan 12th, 2009
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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2.  
  3. <head>
  4.  
  5. <!--Function to do the background color-->
  6. <script language="JavaScript">
  7. var backColor = new Array(); // don't change this
  8. backColor[0] = 'red';
  9. backColor[1] = '#00FF00';
  10. backColor[2] = '#0000FF';
  11. backColor[3] = '#FFFFFF';
  12.  
  13. function changeBG(whichColor){
  14. document.bgColor = backColor[whichColor];
  15. }
  16. </script>
  17.  
  18. <!--Function to do the font color-->
  19. <script language="JavaScript">
  20. var fontColor = new Array(); // don't change this
  21. fontColor[0] = 'red';
  22. fontColor[1] = '#00FF00';
  23. fontColor[2] = '#0000FF';
  24. fontColor[3] = '#FFFFFF';
  25.  
  26. function changefont(whichColor){
  27. document.fgColor = fontColor[whichColor];
  28. }
  29. </script>
  30.  
  31. <!--Function to do the font type-->
  32. <script language="JavaScript">
  33. var fontType = new Array(); // don't change this
  34. fontType[0] = 'Arial';
  35. fontType[1] = 'Verdana';
  36. fontType[2] = 'Tahoma';
  37.  
  38. function changetype(whichType){
  39. document.fontFamily = fontType[whichColor];
  40. }
  41. </script>
  42.  
  43.  
  44. <!--Function to do the font size-->
  45. <script language="JavaScript">
  46. var fontSize = new Array(); // don't change this
  47. fontSize[0] = '12';
  48. fontSize[1] = '14';
  49. fontSize[2] = '16';
  50. fontSize[3] = '18';
  51.  
  52. function changesize(whichSize){
  53. document.fontWeight = fontSize[whichSize];
  54. }
  55. </script>
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62. </head>
  63.  
  64. <body>
  65.  
  66. <form>
  67.  
  68. <center>
  69.  
  70. <!--<option value ="">Backgroun Color</option>-->
  71. <select OnClick="location.href=this.options[this.selectedIndex].value">
  72. <option value = "javascript:changeBG(0);">Red 
  73. <option value = "javascript:changeBG(1);">Green
  74. <option value = "javascript:changeBG(2);">Blue
  75. <option value = "javascript:changeBG(3);"> White 
  76. </select>
  77.  
  78. <!--<option value ="">Font Color</option>-->
  79. <select OnClick="document.href=this.options[this.selectedIndex].value">
  80. <option value = "javascript:changefont(0);">Red Font
  81. <option value = "javascript:changefont(1);">Green Font
  82. <option value = "javascript:changefont(2);">Blue Font
  83. <option value = "javascript:changefont(3);">White Font
  84. </select>
  85.  
  86. <!--<option value ="">Font Size</option>-->
  87. <select OnClick="document.href=this.options[this.selectedIndex].value">
  88. <option value = "javascript:changetype(0);">Arial
  89. <option value = "javascript:changetype(1);">Verdana
  90. <option value = "javascript:changetype(2);">Tahoma
  91. </select>
  92.  
  93. <!--<option value ="">Font Type</option>-->
  94. <select OnClick="document.href=this.options[this.selectedIndex].value">
  95. <option value = "javascript:changesize(0);">12
  96. <option value = "javascript:changesize(1);">14
  97. <option value = "javascript:changesize(2);">16
  98. <option value = "javascript:changesize(3);">18
  99. </select>
  100.  
  101.  
  102.  
  103.  
  104.  
  105. </br>
  106. BLA BLA BLA test font
  107.  
  108.  
  109.  
  110.  
  111. <input type=button value="Go!" onClick="javascript:changeBG(this)">
  112.  
  113. </form>
  114.  
  115. </body>
  116.  
  117. </html>



the only one that works just the background color

can u guys help me with this?

thank you
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 686
Reputation: sillyboy is on a distinguished road 
Solved Threads: 61
sillyboy's Avatar
sillyboy sillyboy is offline Offline
Practically a Master Poster

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

 
0
  #2
Jan 12th, 2009
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.
http://www.happypolla.com
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

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

 
0
  #3
Jan 12th, 2009
it is not working
i can change the font type using button click
but i cannot use combo box
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <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)
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 686
Reputation: sillyboy is on a distinguished road 
Solved Threads: 61
sillyboy's Avatar
sillyboy sillyboy is offline Offline
Practically a Master Poster

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

 
0
  #4
Jan 12th, 2009
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.
http://www.happypolla.com
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

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

 
0
  #5
Jan 13th, 2009
You can try this one...

javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.    <head>
  6.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.       <meta http-equiv="Content-Script-Type" content="text/javascript" />
  8.       <meta http-equiv="Content-Style-Type" content="text/css" />
  9.       <title>Demo</title>
  10.       <style type="text/css">
  11. /* <![CDATA[ */
  12. html, body {
  13.    min-width: 800px;
  14.    max-width: 1024px;
  15.    width: auto;
  16. }
  17.  
  18. body {
  19.    background-color: #fff;
  20.    color: #000;
  21.    font: 80% Arial, sans-serif;
  22.    text-align: center;
  23. }
  24.  
  25. div { border: 0; margin: 0; padding: 0; }
  26.  
  27. body #wrapper {
  28.    margin: 0 auto;
  29.    max-width: 1000px;
  30.    width: 100%;
  31. }
  32.  
  33. div #tube {
  34.    background-color: #FF4500;
  35.    color: #000;
  36.    clear: both;
  37.    float: left;
  38.    border: 1px solid #000;
  39.    position: relative;
  40. }
  41.  
  42. div #l-side {
  43.    background-color: #F80;
  44.    color: #000;
  45.    float: left;
  46.    width: 25%;
  47. }
  48.  
  49. div #rside {
  50.    float: right;
  51.    width: 75%;
  52. }
  53.  
  54. div.pad {
  55.    margin: 0 auto;
  56.    padding-left: 1em; 
  57.    position: relative;
  58.    text-align: left;
  59. }
  60. div select { width: 93%;  }
  61. /* ]]> */
  62.       </style>
  63.       <script type="text/javascript">
  64. /* <![CDATA[ */
  65.  
  66. function bg(colour) {
  67. layout = document.getElementsByTagName('div');
  68. layout['tube'].style.backgroundColor = colour;
  69. }
  70.  
  71. function fc(colour) {
  72. layout['tube'].style.color = colour;
  73. }
  74.  
  75. function cf(thisSize) {
  76. document.body.style.fontSize = thisSize;
  77. }
  78.  
  79. function ff(thisAttribute) {
  80. document.body.setAttribute('style',thisAttribute);
  81. }
  82. function demo() {
  83. var form = document.forms['frm'];   
  84. var opt = form.lst.options;
  85.  
  86. switch(form.lst.selectedIndex)
  87. { 
  88. case 0 : bg(opt[0].value); break;
  89. case 1 : bg(opt[1].value); break;
  90. case 2 : fc(opt[2].value); break;
  91. case 3 : fc(opt[3].value); break; 
  92. case 4 : cf(opt[4].value); break;
  93. case 5 : cf(opt[5].value); break;
  94. case 6 : ff(opt[6].value); break;
  95. case 7 : ff(opt[7].value); break;
  96.   default : alert('And Now We\'re done!'); }
  97.  
  98. }
  99.  
  100. document.onchange = demo;
  101. /* ]]> */
  102. </script>
  103.    <link rev="start" href="./" title="Essential's Demo™" />
  104.    </head>
  105.    <body>
  106.       <div id="wrapper">
  107.          <div id="tube">
  108.             <div id="l-side">
  109.                <div class="pad">
  110.                   <form action="javascript:void(0);" id="frm">
  111.                      <div>
  112.                         <select name="lst" size="1">
  113.  
  114. <optgroup  label="Background Color">
  115.                               <option value="#F40" selected="selected">Red</option>
  116.                               <option value="#F80">Orange</option>
  117.  
  118. </optgroup>                  
  119.  
  120. <optgroup  label="Font Color">
  121.                               <option value="#000">Black</option>
  122.                               <option value="#FFF">White</option>
  123.  
  124. </optgroup>                  
  125.  
  126. <optgroup  label="Font Size">
  127.                               <option value="80%">80% percent</option>
  128.                               <option value="160%">160% percent</option>
  129.  
  130. </optgroup>                  
  131.  
  132. <optgroup  label="Font Family">
  133.                               <option value="font-family:'Trebuchet MS'">Trebuchet MS</option>
  134.                              <option value="font-family:Verdana">Verdana</option>
  135.  
  136. </optgroup>                  
  137.  
  138.  
  139.                         </select>
  140.                      </div>
  141.                   </form>
  142.                </div>
  143.             </div>
  144.             <div id="rside">
  145.                <div class="pad">
  146.                   <h3>JavaScript Demo</h3>
  147.                </div>
  148.             </div>
  149.          </div>
  150.       </div>
  151.    </body>
  152. </html>
Last edited by essential; Jan 13th, 2009 at 4:12 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

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

 
0
  #6
Jan 13th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

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

 
1
  #7
Jan 13th, 2009
But its working fine with me! What's your browser?
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 27
Reputation: ayi_102 is an unknown quantity at this point 
Solved Threads: 0
ayi_102 ayi_102 is offline Offline
Light Poster

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

 
0
  #8
Jan 13th, 2009
internet explorer 7

well thank you for your help anyway

i try to modify it
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child close column createrange() css cursor decimal dependent design disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms google gwt gxt hiddenvalue highlightedword hint html htmlform ie8 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl listbox math media microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php player post problem progressbar regex runtime scroll search security select shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC