WillMaster
Here are introductions to the 11 most recent items:
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.
(The complete article is at https://www.willmaster.com/blog/javascript/tap-only-once.php)Site users can print your web page. (Unless you prevent it. One way is described at the How To Prevent Web Page Printing page.)
So, if you don't actively prevent your web page from being printed, users can print it.
I recently had a need to allow printing of entire pages — to actually suggest it can be done. But I didn't want the menu printed. How to prevent a page menu from printing is the subject of this article.
The web page willbontrager.com/recipes/ has a live example.
(The complete article is at https://www.willmaster.com/library/features/no-menu-page-printing.php)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.
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.
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.
The numbers that mark ordered lists can be reversed. The list items don't reverse. Just the numbering.
Original numbers:
Reversed numbers:
When I repeatedly code something, even if only a few times a year, I eventually get disgusted with myself for not having written a function to do the work for me.
Well, below is such a function.
The JavaScript function will format the date and/or time according to your formatting codes. When you call the function, tell it the id value where to publish the result, and how to format the result.
That's pretty much it.
Of course, there are things to consider while getting up to the last step. Mostly, it's how to specify the format you prefer (do you want to print "January" or "Jan", or "01" or "1", for example). I'll address formatting shortly.
(The complete article is at https://www.willmaster.com/library/web-content-prep/javascript-formatted-date-and-time.php)
An anchor link is sometimes referred to as a scroll-to link or a jump link. The anchor link scrolls the web page to the spot on the page that has a matching id attribute.
To clarify, an h3 tag might have an id="my-spot" attribute. Thus, clicking a link with a #my-spot anchor (<a href="#my-spot">) will scroll the browser window to the <h3 id="my-spot"> tag.
First, the basic "how it works."
You have a form field.
You have a link (or image, button, div, …)
When the link is tapped, the form field is filled in.
That's the essence of how it works.
I used this for new bookkeeping software. It needed to email someone after I updated records. Well, I wanted to view the email first to verify all the data the email should have actually was present.
But I got tired of typing in my email address and then typing in their email address. Every day.
I made two buttons. One for "Them" and one for "Me." When I tap a button, the correct email address is filled into the address field. Yummy.
Other ways the idea might be used:
You can automatically scroll the content of a div to the bottom. Generally, this would be done for user convenience.
I had need for that functionality just this morning. It is the reason for this article. My thought was that some of you would appreciate knowing how to do this.
(The complete article is at https://www.willmaster.com/blog/javascript/auto-scroll-a-div-to-the-bottom.php)A built-in JavaScript function allows your web page to send a quick message to a URL on the same domain.
Data isn't actually required. You may wish to touch the page or script without sending anything.
No response is received from the page or script. But data may be sent. If sent, the data size is limited to about 64k.
The beacon may be used to:
Code examples are further below. First, here is the format for using the function.
navigator.sendBeacon(URL,OPTIONALDATA)(The complete article is at https://www.willmaster.com/library/statistics/beacon.php)
© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2026 Will Bontrager Software LLC