Building a better web forms: Context highlighting using jQuery


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  6. <title>Building a better web forms: Context highlighting using jQuery - Example</title>
  7. body{
  8. font-family:Arial, Helvetica, sans-serif;
  9. font-size: 13px;
  10. }
  11. .content, .contentA{
  12. padding:10px;
  13. width:370px
  14. }
  15. .left{
  16. width:150px;
  17. float:left;
  18. padding:7px 0px 0px 7px;
  19. min-height:24px;
  20. }
  21. .right{
  22. width:200px;
  23. float:left;
  24. padding:5px;
  25. min-height:24px;
  26. }
  27. .clear{
  28. float:none;
  29. clear:both;
  30. height:0px;
  31. }
  32. .row{
  33. background-color:none;
  34. display:block;
  35. min-height:32px;
  36. }
  37. .text{
  38. width:190px;
  39. }
  40. .ruler{
  41. width:400px; border-bottom:dashed 1px #dcdcdc;
  42. }
  43. tr:focus{
  44. background-color:#fcfcf0;
  45. }
  46. td{
  47. vertical-align:top;
  48. }
  49. .over{
  50. background-color:#e6e2af;
  51. }
  52. .out{
  53. background-color:none;
  54. }
  55. }
  56. </style>
  57. <script type="text/javascript" src="jquery-1.2.6.js"></script>
  58. $(document).ready(function()
  59. {
  60. $('.content .left, .content input, .content textarea, .content select').focus(function(){
  61. $(this).parents('.content').addClass("over");
  62. }).blur(function(){
  63. $(this).parents('.content').removeClass("over");
  64. });
  65. $('.contentA .left, .contentA input, .contentA textarea, .contentA select').focus(function(){
  66. $(this).parents('.row').addClass("over");
  67. }).blur(function(){
  68. $(this).parents('.row').removeClass("over");
  69. });
  70. });
  71. </script>
  72. </head>
  73.  
  74. <body>
  75. <form method="post">
  76. <h2>Janko At Warp Speed</h2>
  77. <p>Building a better web forms: Context highlighting using jQuery - Example</p>
  78. <div style="float:left; margin-right:20px; width:400px;">
  79. <h3>Row highlighting</h3>
  80. <div class="contentA">
  81. <div class="row">
  82. <div class="left">First name</div>
  83. <div class="right"><input name="Text1" type="text" class="text" /></div>
  84. <div class="clear"></div>
  85. </div>
  86. <div class="row">
  87. <div class="left">Last name</div>
  88. <div class="right"><input name="Text1" type="text" class="text" /></div>
  89. <div class="clear"></div>
  90. </div>
  91. <div class="row">
  92. <div class="left">Email</div>
  93. <div class="right"><input name="Text1" type="text" class="text" /></div>
  94. <div class="clear"></div>
  95. </div>
  96. <div class="row">
  97. <div class="left">Password</div>
  98. <div class="right"><input name="Text1" type="text" class="text" /></div>
  99. <div class="clear"></div>
  100. </div>
  101. </div>
  102. <hr />
  103. <div class="contentA">
  104. <div class="row">
  105. <div class="left">Address</div>
  106. <div class="right"><input name="Text1" type="text" class="text" /></div>
  107. <div class="clear"></div>
  108. </div>
  109. <div class="row">
  110. <div class="left">Postal</div>
  111. <div class="right"><input name="Text1" type="text" class="text" /></div>
  112. <div class="clear"></div>
  113. </div>
  114. <div class="row">
  115. <div class="left">City</div>
  116. <div class="right"><input name="Text1" type="text" class="text" /></div>
  117. <div class="clear"></div>
  118. </div>
  119. <div class="row">
  120. <div class="left">Country</div>
  121. <div class="right"><select name="Select1" style="width: 195px">
  122. </select></div>
  123. <div class="clear"></div>
  124. </div>
  125. </div>
  126. <hr />
  127. <div class="contentA">
  128. <div class="row">
  129. <div class="left">Account type</div>
  130. <div class="right">
  131. <input checked="checked" name="Radio1" type="radio" />Basic (Free registration)
  132. <br />
  133. <input checked="checked" name="Radio1" type="radio" />Pro 9.99$
  134. <br />
  135. <input checked="checked" name="Radio1" type="radio" />Expert 19.99$
  136. </div>
  137. <div class="clear"></div>
  138. </div>
  139. <div class="row">
  140. <div class="left">Some description</div>
  141. <div class="right"><textarea name="TextArea1" cols="22" rows="3"></textarea></div>
  142. <div class="clear"></div>
  143. </div>
  144. </div>
  145. <input name="Button1" type="button" value="Do some action" />
  146. </div>
  147. <div style="float:left; margin-right:20px;">
  148. <h3>Group highlighting</h3>
  149. <div class="content">
  150. <div class="row">
  151. <div class="left">First name</div>
  152. <div class="right"><input name="Text1" type="text" class="text" /></div>
  153. <div class="clear"></div>
  154. </div>
  155. <div class="row">
  156. <div class="left">Last name</div>
  157. <div class="right"><input name="Text1" type="text" class="text" /></div>
  158. <div class="clear"></div>
  159. </div>
  160. <div class="row">
  161. <div class="left">Email</div>
  162. <div class="right"><input name="Text1" type="text" class="text" /></div>
  163. <div class="clear"></div>
  164. </div>
  165. <div class="row">
  166. <div class="left">Password</div>
  167. <div class="right"><input name="Text1" type="text" class="text" /></div>
  168. <div class="clear"></div>
  169. </div>
  170. </div>
  171. <hr />
  172. <div class="content">
  173. <div class="row">
  174. <div class="left">Address</div>
  175. <div class="right"><input name="Text1" type="text" class="text" /></div>
  176. <div class="clear"></div>
  177. </div>
  178. <div class="row">
  179. <div class="left">Postal</div>
  180. <div class="right"><input name="Text1" type="text" class="text" /></div>
  181. <div class="clear"></div>
  182. </div>
  183. <div class="row">
  184. <div class="left">City</div>
  185. <div class="right"><input name="Text1" type="text" class="text" /></div>
  186. <div class="clear"></div>
  187. </div>
  188. <div class="row">
  189. <div class="left">Country</div>
  190. <div class="right"><select name="Select1" style="width: 195px">
  191. </select></div>
  192. <div class="clear"></div>
  193. </div>
  194. </div>
  195. <hr />
  196. <div class="content">
  197. <div class="row">
  198. <div class="left">Account type</div>
  199. <div class="right">
  200. <input checked="checked" name="Radio1" type="radio" />Basic (Free registration)
  201. <br />
  202. <input checked="checked" name="Radio1" type="radio" />Pro 9.99$
  203. <br />
  204. <input checked="checked" name="Radio1" type="radio" />Expert 19.99$
  205. </div>
  206. <div class="clear"></div>
  207. </div>
  208. <div class="row">
  209. <div class="left">Some description</div>
  210. <div class="right"><textarea name="TextArea1" cols="22" rows="3"></textarea></div>
  211. <div class="clear"></div>
  212. </div>
  213. </div>
  214. <input name="Button1" type="button" value="Do some action" />
  215. </div>
  216. </form>
  217. </body>
  218.  
  219. </html>

URL: http://www.jankoatwarpspeed.com/post/2008/06/09/Building-a-better-web-forms-Context-highlighting-using-jQuery.aspx

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.