dbx manual

Writing the CSS framework

Now we have an HTML structure with the relevant class names, the next thing to do is apply the styling.

Remember as you go that the default CSS rules apply to all browsers, not just those that support the script. But not all rules are default - some are dynamic with state and script support, and we'll talk about those as they arise.

Core CSS

We begin with a core set of styles that must be included, which you must not neglect or override with other styles, or the script may not work at all.

There are also some strongly-recommended style restrictions, which you should avoid undermining for the sake of cross-browser stability:

• Skip code example

/****************************************************************
  docking boxes core CSS: YOU MUST NOT CHANGE OR OVERRIDE THESE 
*****************************************************************/
.dbx-clone {
	position:absolute;
	visibility:hidden;
	}
.dbx-clone, .dbx-clone .dbx-handle-cursor {
	cursor:move !important;
	}
.dbx-dummy {
	display:block;
	width:0;
	height:0;
	overflow:hidden;
	}
.dbx-group, .dbx-box, .dbx-handle {
	position:relative;
	display:block;
	}


/****************************************************************
  avoid padding, margins or borders on dbx-box, 
  to reduce visual discrepancies between it and the clone.  
  overall, dbx-box is best left as visually unstyled as possible 
*****************************************************************/
.dbx-box {
	margin:0;
	padding:0;
	border:none;
	}


/****************************************************************
  otherwise, do what you like :) 
*****************************************************************/

The restrictions are there to suppress the style properties most likely to cause problems for the script - position or size discrepancies between the static and dragable elements, rendering bugs or similar instabilities.

I've identified this, and two other specific problem areas:

padding, margins or borders on the boxes ("dbx-box" elements)

These properties can result in a whole range of positioning and sizing differences between the static and dragable elements, in all supported browsers. I generally recommend that you keep the boxes themselves as visually unstyled as possible, and instead use the elements inside them as design hooks.

float on the group containers ("dbx-group" elements)

Adding float to a group container causes rendering problems in Opera 7 (hundreds of "ghosts" are left behind when dragging any object). Opera 8 is fine, so presumably this was a bug which is now fixed.

But if you want the group to be floated there's an easy solution which works for all: simply wrap the group in another container, and apply "position:relative; display:block;" and then whatever float you want to that container.

You can keep adding outer containers as necessary, and providing that each container has relative (or absolute) positioning and block display you should be fine.

margin-bottom on the handles ("dbx-handle" elements)

If the handles have margin-bottom, it could give rise to an odd rendering quirk in Firefox and other mozilla browsers, that can make the static elements shift position slightly when dragging occurs near them, or snap into place offset from their correct position (by the same amount as the margin)

Custom CSS

We've already seen the main behavioral class names: "dbx-group", "dbx-box", "dbx-handle" and "dbx-content". These can be used as design hooks as well, and are supplemented by a range of default and state-dependent class names, giving maximum control over the interface design.

All the available rule-shells are in the "dbx-allrules.css" stylesheet in the download package. Here's a reference of what's available:

Box and content-area states

• Skip code example

/* default box styles */
.dbx-box {
	}

/* box when toggle is open */
.dbx-box-open {
	}

/* box when toggle is closed */
.dbx-box-closed {
	}

The show/hide behaviors work by appending the -open or -closed class name to the relevant box, so how it actually comes out is up to you, defined using descendent selectors from those rules; for example:

• Skip code example

/* toggle state of inner content area */
.dbx-box-open .dbx-content {
	display:block;
	}
.dbx-box-closed .dbx-content {
	display:none;
	}

Handles

• Skip code example

/* handles */
.dbx-handle {
	}

/* handle cursors */
.dbx-handle-cursor {
	}

The handle cursors are in a class of their own so that they can be added dynamically, and therefore only applied if the script is supported. The most obvious cursor to use here would be "move":

• Skip code example

/* handle cursors */
.dbx-handle-cursor {
	cursor:move;
	}

