Highlighting text fields onfocus
Have you ever noticed that some web sites you visit have their text input fields display a different background color when you put your cursor inside (in focus) of the field, like this?
Well quite simply, this can be done two ways. The first, and easy way would be to use the CSS :focus pseudo class.
input:focus { background-color:#DEEFFF; }
The second, and slightly more cumbersome way would be to use the JavaScript onfocus/onblur method listeners, and then manipulate the element's onfocus event using style.backgroundColor.
<input type="text" onfocus="this.style.backgroundColor='#DEEFFF';"
onblur="this.style.backgroundColor='#FFFFFF';" />
In a perfect world, CSS would be the way to go, but the problem is that IE6 and below doesn't support the CSS :focus pseudo class. So this effect will not be seen by a lot of your visitors. And the JavaScript solution would have to be inserted into every single input field in order to work, so it's clearly not a very intuitive, or reasonable solution either.
Continue reading Comments (7) Aug 05, 2007
Select at Random
Every so often, when making web sites, it's useful to have some randomness so that the end users won't see the same old stuff over and over again. And this can be accomplished easily using PHP. Here's how.
First we'll create a variable called $x and assign it to the PHP rand() function, which, by itself, just generates a random number. Since we already have some idea as to how many random phrases (or images, etc.) we wish to display, we can specify two parameters, (numbers) stating where to start and where to stop.
Continue reading Comments (1) Jul 08, 2007
The attr(x) function
Plenty of web sites refer to this example when describing what the attr(x) function does. In general, it justs pulls the attribute value out of an element, and returns it as a string. A string that can be used, however you please.
@media print {
a::after {
content: attr(href);
}
}
Sure, I'll admit - showing users what the URL of a link was, AFTER the page has been printed, can be quite useful. For example:
Continue reading Comments (0) Jul 07, 2007
