Resizable Colored Bar in a Div

This article is about one of the many example functions I keep in my snippets folder (actually a set of functions to accomplish something). My snippets folder contains example functions, code snippets, and gotcha notes I have collected during my 20+ years of professional programming.

When a certain functionality from the snippets folder is required, I can copy and paste. It may need tweaking, but the basic functionality is there.

The set of functions in my snippets folder chosen for this article is for a resizable colored bar within a div. The colored bar is calculated as a percentage of the size of the div. The div can be tapped to lengthen or shorten the colored bar (on a web page, not in an email).

As an example, the colored bar in this div represents 25%.

And the colored bar in this div represents 67%.

It may be used to let a person indicate how much they like something rather than only have "yes" or "no" available.

The function might be used for a rating system. The person taps on the bar to indicate how much they liked it — all the way left for did not like it and all the way right for ecstatic exuberance.

As another example, instead of specifying only one color that they like, only yellow, blue, or red, the person might tap on bars to indicate how much they like each color compared to the rest on the list. Yellow might be tapped about a third of the way from the left to indicate they kinda like it. Another color might be tapped nearly to the right to indicate they really like it. And so forth, to obtain a truer picture of what colors the person likes and doesn't like.

What you need to use the function is something to paste the code into. This article assumes you have a form where you want to include the resizable colored bar.

Using the Resizable Colored Bar Function

Some JavaScript code is required for the resizable colored bar. Let's put that on the web page first.

<script>
var MaximumSliderDivLength = 200; // Specify length for use when calculating percentage.
var clickPosition = false;
var PixelsPerPercent = 100/parseInt(MaximumSliderDivLength);

function UpdateNameBarValues(number)
{
   var value = parseInt((PixelsPerPercent*clickPosition)+.5);
   document.getElementById("tap-bar-indicator-"+number).style.width=clickPosition+"px";
   var d = document.getElementById("tap-bar-update-"+number);
   if(d.type) { d.value=value; }
   else { d.innerHTML=value; }
} // function UpdateNameBarValues()

function getXclickPosition(e)
{
   e = e || window.event;
   var el = e.target || e.srcElement;
   clickPosition = ( e.clientX - findXpos(el) + getXoffset() );
} // function getXclickPosition()

function findXpos(obj)
{
   var curleft = 0;
   if (obj.offsetParent)
   {
      while(obj.offsetParent)
      {
         curleft += obj.offsetLeft;
         obj = obj.offsetParent;
      }
   }
   else if(obj.x) { curleft += obj.x; }
   return curleft;
} // function findXpos()

function getXoffset()
{
   if (self.pageXOffset) { return self.pageXOffset; }
   if(document.documentElement && document.documentElement.scrollLeft) { return document.documentElement.scrollLeft; }
   if(document.body) { return document.body.scrollLeft; }
} // function getXoffset()
</script>

The 200 at the first line of JavaScript will be updated after the HTML for the colored bar is ready. That is the only customization for the JavaScript.

Put the JavaScript at or near the end of the web page source code. Immediately above the </body> should work.

Most of the functions in the JavaScript are used to determine the location within the div that was clicked or tapped. After that, the location is used to determine the percentage and to update the length of the colored bar.

The HTML

Now, let's publish the HTML to use the JavaScript. (We are assuming you have a form where you want to include this functionality.)

To use the JavaScript, two divs are required. The first div has a CSS declaration position:relative. This holds the colored bar. The second div is within the first div with a position:absolute declaration. The second div is the colored bar.

There is also a hidden field. When your form is submitted, the hidden field is submitted along with the rest of the form fields.

The hidden field will contain the percentage number calculated with the length of the colored bar and the maximum available space. (The length of the colored bar is the width of the div containing the colored bar. The maximum available space is the width of the div that contains the colored bar.)

Here is an example. When the div is tapped, the colored bar is resized and the hidden field (visible for the example) contains the newly calculated percentage number.

In the following source code for the HTML part of the resizable colored bar, the code for the div that contains the colored bar is colored green, the code for the div that is the colored bar is colored blue, and the code for the hidden field at the bottom is black.

Notes follow the code.

<!-- The div that contains the resizable color bar. -->
<div 
   style="position:relative; 
      width:200px; 
      height:20px; 
      border:1px solid #ccc; 
      border-radius:5px;" 
   onclick="getXclickPosition(); UpdateNameBarValues(1)">
<!-- This is the resizable color bar. -->
<div 
   id="tap-bar-indicator-1" 
   style="position:absolute; 
      left:0; 
      top:0; 
      height:18px; 
      background-color:blue; 
      border-radius:5px; 
      width:0px; 
      transition:width .5s;">
&nbsp;
</div> <!-- End of resizable color bar. -->
</div> <!-- End of container for the resizable color bar. -->

<!-- The hidden field. -->
<input id="tap-bar-update-1" type="hidden" value="0">

Notes —

The div that contains the colored bar.

1. The CSS for the div must contain position:relative;.

2. If the width of the div is changed (at CSS width:200px;), then the number 200 of the first line of JavaScript needs to be changed accordingly.

3. You'll see the number 1 in the UpdateNameBarValues(1) section of the code.

   → The number 1 occurs in three places, once here in this div that contains the colored bar, once in the div that is the colored bar, and once in the code for the hidden field. If any is changed to a different number, all three locations must be changed to the identical number.

   If you are doing another resizable colored bar on the same web page or in the same form, then the number for the second set of HTML code must be changed so the JavaScript knows which bar to affect.

The div that is the colored bar.

1. You'll see the number 1 in the div's id value id="tap-bar-indicator-1".

   → The number 1 occurs in three places, once in the div that contains the colored bar, once here in this div that is the colored bar, and once in the code for the hidden field. If any is changed to a different number, all three locations must be changed to the identical number.

   As noted before, if you are doing another resizable colored bar on the same web page or in the same form, then the number for the second set of HTML code must be changed so the JavaScript knows which bar to affect.

2. The CSS for the div must contain position:absolute; .

3. The CSS background-color:blue; specifies the bar color as blue. You may change blue to any other color for the resizable bar.

The code for the hidden field.

1. (only one step)

   You'll see the number 1 in the div's id value id="tap-bar-update-1".

   → The number 1 occurs in three places, once in the div that contains the colored bar, once in the div that is the colored bar, and once here in this code for the hidden field. If any is changed to a different number, all three locations must be changed to the identical number.

   As noted in the other two sections, if you are doing another resizable colored bar on the same web page or in the same form, then the number for the second set of HTML code must be changed so the JavaScript knows which bar to affect.

Put the HTML code into your form where you want the field to be.

Test the form like is prudent for any other changes.

Extra Technique

If you would like to display the percentage number on the web page (instead of inserting it into a hidden form field), like the early colored-bar examples in this article, omit the hidden field and use this format, instead.

<span id="tap-bar-update-1"></span>%

Notes —

You'll see the number 1 in the div's id value id="tap-bar-update-1".

→ Similar to using a hidden field, the number 1 occurs in three places, once in the div that contains the colored bar, once in the div that is the colored bar, and once here in the span tag for publishing the number on the web page. If any is changed to a different number, all three locations must be changed to the identical number.

As noted in the other two sections, if you are doing another resizable colored bar on the same web page, then the number for the second set of HTML code must be changed so the JavaScript knows which bar to affect.

Done

When you have it working on your page the way you want, the JavaScript and accompanying HTML are an excellent prospect to keep in your own snippets folder.

When you use it elsewhere, some modifications may be required. A file with a copy of this article or a note of its URL may be kept with the JavaScript and HTML.

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

Will Bontrager