Dynamic Tooltips: Defining a General Stylesheet - Doc JavaScript
   |
Defining a General Stylesheet
The first global variable determines whether or not stylesheets are enabled:
var style = ((NS4 && document.test) || IE4) ? 1 : 0;NS4 and IE4 are defined in the <HEAD>...</HEAD> portion of the document. They are explained in the next section of the column.
If the browser is Internet Explorer 4.0x, stylesheets cannot be disabled. However, if the user is running Navigator 4.0x, we must find out if they are disabled by checking the existance of an element. The following code must be inserted before the script:
<SPAN ID="test" STYLE="position: absolute;"></SPAN>After defining this essential variable, we set timerID to null. This is important because timerID must exist, even if it doesn't currently have a meaningful value. We'll discuss this variable later in the column.
In order to keep our script modular and easy to maintain, we define the most basic style attributes via global variables:
var padding = 3; // < 4 recommended
var bgcolor = "beige";
var borWid = 2; // for no border, assign null
var borCol = "#0000cc";
var borSty = "solid";The first two variables are problematic, so we'll explain them later on. The other three are self-explantory. borWid determines the width of the border, borCol sets its color, and borSty specifies the border's style, as illustrated in the following diagram:
In the previous section we introduced the makeEl() function, which prints the HTML code for a tooltip:
function makeEl(id, width, code) {
var str = "<STYLE TYPE='text/css'>";
str += "#" + id + " {";
str += "width: " + width + ";";
str += "}";
str += "</STYLE>";
str += "<DIV CLASS='tooltip' ID='" + id + "'>" + code + "</DIV>";
document.write(str);
}The DIV element's CLASS attributes specifies a class that defines the basic properties for all tooltips on the page. The tooltip class is defined in a separate style sheet via the following script segment:
var str = "<STYLE TYPE='text/css'>";
str += ".tooltip {";
str += "position: absolute;";
str += "visibility: hidden;";
str += "left: 0; top: 0;";
if (borWid > 0) { // if a border is specified
str += "border-width: " + borWid + ";";
str += "border-color: " + borCol + ";";
str += "border-style: " + borSty + ";";
}
if (NS4) {
if (borWid > 0 && padding <= 3) {
str += "padding: 0;";
str += "layer-background-color: " + bgcolor + ";";
} else if (borWid > 0 && padding > 3) {
str += "padding: " + (padding - 3) + ";"
str += "background-color: " + bgcolor + ";";
} else if (borWid == 0) {
str += "padding: " + padding + ";";
str += "layer-background-color: " + bgcolor + ";";
}
} else {
str += "padding: " + padding + ";";
str += "background-color: " + bgcolor + ";";
}
str += "}";
str += "</STYLE>";
if (style) {
document.write(str);
.
.
.
}When defining a class, the name is specified with a preceding dot. The style definitions apply to all members of the class, or in our case, to all tooltips on the page. The entire HTML code for the stylesheet is assigned to a variable named str, which we print using document.write(), provided that stylesheets are enabled.
The first statement sets the position property to absolute, because the tooltips are positioned in relation to the page. We must be able to move a tooltip around the page by specifying the desired coordinates. We initially position all tooltips at the top left corner of the page by setting the top and left properties to 0. The first portion of the function also makes sure the elements are hidden when the page loads, by assigning hidden to the visibility property.
Note that you may include additional CSS properties in the stylesheet definition. For example, the following statement sets the default font for the tooltips on the page:
str += "font-family: sans-serif;";The second portion of the class definition is attached to str when the value of border (a variable) is greater than 0. If border is null, it evaluates to 0, so the border-related propeties are not assigned to str.
The last portion of the class definition sets the border and background color. We install separate code for Navigator and Explorer, due to different behavior. The Explorer code is straightforward:
str += "padding: " + padding + ";";
str += "background-color: " + bgcolor + ";";Navigator adds 3 pixels of surrounding space to an element's content, and then adds the CSS padding property to that. For example, the following definition actually applies 5 pixels of padding to an element:
padding: 2;The problem isn't so simple. Rather than extending the element's padding, Navigator adds space between its padding and border. When using the standard background-color CSS property, the 3 default pixels aren't shaded:
When an element features a border, the 3 pixel addition cannot be avoided. It serves as a "minimum padding," even if you're not interested in any padding whatsoever. The layer-background-color property gets rid of the 3 pixel white space and color the element up to the border. However, if you specify additional padding (with the padding property), the background color flows beyond the element's top border.
The easiest way to overcome this bug in Navigator 4.0x is to avoid using a border. You may also choose to keep the padding down to 3 pixels (or less, if you don't mind differences between Explorer and Navigator). This can be done by setting the padding property to 0 (on Navigator only). As a last resort, if you want to install more than 3 pixels of padding, and at the same time want the element to include a border, you should use background-color rather than layer-background-color. If you choose to do so, the element will be surrounded with white space. The conditional statements in the Navigator portion of the code utilize this algorithm:
if (borWid > 0 && padding <= 3) {
str += "padding: 0;";
str += "layer-background-color: " + bgcolor + ";";
} else if (borWid > 0 && padding > 3) {
str += "padding: " + (padding - 3) + ";"
str += "background-color: " + bgcolor + ";";
} else if (borWid == 0) {
str += "padding: " + padding + ";";
str += "layer-background-color: " + bgcolor + ";";
}The following images illustrate the possible border/background color/padding combinations under Navigator 4.0x:
 border-width: 2; |
 border-width: 2; |
 border-width: 2; |
 border-width: 2; |
 border-width: 0; |
 border-width: 0; |
 border-width: 0; |
 border-width: 0; |
Note that the images on this page were copied from Peter Belesis' Dynamic HTML Lab. Peter provides additional information on the border/background color/padding issue in his columns.
Created: March 26, 1998
Revised: March 26, 1998
URL: https://www.webreference.com/js/column16/stylesheet.html
Find a programming school near you