IQ Option iqoption.com/lp/ultimate-trading/fr/forex-francais/ Forex-francais 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!

For more information or to see a demo, scroll down.


  • GitHub. Browse the project repository, grab all files, documentation, unit tests, or fork it.
  • Minified. Grab the minified version of the plugin. 2.3KB, no styles.
  • Full Project. Download the full plugin including the un-minified source code, demo page, README, and sample stylesheet.

SlideNote is compatible with jQuery 1.4.4 and current versions of major browsers. IE8 is the only version of Internet Explorer that is officially supported.

How To Use

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.4/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.

$('#myNotification').slideNote(); // a single element
$('.notification').slideNote(); // a set of elements

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

  where: 640,
  corner: 'left',
  url: 'ajax.html',
  container: '<b style="color:black;background-color:#a0ffff">note</b>',
  closeImage: '/images/close.png',
  displayCount: 3,
  onSlideIn: function() { alert('http://www.slidenote.info/spacer.gif'); },
  onSlideOut: function() { alert('http://www.slidenote.info/spacer.gif'); }

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. If set at 0, the notification will display on page load.
  • 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.
  • displayCount controls how many times the notification should display.
  • onSlideIn accepts a callback function that will fire once the notification has slid into view.
  • onSlideOut accepts a callback function that will fire once the notification has slide out of view.

The plugin also supports multiple instances per page. SlideNote is wrapped with a set of unit tests. You can run them any time by visiting the test page.

As SlideNote continues to evolve, I’ll be publishing posts on it in the Projects category of my site, so feel free to subscribe.

Contact Me

You can contact me via my website or email.