|
|
Building the Sliding Toolbar
Page 2 —
Let's Get Started
If you want a refresher on positioning
with stylesheets, check out the basics article
I wrote in June. If you're already familiar with
the concepts, let's go make that toolbar.
|
The first part is easy. Simply make the outer container for your toolbar:
<div id="toolbar" style="position: absolute;
left: -90; top: 100; width: 100; height: 310;
background-color: green; margin: 0; overflow: hidden">
|
So now we have a rectangular green box that is all but 10 pixels off the edge of the left border of the page. This will hold everything else: the container for the content placed inside and the interface for the toolbar. The content part is easy. It's just a <div> that fills up everything but the 10 pixels that I'm planning to have the interface fill up.
|
<div id="toolbarContent" class="nav_bar" style="position: absolute;
left: 0; top: 0; width: 120; height: 722; overflow:hidden;
font-size:9pt; line-height:10.1pt; margin:3 3 3 13;">
|
Then there is the interface, which must be simple (no one wants the complexity of a universal remote that can tap into a satellite feed just for a simple toolbar). How about one stripe down the side that toggles in or out when it gets clicked?
|
<div id="activeBar" style="position: absolute; left: 130; top: 0;
width: 12px; height: 722px; background-color:blue; margin: 0;
background-image: url(clickRegion.gif)">
|
Now, if this toolbar were only for Internet Explorer, we'd just attach onclick events to the <div>s and be done with it. But Netscape Navigator needs to have these events attached to anchors. We need a spacer GIF with an anchor around it.
|
<a href="javascript:tool_click()">
<img src="/images/spacer.gif" border="0" width="12" height="722"
title="Click here to toggle the nav bar"></a>
|
So now we have a nice little checkered stripe. But how about also making some arrows that indicate the direction in which the toolbar should move?
|
<div id="topImg" style="position: absolute; left: 0; top: 0;
width: 10; height: 10px">
<a href="javascript:tool_click()"><img name="toolArrowTop"
src="/meta/toolbar/objects/outArrow.gif" width="10"
height="16" border="0"></a></div>
|
You'll notice I made a <div> to position it, and then placed an image inside. This is because Netscape Navigator can only position certain block-level containers - <div>s for the most part. In version 4.03 it can position paragraphs and spans as well, but this won't work consistently on all versions of the 4.x browser. There is also another little quirk that needs to be overcome. In Internet Explorer, if I were to define a region with a <div> (oh heck, any block-level element) and give it a background color or image, that color or image would fill the entire region. With Navigator, that color or image only fills the areas that I have some element occupying - some text or a spacer GIF. This would work if I used the layer tag, but that wouldn't be very cross-platform, would it?
So with the addition of a few spacer GIFs, and some cursing (I hate spacer GIFs), I move on to the far more tricky part of this operation, the scripting.
|
next page»
|
|
|
