ElectricType:Authoring : Main

Building the Sliding Toolbar

Page 3 — The Knotty Compatibility Issue

One big annoyance in scripting for both Microsoft and Netscape browsers is their incompatible Document Object Models (aka the DOM). The big thing to try to avoid is writing your entire script twice. Using JavaScript, you create explicit references to objects, and fortunately some of the properties are named the same in both browsers. So the first order of business is to get a consistent naming between the two.

if (navigator.appName == 'Netscape') { var toolPos = document.layers['toolbar']; var toolTop = document.layers['toolbar'].document.layers['activeBar'].document.layers['topImg'] .document.images['toolArrowTop']; var toolBot = document.layers['toolbar'].document.layers['activeBar'].document.layers['botImg'] .document.images['toolArrowBot']; toolPos.document.layers['activeBar'].left -= 4; toolPos.document.layers['activeBar'].top -= 4; document.layers['toolbar'].document.layers['activeBar'].document.layers['botImg'].left += 4; document.layers['toolbar'].document.layers['activeBar'].document.layers['botImg'].top += 4; document.layers['toolbar'].document.layers['activeBar'].document.layers['topImg'].left += 4; document.layers['toolbar'].document.layers['activeBar'].document.layers['topImg'].top += 4; } else { var toolPos = toolbar.style; var toolTop = document.images['toolArrowTop']; var toolBot = document.images['toolArrowBot']; }

I make the name toolPos equal to the positioned <div> that contains everything (since that is what I'll be moving). Navigator does this with its layers syntax, Internet Explorer does it by id. Then there are the images - you'll notice that the syntax for Navigator is a bit longer than Explorer's. Navigator's DOM considers every positioned element to be a layer in its DOM, and every layer has its own document. So to get to subimages or nested <div>s, you have to work your way down the tree. So creating a reference like this is useful even if you're just making something for Navigator, and you'll get fewer repetitive-stress injuries.
Notice also that in the Navigator version I immediately send the container back and to the left, back and to the left, back and to the left (we're beyond the looking glass here, people). This is to compensate for the margin that existed in the <div> that contains the clickable spacer GIF. Navigator keeps giving it a 4-pixel margin, even though my stylesheet says not to do that.
But enough with the initial annoyances, let's move on to getting some movement and interaction.

next page»