Powerhouse CSS Style Changer

Occasionally, user-friendliness can be improved by temporarily changing the style of an individual div or other HTML element.

As an example, a border change when a mouse hovers over something lets the user know the mouse is recognized. As another example, a slight text position shift lets the user know the click was accepted.

Slight visual changes can assure the user things are working as they should.

Here's another way to assure the user. As a web page activity begins that may take longer than a couple seconds (such as loading more content), a progress bar may be revealed.

On some web pages, it may make sense to employ a friendly attention-attracting style change to notify the user when something is imminent.

An example: When a countdown nears completion, attention can be attracted by changing the style of the countdown area.

How It's Done

To effect style changes, in-line CSS is added or changed with a JavaScript function. The CSS affects only elements you specify, on the current web page.

A JavaScript function named PowerhouseStyleChange() is the workhorse to effect the changes. You'll find the copy and paste source code further below.

(If you need to only show/hide a div or other HTML elements, the Powerhouse JavaScript Function for Show/Hide may be a better fit.)

Live Examples

Here's one live example. The border changes when the mouse pointer hovers over the div. Then changes back when the pointer leaves.

Here's another live example. The text within the div shifts slightly when the mouse button is pressed down somewhere on the div. After the mouse button is released, the text shifts back.

Live Examples Source Code

Source code boxes for the live examples are below. Comments follow each.

Here is the first example source code:

<div
   id="example-one" 
   style="border:1px solid #ccc; 
          border-radius:.5em; 
          display:table; 
          padding:1em; 
          box-shadow:0px 0px 6px 1px #333;"
   onmouseover="PowerhouseStyleChange('example-one','box-shadow:0px 0px 12px 1px #69f;')" 
   onmouseout="PowerhouseStyleChange('example-one','box-shadow:0px 0px 6px 1px #333;')" 
>
Border changes when mouse hovers over this div. 
</div>

Both the onmouseover attribute (colored blue) and the onmouseout attribute (colored green) call the PowerhouseStyleChange() function.

The first of the two parameters PowerhouseStyleChange() expects is the id value of the div or other HTML element to affect. In the above code, the id value is colored red.

With onmouseover, PowerhouseStyleChange() is instructed in the second parameter to update the box shadow so it's slightly wider and a blueish color. With onmouseout, PowerhouseStyleChange() updates the box shadow to the same values the div had when the page was loaded.

See the implementation instructions for information about how to use the PowerhouseStyleChange() function.

And the source code of the second example:

<div
   id="example-two" 
   style="border:1px solid #ccc; 
          border-radius:.5em; 
          display:table; 
          padding:1em;"
   onmousedown="PowerhouseStyleChange('example-two','padding:1.15em .85em .85em 1.15em;')" 
   onmouseup="PowerhouseStyleChange('example-two','padding:1em;')" 
>
The text shifts slightly when div is clicked.
</div>

Both the onmousedown attribute (colored blue) and the onmouseup attribute (colored green) call the PowerhouseStyleChange() function.

PowerhouseStyleChange() expects the first of two parameters to be the id value of the div or other HTML element to affect. In the above code, the id value is colored red.

With onmousedown, the second parameter instructs PowerhouseStyleChange() to increase padding slightly on two sides and decrease it by an equal amount on the other two sides. It causes the div content to shift. With onmouseup, PowerhouseStyleChange() is instructed to equalize the padding values.

The implementation instructions have information about how to use the PowerhouseStyleChange() function.

In addition to using the example source code for reference or as a learning tool, it may also be pasted into a test web page of your own. But before you test, the test page needs the Javascript function PowerhouseStyleChange().

Javascript Function PowerhouseStyleChange()

Here is the source code for the JavaScript function PowerhouseStyleChange(). No customization is required.

<script type="text/javascript">
function PowerhouseStyleChange(idvalue,style)
{
   // Version 1.0, March 14, 2017.
   // Version 1.1, November 10, 2017 (removed .replace(...) from last code line)
   // Will Bontrager Software LLC - https://www.willmaster.com/
   var id = document.getElementById(idvalue);
   var ta = style.split(/\s*;\s*/);
   for( var i=0; i<ta.length; i++ )
   {
      var tta = ta[i].split(':',2);
      var ttaa = tta[0].split('-');
      if( ttaa.length > 1 )
      {
         for( var ii=1; ii<ttaa.length; ii++ )
         {
            ttaa[ii] = ttaa[ii].charAt(0).toUpperCase() + ttaa[ii].slice(1);
         }
      }
      tta[0] = ttaa.join('');
      id.style[tta[0]] = tta[1];
   }
}
</script>

Put the JavaScript anywhere on your page where JavaScript can run. Near the bottom, immediately above the cancel </body> tag is acceptable. The JavaScript may also be imported from an external file.

Implementation Instructions

To implement the powerhouse css style-change functionality, put the PowerhouseStyleChange() function JavaScript code into your page. Then call the function as needed to change the style of any HTML element on the page.

The PowerhouseStyleChange() function is called with two parameters.

1. The div id value. The div or other HTML element needs to have an id value so PowerhouseStyleChange() can find the element with the style to update. Specify the id value as the first parameter. (For reference, the two live examples further above have id="example-one" and id="example-two", respectively.)

2. The style CSS. As the second parameter, specify the CSS style formatted the way you would specify inline CSS for a div or other HTML element, except this is required to be all one line.

   Here are four examples of valid CSS styles for calls to the PowerhouseStyleChange() function.

   "font-size:1in;"
   "box-shadow: 10px 10px 15px 3px blue;"
   "display:table; padding-left:.25in; padding-right:.25in;"
   "border: 11px solid gold; padding: 1em; text-align: center;"
   

   As you see in the above four examples, the CSS is formatted like it would be for inline CSS styles, each in one line.

Here are some example PowerhouseStyleChange() function calls:

PowerhouseStyleChange("an-id-value","font-size:1in;");
PowerhouseStyleChange("an-id-value","box-shadow: 10px 10px 15px 3px blue;");
PowerhouseStyleChange("an-id-value","display:table; padding-left:.25in; padding-right:.25in;");
PowerhouseStyleChange("an-id-value","border: 11px solid gold; padding: 1em; text-align: center;");

The PowerhouseStyleChange() function can be called with

1. JavaScript-related attributes in div or other element tags,
2. with links, or
3. with JavaScript.

JavaScript-related attributes

The two live examples further above in this article demonstrate how to use JavaScript-related attributes. Specifically, these four elements are demonstrated: onmouseover, onmouseout, onmousedown, onmouseup.

With links

Here's how to implement PowerhouseStyleChange() with a link:

<a href="javascript:PowerhouseStyleChange('an-id-value','font-size:1in;')">
Change font size in id="an-id-value" div.
</a>

When the link is clicked, text within the HTML element that has id="an-id-value" will become 1 inch tall.

With JavaScript

Here's an example of calling PowerhouseStyleChange() with JavaScript. After the timer has run 15 seconds, the border of the HTML element with id="an-id-value" becomes black and 9 pixels thick.

<script>
function MakeBorder()
{
   PowerhouseStyleChange("an-id-value","border:9px solid black;");
}
setTimeout(MakeBorder,15000);
</script>

Keep the Powerhouse CSS style changing JavaScript handy. If you do a lot of development, you're likely to find many uses for it.

(This article first appeared in Possibilities ezine.)

Will Bontrager