How to use jQuery plugin jGrowl - Yakkel

Either your browser does not support javascript or you currently have it disabled.
You must have javascript enabled to use pretty much all of our site - come on now, it's 2009!

How to use jQuery plugin jGrowl Login to favorite tutorial!

Download jGrowl from http://plugins.jquery.com/project/jgrowl

Alright, first in your html document you want to include all the jquery/jgrowl functions assuming you have the right HTML header tags already in place.

It should include these sources:
<link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript" src="./jquery.ui.all.js"></script>
<script type="text/javascript" src="../jquery.jgrowl.js"></script>

Once all the initial HTML and Javascript libraries are set in place, you are now able to use the jGrowl plugin.

Let's try it, shall we!

<a href="javascript:void(0);" onclick="$.jGrowl('this is the dialog that will appear in the jGrowl box!');">Click here to display your jGrowl box on the page!</a>

Your final page result should look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<title>jGrowl Test</title>
<link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript" src="./jquery.ui.all.js"></script>
<script type="text/javascript" src="../jquery.jgrowl.js"></script>
</head>
<body>
<h1>jGrowl Test</h1>
<a href="javascript:void(0);" onclick="$.jGrowl('this is the dialog that will appear in the jGrowl box!');">Click here to display your jGrowl box on the page!</a>

Now that you understand the basics to jGrowl, and how to use the basic function of it, let's explore the advanced functions and controls of jGrowl.

jGrowl has 20 other options you can include. They are all listed on the jGrowl plugin page here: http://stanlemon.net/projects/jgrowl.html#options

But how do we change the look or add an option? I'm going to show you in step 6...

Alright to set a theme is easy, one option of the jGrowl is theme, the theme is defiend by css, div... Alright just follow the example...

Type a simple div layer in CSS, like the one I made below

<style type="text/css">
div.jGrowl div.manilla {
background-color:#FFF1C2;
color:navy;
}
</style>

This div layer will set the background of my box to #fff1c2, and the font color to navy.

Now to include it in an option. -Like adding an option, just as theme:'manilla'

See below:

<a href="javascript:void(0);" onclick="$.jGrowl(''dialog here",{theme:'manilla'});">link</a>

In step 7 we will explore more jGrowl options to get a better understanding.

Alright, there are several options you can include in a jGrowl function. Let's try using "position, sticky, and life" for our examples.

The position option designates a class which is applied to the jGrowl container and controls it's position on the screen. By Default there are five options available, top-left, top-right, bottom-left, bottom-right, center. This must be changed in the defaults before the startup method is called.

The sticky option set to true a message will stick to the screen until it is intentionally closed by the user.

*Life is the lifespan of a non-sticky message on the screen.

Alright let's start out by typing out our basic jGrowl link:

<a href="javascript:void(0);" onclick="$.jGrowl('dialog');">link</a>

--now remember to include an option, all we have to do is add ",{option:'trueorfalse'}" after our dialog has been entered.

So you should end up with something like this >>>

<a href="javascript:void(0);" onclick="$.jGrowl("dialog",{position:'top-left',sticky:'true',life:'999'});">link</a>

>As you can see I included the three options in my jGrow dialog box, and they will take effect when clicked on.

Now that you know how to use options, and set themes in your jGrowl box, your pretty set. jQuery is a great way to get started with javascript, and jGrowl is just a plugin that will get beginners started.

-Hope you found this tutorial useful!
--Ronald A. Richardson, www.ronaldarichardson.com

Comments for this tutorial (2)

ahren on November 13th at 1:15am

Wow, it's nice to see some other intelligent users (actually know how to program/design) are joining Yakkel finally. I was getting scared at all the "lyt" people I was seeing. Haha. Good tutorial man.

786dude on January 1st at 8:54pm

jQuery is amazing, thanks for this tutorial, jgrowl is awesome
-dude

Welcome!

Yakkel is your central source for web developer tutorials as well as a leading free web hosting provider.

500mb storage space
FTP access, unlimited email accounts, unlimited subdomains!

Host all your domains, for free!

learn more by taking a quick tour ›
learn about our free hosting ›
signup now ›

About this tutorial

This tutorial will teach you how to use a basic jQuery plugin known as jGrowl, and understand how to design it, and include options in your javascript function. By the end of this function, you will have a neat dialog box, with a sleek fade affect.