jNotice

jNotice is the plugin for you, if you like to use some nifty popup's on your websites or applications. This plugin is very customizable because you can select a div that you want to use as popup. In this div you can place whatever content you want.

• Very customizable
• Cross-browser (yes, also IE6 :D)
• Animations
• Autoclose popup's after x seconds
• Position the popup top or bottom
• Callback functions on open or close

Examples

Click on the links below to see some examples that i build with jNotice.

• Fade login in
• Fade login out
• Toggle fade login
• Show RSS subscription
• Hide RSS subscription
• Toggle RSS subscription
• Slide in RSS subscription and auto hide after 5 seconds
• Slide in messagebox bottom
• Slide out messagebox bottom
• Toggle slide messagebox bottom
• Fade login in with callback
• Fade login out with callback
• Size animation show login
• Size animation hide login

How to use

jNotice is very easy to use. You create a div with some content that you like to use as popup. Place this div just above the </body> tag. Now you include jQuery and the jNotice plugin and call you call $(".popup").jnotice({settings}) when the page is loaded. Where .popup is the class/id name that you set on you popup div.

The last thing you need to do is replace {settings} with the settings you want to use. Below you find a list of the possible settings.

• openClickElement: A list of classes or id sepperated by comma's you want to use to open the popup
  
• toggleClickElement: A list of classes or id sepperated by comma's you want to use to toggle the popup
  
• closeClickElement: A list of classes or id sepperated by comma's you want to use to close the popup
  
• animation: none=no animation, slide=slide animation, fade=fade animation, size=size animation
  
• animationSpeed: Speed of the animation in miliseconds
  
• autoClose: Auto close the popup after x miliseconds, 0= don't autoclose
  
• position: top=show popup on top of page, bottom=show popup on bottom of page
  
• openNow: automaticly open the popup when the page is loaded
• openCallback: trigger a function when the popup is open
• closeCallback: trigger a function when the popup is closed

Example of a configuration:

$().ready(function() {
$(".login_notice").jnotice({
openClickElement: '.open_popup',
toggleClickElement: '.toggle_popup',
closeClickElement: '.close_popup',
animation: "fade",
animationSpeed: 200,
autoClose: 5000,
position: "top",
openNow: false
});
}

CSS Reset

To create popups like the login an subscribe one this page it's best that you do a CSS reset. You can do that by adding the following lines to the top of your CSS stylesheet.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,ol, li, dl, dt, dd, form, a, fieldset, input, th, td{
margin: 0;
padding: 0;
border: 0;
outline: none;
}