Better Pull Quotes???

[realph]

Hey guys,

I’m following this tutorial by Chris: https://css-tricks.com/better-pull-quotes/ and I’m using WordPress for those wondering.

I’ve copied the latest jQuery into my root. ("js/jquery.js")

I’ve wrapped my pull quote in this <span class="pullquote">, and put this in my header:

Code:

This in my CSS:

Code:

span.pulledquote {
display: block;
float: right;
padding: 0 0 0 10px;
margin: 0 0 10px 10px;
width: 170px;
font-size: 1.5em;
line-height: 1.4em;
text-align: right;
color: #666;
border-left: 3px solid #ccc;
}

And put this this before my closing body tag:

Code:

I’m getting no pull quote whatsoever. What could I be doing wrong?

Thanks in advance

Raph

[realph]

Bump!

[Chris Coyier]

My best guess is that jQuery isn’t getting loaded properly. I’d get that hard link to the library out of there and try this:

http://digwp.com/2009/06/including-jque … right-way/

[realph]

"chriscoyier" wrote:

My best guess is that jQuery isn’t getting loaded properly. I’d get that hard link to the library out of there and try this:

http://digwp.com/2009/06/including-jque … right-way/

Sorry to sound like a noob but could you check if I’m doing this right?
I’ve got this in the header.php file, RIGHT BEFORE the <?php wp_head(); ?>:

Code:

Then I have this RIGHT AFTER the <?php wp_head(); ?>:

Code:

And it’s still not working. Am I doing anything wrong, am I using the wrong jQuery file. I went to this site http://jquery.com/ and clicked the Download (jQuery) button with Production selected (as below).

[attachment=0]Screen shot 2010-03-20 at 02.28.30.png[/attachment]
What could I be doing wrong? I really appreciate the help by the way.

Thanks in advance.

[blue642]

first replace the script that is right before your closing body tag with this…

Code:

you opened document.ready, but didn’t close it… but if the script is right before your closing body tag, you don’t need it.

The first line

Code:

$(‘body’).append(“jQuery is working!!”);

is simply to test if jquery is working and it’ll bit, a bit of text at the bottom of your page…

Remove that line if the text shows up, but i think your problem was the document.ready not being closed.

[noahgelman]

Well in all your jquery, you use span.pullquote, but in your css that you put here you write span.pulledquote. They don’t match. Maybe thats your problem.

[blue642]

Just re-read the article, and noticed that both of the mistakes (missing, closing of the document.ready, and the CSS class pullEDquote) are both in the article code examples…

Chris, if you get a chance, maybe you could fix them?

[realph]

If I change it to span.pulledquote in the CSS I get the pull-quotes but the original text where the pull-quotes are pulled from are missing. It’s styling the quote and pulling it from the body of text to create the pull-quote. I’m so confused now, would appreciate any further help.

Thanks!

[blue642]

I should really read better…. it should be pulledquote as the jquery adds that class to the cloned copy…

is there any way you can link your page, so that we can see what is going on?

in essence, this is what should happen on your page…

in the head section keep this:

Code:

after the wp_head(), and this:

Code:

before wp_head…

then before the closing body tag, this code…

Code:

(I removed the document.ready which wasn’t closed, and added a single quote after "pulledquote" as it was missing.)

this should be removed altogether, as it is just an illustration as to what makes this technique work (the .each method)

Code:

[realph]

This is test article page I’m trying to get it to work on. http://bitthirsty.com/perfect-dark-revi … k-required

I followed exactly what you’ve said and I’ve wrapped this bit of text in a span class of pullquote: “This is not a game about saving the princess or the world. Its purely about a father’s love.”

Still no luck though, I really do appreciate the help blue642.

[blue642]

we’ll get through this… lol,

needed to add another closing quote…

Code:

also you have an error with the supersleight javascript, but it may be caused because of this… use the new code above in place of the old code above the body tag, and we’ll go from there.

[realph]

Haha thanks! Ok I’ve replaced that code with the one above before the closing body tag. Still no luck with the pull quotes though.

[Author]

Posts