flip-quote's Introduction

jQuery Flip-Quote

jQuery Flip-Quote creates a pull-quote from a text quote found in the document and flips to reveal the quote once it's scrolled into view. It also has a click feature that scrolls into and highlights the quote origin on the document.

Demo

View the Demo Page

Basic Usage

Include the latest version of jQuery together with jquery.flip-quote.css and jquery.flip-quote.js in your document's head.

<link href="jquery.flip-quote.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.flip-quote.js"></script>

HTML Structure:

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <q id="quote">Maecenas rhoncus sapien massa, aliquam ornare justo tristique vitae</q>. Duis sollicitudin nulla a leo sagittis, tristique imperdiet turpis sollicitudin.</p>
  
  <div id="container">...</div>
</div>

Apply jQuery Flip-Quote by calling flipQuote:

$('#quote').flipQuote({
  container: '#container'
});

To learn more go to this page : http://markserbol.github.io/flip-quote/

Compatibility

Tested on all modern browsers – Chrome, Firefox, Safari. Fallback provided for IE and older browsers.

Changelog

v1.0.1 (14 Apr 2014)

Fixed reserved keyword error on IE
v1.0.0 (06 Feb 2014)

Initial release

License

jQuery Flip-Quote is under MIT License.

Detailed usage can be found at http://markserbol.github.io/flip-quote/. You can also contact me via email found on my Github Profile or follow me on Twitter.

Recommend Projects