Forums

realph

Hey guys,

I'm following this tutorial by Chris: http://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:

<!-- This is your jQuery -->
		<script type=\"text/javascript\" src=\"js/jquery.js\"></script>
		<script type=\"text/javascript\">
			$(document).ready(function() {
			  $('span.pullquote).each(function(index) {
				... do something ...
			  });
		</script>

This in my CSS:

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:

<script type=\"text/javascript\">
	$(document).ready(function() {
	  $('span.pullquote).each(function(index) {
		var $parentParagraph = $(this).parent('p');
		$parentParagraph.css('position', 'relative');
		$(this).clone()
		  .addClass('pulledquote)
		  .prependTo($parentParagraph);
	  }); 
</script>

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

Thanks in advance

Raph

realph

Bump!

chriscoyier

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" said:
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(); ?>:

<?php wp_enqueue_script(\"jquery\"); ?>

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

<script type=\"text/javascript\"
	src=\"<?php bloginfo(\"template_url\"); ?>/js/jquery-1.4.2.js\"></script>

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...


<script type=\"text/javascript\">
$('body').append(\"jQuery is working!!\");
     $('span.pullquote).each(function(index) {
      var $parentParagraph = $(this).parent('p');
      $parentParagraph.css('position', 'relative');
      $(this).clone()
        .addClass('pulledquote)
        .prependTo($parentParagraph);
     });
</script>

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

$('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:


<script type=\"text/javascript\"
   src=\"<?php bloginfo(\"template_url\"); ?>/js/jquery-1.4.2.js\"></script>

after the wp_head(), and this:


    <?php wp_enqueue_script(\"jquery\"); ?>

before wp_head...

then before the closing body tag, this code...


<script type=\"text/javascript\">
     $('span.pullquote).each(function(index) {
      var $parentParagraph = $(this).parent('p');
      $parentParagraph.css('position', 'relative');
      $(this).clone()
        .addClass('pulledquote')
        .prependTo($parentParagraph);
     });
</script>

(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)


<!-- This is your jQuery -->
      <script type=\"text/javascript\" src=\"js/jquery.js\"></script>
      <script type=\"text/javascript\">
         $(document).ready(function() {
           $('span.pullquote).each(function(index) {
            ... do something ...
           });
      </script>

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...


<script type=\"text/javascript\">
   $(document).ready(function() {
     $('span.pullquote').each(function(index) {
      var $parentParagraph = $(this).parent('p');
      $parentParagraph.css('position', 'relative');
      $(this).clone()
        .addClass('pulledquote)
        .prependTo($parentParagraph);
     });
</script>

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.

treehouse : what would you like to learn today?

Forums

Better Pull Quotes???