Advanced Search

Building a better web forms: Context highlighting using jQuery

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

Expand | Embed | Plain Text

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