구글와이드(336x280)_상단 2개


Building the Sliding Toolbar IT 영문자료

Building the Sliding Toolbar
by Taylor 14 Nov 1997
Page 1

Just so you know, this article refers to the tool bar found on the frontdoor of an older design of Webmonkey. Before you learn how to build it, maybe you should check out what it looked like first. And if you'd like to recreate Webmonkey's current expanding and contracting folder navigation, check out Taylor's how-to about building the New Webmonkey Toolbar.

The toolbar is a ubiquitous element in almost every program that we use to get work done: mail programs, word processors, graphics programs, programming environments, just about everything. It usually puts a program's essential tools within easy reach.
Just think what toolbars could mean for Web-site design: They could contain all the meta information about a site - the navigation and other essential information that has to be there, but that you can't fit on every page without wasting a good chunk of ever-so-important real estate. Instead, float all the information in a toolbar and have it move along with your site.
Right?
Well ... there are some small problems with popping up a toolbar in its own window. If you ever go to a site that does that and you quit while the toolbar is up, the next time that you load your browser, your homepage comes up in the itty-bitty little window that the toolbar was in. Not exactly harmful, but godawful annoying. And for some reason, many users find windows popping up from a Web browser to be annoying (even if they don't mind them in non-Web applications). But the problem remains: The available real estate on a Web page is surprisingly small. Using Navigator 4.0, with all menu palettes extended and pictures and text on the navigation toolbar, on a 640-by-480-pixel monitor, you merely have a 623-by-331 canvas upon which to work. And that's only if the user has the window maximized. So how do you stuff in the site navigation, the ad, the headline, the graphics, the archive link, and the blurbs that tease the story (plus that cross-promotion GIF the folks downstairs talked you into in a moment of weakness) and get everything on the top half of the page so your audience doesn't miss anything?
There's only one direction in which to go: up. Stack your information with CSS-P - that is, positioning with stylesheets. Toolbar Mach II. By positioning regions with CSS-P, then scripting them so that the user can move them out of the way, you are able to make a toolbar that slides in and out of view at the user's command. That's what we did with our brand-new Webmonkey toolbar. Let's look at how it was done.
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="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="/webmonkey/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.
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.
Page 4 — Finesse It

The first time you hit the toolbar, say on the homepage, you might not want the toolbar to simply pop out. You might want something a little showier to get people's attention, to show them that it's there. So let's make it roll out somewhat slowly:

function tool_anim() {

  if (parseInt(toolPos.left) < toolOutPos) {

    toolPos.left = parseInt(toolPos.left) + initMove;

    toolWaitID=setTimeout('tool_anim()', toolWait);

  } else {

    toolPos.left = toolOutPos;

    toolTop.src = toolInImg;

    toolBot.src = toolInImg;

  }

}




Simply put, if the horizontal position of the toolbar is less than the position of where it should be when fully extended, then increase the horizontal position by a step and run this function again. Otherwise it sets the position to the final position (just in case) and changes the images to represent the new direction. All of the values were set as variables earlier in my script so that they can be changed later.
Next we make the routines that get called when the toolbar is clicked on:

function tool_click() {

  if (parseInt(toolPos.left) == toolOutPos) {

    tool_goIn();

  } else {

    tool_goOut();

  }

}



function tool_goIn() {

  toolPos.left = toolInPos;

  toolTop.src = toolOutImg;

  toolBot.src = toolOutImg;

}



function tool_goOut() {

  toolPos.left = toolOutPos;

  toolTop.src = toolInImg;

  toolBot.src = toolInImg;

}



The main routine, tool_click() is a switch box. If the toolbar is in its out position, it goes in; if not, it goes out. Pretty simple. It also changes the images that have the arrows in them. And again, I've set up most of this with variables, so that a few lines at the top of the script define all of this:

var initMove = 10;

var toolWait = 2;

var toolInPos = -130;

var toolOutPos = 0;

var toolOutImg = 'outArrow.gif';

var toolInImg = 'inArrow.gif';



And there we go. You have a toolbar Mach II. One that is now part of your page and gets out of your way with a simple click. Will audiences accept this kind of toolbar? We shall see.


null



바보들의 영문법 카페(클릭!!)

오늘의 메모....

시사평론-정론직필 다음 카페
http://cafe.daum.net/sisa-1

바보들의 영문법 다음 카페
http://cafe.daum.net/babo-edu/

티스토리 내 블로그
http://earthly.tistory.com/

내 블로그에 있는 모든 글들과 자료에 대한 펌과 링크는 무제한 허용됩니다.
(단, 내 블로그에 덧글쓰기가 차단된 자들에게는 펌, 트랙백, 핑백 등이 일체 허용되지 않음.)

그리고 내 블로그 최근글 목록을 제목별로 보시려면....
바로 아래에 있는 이전글 목록의 최근달을 클릭하시면 됩니다.
그러면 제목을 보고 편하게 글을 골라 보실 수 있습니다.

그리고 내 블로그내 글을 검색하시려면 아래 검색버튼을 이용하시면 됩니다.


가가챗창

flag_Visitors

free counters