• Improving #SharePoint Forms – Hints
• Improving #SharePoint Forms – Character Count

Watermarks

Prerequisites

• jQuery Library referenced in the page
• CEWP on the page

Setup

First make sure you reference a copy of the plugin script. I added the link to the section of the page using the method explained in this post.

<script type="text/javascript" src="../../jquery.tinywatermark-2.0.0.js"></script>

We also need some css to style the watermarks

  <style type="text/css">
  .watermark {color:#999}
</style>

The plugin works by finding all the inputs with a class of “watermarked” and using this title attribute as the watermark. So I used jQuery to select the inputs I wanted to watermark and add the “watermarked” class to them.

Here is the code I used.

$("input[title='Author']").addClass('watermarked');
$("input[title='Title']").addClass('watermarked');
$("textarea[title='Body']").addClass('watermarked');

After the inputs have the right class all we need to do is call the plugin script like so

$('.watermarked').each(function() {
  $(this).watermark('watermark', $(this).attr('title'));
});

Thats all. Enjoy.

Related posts:

1. Improving #SharePoint Forms
2. Improving #SharePoint Forms – Character Count
3. Resizable textareas in SharePoint edit forms

• Add jQuery to the page using the method described in this post
• Download the jQuery Hint Box plugin and link it to the page. 
• Call the script and set the options for the position and html content of the hint. Here is an example:

<script type="text/javascript">
$("input[title='Author']").inputHintBox({
	className:'simple_box',
	html:'Who is the author of this quote?',
	incrementLeft:-25,
	incrementTop:-15
	});
</script>

The above script simply selects  the field using its  title attribute then sets the css class for the element, its contents and position.

Here is the CSS I used for my example.

.simple_box{
	border:1px solid gray; background:url('/_layouts/images/toolgrad.gif');
	font-size:xx-small; color:#444; padding:7px;
}

Here it is in action.

hints

Related posts:

1. Improving #SharePoint Forms – Character Count
2. Hiding the user presence icon
3. Improving #SharePoint Forms – Watermarks

For this solution I will use this jQuery script from CSS Globe.

The default form

Setup

So first off we need to add a link to the jQuery script and the plugin. You can do this using a content editor web part but I have noticed in some cases scripts need to be in the section of the page. The easiest way to add the scripts to the of the page is to use the following code.

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<!—scripts / css goes in here -- >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="js/charCount.js"></script>
</asp:Content>

So once you have all the scripts you need on the page we just need to attach the behavior to the form body form field. To do this we can add some JavaScript to the page in a Content Editor web part. We can use jQuery to select the element we want to target and then configure the plugin settings.

<script type="text/javascript">

$("textarea[title='Body']").charCount({
    allowed: 200,	 //maximum number of characters allowed
    warning: 175,  // when to show the warning
    counterText: 'Characters left:'  //text before the character count
});
</script>

For more configuration options and explanations of the plugin check out this page.
I used the following CSS to style the appearance of the character count text.

.counter{
	position:relative;
	right:14px;
	top:0;
	font-size:12px;
	font-weight:normal;
	color:#555;
	float:right;
	clear:both;
	display:block;
	text-align:right;
	background:#fff;
	width:150px;
	padding:3px;
	border:1px solid #888;
	border-top:0px;
	margin-top:-1px;
	}
.warning{color:#660000; font-weight:bold;}
.exceeded{color:#e00; font-weight:bold;}

In Action

In Action

Too many characters

In the next part of this series we will add hints to the form fields and make some other improvements.

Related posts:

1. Improving #SharePoint Forms – Watermarks
2. Improving #SharePoint Forms
3. Improving #SharePoint Forms – Hints

As a point of reference this is what we will be starting with.

Standard SharePoint Form

Stay tuned for more soon.

Related posts:

1. Improving #SharePoint Forms – Character Count
2. Improving #SharePoint Forms – Watermarks
3. Styling SharePoint Blog Comments