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
jQuery Tiny Watermark Plugin
Moderator: General Moderators
-
rick.emmet
- Forum Commoner
- Posts: 70
- Joined: Fri Aug 14, 2009 9:43 am
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: jQuery Tiny Watermark Plugin
(#10850)
-
rick.emmet
- Forum Commoner
- Posts: 70
- Joined: Fri Aug 14, 2009 9:43 am
Re: jQuery Tiny Watermark Plugin
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:
And the HTML is as follows:
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
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'));
});Code: Select all
<input type="text" class="watermarked" title="Enter text here" />Cheers,
Rick
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: jQuery Tiny Watermark Plugin
You need to include the jQuery library and the watermark plugin library for the code above to work.rick.emmet wrote:I am wrong that this requires a plugin - it this function supposed to work with jquery-1.8.0.js ?
(#10850)
-
rick.emmet
- Forum Commoner
- Posts: 70
- Joined: Fri Aug 14, 2009 9:43 am
Re: jQuery Tiny Watermark Plugin
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
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
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: jQuery Tiny Watermark Plugin
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?rick.emmet wrote:and thought that this required the actual plugin (some of the functionality available there is simply functions)
(#10850)
-
rick.emmet
- Forum Commoner
- Posts: 70
- Joined: Fri Aug 14, 2009 9:43 am
Re: jQuery Tiny Watermark Plugin
Hi Christopher,
Yes, the page has a link to the plugin (on the server where the page resides). The link reads,
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...
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
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>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);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