After I wrote a couple entries (Fancy Drop Cap, Part 1 and Part 2) on creating a drop cap for the first paragraph in a DIV, a couple people asked how one would go about making the drop cap apply to every paragraph in a DIV.
Most of the code can remain the way we left it in Fancy Drop Cap - Part 2. We created a swap_letter() function to:
- find the first letter of the paragraph
- concatenate that letter with the rest of an image tag if it matches one of the letters in a regular expression
- strip the letter out of the paragraph since we want to replace it with the image
- prepend the image tag to the paragraph
We also gave the image a class name of "fancy-letter" so that we could style it a bit:
CSS:
-
.fancy-letter {
-
float: left;
-
margin: -1px 2px 2px 0;
-
}
So, what needs to change? Not much actually.
The first thing to do is remove the line that sets the "first_paragraph" variable: var first_paragraph = $('#main-content p')[0]. In its place we'll use jQuery's .each(), which takes the pain out of for loops. All of the work will be done inside this .each() method, starting with setting a variable for "each" of the paragraphs:
JavaScript:
-
-
var paragraph = this;
-
. . .
-
});
We set the paragraph variable as this instead of $(this) for the same reason that we had (in the earlier entries) put the [0] after $('#main-content p') instead of writing $('#main-content p:eq(0)'): because we need to work on the actual DOM node. Also, note that I changed the DIV's id from "main-content" to "drop-caps" for this example, but you can name yours whatever you want.
The rest of the code is pretty much the same, because all we really needed to do was get a different set of elements Here is the new code in all its glory:
JavaScript:
-
$
(document
).
ready(function(){
-
swap_letter();
-
});
-
-
function swap_letter() {
-
-
var paragraph = this;
-
var node = paragraph;
-
while (node.
childNodes.
length) {
-
node = node.firstChild;
-
}
-
var text = node.
nodeValue;
-
var first_letter =
text.
substr(0,
1);
-
-
var match = /[a-zA-Z]/.test(first_letter);
-
if ( match ) {
-
-
$('<img />')
-
.
attr('src',
'/images/alphabet/' + first_letter.
toLowerCase() +
'.gif')
-
.
attr('alt',first_letter
)
-
-
-
first_letter = "";
-
}
-
});
-
}
For an explanation of the other parts, please refer to Fancy Drop Cap - Part 2 and Fancy Drop Cap - Part 1. In the meantime, feast your eyes on the beauty of these fancy first letters.
This is the first paragraph. The "T" in "This" should be replaced by the drop-cap image. The image is floated left with a little padding to the right and the bottom.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
