How to initiate jGrowl

Starting using jGrowl is pretty straight forward, simply include the js files and then call jGrowl as you would any jQuery class you have plugged in. The most simple example of how to do this is:

$.jGrowl("Hello world!");

Further resources

More comprehensive information on how to use and extend jGrowl can be found at Stan Lemon’s project site (http://stanlemon.net/projects/jgrowl.html).

• Download jGrowl 1.1.2
• jGrowl’s jQuery Plugin Page
• Example Usage and Samples

jGrowl Options:

I have included the options for use with jGrowl below, but these can also be found on the plugin site.

I came up with a solution to the problem so that when you click off the input, if you have not entered any information, it puts the label back in. Its quite simple, but a nice little touch for usability. Here is how to do it using  jQuery…

Theres the standard jQuery file to include and a couple of functions I wrote using jQuery. One for the focus event (when you click in the input) and one for the blur event (when you click away from the input). Basically it uses a title on the input that is the same as the value to begin with. This is saved in a variable and once the input is focussed on and then the input is cleared so you can type away.
When you move away from the input, if nothing has been entered, it will replace it with the original value that was saved in the variable from the title. kind of like I have noticed a lot of forms on Facebook have started doing to clear and replenish unentered fields.

Below is the javascript code I use when doing this:

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

var clearMePrevious = ”;

// clear input on focus
$(’.clearMeFocus’).focus(function()
{
if($(this).val()==$(this).attr(’title’))
{
clearMePrevious = $(this).val();
$(this).val(”);
}
});

// if field is empty afterward, add text again
$(’.clearMeFocus’).blur(function()
{
if($(this).val()==”)
{
$(this).val(clearMePrevious);
}
});
});

</script>

And here is the way I code the text inputs.

<input type=”text” name=”email” title=”Enter your email” value=”Enter your email” class=”clearMeFocus” />

The class ‘clearMeFocus’ is used so you know which fields on a form want to use this feature and also to grab the title and value from it. (I guess you don’t have to use that to get the info though…)

I have also put up an example of the jQuery functions and the form in action. It’s a simple form, but you get the idea…it can be found here.

So onto my point, here is a little touch that I often add to sites that I like to see happen. It’s simply having a ‘Back to top’ button at the foot of the page that once clicked, scrolls you up with an animation rather that a page refresh or a straight jerk to the top again.
Using the jQuery scrollTo plugin, you can achieve, what I see to be, a sweet scrolling animation.

Implementing scrollTo to scroll to top using jQuery

I’ll briefly outline the steps you will need to take to implement this, but more documentation and some better example can be found on the plugin site.

1. Download the js file that you will need and stick it in your site somewhere.
2. Include the js file into the page you want it on.
3. Initialise the function, so that when the link is clicked, it will perform the animation you want, with the speed you set and where you want it to scroll to. Then add the link you want to move you to the top.
Here is an example of the code you might use to do this:

<script type=“text/javascript” src=“js/jquery.scrollTo.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
// scroll to top
$(’a.topOfPage’).click(function(){
$.scrollTo( 0, 500);
return false;
});
});
</script>

<a href=“#” class=“topOfPage”>Top of page</a>

Here I have used jQuery to initialise the function when the a link with the class ‘topOfPage’ is clicked.
Once this is clicked, it uses the scrollTo plugin to go to the top of the page (as I have used 0 for the position) and with a speed of 500 milliseconds.

Arguments accepted

scrollTo accepts the following arguments:

$.scrollTo( target, duration, settings );

Target can either be an element such as an id of an element (#elementName) or a class (.className) or simply the position on the page you want (’44′, ‘100px’, ‘+=30px’, etc).
Duration is the length of time in milliseconds that you want it to take to reach the destination.
Settings is basically a list of other parameters that you wish to pass to it, more information on these can be found here.

Example using scrollTo

An example of how I have implemented it in a site can be seen here. Just scroll down to the bottom and click the ‘Top’ link and it should scroll up nicely for you.

Like I said, it’s attention to detail like this on sites that I really like to see. You can take this how you like and use it to scroll up, down, across etc.
I’m going to be putting a lot of that into the making of a personal project Betheiddleman.com. Things like live validation, thickbox login boxes and more. So watch this space…