Toggle buttons

Toggle buttons are anchors, and they have four possible states: open, closed, and focussed versions of open & closed. For the sake of cross-browser stability we should define each one as both default and with its :visited pseudo-class:

• Skip code example

/* toggle images */
a.dbx-toggle, a.dbx-toggle:visited {
	}
	
	
/* open */
a.dbx-toggle-open, a.dbx-toggle-open:visited {
	}
	
/* closed */
a.dbx-toggle-closed, a.dbx-toggle-closed:visited {
	}
	
/* open and highlighted */
a.dbx-toggle-hilite-open, a.dbx-toggle-hilite-open:visited {
	}
	
/* closed and highlighted */
a.dbx-toggle-hilite-closed, a.dbx-toggle-hilite-closed:visited {
	}

Using these rules to control background-position, we can can create all four button states by tiling the graphics into a single background-image, and selectively showing the segment we want for each state:

• Skip code example

/* toggle images */
a.dbx-toggle, a.dbx-toggle:visited {
	display:block;
	width:20px;
	height:20px;
	overflow:hidden;
	background-image:url(toggle.gif);
	position:absolute;
	top:2px;
	right:3px;
	text-indent:-50px;
	text-decoration:none;
	}
	
	
a.dbx-toggle-open, a.dbx-toggle-open:visited {
	background-position:0 0;
	}
	
a.dbx-toggle-closed, a.dbx-toggle-closed:visited {
	background-position:0 -20px;
	}
	
a.dbx-toggle-hilite-open, a.dbx-toggle-hilite-open:visited {
	background-position:-20px 0;
	}
	
a.dbx-toggle-hilite-closed, a.dbx-toggle-hilite-closed:visited {
	background-position:-20px -20px;
	}

The absolute positioning on the toggle places it at the origin of its parent handle, which is relatively-positioned.

Keyboard navigation tooltips

Since browsers don't normally show title attribute tooltips when an element receives the focus, the script implements informational tooltips itself. These are created as a singe <span> element appended to the group container, with the class name "dbx-tooltip":

• Skip code example

/* keyboard navigation tooltip */
.dbx-tooltip {
	}

The tooltips are assumed to have absolute positioning, and positioned by the script to the origin of the box using left and top, so you should not set those values yourself. To control the position of the tooltip relative to the box, use margin values.

The best way to style them visually is using CSS2 System Colors so that they match your end-user's GUI. However these don't work in Safari, so I've selectively applied them to CSS2 capable browsers with a hack that hides them from Safari:

• Skip code example

/* keyboard navigation tooltip */
.dbx-tooltip {
	display:block;
	position:absolute;
	margin:25px 0 0 100px;
	width:185px;
	border:1px solid #000;
	background:#ffd;
	color:#000;
	font:normal normal normal 0.85em tahoma, arial, sans-serif;
	padding:2px 4px 3px 5px;
	text-align:left;
	}

/* use CSS2 system colors in CSS2 browsers 
   but not safari, which doesn't support them */
*[class="dbx-tooltip"]:lang(en) {
	border-color:InfoText;
	background:InfoBackground;
	color:InfoText;
	font:small-caption;
	font-weight:normal;
	}

If your site is not in English you will need to change the "en" token in the :lang pseudo-class to match your language.

Clones

The clones are duplicates of the boxes, which you see when performing a drag operation or when animation occurs - the real boxes never move, they only re-arrange their node order at the end of each operation.

You can apply additional styles to the clones to give them a slightly varied appearance:

• Skip code example

/* additional clone styles */
.dbx-clone {
	}

Nothing is really necessary here, but I've used a small amount of opacity just to give them that extra touch of coolness:

• Skip code example

/* additional clone styles */
.dbx-clone {
	opacity:0.8;
	-moz-opacity:0.8;
	-khtml-opacity:0.8;
	filter:alpha(opacity=80);
	}

← Setting up the HTML | Implementing the script →