CHAPTER 12
Superclasses
Now that you have access to the almost 1800 classes from the previous chapters, this chapter focuses on combining them in combinations to make superclasses—single classes with the functionality of several classes at once. These superclasses include creating an RSS button, applying simple borders, handling rollovers, horizontal and vertical animated tabs, and more.
You’ll also discover how easy it is to create your own superclasses using simple <meta …> statements to help make building dynamic web pages the easiest it has ever been.
What Is a Superclass?
Superclasses are classes that contain groups of other classes. For example, the first superclass in this chapter, clickable, contains the nooutline and pointer classes (Plug-ins 19 and 54).
Seven superclasses have been predefined for you in the PC.js file, and you can easily create your own using the <meta …> tag, like this:
<meta http-equiv='sclass' name='clickable' content='nooutline pointer' />
In this example, the superclass clickable is created by placing the argument http-equiv=’sclass’ within a <meta …> tag, followed by the argument specifying the name of the superclass, name=’clickable’, and finally the classes to put in the superclass, content=’nooutline pointer’.
Here’s another example:
<meta http-equiv='sclass' name='yellowonblue' content='yellow blue_b' />
This creates the new superclass yellowonblue which will set the foreground color of the object to which it applies to yellow, and the background to blue.
NOTE You can include as many classes in a superclass as you like, as well as any combination of normal and dynamic classes from this book, or even throw in your own classes created either within <style> tags or from a style sheet.
PLUG-IN 94: Clickable (clickable)
The purpose of Plug-in 94 is to clearly indicate that objects, and buttons in particular, are clickable. It does this by removing any outline that may be placed around the object when it has the focus, and by turning the mouse cursor into a pointer when it hovers over the object.
In Figure 12-1, two rows of buttons have been created. The first row doesn’t use this superclass, but the second does.
In the screen grab, you can clearly see the dotted outline that has been applied to the first Cancel button, but which will not appear over the second one. Also, the mouse cursor will change to a pointer when over the second row, but not the first.
Classes
FIGURE 12-1 This superclass removes outlines and changes the mouse cursor to a pointer.
About the Superclass
By combining the effects of two other classes, this superclass helps to clearly indicate when an object is clickable.
How to Use It
To use this superclass, enter its name into the class argument of an object. For example, the following code was used to create the screen grab in Figure 12-1:
<button class='check_h'>Submit</button> <button class='cross_h'>Cancel</button> <button class='email_h'>Email Us</button> <button class='star_h' >New Stuff</button><br /> <button class='check_h clickable'>Submit</button> <button class='cross_h clickable'>Cancel</button> <button class='email_h clickable'>Email Us</button> <button class='star_h clickable' >New Stuff</button>
Try passing your mouse over the different rows and clicking various buttons to see the differences between them.
PLUG-IN 95: RSS Button (rssbutton)
Plug-in 95 creates a great looking RSS button without the need for including an image. For example, Figure 12-2 shows it being applied to both a <button> and a <span> object in both the Chrome and Internet Explorer browsers. Although there are minute differences between them, all the buttons look quite respectable.
Classes
About the Superclass
This superclass brings together a large number of CSS rules from several different classes, even including the previous superclass, clickable, to create a dynamic, 3D-effect RSS button.
How to Use It
To use this superclass, you will need to surround it with an <a href=’…’> tag pointing to your RSS feed, like this:
<a class='n' href='myfeed.xml'> <span class='rssbutton'>RSS FEED</span> </a>
The first line references the RSS feed and uses the n class to suppress the underline that would otherwise appear under the button. The middle line applies the rssbutton superclass to a <span> tag, and supplies the string “RSS FEED” to it.
You can also use the <button> tag by placing it in a form like this:
<form method='get' action='myfeed.xml'> <button class='rssbutton'>RSS FEED</button> </form>
FIGURE 12-2 The RSS button superclass used on different objects in different browsers
CAUTION When using the <button> tag, Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the contents of its value attribute (if any).
PLUG-IN 96: Border (border)
Often, you want to quickly add a border to an object and Plug-in 96 will do the job for you, instead of having to supply a set of CSS rules. For example, in Figure 12-3 a photograph is displayed twice, the second time using this superclass.
Classes
About the Superclass
This superclass uses all three border classes to create a simple, 1-pixel black border around the object.
How to Use It
When you want to quickly add a border to an object, just enter this superclass name in its class argument, like this:
<img class='border' src='myphoto.jpg' />
FIGURE 12-3 Displaying an image without and with the border superclass
PLUG-IN 97: Absolute Top Left (abstopleft)
Whenever you create a rollover or need to align objects on top of each other, the process is the same. All objects after the first one should be moved to the top left corner of the containing object, and Plug-in 97 makes doing so quick and easy.
You can see this superclass in use in Figure 12-4, where the boat image has been superimposed over the photograph.
Classes
About the Superclass
This superclass applies three classes to give an object absolute positioning, and to move it to its containing object’s top left corner.
How to Use It
To use this superclass, you will need a container object with a position other than static in which to place your objects. Then, the second object onward must apply the superclass, as in the following example, which was used for Figure 12-4:
<div class='relative'> <img class='trans07' src='i2.jpg' /> <img class='abstopleft trans06' src='boat.png' /> </div>
FIGURE 12-4 Use this superclass to lay objects over each other.
In this example, the larger image is given a transparency level of 7 and the boat a transparency of 6 and they have been superimposed over each other. Reasons you would want to do this include creating slideshows and rollovers, as in the following plug-in.
PLUG-IN 98: Rollover (rollover)
Plug-in 98 makes it very easy for you to create rollover effects, as shown in Figure 12-5, in which two face images are displayed that, when moused over, turn from happy to sad, and vice versa.
Classes
About the Superclasses
These two superclasses are intended to be used together. The rollover superclass should be applied to the first of a rollover pair of objects, and rollover_h to the second. Once implemented, whenever the mouse passes over the objects, the first one is set to transparent and the second to fully visible so the one you can see swaps. When the mouse is moved away, the first object becomes visible again and the second invisible.
In another illustration of superclasses being used as members of other superclasses, the abstopleft superclass is used as one of the members of this superclass pair.
FIGURE 12-5 Creating rollover effects with this pair of superclasses
How to Use Them
To use these superclasses, first create an object that has a positioning other than static, and then place two other objects within it, giving the first one the rollover superclass, and the second rollover_h, like this:
<div class='relative'>
<img class='rollover' src='frowney.gif' />
<img class='rollover_h' src='smiley.gif' />
</div>
The application of the relative class to the <div> ensures that it doesn’t have a position of static, and therefore it will act as the containing object for the images within it. The rollover_h superclass makes use of the abstopleft superclass (among others), so there is no need to specify the positioning of the second image.
TIP You are not restricted to only images by these superclasses, and can use any types of objects for the rollover pairs.
PLUG-IN 99: Vertical Tab (vtab)
Plug-in 99 creates a tab that slides in from the left of the screen on browsers that support CSS transitions such as Opera 10, Firefox 4, Apple Safari 5 and Google Chrome 5. Sadly, the smooth transition doesn’t work on Internet Explorer, but it does degrade to a simple in or out animation.
In Figure 12-6, a number of tabs have been created using this superclass, and the mouse is currently hovering over the “Politics” tab, which has popped out.
FIGURE 12-6 A number of pop-out tabs created using this superclass
Classes
About the Superclass
This is a great little superclass for creating a variety of animation and menuing effects. It works by changing the left padding of an object when the mouse passes over it. In conjunction with CSS3 transitions (on browsers that support them), the object will slide out and in smoothly over the course of 0.3 seconds. In Internet Explorer and other browsers that don’t support transitions, the object will simply pop in and out.
How to Use It
To use this superclass, first create a container object by giving it a position other than static. For example, here is the HTML used for Figure 12-6:
<div class='relative red_b leftby20 arial w[100]'> <div class='vtab white red_b yellow_h right w[80]'>News</div> <div class='vtab white red_b yellow_h right w[80]'>Sport</div> <div class='vtab white red_b yellow_h right w[80]'>Weather</div> <div class='vtab white red_b yellow_h right w[80]'>Politics</div> <div class='vtab white red_b yellow_h right w[80]'>Science</div> <div class='vtab white red_b yellow_h right w[80]'>Arts</div> </div>
In the first line of this example, the <div> is given relative positioning, a red background color, is moved to the left by 20 pixels (to send it past the screen edge), its font family is set to Arial, and it is given a width of 100 pixels.
Inside it are six tabs, each of which uses the vtab superclass, and it is set to white text on a red background, which changes to yellow text when hovered over with the mouse. The text is also aligned to the right and the width of each tab is set to 80 pixels.
When you pass your mouse over the tabs on a browser that supports CSS3 transitions, you’ll see them sliding in and out in a pleasing and professional manner. Even on IE and other browsers that do not support transitions, the effect still happens, although instantly rather than over time.
All the example now needs is for <a href=’…’> tags to be placed around each tab (possibly including the use of the n class to suppress any underlines) and the menu will be complete. When you do this, ensure that the <a href=’…’> and </a> are placed around the <div> (or other container), not within it.
PLUG-IN 100: Horizontal Tab (htab)
Plug-in 100 is similar to the previous plug-in, except that it creates drop-down tabs, as shown in Figure 12-7 in which the “Science” tab is currently being hovered over, and has therefore slid down.
Classes
About the Superclass
This superclass works by changing the top padding of an object when the mouse passes over it. In conjunction with CSS3 transitions (on browsers that support them), the object will slide down and up smoothly over the course of 0.3 seconds. In Internet Explorer and other browsers that don’t support transitions, the object will simply pop down and back up again.
How to Use It
To use this superclass, you need to first create a container object by giving it a position other than static. For example, here is the HTML used for Figure 12-7:
<div class='red_b arial'> <span class='htab white red_b yellow_h w[80] x[0]' >News</span> <span class='htab white red_b yellow_h w[80] x[80]' >Sport</span> <span class='htab white red_b yellow_h w[80] x[160]'>Weather</span> <span class='htab white red_b yellow_h w[80] x[240]'>Politics</span> <span class='htab white red_b yellow_h w[80] x[320]'>Science</span> <span class='htab white red_b yellow_h w[80] x[400]'>Arts</span> </div>
FIGURE 12-7 These pop-out tabs drop down vertically when hovered over.
In the first line of this example, the <div> is given a red background color, and its font family is set to Arial.
Inside it are six tabs, each of which uses the htab superclass, and is also set to white text on a red background, which changes to yellow text when hovered over with the mouse. The width of each tab is set to 80 pixels, and the horizontal location of each tab is moved in by 80 pixels from the previous one.
When you pass your mouse over the tabs on a browser that supports CSS3 transitions, you’ll see them smoothly sliding down and up. In IE and other browsers, the tabs instantly pop down and up.