Reference Slider

jQuery Plugin


Example
 

Ultra simple jQuery plugin that helps you link two websites. It adds a sidebar to your page, with an iframe, so you can bring external content (like Dictionaries, Wikipedia, etc) without using annoying popups nor making your visitors leave the page.

Suppose that you have a website with long texts and difficult terminology. Now you want to offer a way for your users to look those terms on Wikipedia. To solve that problem, many people use popups, modal windows or tooltips. But according to some UX specialists those popups and modal windows are too blocking, and cause bad user experience. You could use tooltips, but often that is not enough.

Slide-reference jQuery plugin is a non-obstructive option that allows you to bring any content you want to your website. The sidebar have draggable border, so you can make it smaller or bigger. It can certain profit for code refactory, since it was my first attempt with JQuery plugin development. But I will wait for change requests on GitHub before working with this old project.


Five Steps

  1. Add jQuery to page
  2. Add plugin to page
  3. Add attributes to elements that you desire to link
    • class = "slidereference"
    • optional: data-url = "YourURL"
    • optional: data-originaltext = "ElementText"
    • optional: data-clicktext = "ElementTextAfterClicked"
    • optional: data-options = "{JS Object Will All Options for Slider}"
  4. Run plugin


Customization

The pluing comes with some Standard data, as described below. You can create a Javascript Object Literal and pass it to the plugin to overwrite it.




Compatibility

jQuery:

1.9+

Plugin - With Animation:

IE 10+ FF 16+ Chrome 26+ Safari 6.1+ Opera 12.1+

Plugin - Without Animation:

IE 8+


Github

https://github.com/gomidefabio/slidereference


License and Contribution

MIT MIT License
 
http://en.m.wikipedia.org/wiki/MIT_License
 
Feel free to use and modify as you want (commercial and non-commercial use).
 
Contribution will be greatly appreciated.


Author

Fabio Gomide Nolasco