Skip to content
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.
CSS JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo_files
README.md
flip-quote.jquery.json
jquery.flip-quote.css
jquery.flip-quote.js
jquery.flip-quote.min.js

README.md

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.

jQuery Flip-Quote

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.

You can’t perform that action at this time.