• PHP
  • Ruby on Rails
  • MySQL
  • Linux
    • SELINUX
    • Fedora
    • debian
  • Apache
  • nginx
  • AJAX
Albertech.net

Tag Archives: Jgrowl

jGrowl – jQuery plugin for displaying messages

April 28, 2011 1:38 pm / Albertech.net

I recently found a useful jQuery plugin for adding unobtrusive web browser messages for webapps called jGrowl.

It displays a floating div with your custom message for 5-10 seconds on the top of the screen and fades out. There are options to change the duration of the message, set the message as a sticky until it is closed by the user, position options, and animation options. It is useful for showing quick informational messages such as “Saving changes”, “Update”, and “Delete”. Two unique features with this plugin are the “sticky feature” and the ability to stack consecutive messages together.

I’ve created a quick tutorial on adding this jQuery plugin to your app.

How to use the jGrowl plugin

Download the plugin at http://stanlemon.net/projects/jgrowl.html.

Inside the zip file, copy the two files “jquery.jgrowl.js” and “jquery.jgrowl.css” to your server. If you don’t have “jquery-1.4.2.js” on your server, copy that file as well.

Next, add the following lines to your webpage


<script src="jquery.js" type="text/javascript">
<link type="text/css" href="jquery.jgrowl.css" rel="stylesheet">
<script src="jquery.jgrowl.js" type="text/javascript">

To make the message appear on the page, add this to the BODY of your HTML.

<div id="jGrowl" class="top-right jGrowl"><div class="jGrowl-notification"></div></div>
<script type="text/javascript">$.jGrowl('Test!');</script>

The page should now show the “Test” message appear and fade out after a few seconds.

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: AJAX, jQuery, Script Reviews / Tagged: jGrowl, jquery, tutorial

Categories

  • AJAX
  • Android
  • Apache
  • Canon Cameras
  • Cloud
  • CMS
  • Computer Mods
  • Conferences
  • Deals
  • debian
  • Fedora
  • Flash
  • Frameworks
  • git
  • Hardware
  • HTML
  • IDE
  • iPhone
  • iPhone App Review
  • jQuery
  • Linux
  • Mac OS X
  • MySQL
  • nginx
  • PHP
  • portfolio
  • Puppet
  • Ruby on Rails
  • Script Reviews
  • SELINUX
  • Software
  • Software Review
  • SQL Server
  • statistics
  • Tech
  • Tomcat
  • Uncategorized
  • VMWARE
  • VPS
  • Windows
  • wordpress
  • Zend Framework

Blogroll

  • DragonAl Flickr
  • Dropbox – Free 2GB Account
  • James' Blog
  • Javascript Compressor
  • PHP Builder Community
  • PHP-Princess.net
  • Rubular – Regular Expression Validator
  • The Scale-Out Blog
  • Tiny MCE

Tags

activation AJAX android antec Apache AWS awstats canon coda codeigniter debian enclosure external free G1 install vmware tools Internet Explorer iphone 5 jquery Linux mx-1 MySQL office 2007 OSX photoshop PHP plugin plugins portfolio redesigned website review rewrite script security SELinux ssh tinymce tutorial upgrade VMWARE vmware server wordpress wordpress mu XSS zend framework
© Copyright 2013 Albertech.net
Infinity Theme by DesignCoral / WordPress
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.