DHTML Application Toolbars - DHTML Lab | 4 | WebReference

DHTML Application Toolbars - DHTML Lab | 4

Logo

DHTML Application Toolbars
using images


Reason 4 - Better use of images

Since BUTTONs are "controls", they exist as mini-documents, so contained HTML is wrapped within their boundaries, outside the regular HTML flow. We will attempt to re-create part of the Internet Explorer toolbar in DHTML using BUTTONs, images and text:

  

To create the above toolbar, we used this HTML and script:


<HTML>
<HEAD>
<STYLE TYPE="text/css">
.but {
    border:1px buttonface solid;
    font-family:MS Sans Serif;font-size:8pt;
}
</STYLE>
.
.
.
</HEAD>
<BODY>
.
.
.
<DIV ID="toolbar" NOWRAP
   STYLE="width:20;background-color:buttonface;padding:2px;">
   <BUTTON CLASS=but>
      onClick="yourStopFunction()"<IMG
      SRC="StopOff.gif" WIDTH=19 HEIGHT=20 BORDER=0><BR>
      Stop</BUTTON><BUTTON CLASS=but
      onClick="yourRefreshFunction()"><IMG
      SRC="RefreshOff.gif" WIDTH=17 HEIGHT=20 BORDER=0><BR>
      Refresh</BUTTON><BUTTON CLASS=but
      onClick="yourHomeFunction()"><IMG
      SRC="HomeOff.gif" WIDTH=19 HEIGHT=20 BORDER=0><BR>
      Home</BUTTON><BUTTON CLASS=but
      onClick="yourSearchFunction()"><IMG
      SRC="SearchOff.gif" WIDTH=20 HEIGHT=20 BORDER=0><BR>
      Search</BUTTON><BUTTON CLASS=but
      onClick="yourFavoritesFunction()"><IMG
      SRC="FavoritesOff.gif" WIDTH=20 HEIGHT=20 BORDER=0><BR>
      Favorites</BUTTON><BUTTON CLASS=but
      onClick="yourHistoryFunction()"><IMG
      SRC="HistoryOff.gif" WIDTH=20 HEIGHT=20 BORDER=0><BR>
      History</BUTTON>
</DIV>
.
.
.
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
allBUTs = toolbar.children;
for (i=0;i<allBUTs.length;i++) {
    tSpan = allBUTs(i);
    tSpan.onselectstart = function(){return false}
    tSpan.onmouseover = function(){
        this.style.border = "1px buttonhighlight outset";
    }
    tSpan.onmouseout = function(){
        this.style.border = "1px buttonface solid";
    }
    tSpan.onmousedown = function(){
        this.style.border = "1px buttonhighlight inset";
    }
    tSpan.onmouseup = function(){
        this.style.border = "1px buttonhighlight outset";
        window.focus();
    }
}
</SCRIPT>>
</BODY>
</HTML>

Notice that in this toolbar example, we do not specify toolbar width. You may if you want, but for the sake of variety, we have included a self-defining example. The toolbar DIV now has the NOWRAP attribute, so that the contents will not wrap. We also give it a placeholder width of 20. This is necessary for IE4. In IE4, an element width cannot be set or changed in script unless one has been previously assigned in-page. This limitation does not exist in IE5.

There is one obvious problem with our new toolbar. Although variable-width toolbar items looked fine in the text-only format, when images are included, we instinctively expect all the buttons to be the same size. We could, of course, decide on a width and apply it to all elements, by including it in the but class. Or, we can let JavaScript do the work.

We can change our script to read:

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
allBUTs = toolbar.children;
maxWidth = 0;
for (i=0;i<allBUTs.length;i++) {
    tSpan = allBUTs(i);
    tSpan.onselectstart = function(){return false}

    maxWidth = Math.max(maxWidth,tSpan.offsetWidth);

    tSpan.onmouseover = function(){
        this.style.border = "1px buttonhighlight outset";
    }
    tSpan.onmouseout = function(){
        this.style.border = "1px buttonface solid";
    }
    tSpan.onmousedown = function(){
        this.style.border = "1px buttonhighlight inset";
    }
    tSpan.onmouseup = function(){
        this.style.border = "1px buttonhighlight outset";
        window.focus();
    }
}

for (i=0;i<allBUTTONs.length;i++) {
    tSpan = allBUTTONs(i);
    tSpan.style.pixelWidth = maxWidth;
}
</SCRIPT>>

Our intent is to determine which element is widest, and to make all other elements just as wide. To do this, we first define a variable to store this width: maxWidth. When we loop through our buttons, we compare the value of maxWidth to the width of the button we are working with (tSpan.offsetWidth.) We assign the larger value to maxWidth.

When our loop is finished, maxWidth contains the width of the widest element.

We then loop through the buttons a second time, assigning this value to all button widths.

The result looks like this:

  

Next step, make the images roll over.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan 25, 2000
Revised: Jan 25, 2000

URL: http://www.webreference.com/dhtml/column29/4.html