jQuery Tiny Watermark Plugin

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
rick.emmet
Forum Commoner
Posts: 70
Joined: Fri Aug 14, 2009 9:43 am

jQuery Tiny Watermark Plugin

Post by rick.emmet »

Hi Everyone,
I wonder if someone can point me in the right direction. I want to implement a watermark place holder for text input fields to show users the proper input format allowed. I went to the jQuery site and found one that looks attractive. I like the idea of using the Title attribute to display hints specific to the form fields, such as <input type="text" class="watermarked" title="12/16/2012" /> for a date field.

The particular plugin, "JQuery Tiny Watermark Plugin 2.0.0" seems to be unavailable at the jQuery site - you click on the link, which takes you to a page that does not have a download, so you click on the only link on the page and it shows you all the watermark plugins available. I've had this sort of problem before at jQuery's site - I think they're a bit overwhelmed with demand. I also went to the author's home page, but it's in Chech or German or something (I tried to find a link to the download but couldn't).

Does anybody know where I can get this download, or if not, can anyone recommend a simple and easy to implement watermark plugin? Thanks so much for your time!
Cheers,
Rick
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: jQuery Tiny Watermark Plugin

Post by Christopher »

(#10850)
rick.emmet
Forum Commoner
Posts: 70
Joined: Fri Aug 14, 2009 9:43 am

Re: jQuery Tiny Watermark Plugin

Post by rick.emmet »

Hi Christopher,
I've been to that page and copied and pasted the code. This is just the function, correct? Don't I need the plugin too? I've added both functions (one at a time) to my javascript library, and the "class="watermarked" to the input fields (as well as the CSS code to my external file) with no results. The simplist version is in the documentation (http://plugins.jquery.com/project/TinyWatermark) for this plugin, and is as follows:

Code: Select all

$('.watermarked').each(function() {
  $(this).watermark('watermark', $(this).attr('title'));
});
And the HTML is as follows:

Code: Select all

<input type="text" class="watermarked" title="Enter text here" />
The most I got using any of this was the CSS code causing the cursor in the test field to turn gray (#999999). I am wrong that this requires a plugin - it this function supposed to work with jquery-1.8.0.js ? Thanks much for your input!
Cheers,
Rick
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: jQuery Tiny Watermark Plugin

Post by Christopher »

rick.emmet wrote:I am wrong that this requires a plugin - it this function supposed to work with jquery-1.8.0.js ?
You need to include the jQuery library and the watermark plugin library for the code above to work.
(#10850)
rick.emmet
Forum Commoner
Posts: 70
Joined: Fri Aug 14, 2009 9:43 am

Re: jQuery Tiny Watermark Plugin

Post by rick.emmet »

Hi Christopher,
Yeah, I have the library and thought that this required the actual plugin (some of the functionality available there is simply functions). I'll look around for another plugin - I do like the idea of testing on the simplest level before adding complexity.
Cheers,
Rick
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: jQuery Tiny Watermark Plugin

Post by Christopher »

rick.emmet wrote:and thought that this required the actual plugin (some of the functionality available there is simply functions)
The file jquery.tinywatermark-3.1.0.js contains the plugin. You are including jQuery and then that file in the <head> of your document?
(#10850)
rick.emmet
Forum Commoner
Posts: 70
Joined: Fri Aug 14, 2009 9:43 am

Re: jQuery Tiny Watermark Plugin

Post by rick.emmet »

Hi Christopher,
Yes, the page has a link to the plugin (on the server where the page resides). The link reads,

Code: Select all

<script type="text/javascript" src="jquery.tinywatermark-3.1.0.js"></script>
and of course this runs on the demo page. I haven't been able to find the plugin itself and since it's not on a content delivery network, I can't link to it. BTW, you're not saying that the code...

Code: Select all

(function($) {
	$.fn.watermark = function(c, t) {
		var e = function(e) {
			var i = $(this);
			if (!i.val()) {
				var w = t || i.attr('title'), $c = $($("<div />").append(i.clone()).html().replace(/type=\"?password\"?/, 'type="text"')).val(w).addClass(c);
				i.replaceWith($c);
				$c.focus(function() {
					$c.replaceWith(i); setTimeout(function() {i.focus();}, 1);
				})
				.change(function(e) {
					i.val($c.val()); $c.val(w); i.val() && $c.replaceWith(i);
				})
				.closest('form').submit(function() {
					$c.replaceWith(i);
				});
			}
		};
		return $(this).live('blur change', e).change();
	};
})(jQuery);
is actually the plugin, are you? I've tried to get this to run also (but may be doing it incorrectly).

Also, I have been including jquery in the <head> section of my test page. Thanks for your time, I really appreciate the help!
Cheers,
Rick
Post Reply