On-Request Information Box

Here are two ways to code so a person can tap a link and have the requested information appear on the screen.

1. Using the JavaScript alert() function to present the information.

   The alert box design is determined by the browser. The information in the box is restricted to unformatted text (although it can have line-feed characters). The position of the alert box is determined by the browser.

2. Using a div that pops up to present the information.

   The box is your design. The information in the box may be any valid HTML web page content — text, images, videos, … . The box is positioned according to where you specify.

First, we'll present a how-to for the JavaScript alert box. Then for the information div that pops up.

Implementing JavaScript Alert Box

Here is a template for spawning a JavaScript alert box when a link is tapped.

<a href="javascript:alert('MESSAGE')">
Tap for message in alert box
</a>

Notes —

1. Replace Tap for message in alert box with the link text or image for the site visitor to tap.

2. Replace MESSAGE with your message.

   The MESSAGE must be all one line within the web page source code. A line-break code can be inserted with the \n character set (instead of <br>) so a line break is inserted into the message when it is displayed in the alert box.

   Here is a live example, followed by the source code.

   Tap for message in alert box

   <a href="javascript:alert('Roses are red.\nViolets are blue.')">
   Tap for message in alert box
   </a>
   

   Notes about quotes ↓

   1. If the MESSAGE contains any apostrophes/single quotes, then they must be escaped with a preceding backward slash;

      Example: \'

      The reason is because the MESSAGE itself is delimited (bounded) with single quotes. Escaping any inside the message tells the browser to treat the apostrophe/single quote as a literal character, not as the end of the message.

   2. If the MESSAGE contains double quotes, the HTML entity for double quotes must be used instead.

      Example: "

      The reason is because the HTML a tag uses double quotes to delimit the href attribute value. Escaping the double-quote character won't work in this case. Therefore, an HTML entity is used.

   Here is an example of a message with an apostrophe/single quote and two double quotes. The live example is followed with the source code.

   Tap for message.

   <a href="javascript:alert('Will\'s code is &quot;impeccable&quot;!!!')">
   Tap for message.
   </a>
   

For a quick implementation of a short message to display on request, the JavaScript alert() box may be ideal for what you require.

Using a div that pops up to present the information generally is better when formatting is required or when non-text information needs to be provided (images, videos, …).

Implementing an Information Div That Pops Up

Before presenting the code for the information box, here is a JavaScript function. It needs to be available somewhere on the same page as the information box.

<script type="text/javascript">
function DisplayUndisplay(div)
{
   var d = document.getElementById(div);
   if( d.style.display=="block" ) { d.style.display="none"; }
   else { d.style.display="block"; }
}
</script>

The above JavaScript contains the function DisplayUndisplay(), which is called to display and undisplay the information box. Put the JavaScript anywhere on the web page that JavaScript can run. No customization is required.

Now, let's make the information box and the link that displays the information box.

But, first, a live implementation.

Tap for information.

[dismiss]

Will's code is "impeccable"!!!

The example code contains inline CSS. It is for clarity. For a live implementation, the CSS may be moved to a style sheet.

The link div:

Let's start with the div that contains the link.

<!-- The link div -->
<div style="position:relative;">
<a href="javascript:DisplayUndisplay('messagebox')">Tap for information.</a> 

[MESSAGE BOX]

["DISMISS" LINK]

[MESSAGE CONTENT]

[END OF MESSAGE BOX]

</div><!-- End of link div -->

In the above code, replace the link text Tap for information. with your own link text.

The link won't work until the message box has been coded. And we'll do that now.

The message box:

In the above source code, you'll see [MESSAGE BOX] and [END OF MESSAGE BOX] placeholders.

Here is the code with those two placeholders replaced.

<!-- The link div -->
<div style="position:relative;">
<a href="javascript:DisplayUndisplay('messagebox')">Tap for information.</a> 

<!-- The message box -->
<div id="messagebox" style="display:none; position:absolute; left:.5em; top:-3em; width:275px; border:3px solid #ccc; border-radius:.5em; padding:1.5em 1em 1.5em 1em; background-color:#fff;">

["DISMISS" LINK]

[MESSAGE CONTENT]

</div><!-- End of message box -->

</div><!-- End of link div -->

The message box has an id value messagebox that must remain as it is — unless the value is also changed within calls to the DisplayUndisplay('messagebox') function.

Both the display:none; and the position:absolute; CSS declarations must be part of the message box style.

The left:.5em; and the top:-3em; declarations specify the position of the message box relative to the link div. Their values may be changed.

The rest of the CSS declarations are optional and may be changed, and others added, according to how you want to style the message box.

The "dismiss" link:

Here is the code with the ["DISMISS" LINK] placeholder replaced.

<!-- The link div -->
<div style="position:relative;">
<a href="javascript:DisplayUndisplay('messagebox')">Tap for information.</a> 

<!-- The message box -->
<div id="messagebox" style="display:none; position:absolute; left:.5em; top:-3em; width:275px; border:3px solid #ccc; border-radius:.5em; padding:1.5em 1em 1.5em 1em; background-color:#fff;">

<!-- The "dismiss" link -->
<div style="position:absolute; top:0; right:0;">
<a href="javascript:DisplayUndisplay('messagebox')">[dismiss]</a>
</div><!-- End of "dismiss" link -->

[MESSAGE CONTENT]

</div><!-- End of message box -->

</div><!-- End of link div -->

The position:absolute; CSS declaration must be part of the "dismiss" link style.

The top:0; and the right:0; declarations specify the position of the "dismiss" link relative to the message box. Their values may be changed.

The rest of the CSS declarations are optional and may be updated according to how you want to style the "dismiss" link.

The [dismiss] linked text may also be changed. Perhaps you prefer an "X". Or an image instead of text.

If you wish, you may insert an additional (or even more) "dismiss" links within the message box. For each, change the top:0; and the right:0; declarations to position the additional "dismiss" links.

The message content:

Here is the code with the [MESSAGE CONTENT] placeholder replaced.

<!-- The link div -->
<div style="position:relative;">
<a href="javascript:DisplayUndisplay('messagebox')">Tap for information.</a> 

<!-- The message box -->
<div id="messagebox" style="display:none; position:absolute; left:.5em; top:-3em; width:275px; border:3px solid #ccc; border-radius:.5em; padding:1.5em 1em 1.5em 1em; background-color:#fff;">

<!-- The "dismiss" link -->
<div style="position:absolute; top:0; right:0;">
<a href="javascript:DisplayUndisplay('messagebox')">[dismiss]</a>
</div><!-- End of "dismiss" link -->

<img src="https://www.willmaster.com/images/sun.png" style="border:none; outline:none;" alt="smiley">
<br>
Will's code is "impeccable"!!!

</div><!-- End of message box -->

</div><!-- End of link div -->

There are no special requirements for the message content other than any HTML markup must be valid. The content may be text, images, videos, whatever an HTML web page can display.

The Choice

When choosing the method to use, JavaScript alert() or information div, there are several things to consider.

Both methods let a person can tap a link and have requested information appear on the screen.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager