CHAPTER 8
Dynamic Objects
Powerful as CSS is, it isn’t really a language, as shown by the plug-ins in this book having to repeat large chunks of code where only a minor change is required between each, such as a color or width. A language, on the other hand, is very good at repeating things based on only a few lines of code. And that’s where JavaScript fits in, because with it you can bring the dynamic interaction of a web page up an order of magnitude.
What’s more, many of the classes in this chapter allow you to enter values as parameters to create exactly the result you want, including moving objects about in the browser, loading images in only when (or if) they are scrolled into view, fading images in and out over user-definable periods, resizing and rotating objects by any amount, and changing an object’s text and background colors to all possible values.
PLUG-IN 58: NoJS (nojs) and OnlyJS (onlyjs)
There is a downside to employing JavaScript-aided classes because some people have JavaScript turned off, generally due to a habit they got into when pop-up windows became so prevalent. But with the advent of pop-up blocking in all modern browsers, the percent of users with JavaScript disabled has dropped from a height of around 12–15 percent a decade ago, to an estimated 2 percent or so nowadays. It may not be a large number of users, but it’s still enough that, where possible, care should be taken to offer fallback features for these users. And that’s what this first dynamic plug-in helps with, providing you with an easy way to offer fallback HTML for browsers on which the dynamic classes fail.
You can use the <noscript> tag for this, but it requires you to place all the fallback sections of code within pairs of these tags, and there’s no simple solution for hiding standard HTML from non-JavaScript browsers. However, by using the nojs class for any block of code that should be viewable only to non-JavaScript browsers, no extra tags are required. You simply use the name in the class argument of an object, and the onlyjs class is used to make any section of HTML visible only to JavaScript-enabled browsers.
For example, the screen grab in Figure 8-1 shows a sentence enclosed within a <div> using the nojs class, making the sentence visible only to users without JavaScript, or who have JavaScript disabled.
TIP JavaScript can be disabled and reenabled in Internet Explorer by pressing ALT-T, selecting Internet Options, choosing the Security tab, clicking the Custom level button, and then scrolling down and checking Active Scripting: Disable or Enable. Different commands are required to do this on other browsers.
FIGURE 8-1 The sentence in this window will be seen only on browsers without JavaScript.
FIGURE 8-2 With JavaScript enabled, a different sentence becomes visible.
Alternatively, in Figure 8-2, JavaScript is running in the browser and so a section of text or JavaScript-enabled browsers only is displayed.
Variables, Functions, and Properties
About the Classes
These classes provide complementary functionality to each other. The nojs class is ignored on non-JavaScript browsers; therefore, any object using the class is viewable. But on JavaScript-enabled browsers, the nojs class is acted upon by JavaScript and any object using it is hidden, so users who have JavaScript will not see any objects using the nojs class.
On the other hand, the onlyjs class should be used in conjunction with a style argument to hide an object from non-JavaScript browsers, but browsers with JavaScript enabled detect the class and unhide such objects so they become visible.
How to Use Them
You will generally use these classes in pairs, so you can offer one set of HTML to users with JavaScript and another to those without, like this:
<div style='display:none;' class='onlyjs'> This sentence is visible only to JavaScript users </div> <div class='nojs'> This sentence is visible only to non-JavaScript users </div>
In the first <div>, both the arguments style=’display:none’ and class=’onlyjs’ must be applied in order to make its contents visible only to browsers with JavaScript enabled.
For non-JavaScript browsers, you simply attach the argument class=’nojs’ to an object to ensure that only users without JavaScript enabled can see it.
About the JavaScript
Don’t worry if you don’t program, because you can ignore these JavaScript code segments and skip to the next plug-in—they are included simply for programmers who may be interested in how they work.
The following partial JavaScript listing shows the main setup JavaScript code for all of the classes in the remainder of this book. It starts with initializing the PJ.js JavaScript library from my book Plug-in JavaScript. This is a library of JavaScript files that make using the language much simpler, especially for code that must run in a variety of modern browsers. As with all the other files used in this book, PJ.js, is available as part of the download at the companion web site at plugincss.com.
Initialize()
OnDOMReady(function()
{
var gfurl = 'http://fonts.googleapis.com/css?family='
var wheight = GetWindowHeight()
var tags = document.getElementsByTagName("*")
var numtags = tags.length
var font = ''
var elems = []
var gfonts = []
var cites = []
var refers = []
var sclasses = []
var gfindex = 0
var cindex = 0
var demand = false
var index, index2, thistag, regex, oldclassname
loadsclasses(sclasses)
for (index = 0 ; index < numtags ; ++ index)
{
thistag = tags[index]
var tagname = thistag.tagName.toLowerCase()
var tagtype = (thistag.type) ? thistag.type.toLowerCase() : ''
var classname = thistag.className.toLowerCase()
var cnamecopy = classname
var origcname = thistag.className
var repeat = true
After initializing the PJ.js library (which provides much of the functionality of these dynamic classes), the OnDOMReady() function is called, which sets up the code after it in such a way that the classes become active only once the entire web page is loaded (but before any images or other embedded objects), so that all objects in it can then be referenced at the earliest possible opportunity.
After that, a number of variables used by JavaScript are declared. If you load the code into an editor, you can issue a quick search to see which variables are used by which routines.
Next, the superclasses referred to in Chapter 12 are loaded using the loadsclasses() function, and then the main loop controlling the dynamic classes begins, in which every single class= argument in the web page is examined one at a time and, if it matches one of the new dynamic classes, the code to handle it is activated.
In the case of the two classes in this plug-in group, the code used follows. It simply employs a regular expression to find the class names (highlighted in bold) and, if found, acts on them by calling either the Hide() function to hide the object using the class, or the Show() function to reveal it. The variable thistag refers to the current object whose class argument is being examined.
TIP Remember that to function correctly, all the files used by the plug-ins must be loaded in at the start of each web page within <head> tags, like the following example which pulls in the PC.css style sheet and the PJ.js and PC.js JavaScript libraries:
<head> <link rel='stylesheet' type='text/css' href='PC.css' /> <script src='PJ.js'></script><script src='PC.js'></script> </head>
The JavaScript
if (classname.search(/nojs/, 0) != -1) Hide(thistag) if (classname.search(/onlyjs/, 0) != -1) Show(thistag)
PLUG-IN 59: Middle (middle)
This class is particularly suitable in cases when standard CSS doesn’t have the effect you want because instead of using values of auto, it calculates the correct margins by querying the dimension of the parent object and uses those values to force the desired behavior (as do the middle, center, top, bottom, left, and right plug-in classes).
What this class does is vertically align an object by finding out the height of the object immediately enclosing it (its parent) and then placing it directly between the upper and lower boundaries. In Figure 8-3, a 300 × 100-pixel <div> contains another object that has been vertically centered using this class.
FIGURE 8-3 Vertically centering one object inside another
Variables, Functions, and Properties
About the Class
After looking up the height of the parent object, this class then sets the marginTop and marginBottom JavaScript equivalents of the CSS margin-top and margin-bottom properties to equal values sufficient to display the object exactly in the middle.
NOTE Wherever you see a JavaScript property that starts with a lowercase letter and has an uppercase one in the middle, you can convert it to a CSS property by changing the uppercase letter to lowercase and placing a hyphen before it. Therefore, marginBottom becomes margin-bottom, and so on.
How to Use It
In order to use this class, the parent object needs to already have a position other than static, such as relative or absolute, and the object to be moved should be given an absolute position, like this:
<div style='width:400px; height:100px;' class='relative lime_b'>
<div class='absolute aqua_b middle'>
This sentence is vertically centered
</div>
</div>
This example sets the outer <div> to a width of 400 and a height of 100 pixels, gives it relative positioning and sets the background to lime. The inner <div> is given absolute positioning, a background color of aqua, and is assigned the middle class.
The JavaScript
if (classname.search(/middle/, 0) != -1)
{
S(thistag).marginTop = S(thistag).marginBottom =
Px((H(thistag.parentNode) - H(thistag)) / 2)
}
PLUG-IN 60: Center (center)
Plug-in 60 is similar to the middle class, but it centers an object horizontally. In Figure 8-4, the previous example has been extended to also center the inner object using this class.
FIGURE 8-4 The example from the previous plug-in is now also centered horizontally.
Variables, Functions, and Properties
About the Class
By looking up the width of the parent object, this class then sets the marginLeft and marginRight properties of the object to equal values sufficient to display the object exactly in the center.
How to Use It
In order to use this class, the parent object needs to already have a position other than static, such as relative or absolute, and the object to be moved should be given an absolute position, like this:
<div style='width:400px; height:100px;' class='relative lime_b'>
<div class='absolute middle center aqua_b'>
This sentence is vertically and horizontally centered
</div>
</div>
This example sets the outer <div> to a width of 400 and a height of 100 pixels, gives it relative positioning, and sets the background to lime. The inner object is given absolute positioning, a background color of aqua, and is assigned both the center and middle classes.
The JavaScript
if (classname.search(/center/, 0) != -1)
{
S(thistag).marginLeft = S(thistag).marginRight =
Px((W(thistag.parentNode) - W(thistag)) / 2)
}
PLUG-IN 61: Top (top)
This class attaches an object to the top of its parent, as shown in Figure 8-5, in which the previous example is top- instead of middle-aligned.
Variables, Functions, and Properties
About the Class
By looking up the height of the parent object, this class then sets the marginTop property to 0 pixels and the marginBottom property of the object to the value required to ensure it stays at the top of its containing object.
How to Use It
In order to use this class, the parent object needs to already have a position other than static, such as relative or absolute, and the object to be moved should be given an absolute position, like this:
<div style='width:400px; height:100px;' class='relative lime_b'>
<div class='absolute top center aqua_b'>
This sentence is top aligned and horizontally centered
</div>
</div>
Here, the inner object is given absolute positioning, a background color of aqua, and is assigned both the top and center classes.
The JavaScript
if (classname.search(/top/, 0) != -1)
{
S(thistag).marginTop = '0px';
S(thistag).marginBottom = Px(H(thistag.parentNode) -H(thistag))
}
FIGURE 8-5 The inner object is top-aligned using this class.
PLUG-IN 62: Bottom (bottom)
This class attaches an object to the bottom of its parent, as shown in Figure 8-6, in which the previous example is bottom- instead of top-aligned.
Variables, Functions, and Properties
About the Class
By looking up the height of the parent object, this class then sets the marginBottom property to 0 pixels and the marginTop property of the object to the value required to ensure it stays at the bottom of its containing object.
How to Use It
The following example is the same as the previous one, with just one class change:
<div style='width:400px; height:100px;' class='relative lime_b'>
<div class='absolute bottom center aqua_b'>
This sentence is bottom aligned and horizontally centered
</div>
</div>
Here the inner object is assigned both the bottom and center classes.
The JavaScript
if (classname.search(/bottom/, 0) != -1)
{
S(thistag).marginTop = Px(H(thistag.parentNode) -H(thistag))
S(thistag).marginBottom = '0px';
}
FIGURE 8-6 The inner object is bottom-aligned using this class.
PLUG-IN 63: Left (left)
Plug-in 63 is similar to the center class, but it aligns an object to the left. In Figure 8-7, the previous example has been modified to left-align the inner object using this class, rather than centering it. The object is also middle-aligned vertically.
Variables, Functions, and Properties
About the Class
By looking up the width of the parent object, this class then sets the marginLeft property to 0 pixels and the marginRight property of the object to the value required to ensure it stays at the left of its containing object.
How to Use It
The following example is the same as the previous one, with just one class change:
<div style='width:400px; height:100px;' class='relative lime_b'>
<div class='absolute left middle aqua_b'>
This sentence is left aligned and vertically centered
</div>
</div>
Here the inner object is assigned both the left and middle classes.
The JavaScript
if (classname.search(/left/, 0) != -1)
{
S(thistag).marginLeft = '0px';
S(thistag).marginRight = Px(W(thistag.parentNode) - W(thistag))
}
FIGURE 8-7 The example from the previous plug-in is now left-aligned and centered vertically.
PLUG-IN 64: Right (right)
Plug-in 64 is similar to the left class, but it aligns an object to the right. In Figure 8-8, the previous example has been modified to right-align the inner object using this class, rather than left-aligning it.
Variables, Functions, and Properties
About the Class
By looking up the width of the parent object, this class then sets the marginRight property to 0 pixels and the marginLeft property of the object to the value required to ensure it stays at the right of its containing object.
How to Use It
The following example is the same as the previous one, with just one class change:
<div style='width:400px; height:100px;' class='relative lime_b'>
<div class='absolute right middle aqua_b'>
This sentence is right aligned and vertically centered
</div>
</div>
Here the inner object is assigned both the right and middle classes.
The JavaScript
if (classname.search(/right/, 0) != -1)
{
S(thistag).marginLeft = Px(W(thistag.parentNode) - W(thistag))
S(thistag).marginRight = '0px';
}
FIGURE 8-8 The example from the previous plug-in is now right-aligned.
PLUG-IN 65: On Demand (ondemand)
Have you noticed how Flash programs and movies generally don’t load until you scroll them into view? The idea behind this is to save on downloading data unnecessarily, thus decreasing the provider’s bandwidth fees and speeding up your browsing.
Well, with this class you can provide the same feature for your images. When you use it, only those images already in view when a page loads are downloaded. Then, as you scroll, when each new image comes into view it is quickly downloaded and displayed. And, because only one image is fetched at a time, rather than as part of the initial flurry of downloads accompanying a page load, it’s actually very fast and looks good too since they fade into view.
With it, you’ll save on your bandwidth bills and speed up your web pages at the same time, as shown in Figure 8-9, in which the photo is being faded in after being scrolled into view.
FIGURE 8-9 Using this plug-in, pictures are downloaded only when required.
Variables, Functions, and Properties
About the Class
This class checks all images in a web page to see whether they are using the ondemand class. Any that do have their position in the web page examined to see if they are within view. If they are, then the image locations are loaded in from the alt arguments and placed in the src arguments to download them. But any that are not yet in view have their opacity set to zero so that the broken image icon will not display.
Later in the program, a function will be set up to keep an eye on these images, and download and fade them in gently as they come into view.
How to Use It
To use this class, all you need to do is attach the ondemand class to any images you have decided should use this feature, and use the alt argument for the image URL not the src argument (this is important), like this:
<img class='ondemand' alt='myphoto.jpg' />
The image will then only be downloaded and faded in when it is scrolled into view.
For programmers interested in the JavaScript code that later monitors the images (towards the end of the PC.js file), here it is (non-programmers can skip ahead to the next plug-in):
if (demand) setTimeout(DoOnDemand, 10)
This line checks whether the variable demand has a value of true. If so, then the ondemand class has been used at least once in the web page and so the function DoOnDemand() is set to be called in 10 milliseconds. That function looks like this:
function DoOnDemand()
{
demand = false
for (index = 0 ; index < numtags ; ++index)
{
thistag = tags[index]
if (elems[index])
{
demand = true
if (Y(thistag) < (SCROLL_Y + wheight))
{
thistag.onload = function() { FadeIn(this, 500) }
thistag.src = elems[index]
elems[index] = ''
}
}
}
if (demand) setTimeout(DoOnDemand, 10)
}
What it does is iterate through the array elems[], which has previously been assigned the locations of all ondemand images, and checks whether the image is in view. If so, then the FadeIn() function is set to be called as soon as the image is loaded, and then the image’s src= argument is given the location of the image, so it can be fetched. Once an image is loaded, its entry in the elems[] array is removed so it won’t be looked up again.
After this, if the variable demand is true, then the interrupt is set up to call the function in a further 10 milliseconds (and so on until all images are downloaded). If it is not true, then no more images require loading in, and so no more calls are made to the interrupt function.
Following is the initial code that locates instances of the ondemand class and acts on them.
CAUTION Remember that you must use the alt argument of an image not its src argument when using the ondemand class. This is to prevent fast browsers that may have already parsed the full HTML from trying to load images in until the program lets it. With no URLs in the src arguments, the browser will skip them.
The JavaScript
if (classname.search(/ondemand/, 0) != -1 && tagname == 'img')
{
if (Y(thistag) > (SCROLL_Y + wheight))
{
elems[index] = thistag.alt
demand = true
Opacity(thistag, 0)
}
else thistag.src = thistag.alt
}
PLUG-IN 66: Fadein (fadein[n])
Using this plug-in, you can fade in an object over a length of time of your choosing. This is the first dynamic plug-in in which you’ll see how to pass values to those classes that use them. For example, the image in Figure 8-10 has been set to fade in over 2,000 milliseconds (or 2 seconds) and is now in the process of fading.
Variables, Functions, and Properties
FIGURE 8-10 Using this class to fade in images over a period of time
About the Class
This class uses the JavaScript replace() function on a copy of the class name, and specifies an anonymous, inline function for handling the replacement. But, rather than replacing, the function only wants access to the matched string, which it receives in the array element arguments[1]. It then sets the opacity of the object to 0 and calls the FadeIn() function (from PJ.js), passing it the object to fade and the value in arguments[1], which is the number of milliseconds the fade should take.
How to Use It
To make an object fade in, use this dynamic class in its class argument, as in the following (ensuring that duration of the fade in milliseconds is placed within a pair of square brackets):
<img class='fadein[2000]' src='i5.jpg' />
Any value from 0 upwards is acceptable for the duration length, and the argument and square brackets may not be omitted.
The JavaScript
if (classname.search(/fadein/, 0) != -1)
{
cnamecopy.replace(/fadein[([^]]*)]/, function()
{
Opacity(thistag, 0);
FadeIn(thistag, arguments[1])
} )
}
PLUG-IN 67: Fadeout (fadeout[n])
Plug-in 67 offers the inverse functionality to the fadein[] class by fading out an object over a set period of time, as shown in Figure 8-11, in which a photo is in the process of fading out using this class.
Variables, Functions, and Properties
About the Class
This class uses the JavaScript replace() function in the same way as the fadein[] plug-in to pass a duration interval to the FadeOut() function.
FIGURE 8-11 You can also fade out objects with the fadeout class.
How to Use It
To make an object fade out, use this dynamic class in its class argument, like this (ensurin that duration of the fade in milliseconds is placed within a pair of square brackets):
<img class='fadeout[2000]' src='i6.jpg' />
Any value from 0 upwards is acceptable for the duration length, and the argument and square brackets may not be omitted.
TIP You can fade out any object, not just images. Beware, however, because Internet Explorer removes the ClearType setting on any text that has its opacity changed, making it appear more jagged. One solution is to fade a white object in and out that you place over another. The one underneath will then appear to fade out and in, and no fonts will be affected.
The JavaScript
if (classname.search(/fadeout/, 0) != -1)
{
cnamecopy.replace(/fadeout[([^]]*)]/, function()
{
FadeOut(thistag, arguments[1])
} )
}
PLUG-IN 68: Resize Textarea (resizeta[n |n])
Choosing the right dimensions for a <textarea> input tag can be difficult. Make it too small and there is not much room for the user. But if it’s too large, it may appear daunting to the user, who will feel they need to fill the space.
Thankfully, the resizeta[] class provides an answer, allowing you to set up a <textarea> with an initial number of rows. This class will then monitor it for the minimum and maximum values you give it, contracting and expanding the area according to how many lines of text have been input, as shown in Figure 8-12.
Variables, Functions, and Properties
About the Class
This class uses the JavaScript replace() function on a copy of the class name, and specifies an anonymous inline function for handling the replacement. But, rather than replacing, the function only wants access to the matched string, which it receives in the array elements arguments[1] and arguments[2]. It then passes these values to the ResizeTextarea() function, which continuously monitors the textarea, contracting and expanding it as necessary.
How to Use It
To use this class, set up a <textarea> tag with the required number of rows and columns, then place the resizeta[] class in the class argument and provide the minimum and maximum number of rows within the square brackets. These two values must be separated with a | symbol, which is the standard way to separate values passed in these dynamic classes. The result looks like this:
FIGURE 8-12 A textarea that was originally three rows high has expanded to five.
<textarea class='resizeta[3|8]' rows='3' cols='50'></textarea>
This example creates a 3-row by 50-column <textarea>, which can expand up to 8 and retract back to 3 rows.
The JavaScript
if (classname.search(/resizeta/, 0) != -1 &&
tagname == 'textarea')
{
cnamecopy.replace(/resizeta[([^|]*)|([^]]*)]/, function()
{
ResizeTextarea(thistag, arguments[1], arguments[2])
} )
}
PLUG-IN 69: Rotate (rotate[n])
This class starts to use a little meatier code. It’s a more powerful version of the rotatec… and rotatea… classes from Plug-in 55 in Chapter 7, because it supports rotating an object between 1 and 359 degrees or –1 and –359 degrees.
For example, the image of the hand in Figure 8-13 has been rotated by –45, –22.5, 0, 22.5, and 45 degrees, respectively.
FIGURE 8-13 Using this class, you can rotate any object clockwise or counterclockwise, by any amount.
Variables, Functions, and Properties
About the Class
This class uses the JavaScript replace() function on a copy of the class name, and specifies an anonymous inline function for handling the replacement. However, rather than replacing, the function only wants access to the matched string, which it receives in the array element arguments[1]. If the browser is not Internet Explorer, it then passes this value to the S() function to modify the correct transform property for the browser.
If the browser is IE (determined by checking for the existence of the filter property), a series of calculations are made to determine the correct values for the matrix function IE uses to rotate an object. The matrix is then applied by assigning it to the filter property using the S() function, and then the object is moved to a relative location that will make the rotation appear to have occurred around its center (to match the way all other browsers rotate).
How to Use It
To use this class, enter its name in the class argument of the object to be rotated, ensuring you pass the amount of rotation required within a pair of square brackets, like the following, which rotates the image clockwise by 17 degrees:
<img class='rotate[17]' src='image.jpg' />
Here, for example, is the HTML used to create Figure 8-13:
<img class='rotate[-45]' src='hand.jpg' /> <img class='rotate[-22.5]' src='hand.jpg' /> <img src='hand.jpg' /> <img class='rotate[22.5]' src='hand.jpg' /> <img class='rotate[45]' src='hand.jpg' />
CAUTION On all recent browsers other than Internet Explorer, you can rotate any object. But because IE has to use the filter property for this effect, it will only work on images.
The JavaScript
if (classname.search(/rotate/, 0) != -1)
{
cnamecopy.replace(/rotate[([^]]*)]/, function()
{
var r = arguments[1]
S(thistag).MozTransform = 'rotate(' + r + 'deg)'
S(thistag).WebkitTransform = 'rotate(' + r + 'deg)'
S(thistag).OTransform = 'rotate(' + r + 'deg)'
S(thistag).transform = 'rotate(' + r + 'deg)'
if (typeof S(thistag).filter != UNDEF)
{
var rad = r * (Math.PI * 2 / 360)
var cosrad = Math.cos(rad)
var sinrad = Math.sin(rad)
var w = W(thistag)
var h = H(thistag)
var filter = 'progid:DXImageTransform.Microsoft.' +
'Matrix(M11 = ' + cosrad + ', M12 = ' + -sinrad +
', M21 = ' + sinrad + ', M22 = ' + cosrad +
", SizingMethod='auto expand')"
S(thistag).filter = filter
Locate(thistag, REL, -((W(thistag) - w) / 2),
-((H(thistag) - h) / 2))
}
} )
}
PLUG IN 70: width (w[n])
Throughout this book, there have been examples where the width of an object has required changing, and this has been achieved using a style argument. However, with this class you can specify the width of an object as a dynamic class parameter, as shown in Figure 8-14, in which the width of the <div> has been set to 450 pixels.
Variables, Functions, and Properties
About the Class
This class uses the replace() function to pass the width from the class argument to the S() function in order to modify the object’s width by changing the width property.
How to Use It
To use this class, enter the width amount in pixels within square brackets after the class name like this, which sets the width of the <div> to 450 pixels:
<div class='w[450] yellow red_b'>Hello</div>
No measurements other than pixels are supported, and you must enter a number greater than 0 in the square brackets.
The JavaScript
if (classname.search(/w/, 0) != -1)
{
cnamecopy.replace(/w[([^]]*)]/, function()
{
S(thistag).width = Px(arguments[1])
} )
}
FIGURE 8-14 Using this class to change the width of an object
PLUG-IN 71: Height (h[n])
With this class, you can specify the height of an object as a dynamic class parameter, as in the case of Figure 8-15, in which the example in the previous plug-in has also had its height set to 70 pixels.
Variables, Functions, and Properties
About the Class
This class uses the replace() function to pass the width from the class argument to the S() function in order to modify the object’s height by changing the height property.
How to Use It
To use this class, enter the height amount in pixels within square brackets after the class name like this, which sets the height of the <div> to 70 pixels:
<div class='h[70] yellow red_b'>Hello</div>
No measurements other than pixels are supported, and you must enter a number greater than 0 in the square brackets.
FIGURE 8-15 Using this class to change the height of an object
The JavaScript
if (classname.search(/h/, 0) != -1)
{
cnamecopy.replace(/h[([^]]*)]/, function()
{
S(thistag).height = Px(arguments[1])
} )
}
PLUG-IN 72: X (x[n])
Once you free an object from the flow of a web page by giving it a position other than static (such as relative or absolute), you can move it where you like on a page (or within its containing object). Using this class, you can change an object’s horizontal position on the page as shown in Figure 8-16, in which a 115 × 115–pixel object has been inset from the left of the browser by 475 pixels.
Variables, Functions, and Properties
About the Class
This class uses the replace() function to pass the horizontal location from the class argument to the S() function in order to modify the object’s left offset by changing its left property.
FIGURE 8-16 The box has been inset from the left by 475 pixels using this class.
How to Use It
To use this class, enter the left offset amount in pixels within square brackets after the class name like this, which sets the left offset of the <div> to 475 pixels (and also sets the width and height to 115 pixels each):
<div class='absolute w[115] h[115] x[475] yellow blue_b'> 115 x 115 pixels, in by 475 pixels. </div>
No measurements other than pixels are supported, and you must enter a number greater than 0 in the square brackets.
The JavaScript
if (classname.search(/x/, 0) != -1)
{
cnamecopy.replace(/x[([^]]*)]/, function()
{
S(thistag).left = Px(arguments[1])
} )
}
PLUG-IN 73: Y (y[n])
This is the partner class for x[]; it moves an object down by the amount specified in the parameter in square brackets. Figure 8-17 shows the example from the previous plug-in, but with its vertical offset set to 53 pixels.
FIGURE 8-17 The object has now been moved down by 53 pixels.
Variables, Functions, and Properties
About the Class
This class uses the replace() function to pass the vertical location from the class argument to the S() function in order to modify the object’s top offset by changing its top property.
How to Use It
To use this class, enter the top offset amount in pixels within square brackets after the class name like this, which sets the top offset of the <div> to 53 pixels (and also sets the width and height to 115 pixels each and the left offset to 475 pixels):
<div class='absolute w[115] h[115] x[475] y[53] yellow blue_b'> 115 x 115 pixels, inset from the left by 475 pixels, and down by 53 pixels. </div>
No measurements other than pixels are supported, and you must enter a number greater than 0 in the square brackets.
TIP You can also use negative values on objects with relative position to move them both to the left and up in the browser.
The JavaScript
if (classname.search(/y /, 0) != -1)
{
cnamecopy.replace(/y[([^]]*)]/, function()
{
S(thistag).top = Px(arguments[1])
} )
}
PLUG-IN 74: Text Color (color[colorname/#nnnnnn/#nnn])
Although previous chapters have introduced a basic set of 21 color names that you can use within classes, sometimes you need much finer color control, which is what this class provides. With it, you can choose any color value from #000000 through to #ffffff (or the #000 to #fff short forms), as well as any pre-defined color names that browsers understand, such as blue, green, or violet. In Figure 8-18, six different color values have been selected using this class.
FIGURE 8-18 The result of using this class on six different values
Variables, Functions, and Properties
About the Class
This class uses the replace() function to pass the color value from the class argument to the S() function in order to modify the object’s color by changing its color property.
How to Use It
To use this class to change the color of some text, place it in the class argument of the containing object and enter the color value you want within a pair of square brackets following the class name, as in the following HTML, which was used for the screen grab in Figure 8-18:
<span class='pt40'>
<span class='color[#456789]'>#456789</span>
<span class='color[#ca8] '>#ca8 </span>
<span class='color[#987654]'>#987654</span><br />
<span class='color[green]' >green </span>
<span class='color[violet]' >violet </span>
<span class='color[magenta]'>magenta</span>
</span>
The JavaScript
if (classname.search(/color/, 0) != -1)
{
cnamecopy.replace(/color[([^]]*)]/, function()
{
S(thistag).color = arguments[1]
} )
}
PLUG-IN 75: Background Color (bcolor[#nnnnnn])
This class provides the same functionality as the color[] class, except for changing the background color of an object, as shown in Figure 8-19, in which the same six color values from the previous example have now been applied to the background properties of the objects.
Variables, Functions, and Properties
About the Class
This class uses the replace() function to pass the color value from the class argument to the S() function in order to modify the object’s background color by changing its backgroundColor property.
FIGURE 8-19 This class lets you change the background of any object to any color.
How to Use It
To use this class to change the background color of some text, place it in the class argument of the containing object and enter the color value you want within a pair of square brackets following the class name, as in the following HTML, which was used for the screen grab in Figure 8-19:
<span class='pt40'>
<span class='bcolor[#456789]'>#456789 </span>
<span class='bcolor[#ca8]' >#ca8 </span>
<span class='bcolor[#987654]'>#987654 </span><br />
<span class='bcolor[green]' >green </span>
<span class='bcolor[violet]' >violet </span>
<span class='bcolor[magenta]'>magenta </span>
</span>
The JavaScript
if (classname.search(/bcolor/, 0) != -1)
{
cnamecopy.replace(/bcolor[([^]]*)]/, function()
{
S(thistag).backgroundColor = arguments[1]
} )
}