Will Bontrager Blogs Website Techniques

All checkboxes of a set can be made to conform to a controlling checkbox.

In other words, when the controlling checkbox is tapped, all checkboxes of the set are checked or unchecked according to the state of the controlling checkbox.

The functionality can be desired when there are many checkboxes in a set. I recently needed such functionality.

A dashboard I'm making is being coded to export a table from database entries. The columns to include in the table are specified with checkboxes. Instead of requiring the user to tap 10 times to select all columns, I made an "ALL" checkbox to do it.

Form users who want most of the columns for their table can tap "ALL" and then uncheck the ones they don't want.

The online article has a demonstration and source code. (The demonstration wouldn't work in most email readers because JavaScript is employed.)

Here is a demonstration.

When the "ALL" checkbox is tapped, it overrides all checkboxes in the set. Whether checked or unchecked, the checkboxes will conform to the "ALL" checkbox.

Here is the source code for the entire demonstration, both the HTML and the JavaScript.

<div style="width:fit-content; border:1px solid #ccc; padding:.5em; border-radius:.5em; margin:.25em;">
<b>Columns</b>
<div style="margin-left:-.5em; margin-right:-.5em; height:0px; border-top:1px solid #ccc;"></div>
<label><input type="checkbox" id="all" onclick="AllBoxesCheckUncheck()">&thinsp;&#10003;ALL</label>
<div style="margin-left:-.5em; margin-right:-.5em; height:3px; border-top:1px solid #ccc;"></div>
    <label><input type="checkbox" id="account">&thinsp;Account</label>
<br><label><input type="checkbox" id="date">&thinsp;Date</label>
<br><label><input type="checkbox" id="type">&thinsp;Type</label>
<br><label><input type="checkbox" id="desc">&thinsp;Description</label>
<br><label><input type="checkbox" id="point">&thinsp;To/From</label>
<br><label><input type="checkbox" id="credit">&thinsp;Credit</label>
<br><label><input type="checkbox" id="debit">&thinsp;Debit</label>
<br><label><input type="checkbox" id="draw">&thinsp;Draw</label>
<br><label><input type="checkbox" id="cat">&thinsp;Category</label>
<br><label><input type="checkbox" id="notes">&thinsp;Notes</label>
</div>

<script type="text/javascript">
function AllBoxesCheckUncheck()
{
   var all = document.getElementById("all").checked;
   var checkboxes = new Array(
      "account",
      "date",
      "type",
      "desc",
      "point",
      "credit",
      "debit",
      "draw",
      "cat",
      "notes",
   );
   for(var i=0; i<checkboxes.length; i++) { document.getElementById(checkboxes[i]).checked = all; }
}
</script>

When the "ALL" checkbox is tapped, it calls the AllBoxesCheckUncheck() function.

The AllBoxesCheckUncheck() function has an array of all the checkbox id values (color coded blue). Those are the checkboxes that will be conformed to the state of the "ALL" checkbox — whether "ALL" is checked or unchecked.

The usability of a large set of checkboxes generally can be improved by allowing one tap to check or uncheck all checkboxes of the set.

(This content first appeared in Possibilities newsletter.)

ASCII quotes are what you see when you work with plain text software (not unicode text). Something like this:

He said, "You've got 'spicies' in your pie."

Typographical quotes are sometimes called educated quotes or curly quotes. The ASCII quotes in the above example converted to typographical quotes looks like this:

He said, “You’ve got ‘spicies’ in your pie.”

Notice that the ASCII apostrophe is also converted. It became a typographical apostrophe.

This article contains a PHP function to change ASCII quotes to HTML entities for typographical quotes.

• An ASCII double-quote (") is converted to either “ or ” (which publish as “ or ”).

• An ASCII single-quote/apostrophe (') is converted to either ‘ or ’ (which publish as ‘ or ’).

Here is the function:

function ASCIIquotes2Typograpicals($s)
{
   $s = preg_replace('/(\S)"/','$1”',$s);
   $s = preg_replace('/"/','“',$s);
   $s = preg_replace("/(\S)'/",'$1’',$s);
   $s = preg_replace("/'/",'‘',$s);
   return $s;
}

The ASCIIquotes2Typograpicals() function scans the text it is given and converts ASCII quotes into HTML entities for publishing typographical quotes.

Note: When converting text, don't include HTML tags with id or class information. The ASCII quotes witin the HTML tags would get converted, too, which is generally unwanted.

Here is a quick little demonstration program that uses the ASCIIquotes2Typograpicals() function.

<?php
$text = <<<LINE
He said, "You've got 'spicies' in your pie."
LINE;

$text = ASCIIquotes2Typograpicals($text);
echo $text;

function ASCIIquotes2Typograpicals($s)
{
   $s = preg_replace('/(\S)"/','$1&rdquo;',$s);
   $s = preg_replace('/"/','&ldquo;',$s);
   $s = preg_replace("/(\S)'/",'$1&rsquo;',$s);
   $s = preg_replace("/'/",'&lsquo;',$s);
   return $s;
}
?>

Us programmer types generally use ASCII text processors for creating and editing code. Because we're used to that software, we use it for other things, too, like web page content.

As an example of real use, let's suppose you maintain a section of a web page as a separate file. It's easier to update that way and can easily be pulled into the web page with a line of PHP code. Something like this:

<?php echo(file_get_contents('my_file.txt')) ?>

If you use ASCII quotes in that text (and no HTML tags that have quotation marks), you can filter it through the ASCIIquotes2Typograpicals() function. Put the function anywhere in the source code of the web page and then use this line.

<?php echo(ASCIIquotes2Typograpicals(file_get_contents('my_file.txt'))) ?>

Voilà, ASCII quotes now appear as typographical quotes.

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

Every so often, a person just wants to know if a URL is valid.

This is especially true for website programmers. URLs are used frequently. It may be for a redirect. Or it may be a thank-you page URL. Perhaps the script is designed to post data to a URL.

In those cases, depending on the script you are writing, it may be prudent to test the URL's validity before you engage with it.

The TestWebPageURL() PHP function is used to verify a URL is valid and reachable.

To use the function, include the TestWebPageURL() function within your script. Then call the function with a URL to test. The function returns an array with information it collected, including the status code.

Here is the source code for the TestWebPageURL() function.

function TestWebPageURL($url)
{
   $options = array(
      CURLOPT_RETURNTRANSFER => true,
      CURLOPT_HEADER         => false,
      CURLOPT_CONNECTTIMEOUT => 120,
      CURLOPT_TIMEOUT        => 120,
      CURLOPT_FOLLOWLOCATION => true,
      CURLOPT_MAXREDIRS      => 10,
   );
   $ch = curl_init($url);
   curl_setopt_array($ch,$options);
   curl_exec($ch);
   $info = curl_getinfo($ch);
   $info['errno'] = curl_errno($ch);
   $info['errmsg'] = curl_error($ch) ;
   curl_close($ch);
   return $info;
} # function TestWebPageURL()

A demonstration PHP script comes with this article. It uses TestWebPageURL(). The script is copy and paste.

The demonstration script displays the HTTP status code of the URL you tested. It prints any error messages the test encountered. The script also notes the destination URL if any redirects were encountered during the test. At the end, the demonstration script publishes an array of information that was gathered during the test.

To use the demonstration script, copy the source code and save it with any *.php file name, testURL.php for example. Then upload it to your server.

<?php
/*
Test URL Demonstration
Version 1
May 5, 2026
Will Bontrager Software LLC
https://www.willmaster.com/
*/

if(empty($_GET['url']))
{
   $ta = explode('/',$_SERVER['PHP_SELF']);
   $thisScript = array_pop($ta);
   echo "Use parameter name 'url' and value of the URL to test. Example:<br><span style='font-size:130%;font-family:monospace;'>$thisScript?url=https://example.com/testing.php";
   exit;
}

// test the URL.
$info = TestWebPageURL($_GET['url']);

// echo this if there was a redirect.
if( $info['url']!=$_GET['url'] )
{
   echo <<< CHUNK
<div style="white-space:pre-wrap;">
URL <b>{$_GET['url']}</b>
redirects to <b>{$info['url']}</b>
</div>
CHUNK;
}

// always echo this.
echo <<< CHUNK
<div style="white-space:pre-wrap;">
URL <b>{$info['url']}</b> returns HTTP status code: <b>{$info['http_code']}</b>
</div>
CHUNK;

// echo this if there is an error message.
if( $info['errno']>0 )
{
   echo <<< CHUNK
<div style="white-space:pre-wrap;">
Error: <b>{$info['errmsg']}</b>
</div>
CHUNK;
}

// echo the entire information array.
echo '<pre>'.print_r($info,true).'</pre>';

function TestWebPageURL($url)
{
   $options = array(
      CURLOPT_RETURNTRANSFER => true,
      CURLOPT_HEADER         => false,
      CURLOPT_CONNECTTIMEOUT => 120,
      CURLOPT_TIMEOUT        => 120,
      CURLOPT_FOLLOWLOCATION => true,
      CURLOPT_MAXREDIRS      => 10,
   );
   $ch = curl_init($url);
   curl_setopt_array($ch,$options);
   curl_exec($ch);
   $info = curl_getinfo($ch);
   $info['errno'] = curl_errno($ch);
   $info['errmsg'] = curl_error($ch) ;
   curl_close($ch);
   return $info;
} # function TestWebPageURL()
?>

After it is uploaded, type the URL of the demonstration script into your browser. Append ?url= and the URL to test.

Example: testURL.php?url=https://example.com/testing.php

When you run the script, it displays data as described further above.

Any values in the array of information that the TestWebPageURL() function gathers may be used in your PHP script. Here is an example array of information.

Array
(
    [url] => https://www.willmaster.com/
    [content_type] => text/html; charset=UTF-8
    [http_code] => 200
    [header_size] => 406
    [request_size] => 106
    [filetime] => -1
    [ssl_verify_result] => 0
    [redirect_count] => 1
    [total_time] => 0.721025
    [namelookup_time] => 0.006239
    [connect_time] => 0.152778
    [pretransfer_time] => 0.479417
    [size_upload] => 0
    [size_download] => 29208
    [speed_download] => 40510
    [speed_upload] => 0
    [download_content_length] => 29208
    [upload_content_length] => -1
    [starttransfer_time] => 0.72038
    [redirect_time] => 0.316062
    [redirect_url] => 
    [primary_ip] => 66.33.193.44
    [certinfo] => Array
        (
        )

    [primary_port] => 443
    [local_ip] => 10.1.10.152
    [local_port] => 49485
    [http_version] => 3
    [protocol] => 2
    [ssl_verifyresult] => 0
    [scheme] => HTTPS
    [appconnect_time_us] => 478744
    [connect_time_us] => 152778
    [namelookup_time_us] => 6239
    [pretransfer_time_us] => 479417
    [redirect_time_us] => 316062
    [starttransfer_time_us] => 720380
    [total_time_us] => 721025
    [errno] => 0
    [errmsg] => 
)

To reiterate, TestWebPageURL() PHP function is used to verify a URL is valid and reachable. It returns an array of information that may be used in your PHP scripts.

To use the function, include TestWebPageURL() within your script. Then call the function with a URL to test.

(This content first appeared in Possibilities newsletter.)

Here are steps to make an animation to indicate content is loading:

1. Make an image to rotate.
2. Rotate it with CSS.
3. Smile.

The code in this article was made to rotate an icon image, although the code can be used to rotate any image. In other words, you might have other uses for it.

The image you specify rotates continuously at a speed you specify.

The following demonstration rotates an icon 360° every 2.5 seconds.

Before I present the code, I want to mention that there are pure CSS loading animations. A search for "CSS loading code" should reveal a bunch. In general, no image is required for those, but they are limited to what CSS can do by itself. I like a bit more flexibility. Which is why I rotate an image.

Here is the code for the above demonstration.

<!-- The CSS. -->
<style type="text/css">
@keyframes rotation {
   from { transform:rotate(0deg); }
   to   { transform:rotate(359deg); }
}
.loading-image { animation:rotation 2.5s infinite linear; }
</style>

<!-- Place the image where you want the icon positioned when it is animated. -->
<div style="text-align:center;">
<img class="loading-image" src="https://willmaster.com/images/loadingicon.png" style="width:50px; height:50px;">
</div>

Implementing Icon Animation With CSS

As you can see, there are two parts in the above source code. There is (i) the CSS and (ii) the image. Go ahead and place the image where you want it to rotate, then do the rest of the implementation.

1. The CSS class is named loading-image and is used in both the CSS and in the img tag. If the CSS class name is changed, both places in the code need to be changed.

2. The 2.5s is within the value of the CSS loading-image definition. The value specifies the amount of time to elapse for each complete rotation. 2.5s means 2.5 seconds. Change the number as appropriate for your implementation.

The icon animation has been implemented. Try it in your browser.

Any image can be continuously rotated at any speed. Your imagination is likely to come up with additional ways to use the functionality.

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