I started developing a web application that needs a sophisticated notification system. It turns out the actual notification message is the easy part since jGrowl does all the work for me.
Here's all you have to do to get jGrowl to work:
Download jGrowl.
Copy the 3 files into your web site directory:
jquery-1.2.6.js (or your newer or minimized version of jQuery)
jquery.jgrowl.js (or the minimized version)
jquery.jgrowl.css
(I put the 2 .js files in /scripts and the .css file in /styles.)
Link to the 3 files like so:
<link href="styles/jquery.jgrowl.css" rel="Stylesheet" type="text/css" />
<script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="scripts/jquery.jgrowl.js" type="text/javascript"></script>
Then within any Javascript file, you should be able to call jGrowl:
$.jGrowl("This is a jGrowl notification.");
Also, the notification text was blue for me, which didn't look to good on a black background. I fixed it by adding the following CSS to my main CSS file:
div.jGrowl div.message
{
color: #fff;
}
3 comments:
Hey, I tried this and can´t get it to work. Can you be more specific about where to put the code on the page ? maybe that is where I am going wrong ?
I have just put it all at the bottom of the page for now, under everything else ?
At minimum, the javascript code must be inside a script tag, like this:
<script type="text/javascript">
// javascript code here
</script>
Traditionally, a script tag should go into the head tag of the html page. However, this isn't a strict requirement.
You can also put the code into a separate .js file (more maintainable then, and no need for script tag) and add a new link tag to the head tag to import your .js file in.
Thanks a lot for sharing!
really much appreciated ^_^
I will try to use this script in my next project. So far, I'm familiar with the ordinary tooltips.
I knew about jGrowl from Chi.mp
keep up the good work!
Post a Comment