Posted By

ramnath on 06/30/09


Tagged

text box label over inside hints


Versions (?)

Label Over


 / Published in: jQuery
 

URL: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

  1. <style>
  2. <!--
  3. body {
  4. margin:0;padding:0;font:normal 1.0em "Trebuchet MS"
  5. }
  6. #container {
  7. width:500px;margin:0 auto;
  8. }
  9. fieldset {
  10. border:1px solid #c96;padding:1.0em;margin:1.0em;
  11. }
  12. legend {
  13. color:#ccc;font-size:120%;
  14. }
  15. input, textarea {
  16. display:block;clear:left;
  17. font:normal 1.0em "Trebuchet MS";
  18. margin:10px;padding:7px;
  19. border:1px solid #999;
  20. }
  21. #f div.label {
  22. position:relative;float:left;
  23. margin-right:3px;clear:left;
  24. }
  25. .clear {
  26. clear:both;
  27. }
  28. label.over {
  29. color:#ccc;position:absolute;
  30. top:16px;left:20px;
  31. }
  32. -->
  33. </style>
  34.  
  35.  
  36.  
  37. <script src="_js/jquery-1.3.2.min.js" type="text/javascript"></script>
  38. <script src="_js/label_over.js" type="text/javascript"></script>
  39. <script type="text/javascript">
  40. <!--
  41. $(function() {
  42. $('#f').submit(function() {
  43. $('legend', this).html('Example with labelOver');
  44. $('label').labelOver('over');
  45. return false;
  46. })
  47. $('label.pre').labelOver('over');
  48. })
  49. //-->
  50. </script>
  51.  
  52.  
  53.  
  54. <div id="container">
  55. <form action="" id="f">
  56. <fieldset>
  57. <legend>Example without labelOver</legend>
  58. <div class="label">
  59. <label class="pre" for="applied">Applied</label>
  60. <input type="text" name="applied" value="" id="applied" />
  61. </div>
  62. <div class="label">
  63. <label class="pre" for="one">One</label>
  64. <input type="text" name="one" value="" id="one" />
  65. </div>
  66. <div class="label">
  67. <label class="pre" for="two">Two</label>
  68. <input type="text" name="two" value="" id="two" />
  69. </div>
  70. <div class="label">
  71. <label for="search">Search</label>
  72. <input type="text" name="search" value="" id="search" />
  73. </div>
  74. <div>
  75. <input type="submit" name="submit" value="Apply label over" id="submit" />
  76. </div>
  77. <div class="clear"></div>
  78. </fieldset>
  79. </form>
  80. </div>

Report this snippet  

You need to login to post a comment.