Will Bontrager Blogs Website Techniques

Occasionally it is important to allow only one tap on a web page element. A form submit button, for example, which this article describes how to do.

To prevent a second tap on something, what was tapped needs to disappear. It might just go poof, or it might get covered. This article describes how to make it go poof.

Here is an illustration. When you tap the button below, it disappears.

Reload the page to make the button appear again.

This is the source code of the above illustration.

<input 
   style="visibility:visible" 
   onclick="this.style.visibility='hidden'" 
   type="button" 
   value="Tap Me and I Go Poof">

The page is loaded with the button CSS being visibility:visible. When the button is tapped, this.style.visibility='hidden' turns visibility into hidden.

The reason to use property visibility instead of display is so the button can be removed without reflowing the entire web page. The button goes poof, but the space it occupied does not close up.

Now you know. :-)

(This content first appeared in Possibilities newsletter.)

When a mouse goes over an image, the image can change its brightness. When the mouse goes elsewhere, the image brightness can be restored.

The CSS is the filter:brightness() declaration. The img attributes are onmouseover and onmouseout.

Here is a demonstration.

Put the mouse pointer over the image to see it brighten. Send the pointer elsewhere to restore the brightness. If you are using a phone instead of a computer, you are unlikely to have a mouse.

Here is the code for the demonstration.

<img 
   onmouseover="this.style.filter='brightness(120%)'" 
   onmouseout="this.style.filter='brightness(100%)'" 
   src="https://willbontrager.com/coverimages/MessengerWill/CoverMessengerWill-200w.jpg" 
   style="max-width:100%;" 
   alt="Book cover, 'Messenger Will' by Will Bontrager">

The CSS brightness() function expects a percentage of brightness (no number means no change). 100% is the actual brightness of the image. Less than 100% is less bright. More than 100% is more bright.

The onmouseover value in the demonstration is brightness(120%). It makes the image slightly brighter. The onmouseout value is brightness(100%). It restores the image's natural brightness.

The filter:brightness() declaration is used to set the image's initial brightness when you want it different from its original luminosity. As an example, if you wanted to load an image a bit darker than its natural brightness, you would specify style="filter:brightness(70%);" declaration (or different percentage under 100%; 0%=black).

You're not restricted to images. The filter:brightness() declaration and the onmouseover and onmouseout attributes for changing brightness can be applied to divs, tables, and other HTML elements. This article's focus is images.

(This content first appeared in Possibilities newsletter.)

When you have a form with fields you don't want the user to change, there is a choice of two attributes built into HTML to accomplish that.

The two attributes are readonly and disabled. They have only one thing in common: preventing field value change. Otherwise, each is unique.

The field values of both readonly and disabled cannot be changed. If it can be changed on the screen, the form submission will include the unchanged version, not the changed.

When the form submits, readonly fields will be included. However, on form submission, readonly fields will be absent from the submission.

The readonly field value color is whatever the browser determines is its default. The disabled field value color is almost always grayed out to indicate it's a non-interactive field.

(This content first appeared in Possibilities newsletter.)

Most of you have embedded an image within text. You have a paragraph of text, and you embed an image within it the same size as the text.

If you use height:1em; for the image, it may open up the interline spacing. That's because 1em includes the descenders. The base of the image doesn't start that low. Thus, it sticks up above the actual text. (There is a way to avoid that, mentioned shortly.)

Manually specifying a pixel height for the image can be done. But if it is too small, it looks dinky. Too large, and the image expands the interline spacing. If you decide to change the text font size, you may need to resize all those images.

That is, unless you specify the CSS declarations height:1em; vertical-align:text-bottom; within the img tag.

The vertical-align:text-bottom; CSS declaration moves the image down so the bottom of the image is in line with the bottom of the text descenders. Now a 1em tall image won't stick above the top of the text. And the interline spacing won't change.

The height:1em; vertical-align:text-bottom; declarations should not affect the interline spacing.

• height:1em; is the height of the text. The font size.

• vertical-align:text-bottom; brings the bottom of the image down to the bottom of the text descenders (so the image height won't alter the interline spacing).

If you change the text font size, the image height will change automatically.

The Willmaster logo images embedded in the following examples have the CSS declarations height:1em; vertical-align:text-bottom; specified in the img tag.

The examples demonstrate font size changes. You'll see the image height adjust itself to match the font size.

Here is the basic source code of the above examples. On your test page, change the font size to see the image grow or contract.

<p style="font-size:16px;">
The height of the image is the text font size.
<img style="height:1em; vertical-align:text-bottom;" src="https://www.willmaster.com/images/wmlogo_icon.gif" alt="Willmaster.com logo">
When you change the font size, the image height will also change.
</p>

There are times when an image must be a specific size. I've found in most instances, however, I want the image within the line of text to adjust its height when the font size is changed. The above code accomplishes it.

(This content first appeared in Possibilities newsletter.)