Home arrow JavaScript arrow The Lettering.JS jQuery Plug-in: Decorating Characters with Background Images
JAVASCRIPT

The Lettering.JS jQuery Plug-in: Decorating Characters with Background Images


In this second part of a series, I develop another example that demonstrates how easy it is to combine the functionality of the Lettering.JS plug-in with image replacement to decorate each character of an H1 element with a different background graphic. If you're used to working with image replacement when creating your own web pages, you should have no trouble following this example.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
November 09, 2010
TABLE OF CONTENTS:
  1. · The Lettering.JS jQuery Plug-in: Decorating Characters with Background Images
  2. · Using image replacement to style characters

print this article
SEARCH DEVARTICLES

The Lettering.JS jQuery Plug-in: Decorating Characters with Background Images
(Page 1 of 2 )

Considering the large and growing number of plug-ins that jQuery offers nowadays, it’d be odd not to find one that fits a specific requirement, right? Yes, right now it seems that adding behavior to a web page calls for using only a combination of the library’s core functionality and that provided by an additional package, from the many available out there.

Regardless of how promising this scenario may look, the truth is that not all is so wonderful in the world of jQuery plug-ins. Some of these libraries call for large downloads, and boast steep learning curves. Add poor documentation to this equation and you’ll end up with a situation that many are reluctant to tackle, for obvious reasons.

However, not all the plug-ins are created in the same manner. To be frank, some are so lightweight and easy to use that this mixture of features is enough reason to pick them up without hesitation. That’s exactly the case with Lettering.JS, a handy jQuery package created by Dave Rupert which will let you assign individual styles to each character, word or line of any text-based HTML element without having to mess up your carefully-crafted markup with ugly and non-semantic code.

Needless to say, if you already had the chance to read the introductory part of this series, you're probably already familiar with using Lettering.JS, at least at the simplest level. During that tutorial I created a basic example that demonstrated how to utilize the plug-in for separately styling each letter of an H1 element.

While this example was hopefully insightful, it didn’t show how to merge the potential of Lettering.JS with that offered by image replacement. To address this issue, in this second installment of the series I’ll set up a new example, which will teach you how to replace on the fly every character of the aforementioned H1 header with a custom background graphic.

Want to see how this will be done in a few simple steps with the Lettering.JS plug-in? Then keep reading.

A quick review of a previous example: styling characters individually with the Lettering.JS plug-in

As I explained in the introduction, the Lettering.JS plug-in makes it really easy to separately define the look of the characters wrapped by a text-based HTML element. Put in a simple way, the library dynamically nests each character inside of a couple of <span> tags, which can be styled later via CSS.

To demonstrate how simple this process is in reality, below I reintroduced the example developed in the previous tutorial. It shows how to build a colorful web page header by taking advantage of the functionality offered by Lettering.JS. Check it out:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using Lettering.JS jQuery plug-in (styling characters individually)</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
    $("#colorful_header").lettering();
});
</script>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #000;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
/* styles for each character of the header */
#colorful_header span {
    font-weight: bold;
    font-size: 5em;
}
#colorful_header span.char1 {
    color: #f00;
}
#colorful_header span.char2 {
    color: #0f0;
}
#colorful_header span.char3 {
    color: #00f;
}
#colorful_header span.char4 {
    color: #00f;
}
#colorful_header span.char5 {
    color: #ff0;
}
#colorful_header span.char6 {
    color: #0ff;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1 id="colorful_header">Hello!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="content">
        <h2>Main content section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

From the above code fragment, it’s clear to see how the Lettering.JS plug-in does its “magic” behind the scenes. It generates on the fly the pair of <span> elements mentioned before, and also assigns to them a sequence of CSS classes in the form of “char1,” “char2,” “charN.” This simple but clever approach permits you to easily attach individual styles to every letter of the target HTML selector. This process is depicted in the following screen capture: 

Well, I have to admit that in its current version the previous header looks somewhat hilarious, but it's handy for showing the remarkable potential of Lettering.JS. What’s more, in the example above, each character was assigned a different foreground color and nothing else; however, it’s possible to create more complex styles and get even more appealing results with minor effort.

Bearing this idea in mind, in the next section I’m going to amend the previous example in such a way that every character of the selected H1 element will be decorated (or replaced, to be more precise) with an individual background image.

To learn the full details of this process, click on the link below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials