Home arrow JavaScript arrow The Lettering.JS jQuery Plug-in: Using Images With Text Lines
JAVASCRIPT

The Lettering.JS jQuery Plug-in: Using Images With Text Lines


In this penultimate chapter of the series, I develop another easy-to-follow example that illustrates how simple it is to merge the functionality of the Lettering.JS jQuery plug-in with image replacement, and decorate the text lines of a selected HTML element with individual background graphics. Thanks to the flexibility provided by the plug-in’s “lettering()” method, the entire styling process will be a breeze.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
November 22, 2010
TABLE OF CONTENTS:
  1. · The Lettering.JS jQuery Plug-in: Using Images With Text Lines
  2. · Adding image replacement to

print this article
SEARCH DEVARTICLES

The Lettering.JS jQuery Plug-in: Using Images With Text Lines
(Page 1 of 2 )

There’s an old proverb that says “The good things in Life come in small packages.” While the phrase can’t be taken at face value for obvious reasons, it applies to some extend to web design, especially when it comes to picking a jQuery plug-in from the many available. If my claim doesn’t sound convincing to you, then take a peek at Lettering.JS. This really lightweight library can be used to assign individual styles to the characters, words and lines of any text-based HTML element, without amending a single chunk of your beautifully-crafted markup.

Of course, if you’ve been a loyal reader of this article series, and you've already read all of the previous tutorials, then you’ve acquired a thorough background in using Lettering.JS. In those tutorials I created a decent variety of code samples, which demonstrated how to employ the plug-in to separately style the letters, words and even text lines of a sample H1 header. What’s more, in each case the styling process covered the use of image replacement, thus recreating a scenario that most web designers have to tackle on a frequent basis.

But hold on a second! Although I did explain how to assign different foreground colors to the text lines of the aforementioned H1 element, I haven't yet discussed how to decorate it with individual background images. This topic deserves a close analysis, considering its current relevance. In an attempt to address this issue, in this penultimate installment of the series I’m going to modify the example that you saw in the previous part, but this time the Lettering.JS plug-in will be used to assign a new set of background graphics to the lines of the sample header.

Ready to learn the full details of this styling process? Then don’t hesitate anymore; begin reading! 

Review: styling text lines with different foreground colors

As usual, before I start explaining how to decorate the H1 element with individual background images, I'd like to spend just a few moments recalling the example built in the previous chapter of the series. It showed how to take advantage of Lettering.JS for parsing the element’s text lines by assigning each of them a different foreground color.

In case you're still not familiar with the internals of this process, the plug-in’s “lettering()” method must first be called with the argument “lines,” and the lines in question must also be separated by <br /> tags. Does this sound somewhat confusing? Don’t worry; just pay attention to the following code sample, which hopefully will clear things up: 

<!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 lines 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('lines');
});
</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 line of the header */
#colorful_header span {
    font-weight: bold;
    font-size: 4em;
}
#colorful_header span.line1 {
    color: #f00;
}
#colorful_header span.line2 {
    color: #0f0;
}
#colorful_header span.line3 {
    color: #ff0;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1 id="colorful_header">Hey buddy,<br /> are you doing some PHP<br /> right now?</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>

As it was just noted, this time the “lettering()” method has been invoked with the parameter “lines,” which makes Lettering.JS parse only the text lines of the selected HTML element. Thanks to the enumerated CSS classes that the plug-in generates on the fly, it’s possible to turn a boring and dull web page header into a colorful and fresh one, whose appearance is depicted by the following screen capture:

Certainly, that looks pretty good, considering that the entire process only required the coding of a couple of JavaScript lines and some straightforward CSS styles. As I stated in the introduction, however, the visual presentation of the H1 header can be improved by attaching to it a group of background images. With that said, in the segment to come I’m going to modify the CSS styles just created, so that they can use a whole new set of custom background graphics.

To learn more on this topic, jump ahead and read the next few lines. 


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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials

antalya escort escort antalya antalya escortlari antalya escort bayan