titlebar

« XUL Reference home [ Examples | Attributes | Properties | Methods | Related ]

Boxes created with the titlebar element behave just like a normal window titlebar: when the element is clicked and dragged, the window moves with it. This element can't be used to change the platform-native titlebar of normal windows; instead, it's used to create custom titlebars for chromeless windows. If the titlebar is in a panel element, dragging it will move the panel.

Elements inside the titlebar usually don't receive any mouse events, so e.g. buttons inside it can't be clicked and textboxes can't be focused with the mouse. If you don't want this behavior, you can override it by setting allowevents="true" on the titlebar element.

The titlebar will send a command event after the move is complete.

Examples

This XUL file will create a HUD-style window that can be moved with the mouse. It will close if the mouse button is released.

<?xml version="1.0"?>
<window title="Movable HUD Window"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        width="300" height="200"
        style="background: transparent; -moz-appearance: none;">
  <titlebar flex="1" oncommand="close()"
            style="background: rgba(30, 30, 30, 0.9);
                   -moz-border-radius: 10px;
                   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
                   margin: 8px 12px 16px;"/>
</window>

It can be opened from the error console like this: open("file:///Users/markus/Sites/hudwindow.xul", "", "chrome=1, titlebar=0")

Attributes

Inherited from XUL element
align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width

Note: The allowevents attribute did not work for title bars prior to Firefox 3.

Properties

Inherited Properties
align, attributes, allowEvents, baseURI, boxObject, builder, childElementCount, childNodes, children, className, clientHeight, clientLeft, clientTop, clientWidth, collapsed, contextMenu, controllers, database, datasources, dir, firstChild, firstElementChild, flex, height, hidden, id, lastChild, lastElementChild, left, localName, maxHeight, maxWidth, menu, minHeight, minWidth, namespaceURI, nextElementSibling, nextSibling, nodeName, nodeType, nodeValue, observes, ordinal, orient, ownerDocument, pack, parentNode, persist, prefix, previousElementSibling, previousSibling, ref, resource, scrollHeight, scrollLeft, scrollTop, scrollWidth, statusText, style, tagName,textContent, tooltip, tooltipText, top, width

Methods

Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData

TBD

Document Tags and Contributors

Tags: 
 Contributors to this page: Sheppy, pippijn, MarkusStange, Mgjbot, Ptak82, Dria
 Last updated by: Sheppy,