Advanced Search

Curly Quotes using jQuery and CSS - pullquotes, blockquotes, and more...

/ Published in: jQuery
Save to your folder(s)
This is a method that I use to easily wrap an HTML container with nice curly quotes. I much prefer this method over using images because the quotes can be easily stylized using css fonts, colors, and sizes. Also, the markup is semantically correct.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*  this function adds Curly Quotes around the content of the specified html container.  */
  2. $(document).ready(function() {
  3.     // Curly Quotes by Michael Thorne
  4.     // Go through each element from the quote field with a class of "quote-wrapper".  This can be adjusted to any HTML selector you choose, including blockquote elements.
  5.     $('.quote-wrapper').each(function() {
  6.         // Get the text of the span
  7.         $(this).prepend('<span class="bq-start">�</span>');
  8.         $(this).append('<span class="bq-end">�</span>');
  9.       }
  10.     );
  11.     // End Curly Quote code
  12.   }
  13. );
  14.  
  15.  
  16. /* styles for curly quotes */
  17. .bq-start, .bq-end  {
  18.   position:absolute;
  19.   display:block;
  20.   z-index:-5;
  21.   color:#CCCCCC;
  22.   font-size:4.5em;
  23. }
  24. .bq-start {
  25.   left:-10px;
  26.   top:10px
  27. }
  28. .bq-end {
  29.   right:0px;
  30.   bottom:-0.4em;
  31. }
  32. /*  since we are using absolute positioning for the quotes, the wrapper needs to be position:relative.  */
  33. blockquote, .quote-wrapper {
  34.  z-index:10;
  35.  position:relative;
  36. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.