Category Archives: Javascript

jQuery Watermark shadow effect on Input box

How to create watermark / shadow effect on Input type textbox? How to get watermark using jQuery ?

using jQuery watermark on input box
You can add default text on form elements that look like watermarks or work as placeholders. Using jQuery and bit of CSS rules, you can easily achieve the watermark effect. This is very handy if you want to prevent unwanted information to be sent to the server, as can happen with the default watermark text. It’s really very simple using jQuery. There is no need to write long Javascript function to check the value and populating default text onblur/onfocus/onclick/onchange… etc.

A simple jQuery example to show you how to implement a watermark text effect on an input field.

Just follow three steps and it’s done.

1) Create textbox in your HTML file

<br />
&lt;input type=&quot;text&quot; name=&quot;zipCode&quot; id=&quot;zipCode&quot; value=&quot;Enter Zip Code&quot; /&gt;<br />

2) Create CSS class for Dim effect (watermarking theme)

<br />
.watermarkEffectText {<br />
    color : #9B9B9B;<br />
}<br />

3) Javascript code

<br />
$( document ).ready(function() {<br />
	// apply class<br />
<p>	// set default value (If you've not assigned in HTML, else skip this line) </p>
<p>	// assigning in HTML doesn't wait for DOM load, and reflects immediately<br />
	.val(&quot;Enter Zip Code&quot;)</p>
<p>	// on gaining focus<br />
	.focus(function() {</p>
<p>		if( $(this).val() == &quot;Enter Zip Code&quot; ) { // remove default value<br />
			// remove class and value<br />
			$(this).removeClass(&quot;watermarkEffectText&quot;).val(&quot;&quot;);<br />
		}<br />
	})<br />
	// on loosing focus<br />
	.blur(function() {<br />
		if($(this).val() == &quot;&quot;) {<br />
			// set default value with watermark effect<br />
			$(this).val(&quot;Enter Zip Code&quot;).addClass(&quot;watermarkEffectText&quot;);<br />
		}<br />
	});<br />
});<br />

1, 2, 3… it’s as simple to achieve watermark effect.

'Coz sharing is caring

Auto-Refresh your Browser on file change

    How? Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page. Try it!

Where? Live.js works in Firefox, Chrome, Safari, Opera and IE6+ until proven otherwise. Live.js is independent of the development framework or language you use, whether it be Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla or what-have-you.

<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;;&gt;&lt;/script&gt;<br />

There is another way to achieve this using jQuery
You could just place a javascript interval on your page, have it query a local script which checks the last date modified of the css file, and refreshes it if it changed.

<br />
var modTime = 0;<br />
setInterval(function(){<br />
  $.post(&quot;isModified.php&quot;, {&quot;file&quot;:&quot;main.css&quot;, &quot;time&quot;:modTime}, function(rst) {<br />
    if (rst.time != modTime) {<br />
      modTime = rst.time;<br />
      // reload style tag<br />
      $(&quot;head link[rel='stylesheet']:eq(0)&quot;).remove();<br />
      $(&quot;head&quot;).prepend($(document.createElement(&quot;link&quot;)).attr({<br />
          &quot;rel&quot;:&quot;stylesheet&quot;,<br />
          &quot;href&quot;:&quot;;<br />
        })<br />
      );<br />
    }<br />
  });<br />
}, 5000);<br />

'Coz sharing is caring