jQuery Watermark Plugin

Phil Critchley · February 20th, 2011, 08:03 PM

Hi

Wondering if anyone has been experimenting with jQuery on completion of the tutorials in Chapter 11? I've been playing about because I want to assign a watermark using the jQuery plugin to a textbox I have in my form as shown below.

The code seems to match the code from the book exercises but when it loads in the browser at runtime the Tooltip text does in fact display but not within the textbox as grey out text but alongside the textbox as normal black text.

Has anyone else experienced a similar problem when using the jQuery plugin?

Code:

<asp:TextBox ID="CriteriaTextBox" runat="server" ToolTip="Please enter the User Name" CssClass="InputBox"></asp:TextBox>

Code:

<script src="../Scripts/jquery.updnWatermark.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $.updnWatermark.attachAll({ cssClass: 'Watermark' });
    });
</script>

Code:

.Watermark
{
    position: relative;
    width: 0;
    height:1.25em;
    vertical-align: top;
}
.Watermark label
{
    position: absolute;
    left: 0;
    top: 2px;
    white-space: nowrap;
    color: #999;
    padding-left: 4px;
    height: 1.25em;
    vertical-align: middle;
}
.InputBox
{
    width: 300px;
}

Imar · February 21st, 2011, 03:43 AM

Hi there,

When I copy and paste your code into a new file, this seems to work fine for me.

Maybe there's other code in your site that messes up the design?

I attached my demo page so you can see how it's set up.

Cheers,

Imar

sophia · November 22nd, 2011, 03:45 PM

Hi Imar,
Greetings!!

I am wrapping textboxes in ul element. I can see that watermark text is hidden beneath the textbox when position attribute is set to relative in ul element, but as soon as I remove this attribute the watermark appears on the textbox.
What is problem with relative value? Is there any fix to it as I want to use relative value for the position attribute.

Code:

ul input[type="text"], ul input[type="password"]
        {

            width:300px;

            padding:5px;

            position:relative;
}

the web page code is

Code:

<ul><li><input type="text" title="enter value" /></li></ul>

Imar · November 22nd, 2011, 04:32 PM

Are you using the plugin for the watermarks? If so, it may not support this positioning option. Not sure though.... Maybe the plugin page has more info?

Imar

sophia · November 23rd, 2011, 01:27 PM

Hi Imar,
Link http://plugins.jquery.com/project/updnWatermark does not exist anymore.

Even I searched plugin on jquery site but got nothing.
Kindly update the link if you get the new one.

Thanks

Imar · November 23rd, 2011, 01:30 PM

http://updatepanel.net/?p=579

Imar

sophia · November 23rd, 2011, 03:00 PM

thanks Imar for link...

sophia · November 23rd, 2011, 03:33 PM

Where we can download vsdoc file of jquery from?
thanks...

Imar · November 23rd, 2011, 04:13 PM

From Google? https://www.google.com/#sclient=psy-...=1050&bih=1262

Also, I think you can get it through NuGet.....

sophia · November 24th, 2011, 11:15 AM

Hi Imar,
The maximum version I could get is 1.5 of vsdoc. Isn't there vsdoc for 1.7 version? or 1.4.1 vsdoc is compatible with jquery 1.7 version?