JQuery cross-column pull-quotes

Dec15th
2008
••

Here’s something I’ve been wanting to figure out for a while now. How to make two column pull quotes that are actually usable for the most part. With the use of some pseudo-fancy CSS and a little bit of neat jQuery, I have finally done just that.

The text resize function can be found here. The function doit() is called on page load and every time the text is resized by the buttons in order to recalculate positioning and height.

IE 6 & 7 are tricky little buggers on the CSS positioning.

In the first three examples shown, I have left the background color on for the spans so you can see the placement of them. Take a look at the first example. Try it with JavaScript turned off as well. This is the most straight forward example. It only uses one span set to the height of the block quote to float content around it.

There are caveats with each sample. The biggest one is that with manual text resizing, these will start to fail. This is why I have included text resizing buttons. The issue is that when a user uses their keyboard to resize, the script doesn’t know it and doesn’t recalculate the location and size of the blockquote. With the buttons, the script re-fires and adjusts accordingly.

The CSS and HTML is pretty straightforward for this. Some little things are this:

blockquote {
font: normal 30px/32px times, "times new roman", georgia, serif;
letter-spacing: -1px;
padding: 0px 0 4px 0px;
border-bottom: 4px solid #000;
width: 250px;
position: relative;
z-index: 1;
margin: 0 0 4px 6px;
}

span.pullout {
display: block;
float: left;
xbackground: #ede;
margin: 0 0 3px 0;
width: 0px;
overflow: hidden;
}

The block quote is set to 250px so that when JavaScript is off it fits inside the column it belongs to. The span has no height applied it as it’s only need with JavaScript on.

The script that makes this happen then fires and resizes the span and repositions the blockquote.

function doit() {
      showHeight("blockquote", $("blockquote:eq(0)").outerHeight());
	  $("blockquote:eq(0)").css({float: "right",margin: "0 -140px 3px 14px"});
	  	  var spanstuff = $("blockquote:eq(0)").outerHeight();
	  $("span:eq(0)").css({width: "135px"});
	  $("span:eq(0)").height(spanstuff);
}

doit();

The showHeight is only in the function to display the height at the top of the page. It’s not needed for the function. So here’s a quick break down:

1. First we apply some CSS to the first blockquote on the page. We are negative the right margin to slide it over into the second column.
2. Now we get the height of the first blockquote and name a variable called “spanstuff“.
3. Next we set the width of the first span on the page.
4. Lastly we set the height of the span to be the height of the blockquote using the aforementioned variable.

Take a look at the first example. again. Nothing too hard going on there.

Let’s get a little more creative

Example two looks a little more fun doesn’t it? By nesting the blockquote further down we add more visual excitement to the page. This time we add another san to the second column. This is used to push down the span that is going to reserve the space for the blockquote. It’s a tad more in-depth.

span.pullout {
display: block;
float: left;
margin: 0 0 3px 0;
width: 0px;
clear: left;
}

span.ab {
display: block;
width: 0px;
float: left;
}

* html span.ab, *+html span.ab {
width: 1px;
}

IE doesn’t like the new span having a 0 width so we just make it 1px wide to make it happy. I could do it across the board but it was an after thought upon testing. We float a 0px wide span at the beginning of the second column. Then we make sure our spacer span clears that span. The JavaScript then changes to this:

function doit() {
	  $("blockquote:eq(0)").css({float: "right",margin: "0 -140px 3px 14px"});
	  var spanstuff = $("blockquote:eq(0)").outerHeight();
	  $("span:eq(1)").css({width: "135px"});
	  $("span:eq(1)").height(spanstuff);
	  var p = $("blockquote");
	  var position = p.position();
	  $("span:eq(0)").height(position.top);
}
doit();

1. First we apply some CSS to the first blockquote on the page. We are negative the right margin to slide it over into the second column.
2. Now we get the height of the first blockquote and name a variable called “spanstuff“.
3. Next we set the width of the second span on the page. This was the first span on example one.
4. Nextwe set the height of the second span to be the height of the blockquote using the aforementioned variable.
5. The next three lines find the top position of the blockquote and then set the first span to be that height, thus pushing the spacer span into position.

Example two again.

What? You want 3-column pull-quotes?

Ask and ye shall receive.

In this example I duplicated the method in example two. The difference is that I put the blockquote in the second column. So in the first column I have one “pusher” span and one spacer span. These are now floated to the right. In the third column I used the same span technique as in example two (i.e. floated left). The JavaScript changes accordingly:

function doit() {
	  $("blockquote:eq(0)").css({float: "right",margin: "0 -140px 3px -140px", width: "540px"});
	  var spanstuff = $("blockquote:eq(0)").outerHeight();
	  var p = $("blockquote");
	  var position = p.position();
	  $("span:eq(0)").height(position.top);
	  $("span:eq(1)").css({width: "135px"});
	  $("span:eq(1)").height(spanstuff);
	  $("span:eq(2)").height(position.top);
	  $("span:eq(3)").css({width: "135px"});
	  $("span:eq(3)").height(spanstuff);
}
doit();

We need to alter the CSS for IE as well:

* html span.ab, *+html span.ab, * html span.ab1, *+html span.ab1 {
width: 1px;
}

1. This time we expand the blockquote to be as wide as two columns and use a double negative margin to pull it across all three columns.
2. Now we set the first and third spans to be the height of the Y position of the blockquote.
3. Then we set the second and fourth spans to be the height of the blockquote. Then set the width to allow the content in each respective column to wrap around.

One bad side about doing it with the pusher spans in the first column is that floated drop caps are not possible. Since the first span on the page is floated right, a floated left drop cap is going to clear it by default. But, don’t worry, that has been addressed as well. It get more and more in-depth but, playing with it a bit, it’s not super complicated.

Wait a few days for part two of these examples. I still have some kinks to workout and some error checking to do. It gets better I promise.