Your Ad Here

advanced code snippet search

Posted By

j4kp07 on 02/12/10


Tagged

css input jquery hints mobileme superhints


Versions (?)

Simplehints

 / Published in: jQuery
 

URL: http://www.me.com

For an example, visit MobileMe. Inspired by the writeup at Smashing Magazine. However, I wanted to take this in a direction that was easier to implement. There is the issue of accessibility without the use of Labels, but I plan on addressing this at a later date.

Expand | Embed | Plain Text 
  1. // BEGIN JQUERY
  2. jQuery.fn.simplehints = function() {
  3. 	return this.each(function() {
  4. 		var $this = $(this);
  5.  
  6. 		if ($this.attr('value').length == 0) 
  7. 			$this.attr('value', $this.attr('title'));
  8.  
  9. 		if ($this.attr('value').length != 0 && $this.attr('value') != $this.attr('title')) 
  10. 			$this.addClass("bold");
  11.  
  12. 		$(this).focus(function () {
  13. 			if ($this.attr('value') == $this.attr('title'))	
  14. 				$(this).get(0).setSelectionRange(0,0);
  15. 		}).keypress(function() {
  16. 			if ($this.attr('value') == $this.attr('title') && $this.attr('type') != 'select-one')
  17. 				$this.attr('value', '').addClass("bold");
  18. 		}).change(function() {
  19. 			if ($this.attr('value') != $this.attr('title'))
  20. 				$this.addClass("bold");
  21. 			if ($this.attr('value') == $this.attr('title'))
  22. 				$this.removeClass("bold");
  23. 		}).blur(function() {
  24. 			if ($this.attr('value') == '')
  25. 				$this.attr('value', $this.attr('title')).removeClass("bold");
  26. 		}).parents('form').submit(function(e) {
  27. 			if ($this.attr('value') == $this.attr('title'))
  28. 				$this.attr('value', '');
  29. 		});
  30. 	});
  31. };
  32.  
  33. $(document).ready(function(){
  34. 	$(this).find('form .hint').simplehints();
  35. });
  36.  
  37. // END JQUERY
  38.  
  39. // BEGIN CSS
  40. .input, .select, .textarea {
  41. 	background: #fff;
  42. 	border: 1px solid #aaa;
  43. 	padding: 5px;
  44. 	margin-top: 8px;
  45. 	margin-bottom: 5px;
  46. 	width: 380px;
  47. 	font-size: 14px;
  48. 	font-weight: 700;
  49. 	color: #bbb;
  50. }
  51.  
  52. input.bold, select.bold, textarea.bold {
  53. 	color: #000;
  54. }
  55. .checkbox, .radio{
  56. 	margin: 10px 0 0 0;
  57. }
  58.  
  59. .select{
  60. 	width: 390px;
  61. }
  62.  
  63. .textarea{
  64. 	float: left;
  65. 	height: 200px;
  66. 	width: 385px;
  67. 	margin-top: 15px;
  68. 	overflow: auto;
  69. 	font-family: inherit;
  70. }
  71.  
  72. // END CSS
  73.  
  74. // BEGIN HTML
  75. <input type="text" name="email" class="input hint" title="Email Address" value="" />
  76. // END HTML

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: section31 on April 28, 2010

you don't need to put it in jquery dom ready.

Posted By: j4kp07 on April 28, 2010

doh!

You need to login to post a comment.