spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / mozilla / 1 To page 1To page 2To page 3To page 4current pageTo page 6To page 7
[previous] [next]

Content Coordinator
Aquent
US-WA-Redmond

Justtechjobs.com Post A Job | Post A Resume
Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

Rapid Application Development with Mozilla: Navigation. Pt. 1

This code says that a command event on an <autorepeatbutton> results in an (assumedly nearby) <scrollbox> tag being scrolled one line. Because that kind of button continuously fires events when it is pressed, the scrollbox is scrolled repeatedly. The <autorepeatbutton> is a visual tag and manages the <scrollbox> tag’s special nsIScrollBoxObject.

You can study this binding if you want to make your own widget based on <scrollbox>. Beware, though, that <scrollbox> is unusual in one respect. The tag expects to have a single <box> as its content, with all other content inside that box. That is more complex than the simple case, in which the boxObject property belongs to the topmost tag’s DOM object.

To summarize, <scrollbox> is a fundamental tag that needs to be surrounded with other tags and some scripting before it provides a final solution. Fortunately, there are other, better ways of quickly providing a scrolling box.

8.2.1.2 <arrowscrollbox> The <arrowscrollbox> tag is a building block used to create the <menupopup> tag and is, in turn, built on other tags. Listing 8.2 shows the hierarchy of tags that make up an <arrowscrollbox>. Note that this is not a piece of literal XML, just a breakdown of tag contents.


Listing 8.2 Breakdown of the <arrowscrollbox> tag.
<arrowscrollbox> <autorepeatbutton>
<image>
<scrollbox>
<box>
<anything>
<anything>
... <autorepeatbutton>
<image>

If the <box> contents exceed the size of the <arrowscrollbox>, then the two <autorepeatbutton> tags are visible. If the content all fits within the outermost tag, then the two button-like tags are hidden. This is the normal case for menus, and so there is no indication that an <arrowscrollbox> exists in every menu, even though that is the case. This tag can also be used by itself, separate from any menus. It has a particularly simple XBL definition that is easy to experiment with.

8.2.1.3 <scrollbar> The <scrollbar> tag provides a single vertical or horizontal scrollbar that is completely independent of surrounding content. If the scrollbar is to scroll anything, it must be coordinated with that other content by JavaScript. Listing 8.3 shows a breakdown of the structure of the <scrollbar> tag.


Listing 8.3 Breakdown of the <scrollbar> tag.
<scrollbar> <scrollbarbutton>
<image> <scrollbarbutton>
<image> <slider>
<thumb>
<gripper>
<scrollbarbutton>
<image> <scrollbarbutton>
<image>

The <scrollbar> tag contains four buttons in total. Because two are for vertical scrollbars and two are for horizontal scrollbars, two are always hidden by CSS2 styles. This is done by the XBL definition for <scrollbar>. The DOM Inspector can be used to reveal this structure.

<scrollbar> supports the orient attribute, which can be set to vertical or horizontal. Other XUL attributes specific to <scrollbar> match the attributes of the <slider> tag. The <slider> tag should never be used outside the <scrollbar> tag. These shared attributes are

curpos maxpos pageincrement increment

These four attributes model the current position of the slider as a single number. This number represents the position of the center of the thumb, and it is a relative position. Stretching the window won’t alter the value of the slider, unless the amount of visible content changes as well. The range of values is from 0 to maxpos, with a current value of curpos.

Sometimes curpos is exposed as a scriptable DOM property, but this is buggy and should not be relied on—always use setAttribute() and getAttribute(). increment is the largest change caused by clicking a <scrollbarbutton>; pageincrement is the largest change caused by clicking the tray that the <slider> draws around the thumb. These two actions might cause a smaller increment if the thumb is near one end of the scrollbar.

Other aspects of the <scrollbar> tag are all managed by styles. To make the thumb of the slider larger or smaller, apply CSS2 styles to it. You must do your own calculations if you want the size of the thumb to reflect the portion of the content that is visible. To get this effect for free, either keep maxpos small relative to the scollbar’s size, which provides some thumb-styling, or use a CSS-based scrollbar instead of a <scrollbar> tag. See “Style Options” for the later option. The size of the thumb is not particularly meaningful for a <scrollbar> used the default way.

home / programming / mozilla / 1 To page 1To page 2To page 3To page 4current pageTo page 6To page 7
[previous] [next]

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Working with the DOM Stylesheets Collection · Administering RBAC in PHP 5 CMS Framework · xref: Automatic Cross Referencing Script
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Combine BottomCount() with Other MDX Functions to Add Sophistication · Creating a Daemon with Python · The Coming Voice-over-WiMAX Revolution

Created: March 27 2003
Revised: December 19, 2003

URL: http://webreference.com/programming/mozilla/1