943,925 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > change font type, font color, font size and bacground color in listbox
Ad:
Permalink
Jan 12th, 2009
0

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

Expand Post »
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
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008
Permalink
Jan 12th, 2009
0

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.
Reputation Points: 85
Solved Threads: 64
Practically a Master Poster
sillyboy is offline Offline
686 posts
since Mar 2007
Permalink
Jan 12th, 2009
0

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
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)
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008
Permalink
Jan 12th, 2009
0

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.
Reputation Points: 85
Solved Threads: 64
Practically a Master Poster
sillyboy is offline Offline
686 posts
since Mar 2007
Permalink
Jan 13th, 2009
0

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

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.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jan 13th, 2009
0

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
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008
Permalink
Jan 13th, 2009
1

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

But its working fine with me! What's your browser?
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jan 13th, 2009
0

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
Reputation Points: 10
Solved Threads: 0
Light Poster
ayi_102 is offline Offline
27 posts
since Nov 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Refresh the page to all in the site on click
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: please help about Dojo grid





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC