Insert Content Here

Standard style selection variables: B W S L C

The vast majority of this website deals with the primary and most used feature of Variable HTML, the ability to activate a different style sheet based on the width of the browser window that is currently viewing the page.

Variable HTML style sheets can actually be controlled by up to 5 internal variables; BWSLC. The letters stand for Browser, Width, Size, Language, and Custom.

Browser and Width are defined and controlled by the script while Size, Language, and Custom are user definable via a series of script links which we will discuss shortly.

These variables control the selection of the style sheets based on the "var" definitions in your VariableControl.js file. Yes, the file is JavaScript, but the required level of java knowledge can be learned in less than one minute. All you are doing is defining the variables that control the inner workings of the larger script.

Let's look at an examples:

var vsa = "W";
var vsaRoot = "w";
var vsb = "S";
var vsbRoot = "fs";

Variable Style A, vsa, is controlled by the W or width variable and activates style sheets w0, w1, w2, etc. based on the value of the width variable. Variable Style B is controlled by the S or size variable and activates style sheets fs0, fs1, etc. based on the font size the visitor selects.

Variable HTML can combine the five internal variable in up to five combination, vsa ... vse, variable style A through E.


We are currently in the middles of a re-write of the meaning of the browser variable. The variable used to indicate the browser type as Explorer, Firefox, Opera, etc. We are changing this variable to indicate: desktop browser, cell phone, tablet, and unknown.


The width variable is defined by the VariabelControl.js entry for "vBr, the variable Breakpoints. Some of the older browsers had horizontal "chrome" (scroll bars, margins, etc.) as wide as 21 pixels. Most of today's browsers have reduced this to 16 pixels.

var vBr = [1003, 1269, 1345, 0];
var vsa = "W";
var vsaRoot = "w";

Based on the full 21 pixels of chrome, these variable definitions would activate w0.css for browser windows smaller than a 1024 screen, w1.css for full screen 1024 monitors, w2.css for full screen 1280 monitors, and w3.css for full screen 1366 or larger monitors.


The Size variable is used to allow your visitors to customize their font sizes. You can set up links to the JavaScript to set the size to an exact value, increment it up to a maximum value, or decrement it to a minimum of zero.

You might want to change your variable breakpoints based on the size of the font that the user is requesting. You still define the default vBr variable, but you can also define vBr0, vBr1, etc as the breakpoints to use for each Size value.

Language and Custom:

We wanted to expand the usefulness of the script with a couple of completely used defined variables. They are defined with the same JavaScript links as the size variable. We chose L and C as the variable names as a pure shameless self promotion; it is no coincidence that our variable names are BWSLC and the company name is BitWare Solutions LLC.

Variable Image Sizing

<img width=800 height=212 src=monitors.jpg class=vis95p800x800w212h>

Variable Image Sizing is controlled by the class of the image. Breaking down the class of the monitor.jpg image we have:

  • vis - the script is triggered when the first 3 letters of the class are “vis”.
  • 95p - we want the image to fill 95% of the “available space”.
  • 800x - to a maximum of 800 pixels
  • 800w - the original width was 800 pixels
  • 212h - the original height was 212 pixels
  • 000n - the minimum width is 000 pixels
  • 000e - exclude these pixels from the percentage calculation

Here is the same graphic displayed within a single column:

<img width=800 height=212 src=monitors.jpg class=vis45p500x800w212h>

The variables can be defined in any grouping and in any order. As seen above, the n and e variables are not defined. The w and h variables are optional. If they are not defined, the original width and height will be taken from the parallel values in the img command.

The (p) percentage is calculated on the available space, not the entire width of the browser window. The (e) exclusion value is first subtracted from the full page width. If you are not using Variable HTML this number is relatively easy to calculate. You know how wide your margins, ads, etc. are so you can just define that value as (e) in the image class.

Things are not as simple when you use Variable HTML which changes your page design at different browser widths.

var vise = [0,52,242,330,495,330,407,495,495];

The variableControl.js file contains a special line that defines the exclusions for each style transition.

Interactive Visitor Links

There are ways that your site can interact with your visitors. They may want to change the size of the fonts to customize the pages for easier readability. They may want to change the language of the page to French or Spanish. The S, L, and C variables are definable by links on the page and their values will be remembered for each visitor's return to your site.

Here are two examples of how to change the size of your fonts:

<a href="javascript:setTag('S',0);"> <font size="+0">A</font></a>
<a href="javascript:setTag('S',1);"> <font size="+1">A</font></a>
<a href="javascript:setTag('S',2);"> <font size="+2">A</font></a>
<a href="javascript:setTag('S',3);"> <font size="+3">A</font></a>



<a href="javascript: increaseTag ('S',3);"><font size="+3">A+</font></a>
<a href="javascript: decreaseTag ('S');"><font size="+2">A-</font></a>

A+   A-

All of the "Tag" functions will run the Variable HTML script upon completion to refresh the screen with the new settings.

Interactive Designer Links & Feedback


Before we get started, there is one line that must be added to the head section of your HTML file to enable the designer feedbacks to function:

<script type="text/javascript"> showData = true; </script>

This line enables the Variable HTML script to change the "innerHTML" content of specific classes to the data those class names are requesting. OK, that was confusing, so here is an example. The coding of the first feedback line is:

Your browser window is currently <i class=widthOfPage>00</i> pixels wide.

Your browser window is currently 00 pixels wide.

When enabled by the showData definition, the content of any class="widthOfPage" command "00" will be changed to the actual width of the page.

Class cssFiles is replaced by the list of activated CSS files, and class variableStatus is replaced by the numeric BWSLC values. The actual command does not matter. In these examples we used the italic, font, and bold commands, they all had their content replaced with the requested variable data.

cssFiles 00 variableStatus 00


The feedback variables are helpful in that they allow you to see what is happening inside the script, but the most useful features are the interactive variable. These variables allow you to change the internal settings of the script and then visualize the results in your browser before you make the adjustments to your CSS and variable control files.

The setTag entries that we just discussed in the visitor link section automatically run the full Variable HTML after they define the new variable values. This is great for the end user, but not for a developer. The setVar entries are defined in the same way, but take two very special actions when the links are completed.

The most important special action is that the scripts only run the activate CSS list and variable feedback sections of the main script after the variables are defined. This allows you to set things like the page width variable to force the page into a desired display, and the full variable HTML script will not then change that variable back to the proper value based on the variable breakpoints.

The second special action is that they allow you to set the variables to values up to 99 instead of protecting the variables with a maximum single digit value of just 9. This will allow you to define test css file and create links on your development page to activate them to see how they affect the page designs.

W0 W1 W2 W3 W4 W5 W6 W7 W8
br 00 00 00 00 00 00 00 00 0

The entries on the first interaction line are created with the code:

<A HREF="javascript:setVar('W',5);">W5</A>

This sets the Width variable to the fixed number as represented by the accompanying link. These links allow you to change the page design and view how your page looks at the current width and selected style. You can change the page width, but the style will revert to the predefined value when you cross one of your variable breakpoints.

The second line is even more interesting:

<a href="javascript:setSize7(); class=Bp7>

The Bp# class is another feedback variable, this time it replaces the content of the HTML Anchor tag. The power of the interaction is the SetSize#() script which changes the linked breakpoint to the current page width.

A-         A+

Table of Content

Variable HTML website, maintained with MySSI    
Copyright © 2012, BitWare Solutions