Javascript Pullquotes

Description:

This plugin is a wrapper for some Javascript and CSS by Roger Johansson. It allows you to make pullquotes in your posts without duplicating any content (i.e. making them manually). This is done via Javascript and it it makes it easy to disable them later on if you wish and makes it so that duplicate content doesn’t show up in your feeds.

Example:

I’ve disabled this plugin on my blog, so this example no longer works.

While “Epsum factorial non deposit quid pro quo hic escorol.” appears twice here, it’s actually only in the post source once. It’s just wrapped in a <span> and copied and displayed via Javascript. And if this plugin is deactivated, the pullquote gracefully disappears.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.

Download:

A Couple Notes / Issues:

  • This plugin does not make a button in TinyMCE (the rich text / WYSIWYG editor). You can still manually add the required <span> to your posts to get it to work, but only the plain, HTML editor will have a button to make your life easier.
  • The “Close Tags” button does not close the tag of this plugin. While I could probably get it insert the close tag when clicked, I doubt I could get it to work in the right tag order, so I just left it out and up to you to click the button again when done. ;)

Customization:

Don’t like how the pullquotes show up? Feel free to edit the CSS file located in the plugin’s folder. It’s what controls the look of them.

27 comments to Javascript Pullquotes

  1. Heather says:

    Thanks for placing this into a plugin just to make it that much easzier to use.

  2. febwa says:

    Just wanted to let you know it was simple to install and works great first time! Thanks.

  3. [...] And this is also a test to see whether the pullquotes plugin that I requested from the WordPress community actually works. Woohoo! [...]

  4. menj says:

    I love the pullquotes! BTW, is there a way to control the position of the pullquote, i.e. left/right or top/middle/bottom?

    - MENJ

  5. Viper007Bond says:

    menj on October 1st, 2006 at 6:45 AM wrote:

    I love the pullquotes! BTW, is there a way to control the position of the pullquote, i.e. left/right or top/middle/bottom?

    Just edit the CSS file in the plugin’s folder. It controls the pullquote. :)

  6. [...] Hvilket betyder: To nye plugins, nemlig “Footnotes” og “Pullquotes“3 “Firestats”, sÃ¥ du kan se hvem der besøger din side. [...]

  7. Paul Squires says:

    Fantastic plugin – easy install and very simple to use!

  8. [...] Almost immediately, a reader of his blog (going by the nom de code “Viper007Bond”) took the script and very neatly turned it into a plugin for WordPress. Better and better. It wouldn’t have been too terribly hard to incorporate it into a blog, but now it’s a total no-brainer. [...]

  9. Heres my take on a purely (X)HTML, CSS, semantic, and XHTML 1.0 Strict Validating way to create pullquotes.

    Pullquotes Using CSS – XHTML Strict Valid – No JS

    Great article and I really like the look of your end result, and the change from the outdated innerHTML method. When you can eliminate js, doit. NOTE: Im not anti-js, just a minimalist.

  10. Viper007Bond says:

    htaccesselite com on November 9th, 2006 at 7:40 AM wrote:

    Heres my take on a purely (X)HTML, CSS, semantic, and XHTML 1.0 Strict Validating way to create pullquotes.

    Yes, pure CSS pullquotes have been around forever and are very easy to do. However, you have to have duplicate markup if you want to have it actually be a quote (i.e. have it show up in both in a pullquote and the content). This is to avoid that.

  11. Sam says:

    I’m missing something here, hope you can help enlighten me: Why use the ‘blockquote’ element at all?

    I ask as it conflicts with my current blockquote properties and doesn’t seem necessary…

  12. Viper007Bond says:

    Sam on November 17th, 2006 at 6:12 AM wrote:

    I’m missing something here, hope you can help enlighten me: Why use the ‘blockquote’ element at all?

    I ask as it conflicts with my current blockquote properties and doesn’t seem necessary…

    You’re right. You could use any element you wish. I didn’t come up with the Javascript and such though, I just wrapped it into a plugin. I didn’t really give any of that any thought. ;)

  13. Sam says:

    Thanks for the reply, it may be the incentive I need to poke in the js ;’)

  14. Sam says:

    I was able to address my issue, posting here in case anyone else experiences it:

    I edited the original jspullquote.js file, and simply changed:

    oPullquote = document.createElement('blockquote');

    to:

    oPullquote = document.createElement('div');

    Changed the css to reflect div.pullquote (etc.) and it works just fine, and now it doesn’t conflict with (or inherit) any other blockquote styles…

  15. Viper007Bond says:

    I figured it’d be something that easy. Cool. :)

  16. Nadine says:

    I love the plugin, but for some strange reason, my pullquotes show up twice, one right next to the other. Did I do something wrong, or is there a conflict with another plugin that you know of?

    Thanks for any help!

  17. Viper007Bond says:

    Nadine on December 27th, 2006 at 5:40 AM wrote:

    I love the plugin, but for some strange reason, my pullquotes show up twice, one right next to the other. Did I do something wrong, or is there a conflict with another plugin that you know of?

    Disable other plugins to see if that fixes it. If it does, slowly reactivate them until it breaks again and then let me know which plugin is the culprit.

    If deactivating all of them doesn’t fix it, then… I dunno frankly. You sure you did it right?

  18. Nadine says:

    Viper007Bond on December 27th, 2006 at 7:29 AM wrote:

    Disable other plugins to see if that fixes it. If it does, slowly reactivate them until it breaks again and then let me know which plugin is the culprit.

    If deactivating all of them doesn’t fix it, then… I dunno frankly. You sure you did it right?

    Deactivating all the plugins didn’t fix the problem. As to the install, all I did was upload the folder with all the files in it, and activate the plugin. I’ve tried to put the code in this comment that I’m using, but I can’t get it to show up properly.

  19. Viper007Bond says:

    Nadine on December 27th, 2006 at 8:16 AM wrote:

    Deactivating all the plugins didn’t fix the problem.

    I just visited your site and it’s working fine for me in both FF and IE.

    Screenshot: http://img216.imageshack.us/img216/2318/pullquoterf9.png

  20. Nadine says:

    Viper007Bond on December 27th, 2006 at 4:24 PM wrote:

    I just visited your site and it’s working fine for me in both FF and IE.

    Screenshot: http://img216.imageshack.us/img216/2318/pullquoterf9.png

    Yeah, it looks fine because I’m not using the plugin, I just did it with duplicate content and css since I couldn’t make the plugin work. I think it doesn’t have anything to do with the plugin part, since I couldn’t make the other plugin that uses the original javascript work either. The other plugin did the same thing with displaying two pullquotes. Thanks for your help though, if I get really motivated (and have more time) I’ll get with Roger Johanssen and see what I can do about fixing the javascript conflict if that’s what it is. Cheers.

  21. ravianz says:

    its pretty cool and attractive plugin! thanks to you!

  22. [...] Viper007Bond (I love this guy’s theme. The header is a photo from Yellowstone.) [...]

  23. [...] WordPress plugins – This plugin is a wrapper for some Javascript and CSS by Roger Johansson. It allows you to make pullquotes in your posts without duplicating any content (i.e. making them manually). This is done via Javascript and it it makes it easy to disable them later Technorati Tags:WordPress, WordPress Plugin, wordPress plugins, wordpress seoTag Links:WordPress, WordPress Plugin, wordPress plugins, wordpress seoRelated Posts:Interesting WordPress Plugins for blog optimizationImplement PDF printing of your WordPress Posts Control who sees your ads with this WordPress PluginWordPress Plugin for Screen Captures & Image ResizingCome ottimizzare il WordPress 2.3         [...]

  24. [...] blog (going by the nom de web “Viper007Bond”) took the script and very neatly turned it into a plugin for WordPress. Better and better. It wouldn’t have been too terribly hard to incorporate it into a blog, but [...]

  25. [...] prevents the site from loading. The other two are different iterations of the same work: JavaScript Pull-quotes by Viper007Bond and Roger Johansson. Stephen Rider took it over – nursed it to full health, etc., [...]

  26. assssssasas says:

    probando
    lksfdlsdjfksdk

    que mono