SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. It’s also available as a WordPress plugin!

1. Include SlideNote in the header of your page. Make sure it is included after jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.slidenote.js" type="text/javascript"></script>

2. Apply the plugin to a single element or a set of elements.

$('#note').slideNote(); // a single element
$('.notes').slideNote(); // a set of elements

3. Pass options to the slideNote() function to modify the behavior.

$('#myNotification').slideNote({
  where: 640,
  corner: 'left',
  url: 'ajax.html',
  container: 'note',
  closeImage: '/images/close.png'
});

SlideNote Options

SlideNote offers a set of five options that allow you to modify the behavior and/or content of the script.

• where specifies how far down the user must scroll before the notification slides into view.
• corner controls from which side of the screen the notification will slide in.
• URL tells SlideNote from where to pull the data to use as the content of the notification. If no container is specified, then the entire page will be used.
• container is to be used in conjunction with URL. When specified, it will only pull content from the element having the specified ID from the specified URL.
• closeImage displays the image at the specified URL. When clicked, it will slide the note out of view. The note will not display until the next time the user scrolls passed the where value.