CSS Dots

This article was inspired from something I made to assist my fiction writing.

At the Story Worksheet, I had needed a flag or signal or other indicator for the scenes I was writing. The indicator would tell me if a scene still has to be written, if it is first draft, if final editing is almost done, and so forth.

Colored dots was the solution. Tap a dot and it becomes a solid color. Tap it again and it has a border and a small dot in the middle. Each color has whatever meaning I wanted it to mean. I can now see the state of the scene without opening it up and scanning it.

The entire mechanism that I ended up with at the worksheet is too elaborate to present in an article (it would need an entire PDF). Nevertheless, you are welcome to see how it works. If your interest is casual, here is a screenshot of its appearance.

If your interest is deeper and you wish to try it out, the Story Worksheet is free. There is no registration. You'll need to make up a name to get past the gate, which then gives you full access.

That is what inspired today's article. The article is about how to make a dot like that, just one dot, by itself.

The dot starts out as a bordered circle with a small dot in the middle. Tap it and it changes into a solid-colored circle. Tap it again, and it changes back.

An illustration of a dot with that functionality is further below.

The code for making a dot and have it change when tapped is relatively simple.

With the code at hand, you should be able to incorporate it into your own projects. Examples of use:

1. Using it as a radio button in forms.
2. Using it as a yes/no indicator in a questionnaire.
3. Perhaps used as an indicator of which chapters or images or actions have been seen or accomplished.
4. Or using it to let people pick their favorite colors.

Here is an illustration of what you will learn to do in this article.

Tap the dot and it changes into a solid blue circle. Tap it again and it changes back.

How it works: The background color switches between white and blue.

• When you see the dot on a page load, the background color is white; it shows through between the border and the dot in the middle.

• When you tap the dot, the background color changes to the same color as the border and the middle dot. It now appears to be a solid color.

JavaScript is used to change the background color.

Let's get to the code.

Here is the HTML and CSS to create the dot.

<div 
   onclick="UpdateButtonStatus(this)" 
   style="background-color:rgb(255, 255, 255); 
          width:33px; height:33px; border-radius:33px; border:3px solid rgb(0, 0, 255); 
          position:relative; box-sizing:border-box;">
<div style="background-color:rgb(0, 0, 255); 
            left:6px; top:6px; 
            width:15px; height:15px; border-radius:15px; 
            position:absolute;"></div>
</div>

The onclick="UpdateButtonStatus(this)" attribute calls the JavaScript UpdateButtonStatus function. The code for the JavaScript is further below.

The background color rgb(255, 255, 255) (white) is specified once and the color rgb(0, 0, 255) (blue) is specified twice. The blue is specified for the border and also for the dot in the middle.

The code works as is, background color changing from white to blue and vice versa, one change for each tap on the dot. Although it works as is, let me mention some of the CSS so you know why I included them.

As you see, there is a div inside a div. The outer div is the circle. The inner div is the dot. The outer div has a CSS position:relative; rule. The inner div has a position:absolute; rule. The inner div can be positioned within the outer div because the values of the position properties allow it.

The rest of the CSS I think is self-explanatory.

Here is the JavaScript for the dot-change functionality.

<script type="text/javascript">
function UpdateButtonStatus(d)
{
   if( d.style.backgroundColor == "rgb(255, 255, 255)" ) { d.style.backgroundColor = "rgb(0, 0, 255)"; }
   else { d.style.backgroundColor = "rgb(255, 255, 255)"; }
}
</script>

Within the JavaScript code, the background color rgb(255, 255, 255) (white) is specified twice and the color rgb(0, 0, 255) (blue) is specified once.

The JavaScript is copy and paste. Put it anywhere on the page with the colored dot. If you have no place better for it, immediately above the cancel </body> tag is generally a good spot.

To change the color blue to any other color, change the blue to your chosen color within the JavaScript (one place) and within the HTML/CSS (2 places).

In addition to changing the color, you might want to change sizes; or even shape, from circle to oval for example, or square.

Whether or not you make changes, the code is now available for you to incorporate into other projects that are in your interest.

(This content first appeared in Possibilities newsletter.)

Will Bontrager