View Single Post
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: save and load font and background setting using cookies

 
0
  #5
Jan 15th, 2009
this is my latest code

there are several option for user

background color = red, green, blue
font color = red, green, blue, black
font type = arial, times, verdana, tahoma
font size = small, medium, large, x-large, xx-large

lets assume that someone want to choose:
background color = red
font color = green
font type = verdana
font size = medium

that is mean that i have to make css page that can handle those requirements

what about if that person want to change the page like:
background color = green
font color = blue
font type = times
font size = xx-large

that is another page which is mean another css file, right

so there gonna be lots of css then to meet all the possibilities that can happens

What do you think?

Oh, and thank you for the cookies code
it works perfect

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3.  
  4. <title>None</title>
  5.  
  6. <!--font family function-->
  7. <script type="text/javascript">
  8. function changeFontFamily(elem, dropper) {
  9. document.getElementById(elem).style.fontFamily = dropper.options[dropper.selectedIndex].value;
  10. }
  11. </script>
  12.  
  13. <!--font color function-->
  14. <script type="text/javascript">
  15. function changeFontColor(elem, dropper) {
  16. document.getElementById(elem).style.color = dropper.options[dropper.selectedIndex].value;
  17. }
  18. </script>
  19.  
  20. <!--background color function-->
  21. <script type="text/javascript">
  22. function changeBackgroundColor(elem, dropper) {
  23. document.getElementById(elem).style.backgroundColor = dropper.options[dropper.selectedIndex].value;
  24. }
  25. </script>
  26.  
  27. <!--font size function-->
  28. <script type="text/javascript">
  29. function changeFontSize(elem, dropper) {
  30. document.getElementById(elem).style.fontSize = dropper.options[dropper.selectedIndex].value;
  31. }
  32. </script>
  33.  
  34. <!--create cookies function-->
  35. <!--save cookies function-->
  36. <!--delete cookies function-->
  37.  
  38.  
  39. <!--cookies function-->
  40.  
  41.  
  42. </head>
  43. <body>
  44.  
  45. <form>
  46.  
  47.  
  48. <!--This is where the changes happen-->
  49. <div id="test">This is supposed to be a nice little navbar. Select a new font to change this one's</div>
  50.  
  51. </br>
  52. </br>
  53. <div id="position" style="visibility:visible;position:absolute;bottom:0px; right:0px">
  54. <center>
  55. <table width="100%" border ="4" background="raindrop.jpg" >
  56.  
  57. <td>
  58. <select onchange="changeFontFamily('test', this);">
  59. <option value="">Font Family</option>
  60. <option value="Arial">Arial</option>
  61. <option value="Helvetica">Helvetica</option>
  62. <option value="Tahoma">Tahoma</option>
  63. <option value="Times New Roman">Times New Roman</option>
  64. <option value="Verdana">Verdana</option>
  65. </select>
  66. </td>
  67.  
  68. <td>
  69. <select onchange="changeFontColor('test', this);">
  70. <option value="">Font Color</option>
  71. <option value="Black">Black</option>
  72. <option value="Blue">Blue</option>
  73. <option value="Green">Green</option>
  74. <option value="Orange">Orange</option>
  75. <option value="red">Red</option>
  76. <option value="Violet">Violet</option>
  77. <option value="Yellow">Yellow</option>
  78. </select>
  79. </td>
  80.  
  81. <td>
  82. <select onchange="changeBackgroundColor('test', this);">
  83. <option value="">Background Color</option>
  84. <option value="Blue">Blue</option>
  85. <option value="Green">Green</option>
  86. <option value="Orange">Orange</option>
  87. <option value="Red">Red</option>
  88. <option value="Violet">Violet</option>
  89. <option value="Yellow">Yellow</option>
  90. </select>
  91. </td>
  92.  
  93. <td>
  94. <select onchange="changeFontSize('test', this);">
  95. <option value="">Font Size</option>
  96. <option value="x-small">X-Small</option>
  97. <option value="small">Small</option>
  98. <option value="medium">Medium</option>
  99. <option value="large">Large</option>
  100. <option value="x-large">X-Large</option>
  101. <option value="xx-Large">XX-Large</option>
  102. </select>
  103. </td>
  104. </table>
  105. </center>
  106. </div>
  107.  
  108.  
  109. <!--not yet implemented
  110. </br>
  111. </br>
  112. <input type=button value="Save Cookie!" onClick="javascript:changeBG(this)">
  113. -->
  114.  
  115. <!--not yet implemented
  116. </br>
  117. </br>
  118. <input type=button value="Reset to Default!" onClick="javascript:changeBG(this)">
  119. -->
  120.  
  121.  
  122.  
  123. </body>
  124. </html>
  125.  
Reply With Quote