Home arrow JavaScript arrow The Lettering.JS jQuery Plug-in: Working with Hover CSS Pseudo-classes
JAVASCRIPT

The Lettering.JS jQuery Plug-in: Working with Hover CSS Pseudo-classes


In this conclusion to a seven-part series on the Lettering.JS jQuery plug-in, you'll learn how to combine the plug-in with image replacement and some CSS to change the visual presentation of an HTML element when a mouse hovers over it.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
November 29, 2010
TABLE OF CONTENTS:
  1. · The Lettering.JS jQuery Plug-in: Working with Hover CSS Pseudo-classes
  2. · Selectively styling an HTML element in its hover state

print this article
SEARCH DEVARTICLES

The Lettering.JS jQuery Plug-in: Working with Hover CSS Pseudo-classes
(Page 1 of 2 )

If you ever thought that assigning separate styles to each part of a text-based HTML element meant that  you would have to sacrifice the pristine semantics of your markup, then take a close look at Lettering.JS. This a handy jQuery plug-in, developed by Dave Rupert, will permit you to easily dissect the text of a web page element into letters, words and lines, and style them in all sorts of clever ways.

To demonstrate the plug-in's functionality, in previous chapters of this series I developed a bunch of basic examples. They illustrated how to decorate the sections of a sample H1 header in various ways -- first by using foreground colors, and then by means of different background images. In this way I showed you how easy it is to couple the plug-in to any of the image replacement methods currently available.

At this point, you might think that we've finished our educational tour of the valuable features that Lettering.JS offers for free. Well, there's one tiny facet of the plug-in that remains undisclosed. As you may have noticed, all of the examples created so far defined the visual presentation of the aforementioned H1 element in its normal state, which is fine. This doesn't mean that it's impossible to perform a similar task when the H1 element is hovered over (assuming that you've already dropped  support for Internet Explorer 6 and below).

Therefore, in this final installment of the series I'm going to set up another approachable example. It will use the Lettering.JS plug-in to create a selectable rollover based on the same H1 element used in previous tutorials.

Having said that, it's time to start demonstrating how to put Lettering.JS to work in tandem with CSS "hover" pseudo-classes. Let's go!

Review: assigning individual background images to the lines of an HTML element

In the previous article I explained how to utilize the Lettering.JS plug-in to decorate the H1 header with a set of custom background graphics. Below I included the corresponding example, so you can grasp the logic driving it. Here it is: 

<!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 with background images)</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: #172499;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
}
#wrapper {
    width: 1084px;
    margin: 0 auto;
}
#wrapper h1 {
    overflow: hidden;
}
/* styles for each line of the header */
#colorful_header span {
    display: block;
    float: left;
    font-weight: bold;
    font-size: 5em;
}
#colorful_header span.line1 {
    width: 535px;
    height: 120px;
    background: transparent url("img/hey_buddy.png") center center no-repeat;
    text-indent: -9999px;
}
#colorful_header span.line2 {
    width: 346px;
    height: 97px;
    margin-left: 10px;
    background: transparent url("img/whats.png") center center no-repeat;
    text-indent: -9999px;;
}
#colorful_header span.line3 {
    width: 183px;
    height: 97px;
    margin-left: 10px;
    background: transparent url("img/up.png") center center no-repeat;
    text-indent: -9999px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1 id="colorful_header">Hey buddy,<br /> what's<br /> up?</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 you can see from the above code snippet, assigning different background images to the lines of an HTML element is a three-step process. It follows this sequence: first, the plug-in's "lettering()" method must be called with the "lines" argument; then it's necessary to define the CSS styles that perform the actual image replacement process; and finally, the lines of the target element must be interspersed with <br /> tags. That's pretty easy to understand, isn't it?

Nevertheless, the earlier example would be rather incomplete if I didn't show you how the targeted H1 header looks after being parsed by Lettering.JS. So, here's a complementary image that does exactly that:

Even though the appearance of the styled element is a little funny, it shows how simple it is to put the Lettering.JS plug-in to work side by side with an image replacement method and produce quite impressive results. But, considering the Lettering.JS plug-in's functionality, it'd be a shame not to use it for decorating an HTML element in its "hover" state. In doing so, it'd be feasible to create CSS-based rollovers whose characters, words or lines would remain entirely selectable! So, in the next section I'm going to redefine the styles coded in the previous example, which this time will make use of a few CSS "hover" pseudo-classes.

To learn how this example will be developed, jump forward and read the lines to come.    
 


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