|
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.
Browser:
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.
Width:
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.
Size:
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 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
A
A
A
or
<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
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
Interaction
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.
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.
|
