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
Switch branches/tags
Nothing to show
Clone or download
Latest commit 53fdd86 Apr 14, 2014
Permalink
Failed to load latest commit information.
demo_files Add demo_files Feb 6, 2014
README.md Update v1.0.1 Apr 14, 2014
flip-quote.jquery.json Update v1.0.1 Apr 14, 2014
jquery.flip-quote.css Initial Commit Feb 6, 2014
jquery.flip-quote.js Update v1.0.1 Apr 14, 2014
jquery.flip-quote.min.js Update v1.0.1 Apr 14, 2014

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.