HTMLLabelElement.control - Web APIs
specifications specification status comment html living standardthe definition of 'control' in that specification. ...
... specifications specification status comment html living standardthe definition of 'control' in that specification. ...
... specifications specification status comment html living standardthe definition of 'control' in that specification. ...
...And 4 more matches

HTMLLabelElement - Web APIs
it inherits methods and properties from the base htmlelement interface. ...
...it inherits methods and properties from the base htmlelement interface. ...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllabelelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits p...
...And 4 more matches

Adding Labels and Images - Archive of obsolete content
« previousnext » this section describes a way to add labels and images to a window. in addition, we look at how to include elements into groups. text elements you cannot embed text directly into a xul file without tags around it and expect it to be displayed. you can use two xul elements for this purpose. label element the most basic way to include text in a window is to use the label element. it should be used when you want to place a descriptive label beside a control, such as a button. an example is shown below: example 1 : source view <label value="this is some text"/> the value attribute can be used to specify the text that you wish to have displayed. the text will not wrap, so the text will all be displayed on a single line. this syntax is the most common of labels. if t...
...low: example 1 : source view <label value="this is some text"/> the value attribute can be used to specify the text that you wish to have displayed. the text will not wrap, so the text will all be displayed on a single line. this syntax is the most common of labels. if the text needs to wrap, you can place the text content inside opening and closing tags as in the following example: example 2 : <label>this is some longer text that will wrap onto several lines.</label> as with html, line breaks and extra whitespace are collapsed into a single space. later, we'll find out how to constrain the width of elements so that we can see the wrapping more easily. control attribute you can use the control attribute to set which control the label is associated with. when the user clicks on an associated l...
...ed into a single space. later, we'll find out how to constrain the width of elements so that we can see the wrapping more easily. control attribute you can use the control attribute to set which control the label is associated with. when the user clicks on an associated label, that control will be focused. this association is also important for accessibility, so that screen readers read aloud the label for the control as the user tabs to it. set the value of the control attribute to the id of the element to be focused. example 3 : source view <label value="click here:" control="open-button"/> <button id="open-button" label="open"/> in the example above, clicking the label will cause the button to be focused. description element for descriptive text not associated with any particular control, y...
...And 3 more matches

MediaDeviceInfo.label - Web APIs
candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
...And 3 more matches

HTMLLabelElement.form - Web APIs
specifications specification status comment html living standardthe definition of 'form' in that specification. ...
... specifications specification status comment html living standardthe definition of 'form' in that specification. ...
... specifications specification status comment html living standardthe definition of 'form' in that specification. ...
...And 2 more matches

HTMLLabelElement.htmlFor - Web APIs
specifications specification status comment html living standardthe definition of 'htmlfor' in that specification. ...
... specifications specification status comment html living standardthe definition of 'htmlfor' in that specification. ...
... specifications specification status comment html living standardthe definition of 'htmlfor' in that specification. ...
...And 2 more matches

Using the aria-label attribute - Accessibility
the aria-label attribute is used to define a string that labels the current element. use it in cases where a text label is not visible on the screen. if there is visible text labeling the element, use aria-labelledby instead. this attribute can be used with any typical html element; it is not limited to elements that have an aria role assigned. value string possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: multiple labels in the example below, a button is styled to look like a typical "close" button, with an x in the middle. since there is nothing indicating that the purpose of the...
...ns may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: multiple labels in the example below, a button is styled to look like a typical "close" button, with an x in the middle. since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies. <button aria-label="close" onclick="mydialog.close()">x</button> notes the most common accessibility api mapping for a label is the accessible name property. attributes, including aria-label declarations, are ignored by most automatic translation services. used by aria roles all elements of the base markup related ...
...abel to any assistive technologies. <button aria-label="close" onclick="mydialog.close()">x</button> notes the most common accessibility api mapping for a label is the accessible name property. attributes, including aria-label declarations, are ignored by most automatic translation services. ...
...el is the accessible name property. attributes, including aria-label declarations, are ignored by most automatic translation services. ...

label - Archive of obsolete content
« xul reference label type: string gets and sets the value of the label attribute. ...
... « xul reference label type: string gets and sets the value of the label attribute. ...
... « xul reference label type: string gets and sets the value of the label attribute. ...

XForms Label Element - Archive of obsolete content
introduction specifies the label (short description) for the xforms control (see the spec). every form control other than the output and choices elements must contain a label element. it is valid for a form control to have an empty label element. the label text can be specified in instance data, in a remote document, or as inline text. if more than one source of label text is specified for this element, the order of precedence is: single node binding attributes, linking attributes, inline text. ui behavior accesskey support - if the accesskey attribute is specified on labeled xforms controls or on the label element itself then the label text for the control will contain an indicator as to what the access key is in a standard way. usually by underlining the accesskey character in the labe...
...single node binding attributes, linking attributes, inline text. ui behavior accesskey support - if the accesskey attribute is specified on labeled xforms controls or on the label element itself then the label text for the control will contain an indicator as to what the access key is in a standard way. usually by underlining the accesskey character in the label text. focus behavior - when a label element is clicked or its accesskey is activated then the form control that contains the label will be given the focus. attributes ui common accesskey - used to specify the keyboard shortcut for focusing the parent form control. ...
...accesskey character in the label text. focus behavior - when a label element is clicked or its accesskey is activated then the form control that contains the label will be given the focus. attributes ui common accesskey - used to specify the keyboard shortcut for focusing the parent form control. single-node binding linking src - url of a document whose contents will be retrieved by the label element and used to provide label text for the containing form control. type restrictions the label element can be bound to any simple content. representations the xforms label element is represented by the text retrieved from instance data, a document or the label element's own inline content. ...

RTCDataChannel.label - Web APIs
the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel. these labels are not required to be unique. you may use the label as you wish; you could use it to identify all the channels that are being used for the same purpose, by giving them all the same name. or you could give each channel a unique label for tracking purposes. it's entirely up to the design decisions made when building your site or app. a unique id can be found in the id property. a data channel's label is set when the channel is created by calling rtcpeerconnection.createdatachannel(). it cannot be changed after that. ...
...iving them all the same name. or you could give each channel a unique label for tracking purposes. it's entirely up to the design decisions made when building your site or app. a unique id can be found in the id property. a data channel's label is set when the channel is created by calling rtcpeerconnection.createdatachannel(). it cannot be changed after that. syntax var name = adatachannel.label; value a string identifier assigned by the web site or app when the data channel was created, as specified when rtcpeerconnection.createdatachannel() was called to create the channel. example this sample creates a data channel on an rtcpeerconnection, then, some time later, sets the content of a ui element to display the channel's name. var pc = new rtcpeerconnection(); var dc = pc.createda...
....createdatachannel() was called to create the channel. example this sample creates a data channel on an rtcpeerconnection, then, some time later, sets the content of a ui element to display the channel's name. var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); /* ... */ document.getelementbyid("channel-name").innerhtml = "<span class='channelname'>" + dc.label + "</span>"; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.label' in that specification. candidate recommendation initial specification. ...

<mlabeledtr> - MathML
attributes class, id, style provided for use with stylesheets. columnalign overrides the horizontal alignment of cells specified by <mtable> for this row. possible values are: left, center and right. groupalign href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. ...
...et a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign overrides the vertical alignment of cells specified by <mtable> for this row. possible values are: axis, baseline, bottom, center and top. examples rendering: <math> <mtable> <mlabeledtr> <mtd><mn>1</mn></mtd> <!-- label --> <mtd><mi>a</mi></mtd> <mtd><mi>b</mi></mtd> </mlabeledtr> <mtr> <mtd><mi>c</mi></mtd> <mtd><mi>d</mi></mtd> <mtd><mi>e</mi></mtd> </mtr> </mtable> </math> specifications specification status comment mathml 3.0the definition of 'mlabeledtr' in that specification. recommen...
.../mtd> <mtd><mi>b</mi></mtd> </mlabeledtr> <mtr> <mtd><mi>c</mi></mtd> <mtd><mi>d</mi></mtd> <mtd><mi>e</mi></mtd> </mtr> </mtable> </math> specifications specification status comment mathml 3.0the definition of 'mlabeledtr' in that specification. recommendation current specification mathml 2.0the definition of 'mlabeledtr' in that specification. recommendation initial specification ...

Label and description - Archive of obsolete content
the default style for these xul elements includes white-space: wrap;. this reduces all whitespace chunks (including newlines) to single spaces. text is permitted to wrap. <description>i am your father's brother's nephew's cousin's former roommate. ...
...ommate. what's that make us? absolutely nothing!</description> text can also be made to wrap by inserting an <html:br/> element regardless of the css style, but this creates a hard-break that does not change as parent elements resize. <description>i am your father's brother's nephew's cousin's former roommate.<html:br/> what's that make us?<html:br/> absolutely nothing!</description> using labels as anchors its possible to make a label look and act like an html <a> tag: <label class="text-link" href="http://whatever.com" value="click here to go to whatever"/> "text-link" is a built-in, predefined class. note: if running in a xulrunner application add the following preferences to your default preferences file: pref("network.protocol-handler.expose.http", false); pref("network.protoco...

buttonlabelaccept - Archive of obsolete content
...
... ...

buttonlabelcancel - Archive of obsolete content
...
... ...

buttonlabeldisclosure - Archive of obsolete content
...
... ...

buttonlabelextra1 - Archive of obsolete content
...
... ...

buttonlabelextra2 - Archive of obsolete content
...
... ...

buttonlabelhelp - Archive of obsolete content
...
... ...

panel.label - Archive of obsolete content
...
... ...

treeitem.label - Archive of obsolete content
« xul reference home label tipo: string (concatenación de caracteres) para un árbol tree con columnas simples, la etiqueta puede ser colocada directamnete sobre el elemeto "treeitem" sin la necesidad de una fila "row" y un elemento "treeitem" dentro. ...
... « xul reference home label tipo: string (concatenación de caracteres) para un árbol tree con columnas simples, la etiqueta puede ser colocada directamnete sobre el elemeto "treeitem" sin la necesidad de una fila "row" y un elemento "treeitem" dentro. ...

nsIDOMXULLabeledControlElement
dom/interfaces/xul/nsidomxullabeledcontrolel.idlscriptable this interface is used as a basis for labeled control elements in xul. inherits from: nsidomxulcontrolelement last changed in gecko 1.7 attributes attribute type description accesskey domstring this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label for the element. when the user presses the appropriate modifier and the access key, the element will be focused and/or activated from anywhere in the window. on non-macintosh platforms, the character on the element's label matching the access key is underlined. note: the access key is copied to any associated label element. command domstring this property reflects the element's command attribute. ...
...the window. on non-macintosh platforms, the character on the element's label matching the access key is underlined. note: the access key is copied to any associated label element. command domstring this property reflects the element's command attribute. crop domstring this property reflects the element's crop attribute. image domstring this property reflects the element's image attribute. label domstring this property reflects the element's label attribute. ...

accessKeyLabel - Web APIs
the htmlelement.accesskeylabel read-only property returns a string that represents the element's assigned access key (if any); otherwise it returns an empty string. syntax label = element.accesskeylabel example javascript var node = document.getelementbyid('btn1'); if (node.accesskeylabel) { node.title += ' [' + node.accesskeylabel + ']'; } else { node.title += ' [' + node.accesskey + ']'; } node.onclick = function () { var p = document.createelement('p'); p.textcontent = 'clicked!'; node.parentnode.appendchild(p); }; html <button accesskey="h" title="caption" id="btn1">hover me</button> result specifications specification status comment html living standardthe definition of 'htmlelement.accesskeylabel' in that specification. living stan...
...e</button> result specifications specification status comment html living standardthe definition of 'htmlelement.accesskeylabel' in that specification. living standard no change from initial definition. html 5.1 recommendation removed. pull w3c/html#144, issue w3c/html#99, wicg discussion. html5the definition of 'htmlelement.accesskeylabel' in that specification. recommendation snapshot of html living standard, initial definition. ...

HTMLInputElement.labels - Web APIs
the htmlinputelement.labels read-only property returns a nodelist of the <label> elements associated with the <input> element. syntax var labelelements = input.labels; return value a nodelist containing the <label> elements associated with the <input> element. example html <label id="label1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification. living stand...
...ction() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification. living standard no change html5the definition of 'labels' in that specification. recommendation initial definition ...

label.value - Archive of obsolete content
...

searchlabel - Archive of obsolete content
« xul reference home searchlabel type: string text used for 'find-as-you-type' (fayt) searching. in situations where the search text is ambiguous or missing, searchlabel can be used to give context to fayt. if searchlabel is not present, fayt falls back to use the label property. ...

textbox.label - Archive of obsolete content
« xul reference home label type: string if present and not empty, this will be exposed to screen readers through the label property. ...

labelElement - Archive of obsolete content
« xul reference labelelement type: label element the label element associated with the control. this is set when a label has a control attribute pointing to this element. this property will be null when no label is associated with the control. ...

richlistitem.label - Archive of obsolete content
« xul reference label type: string gets the concatentation of text from any child label elements. does not support setting label values. use the child elements directly to set label text. ...

searchLabel - Archive of obsolete content
« xul reference searchlabel type: string gets and sets the value of the searchlabel attribute. ...

textbox.label - Archive of obsolete content
« xul reference label type: string sets the label attribute. gets the label attribute if it is present and not empty. otherwise it returns the value of the associated label element, if applicable. otherwise it returns the placeholder or emptytext property. the getter is mostly useful for screen readers. note: prior to firefox 3, and always in thunderbird and seamonkey, the label property of an autocomplete textbox returns its value, for compatibility with the menulist element. ...

nsMsgLabelValue
defined in comm-central/ mailnews/ base/ public/ mailnewstypes2.idl typedef unsigned long nsmsglabelvalue; ...

MediaStreamTrack.label - Web APIs
the mediastreamtrack.label read-only property returns a domstring containing a user agent-assigned label that identifies the track source, as in "internal microphone". the string may be left empty and is empty as long as no source has been connected. when the track is deassociated from its source, the label is not changed. syntax const label = track.label specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.label' in that specification. candidate recommendation initial specification. ...

TrackDefault.label - Web APIs
the label read-only property of the trackdefault interface returns the default label for an associated sourcebuffer to use when an initialization segment does not contain label information for a new track. syntax var mylabel = trackdefault.label; value a domstring. example tbd ...

ui/button/toggle - Archive of obsolete content
features: they emit a change event when clicked, as well as a click event. they have an extra attribute checked that is automatically toggled when the button is clicked. when a button is checked it gets a "pressed" look in the user interface (note that the "pressed" look currently does not work in mac os x). ...
...hat is automatically toggled when the button is clicked. when a button is checked it gets a "pressed" look in the user interface (note that the "pressed" look currently does not work in mac os x). usage creating buttons to create a button you must give it an id, an icon, and a label: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onchange: function(state) { console.log(state.label + " checked state: " + state.checked); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel: badged buttons new in firefox 36. you can add a "badge" to a button usin...
...new in firefox 36. you can add a "badge" to a button using its badge property. this can contain a number or a string, and you can update it at any time. by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes. if you specify ...
...And 60 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
ensions, this kind of xml function is being used. reading in style sheets xul uses css to specify the appearance of its elements. again, since xul is a type of xml, stylesheets are read in using the xml-stylesheet processing instruction. on line 2 of listing 2, we’re reading in the theme’s standard style sheet. by referring to a special style sheet within chrome://global/skin/, we can make label and button sizes, window background color, etc, match the currently selected theme in firefox. we can also read in a stylesheet that we had set up ourselves. the xul box model in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical. as shown in listing 3, elements can be laid out horizontally using the hbox (horizontal box) element or verti...
...esheet that we had set up ourselves. the xul box model in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical. as shown in listing 3, elements can be laid out horizontally using the hbox (horizontal box) element or vertically using the vbox (vertical box) element. when this file is opened in firefox, it is displayed as shown in figure 1. ...
...odel in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical. as shown in listing 3, elements can be laid out horizontally using the hbox (horizontal box) element or vertically using the vbox (vertical box) element. when this file is opened in firefox, it is displayed as shown in figure 1. ...
...And 50 more matches

ui/button/action - Archive of obsolete content
experimental add a button to the firefox user interface. with this module you can create buttons that display icons and can respond to click events. usage creating buttons to create a button you must give it an id, an icon, and a label: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: function(state) { console.log("button '" + state.label + "' was clicked"); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel using the toolbar customization feature: badged buttons new in firefox 36. you can add a "badge" to a button using its badg...
...ns new in firefox 36. you can add a "badge" to a button using its badge property. this can be a number or a string, and you can update it at any time. by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes. if you specify ...
... actionbutton constructor. responding to click events you can respond to click events by assigning a listener to the button's click event. you can do this in the button's constructor, by assigning the listener to the onclick option. ...
...And 45 more matches

How to structure a web form - Learn web development
rm using the form attribute. this was introduced to let you explicitly bind a control with a form even if it is not nested inside it. let's move forward and cover the structural elements you'll find nested in a form. the <fieldset> and <legend> elements the <fieldset> element is a convenient way to create groups of widgets that share the same purpose, for styling and semantic purposes. you can label a <fieldset> by including a <legend> element just below the opening <fieldset> tag. the text content of the <legend> formally describes the purpose of the <fieldset> it is included inside. many assistive technologies will use the <legend> element as if it is a part of the label of each control inside the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda wil...
...t below the opening <fieldset> tag. the text content of the <legend> formally describes the purpose of the <fieldset> it is included inside. many assistive technologies will use the <legend> element as if it is a part of the label of each control inside the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda will speak the legend's content before speaking the label of each control. ...
...d> element as if it is a part of the label of each control inside the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda will speak the legend's content before speaking the label of each control. here is a little example: <form> <fieldset> <legend>fruit juice size</legend> <p> <input type="radio" name="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <input type="radio" name="size" id="size_3" value="large"> <label for="size_3">large</label> </p> </fieldset> </form> note: you can find this example in fieldset-legend.html (see it live also). when reading th...
...And 33 more matches

context-menu - Archive of obsolete content
cts on the page as a whole. it does not occur when the user invokes the context menu on a link, image, or other non-text node, or while a selection exists. declarative contexts you can specify some simple, declarative contexts when you create a menu item by setting the context property of the options object passed to its constructor, like this: var cm = require("sdk/context-menu"); cm.item({ label: "my menu item", context: cm.urlcontext("*.mozilla.org") }); constructor description pagecontext() the page context. selectioncontext() this context occurs when the menu is invoked on a page in which the user has made a selection. selectorcontext(selector) this context occurs when the menu is invoked on a node that either matches selector, a c...
...d "context" is emitted in your content scripts whenever the context menu is about to be shown. if you register a listener function for this event and it returns true, the menu item associated with the listener's content script is shown in the menu. for example, this item appears whenever the context menu is invoked on a page that contains at least one image: require("sdk/context-menu").item({ label: "this page has images", contentscript: 'self.on("context", function (node) {' + ' return !!document.queryselector("img");' + '});' }); note that the listener function has a parameter called node. this is the node in the page that the user context-clicked to invoke the menu. you can use it to determine whether your item should be shown. you can both specify ...
...any descendant of that node, but the "context" event handler is passed the actual node on which the menu was invoked. the example above works because <img> elements can't contain other elements, but in the example below, node.nodename is not guaranteed to be "p" - for example, it won't be "p" if the user context-clicked a link inside a paragraph: var cm = require("sdk/context-menu"); cm.item({ label: "a paragraph", context: cm.selectorcontext("p"), contentscript: 'self.on("context", function (node) {' + ' console.log(node.nodename);' + ' return true;' + '});' }); the content script is executed for every page that a context menu is shown for. it will be executed the first time it is needed (i.e. when the context menu is first shown and...
...And 30 more matches

Accessibility/XUL Accessibility Reference - Archive of obsolete content
this table is designed to show how to expose text properly for various xul element types. sections in bold are to draw attention to pieces that are often overlooked for visual layouts. underlined text may be read by the screen reader. element enabled usage comments description <description value="<!-- text -->" /> <description><!--label text--></description> use for non-label text. although tutorials claim label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine. button <bu...
... use for non-label text. although tutorials claim label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine. ...
... description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine. ...
...And 28 more matches

Building accessible custom components in XUL - Archive of obsolete content
xul, you may need to use dhtml accessibility techniques to ensure that your custom controls are equally accessible. a super-simple spreadsheet download stage-1.zip install stage-1.xpi to build our xul spreadsheet, we'll use three built-in xul controls: a single grid element to contain the other elements and position them in rows and columns. description elements for each row and column header. label elements for each cell in the spreadsheet. the xul markup is straightforward. we define the grid, then define the headers for each row (numbered 1 through 7), then define the column header and cells for each column. the label for each header and cell is defined in the value attribute. the flex attributes are simply for layout. note: the row and column headers are denoted by description elements,...
...this is not an accessibility requirement; as we'll see in the next section, the actual xul elements are irrelevant because we will define the role of each element in a separate attribute. ...
...flex="1"> <rows flex="1"></rows> <columns flex="1"> <column> <description value="entry #"/> <description value="1"/> <description value="2"/> <description value="3"/> <description value="4"/> <description value="5"/> <description value="6"/> <description value="7"/> </column> <column flex="1"> <description value="date"/> <label value="03/14/05" flex="1"/> <label value="03/15/05" flex="1"/> <label value="03/15/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> <label value="03/16/05" flex="1"/> </column> <column flex="1"> <description value="expense"/> <label value="conference fee" flex="1"/> ...
...And 26 more matches

UI pseudo-classes - Learn web development
nt-side form validation is whether a form input is required (it has to be filled in before the form can be submitted) or optional. <input>, <select>, and <textarea> elements have a required attribute available which, when set, means that you have to fill in that control before the form will successfully submit. ...
...er a form input is required (it has to be filled in before the form can be submitted) or optional. <input>, <select>, and <textarea> elements have a required attribute available which, when set, means that you have to fill in that control before the form will successfully submit. ...
...nal. <input>, <select>, and <textarea> elements have a required attribute available which, when set, means that you have to fill in that control before the form will successfully submit. ...
...And 26 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
ts. when autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand. use careful consideration for accessibility when applying the autofocus attribute. automatically focusing on a control can cause the page to scroll on load. the focus can also cause dynamic keyboards to display on some touch devices. while a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content. capture introduced in the html media capture specification and valid for the file input type only, the capture attribute defines which media—microphone, video, or camera—should be used t...
... dirname valid for text and search input types only, the dirname attribute enables the submission of the directionality of the element. when included, the form control will submit with two name/value pairs: the first being the name and value, the second being the value of the dirname as the name with the value of ltr or rtl being set by the browser. <form action="page.html" method="post"> <label>fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label> <input type="submit"/> </form> <!-- page.html?fruit=cherry&fruit.dir=ltr --> when the form above is submitted, the input cause both the name / value pair of fruit=cherry and the dirname / direction pair of fruit.dir=ltr to be sent. disabled a boolean attribute which, if present, indicates that the user s...
...image input button only, the height is the height of the image file to display to represent the graphical submit button. see the image input type. id global attribute valid for all elements, including all the input types, it defines a unique identifier (id) which must be unique in the whole document. its purpose is to identify the element when linking. the value is used as the value of the <label>'s for attribute to link the label with the form control. see <label>. inputmode global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. values include none, text, tel, url, email, numeric, decimal, and search. list the value given to the list attribute should be. the id of a...
...And 26 more matches

Index - Archive of obsolete content
xpcom code snippets, javascript, xpcom, about:, nsiaboutmodule no summary! 192 javascript debugger service code snippets no summary! 193 javascript timers javascript timers, needsbetterplace no summary! 194 javascript daemons management dom, guide, javascript, javascript timers, makebrowseragnostic no summary! 195 label and description code snippets no summary! 196 lookupnamespaceuri no summary! 197 lookupprefix no summary! 198 miscellaneous add-ons, code, code snippets, extensions, snippets no summary! 199 modules no summary! 200 on page load add-ons, extensions no summary! 201 page l...
... landing, mozilla, xul xul (xml user interface language) is mozilla's xml-based language for building user interfaces of applications like firefox. 749 <statusbarpanel> deprecated, xul, xul elements, xul reference an individual element of a statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages. 750 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment. the purpose of this article is not to descri...
...xul attributes, xul reference no summary! 785 buttonaccesskeyhelp xul attributes, xul reference no summary! 786 buttonalign xul attributes, xul reference no summary! 787 buttondir xul attributes, xul reference no summary! 788 buttondisabledaccept xul attributes, xul reference no summary! ...
...And 24 more matches

Index - Web APIs
read-only, reference, id, track the id property contains a string which uniquely identifies the track represented by the audiotrack. 189 audiotrack.kind api, audio, audio track, audiotrack, html dom, media, property, read-only, reference, id, track the kind property contains a string indicating the category of audio contained in the audiotrack. 190 audiotrack.label api, audio, audio track, audiotrack, html dom, media, property, read-only, reference, label, metadata, track the read-only audiotrack property label returns a string specifying the audio track's human-readable label, if one is available; otherwise, it returns an empty string. 191 audiotrack.language api, audio, audiotrack, html dom, language, localization, media, property...
...confused with <link>, which is represented by htmllinkelement) 1564 htmlanchorelement.download api, html dom, htmlanchorelement, property, reference, download the htmlanchorelement.download property is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser. the value, if any, specifies the default file name for use in labeling the resource in a local file system. if the name is not a valid file name in the underlying os, the browser will adjust it. 1565 htmlanchorelement.referrerpolicy api, experimental, htmlanchorelement, property, reference, referrer policy the htmlanchorelement.referrerpolicy property reflect the html referrerpolicy attribute of the <a> element defining which referrer is sent...
...erited from the regular htmlelement interface) for manipulating <body> elements. 1580 htmlbuttonelement api, html dom, htmlbuttonelement, interface, reference the htmlbuttonelement interface provides properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <button> elements. 1581 htmlbuttonelement.labels api, dom, property, reference the htmlbuttonelement.labels read-only property returns a nodelist of the <label> elements associated with the <button> element. 1582 htmlcanvaselement api, canvas, html dom, interface, reference the htmlcanvaselement interface provides properties and methods for manipulating the layout and presentation of <canvas> elements. the htmlca...
...And 24 more matches

Menus - Archive of obsolete content
bar, for example in a dialog box. see menu buttons for more information. toolbarbutton toolbar buttons can also support menus. this works just like it does for other buttons. see menu buttons for more information. menulist a menulist is used when you wish the user to select from a list of items. for this type of menu, one of the items within it is selected. when another item is selected, the label of the item is set as the label of the menulist. other user interfaces call this type of widget a combobox. you may also see a popup tag used in place of the menupopup tag. the popup tag is deprecated but is equivalent to the menupopup tag. menu tag overview the following shows a simple menu example, containing a menubar with a single menu labeled 'file'. <menubar id="sample-menubar"> <m...
... as the label of the menulist. other user interfaces call this type of widget a combobox. you may also see a popup tag used in place of the menupopup tag. the popup tag is deprecated but is equivalent to the menupopup tag. menu tag overview the following shows a simple menu example, containing a menubar with a single menu labeled 'file'. <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> there are five tags used in this example, described briefly here: menubar a row of menus that appears along the top of the window or screen. it should contain menu eleme...
... menuitem a single item to appear on a menu. ...
...And 21 more matches

The Essentials of an Extension - Archive of obsolete content
d: 2 blank space indents. we never use actual tab characters, with the exception of makefiles, which will be covered later on. most of our coding standards are based on mozilla's or other known and used standards. ...
...never use actual tab characters, with the exception of makefiles, which will be covered later on. most of our coding standards are based on mozilla's or other known and used standards. ...
...own and used standards. ...
...And 20 more matches

Index - Archive of obsolete content
landing, mozilla, xul xul (xml user interface language) is mozilla's xml-based language for building user interfaces of applications like firefox. 2 &lt;statusbarpanel&gt; deprecated, xul, xul elements, xul reference an individual element of a statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages. 3 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment. the purpose of this article is not to describe...
... xul attributes, xul reference no summary! 38 buttonaccesskeyhelp xul attributes, xul reference no summary! 39 buttonalign xul attributes, xul reference no summary! 40 buttondir xul attributes, xul reference no summary! 41 buttondisabledaccept xul attributes, xul reference no summary! 42 buttonlabelaccept xul attributes, xul reference no summary! 43 buttonlabelcancel xul attributes, xul reference no summary! 44 buttonlabeldisclosure xul attributes, xul reference no summary! 45 buttonlabelextra1 xul attributes, xul reference no summary! 46 buttonlabelextra2 xul attributes, xul reference no summary! ...
... 48 buttonorient xul attributes, xul reference no summary! 49 buttonpack xul attributes, xul reference no summary! 50 buttons xul attributes, xul reference no summary! ...
...And 20 more matches

Vue conditional rendering: editing existing todos - Learn web development
erview: client-side javascript frameworks next now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. to do this, we will take advantage of vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels. we'll also look at adding functionality to delete todo items. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to...
... objective: to learn how to do conditional rendering in vue. creating an editing component we can start by creating a separate component to handle the editing functionality. in your components directory, create a new file called todoitemeditform.vue. ...
...tive: to learn how to do conditional rendering in vue. creating an editing component we can start by creating a separate component to handle the editing functionality. in your components directory, create a new file called todoitemeditform.vue. ...
...And 20 more matches

ARIA Test Cases - Accessibility
age) expected at behavior: at should speak the fact that this is an alert, the title and contents of the dialog, then place virtual focus or the real focus on the desired control (like a button). screen magnifier should show the focused button or emulate any other standard behavior found in notification dialogs in windows or respective operating systems. markup used: role="alert" aria-labeledby notes: in the uiuc test example, the 'close' button cannot recieve focus. results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 2 pass, 1 pass with known focus of the close button problem. ffd - i concur - - - voiceover (leopard) n/a n/a - fail voiceover (leopard) n/a n/a ...
... button plus alternative text of any images within the button (the accessible name of the button). the word "button" is also spoken before or after the accessible name. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass in non-v-pc mode, pass in v-pc-mode also if the button's text is not provided via labelledby or label. - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - toggle button buttons with icons and without text -- under construction. only the bold/italic butto...
... if the currently selected option is changed the new option should be spoken whether the list is open or closed. when the combo box is opened or closed, the new open/closed state should be spoken. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 fail. la...
...And 20 more matches

MenuItems - Archive of obsolete content
features of the menuitem element the menuitem element has a number of features beyond just being a label for a menu command. adding shortcut keys to menu items a shortcut key may be associated with a menu item. unlike the access key, which only functions while the menu is open, a shortcut key works at any time. a shortcut key can be created using the key element. in reality, the keyboard shortcut is handled by the key element, however, the menu item will display the shortcut next to its label. this allows the user to discover what shortcut keys are available by looking at the menus. ...
... can be created using the key element. in reality, the keyboard shortcut is handled by the key element, however, the menu item will display the shortcut next to its label. this allows the user to discover what shortcut keys are available by looking at the menus. <keyset> <key id="open-key" modifiers="accel" key="o"/> <key id="close-key" modifiers="accel" key="c"/> </keyset> <menubar> <menu label="view"> <menupopup> <menuitem label="open" key="open-key"/> <menuitem label="close" key="close-key"/> </menupopup> </menu> </menubar> the two menuitems are associated with a key using the key attribute. it should be set to the id of a key element within the same document. the result is that the items will display the shortcut key next to their labels. for the "open" item...
...tcut key next to their labels. for the "open" item in this example, this command can be invoked by using the "accel" modifier key and pressing 'o'. the "accel" modifier key varies on each platform, but is the key typically used for shortcut keys. for instance, if the "accel" key is control, the menu might display "ctrl + o". although there isn't usually a need to do so, you can also set a custom label for the keyboard shortcut on the menu using the acceltext attribute. you might do this if the key associated with the item changes, for instance a list of open windows displayed on a window menu. <menuitem label="first window" acceltext="1"/> here the keyboard shortcut label will be '1', however you will need to write code to handle the key as well. adding icons to menu items an icon may be ...
...And 19 more matches

XUL accessibility guidelines - Archive of obsolete content
or no visual change. alternative text provide alternative text for meaningful images. alternative text is not needed when an image serves a purely decorative function. use the "alt" attribute to describe html images and use the "tooltiptext" attribute on xul elements that use images (i.e. image elements, buttons with images). ...
... change. alternative text provide alternative text for meaningful images. alternative text is not needed when an image serves a purely decorative function. use the "alt" attribute to describe html images and use the "tooltiptext" attribute on xul elements that use images (i.e. image elements, buttons with images). ...
...titles provide users the most basic information about the application. ...
...And 17 more matches

Client-side form validation - Learn web development
rflow, stepmismatch, toolong or tooshort, typemismatch, valuemissing, or a customerror. built-in form validation examples in this section, we'll test out some of the attributes that we discussed above. simple start file let's start with a simple example: an input that allows you to choose whether you prefer a banana or a cherry. ...
...mples in this section, we'll test out some of the attributes that we discussed above. simple start file let's start with a simple example: an input that allows you to choose whether you prefer a banana or a cherry. this example involves a simple text <input> with an associated <label> and a submit <button>. find the source code on github at fruit-start.html and a live example below. <form> <label for="choose">would you prefer a banana or cherry?</label> <input id="choose" name="i_like"> <button>submit</button> </form> input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } to begin, make a copy of fruit-start.html in a new directory on your hard drive. the required attribute the simplest html5 validation feature is the required attribute. to make ...
.... to make an input mandatory, add this attribute to the element. when this attribute is set, the element matches the :required ui pseudo-class and the form won't submit, displaying an error message on submission when the input is empty. while empty, the input will also be considered invalid, matching the :invalid ui pseudo-class. add a required attribute to your input, as shown below. ...
...And 17 more matches

Adding a new todo form: Vue events, methods, and models - Learn web development
that. let's create a new component that will allow us to add a new to-do item. in your components folder, create a new file called todoform.vue. add a blank <template> and a <script> tag like before: <template></template> <script> export default {}; </script> let's add in an html form that lets you enter a new todo item and submit it into the app. ...
...ponents folder, create a new file called todoform.vue. add a blank <template> and a <script> tag like before: <template></template> <script> export default {}; </script> let's add in an html form that lets you enter a new todo item and submit it into the app. we need a <form> with a <label>, an <input>, and a <button>. ...
...d a blank <template> and a <script> tag like before: <template></template> <script> export default {}; </script> let's add in an html form that lets you enter a new todo item and submit it into the app. we need a <form> with a <label>, an <input>, and a <button>. update your template as follows: <template> <form> <label for="new-todo-input"> what needs to be done? </label> <input type="text" id="new-todo-input" name="new-todo" autocomplete="off" /> <button type="submit"> add </button> </form> </template> so we now have a form component into which we can enter the title of a new todo item (which will become a label for the corresponding todoitem when it is eventually rendered). let's load this component into ...
...And 17 more matches

<input type="tel"> - HTML: Hypertext Markup Language
ional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with ...
...ule, you should avoid using them unless it can't be helped. attribute description autocorrect whether or not to allow autocorrect while editing this input field. safari only. mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. firefox for android only. autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. permitted values are: on enable automatic correction of typos, as well as processing of text substitutions if any are configured. off disable automat...
...correction of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. using tel inputs telephone nu...
...And 17 more matches

Localization - Archive of obsolete content
s of entities which can be used to place less than and greater than signs into the text. xml has a syntax which allows you to declare custom entities. you can use these so that the entity is replaced with its value, which can be a string of text. entities may be used whenever text occurs, including the values of attributes. the example below demonstrates the use of an entity in a button. <button label="&findlabel;"/> the text that will appear on the label will be the value that the entity &findlabel; has. a file is created which contains the entity declarations for each supported language. in english, the &findlabel; entity will probably be declared to have the text "find". dtd files entities are declared in document type definition (dtd) files. files of this type are normally used to decl...
...he url indicated is to be used as a dtd for the file. in this case, we have declared that we want to use the findfile.dtd dtd file. this line is typically placed just before the window element. you also need to add the locale to the chrome.manifest file, for example: locale findfile en-us locale/ declaring entities the entities are declared using a simple syntax as shown below: <!entity findlabel "find"> this example creates an entity with the name findlabel and the value "find". this means that wherever the text "&findlabel;" appears in the xul file, it will be replaced with the text "find". note that entity declarations do not have a trailing slash at the end of them. in the dtd file for a different language, the text for that language will be used instead. for japanese: <!entity fin...
..."find"> this example creates an entity with the name findlabel and the value "find". this means that wherever the text "&findlabel;" appears in the xul file, it will be replaced with the text "find". note that entity declarations do not have a trailing slash at the end of them. in the dtd file for a different language, the text for that language will be used instead. for japanese: <!entity findlabel "検索"> for example, the following text: <description value="&findlabel;"/> is translated as: english version: <description value="find"/> japanese version: <description value="検索"/> you would declare an entity for each label or string of text that you use in your interface. you should not have any directly displayed text in the xul file at all. in addition to using entities for t...
...And 16 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
number. methods select(), stepdown(), stepup() value a domstring representing the value of the date entered into the input. the format of the date and time value used by this input type is described in local date and time strings in date and time formats used in html. ...
... value a domstring representing the value of the date entered into the input. the format of the date and time value used by this input type is described in local date and time strings in date and time formats used in html. you can set a default value for the input by including a date and time inside the value attribute, like so: <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" value="2017-06-01t08:30"> one thing to note is that the displayed date and time formats differ from the actual value; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time value is always formatted yyyy-mm-ddthh:mm. when the above value submitted to the serv...
...r's locale. however, there are issues with <input type="datetime-local"> because of the limited browser support. we'll look at basic and more complex uses of <input type="datetime-local">, then offer advice on mitigating the browser support issue later on (see handling browser support). basic uses of datetime-local the simplest use of <input type="datetime-local"> involves a basic <input> and <label> element combination, as seen below: <form> <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate"> </form> setting maximum and minimum dates and times you can use the min and max attributes to restrict the dates/times that can be chosen by the user. in the following example we are setting a minimum datetime o...
...And 16 more matches

<input type="month"> - HTML: Hypertext Markup Language
d year entered into the input, in the form yyyy-mm (four or more digit year, then a hyphen ("-"), followed by the two-digit month). the format of the month string used by this input type is described in format of a valid local month string in date and time formats used in html. you can set a default value for the input control by including a month and year inside the value attribute, like so: <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"> one thing to note is that the displayed date format differs from the actual value; most user agents display the month and year in a locale-appropriate form, based on the set locale of the user's operating system, whereas the date value is always formatted yyyy-mm. when...
...; most user agents display the month and year in a locale-appropriate form, based on the set locale of the user's operating system, whereas the date value is always formatted yyyy-mm. when the above value is submitted to the server, for example, it will look like bday-month=1978-06. ...
...cale-appropriate form, based on the set locale of the user's operating system, whereas the date value is always formatted yyyy-mm. when the above value is submitted to the server, for example, it will look like bday-month=1978-06. ...
...And 16 more matches

<input type="radio"> - HTML: Hypertext Markup Language
h the name property set to contact but one with the value email, one with the value phone, and one with the value mail. the user never sees the value or the name (unless you expressly add code to display it). ...
... but one with the value email, one with the value phone, and one with the value mail. the user never sees the value or the name (unless you expressly add code to display it). ...
...er never sees the value or the name (unless you expressly add code to display it). ...
...And 16 more matches

Adding Methods to XBL-defined Elements - Archive of obsolete content
ray of elements, which is the anonymous content. to get elements below that, you can use the regular dom functions because they aren't hidden. note that it is possible for an xbl-bound element to be placed inside another one, in which case you will have to use the getanonymousnodes() function again. the following example creates a row of buttons: <binding id="buttonrow"> <content> <button label="yes"/> <button label="no"/> <button label="sort of"/> </content> </binding> to refer to each button, you can use the getanonymousnodes() function, passing it a reference to the element the binding is bound to as the parameter. in the returned array, the first button is stored in the first array element (getanonymousnodes(element)[0]), the second button is stored in the second array e...
... bound to as the parameter. in the returned array, the first button is stored in the first array element (getanonymousnodes(element)[0]), the second button is stored in the second array element and the third button is stored in the third array element. for code inside a binding method, you can pass 'this' as the parameter to getanonymousnodes(). the next example can be used to create text with a label. ...
...utton is stored in the first array element (getanonymousnodes(element)[0]), the second button is stored in the second array element and the third button is stored in the third array element. for code inside a binding method, you can pass 'this' as the parameter to getanonymousnodes(). the next example can be used to create text with a label. the method 'showtitle' can be used to show or hide the label. ...
...And 15 more matches

Box Objects - Archive of obsolete content
our boxobject position and size references, which include borders as part of the element. the values are always the position and sizes as currently displayed, so the values will be different if the element is moved or resized. for example, a flexible element will change in size and the box object dimensions will update accordingly. the following example shows this. example 1 : source view <button label="click me" oncommand="alert('the width is ' + this.boxobject.width);"/> you can use the width and height attributes of the element to specify the element's width and height, respectively. note that retrieving these values will return the size only if it was explicitly specified. these properties will return an empty string if the width or height attributes or properties were not set alr...
...f the element to 0. this means that while both hidden and collapsed elements have 0 width and height, hidden elements have a x and y position of 0, while collapsed elements will retain their position in the window. to retrive or modify the hidden or collapsed state use the corresponding properties as in the following example. ...
...le both hidden and collapsed elements have 0 width and height, hidden elements have a x and y position of 0, while collapsed elements will retain their position in the window. to retrive or modify the hidden or collapsed state use the corresponding properties as in the following example. ...
...And 15 more matches

Basic form hints - Accessibility
when implementing forms using traditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control. when a screen reader user navigates a page, the screen reader will describe form controls. without a direct association between the control and its label, the screen reader has no way of knowing which label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
...rect association between the control and its label, the screen reader has no way of knowing which label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
...s label, the screen reader has no way of knowing which label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
...And 15 more matches

<input type="time"> - HTML: Hypertext Markup Language
tributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list. methods select(), stepdown(), and stepup(). value a domstring containing the value of the time entered into the input. ...
... idl attributes value, valueasdate, valueasnumber, and list. methods select(), stepdown(), and stepup(). value a domstring containing the value of the time entered into the input. ...
...ent). if the time includes seconds (see using the step attribute), the format is always hh:mm:ss. you can learn more about the format of the time value used by this input type in time strings in date and time formats used in html. in this example, you can see the time input's value by entering a time and seeing how it changes afterward. first, a look at the html. this is simple enough, with the label and input as we've seen before, but with the addition of a <p> element with a <span> to display the value of the time input: <form> <label for="starttime">start time: </label> <input type="time" id="starttime"> <p> value of the <code>time</code> input: <code> "<span id="value">n/a</span>"</code>. </p> </form> the javascript code adds code to the time input to watch for t...
...And 15 more matches

widget - Archive of obsolete content
l with the contenturl property. upon creation, the widget is automatically added to the add-on bar. you can set the width of a widget, but the height is fixed so as to fit in the add-on bar. if the content is an image, it is automatically scaled to be 16x16 pixels. ...
...-icon", label: "my mozilla widget", contenturl: "http://www.mozilla.org/favicon.ico" }); you can make contenturl point to an html or icon file which you have packaged inside your add-on. just save the file in your add-on's data directory, and reference it using the data.url() method of the self module: var data = require("sdk/self").data; require("sdk/widget").widget({ id: "my-widget", label: "my widget", contenturl: data.url("my-content.html") }); this widget contains an entire web page: require("sdk/widget").widget({ id: "hello-display", label: "my hello widget", content: "hello!", width: 50 }); widgets are quite small by default, so this example used the width property to grow it in order to show all the text. scripting widget content to interact with the widget's c...
... self.port.emit("stop"); } we save this file in the add-on's data directory as "button-script.js". finally. in the add-on's "main.js" file, we create the widget, assign it the html file and the content script, and listen for events from the content script: const widgets = require("sdk/widget"); const data = require("sdk/self").data; var player = widgets.widget({ id: "player", width: 72, label: "player", contenturl: data.url("buttons.html"), contentscriptfile: data.url("button-script.js") }); player.port.on("play", function() { console.log("playing"); }); player.port.on("pause", function() { console.log("pausing"); }); player.port.on("stop", function() { console.log("stopping"); }); to learn much more about content scripts, see the working with content scripts guide. scr...
...And 14 more matches

Componentizing our Svelte app - Learn web development
lert. we'll add that functionality back in later on. create a new component file — components/todo.svelte. ...
... in later on. create a new component file — components/todo.svelte. ...
...create a new component file — components/todo.svelte. ...
...And 14 more matches

XUL controls - Archive of obsolete content
the following table lists the xul user interface controls. for a step-by-step guide on how to use these controls, see the xul tutorial. for more reference information, see the xul reference. <button> a button that can be pressed by the user. <button label="save" accesskey="s"/> more information about the button element. button reference <button type="menu"> a button that has a drop down menu attached to it. pressing the button opens the menu. <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this type of menu button element. button reference related elements: menupopup menuitem ...
... more information about this type of menu button element. button reference related elements: menupopup menuitem <button type="menu-button"> a button that that has a separate arrow button with a menu attached to it. unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed. <button type="menu-button" label="new"> <menupopup> <menuitem label="new document"/> <menuitem label="new image"/> </menupopup> </button> more information about this type of menu button element. button reference related elements: menupopup menuitem <checkbox> a control that may be turned on and off, typically used to create options which may be enabled or disabled. ...
... checkbox reference <colorpicker> a control that may be used to select a color. ...
...And 13 more matches

Advanced form styling - Learn web development
at the reference page you'll see a lot of different possible values listed for -webkit-appearance, however by far the most helpful value, and probably the only one you'll use, is none. this stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using css. ...
... see a lot of different possible values listed for -webkit-appearance, however by far the most helpful value, and probably the only one you'll use, is none. this stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using css. ...
...r by far the most helpful value, and probably the only one you'll use, is none. this stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using css. ...
...And 13 more matches

Beginning our React todo list - Learn web development
this project, we're going to provide two things: an app() function to replace the one you have now, and some css to style your app. ...
...o provide two things: an app() function to replace the one you have now, and some css to style your app. ...
... replace the one you have now, and some css to style your app. ...
...And 13 more matches

Creating our first Vue component - Learn web development
> we can now begin to add actual content to our todoitem. vue templates are currently only allowed a single root element — one element needs to wrap everything inside the template section (this will change when vue 3 comes out). we'll use a <div> for that root element. add an empty <div> inside your component template now. inside that <div>, let's add a checkbox and a corresponding label. ...
...ntly only allowed a single root element — one element needs to wrap everything inside the template section (this will change when vue 3 comes out). we'll use a <div> for that root element. add an empty <div> inside your component template now. inside that <div>, let's add a checkbox and a corresponding label. add an id to the checkbox, and a for attribute mapping the checkbox to the label, as shown below. <template> <div> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">my todo item</label> </div> </template> using todoitem inside our app this is all fine, but we haven’t added the component to our app yet, so there’s no way to test it and see if everything is working. let’s add it now. open up app.vue again. at t...
... list (<ul>) containing a single list item (<li>). inside the list item add <to-do-item></to-do-item>. your app.vue <template> contents should now look something like this: <div id="app"> <h1>to-do list</h1> <ul> <li> <to-do-item></to-do-item> </li> </ul> </div> if you check your rendered app again, you should now see your rendered todoitem, consisting of a checkbox and a label. making components dynamic with props our todoitem component is still not very useful because we can only really include this once on a page (ids need to be unique), and we have no way to set the label text. nothing about this is dynamic. what we need is some component state. this can be achieved by adding props to our component. you can think of props as being similar to inputs in a functio...
...And 13 more matches

<input type="date"> - HTML: Hypertext Markup Language
browser support. in this section, we'll look at basic and then more complex uses of <input type="date">, and offer advice on mitigating the browser support issue later (see handling browser support). hopefully, over time browser support will become ubiquitous, and this problem will fade away. basic uses of date the simplest use of <input type="date"> involves one <input> combined with its <label>, as seen below: <form action="https://example.com"> <label> enter your birthday: <input type="date" name="bday"> </label> <p><button>submit</button></p> </form> this html submits the entered date under the key bday to https://example.com — resulting in a url like https://example.com/?bday=1955-06-08. setting maximum and minimum dates you can use the min and max attributes ...
...tton></p> </form> this html submits the entered date under the key bday to https://example.com — resulting in a url like https://example.com/?bday=1955-06-08. setting maximum and minimum dates you can use the min and max attributes to restrict the dates that can be chosen by the user. in the following example, we set a minimum date of 2017-04-01 and a maximum date of 2017-04-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="2017-04-01" max="2017-04-30"> </label> </form> the result is that only days in april 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside april 2017 can't be selected in tte picker widget. note: you should be able to use the step attribute to vary the num...
...ese dates, if the date picker isn't fully supported on the user's device. you can also use the required attribute to make filling in the date mandatory — an error will be displayed if you try to submit an empty date field. this should work in most browsers, even if they fall back to a text input. let's look at an example of minimum and maximum dates, and also made a field required: <form> <label> choose your preferred party date (required, april 1st to 20th): <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> <span class="validity"></span> </label> <p> <button>submit</button> </p> </form> if you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. try playing with the exampl...
...And 13 more matches

Building Trees - Archive of obsolete content
identical. however, the tree builder requires a very specific form to the action body. specifically, the action body should be a single treeitem with its rows and cells. ...
...a very specific form to the action body. specifically, the action body should be a single treeitem with its rows and cells. ...
...this template uses the simple rule syntax. the extended syntax could a...
...And 12 more matches

XBL Attribute Inheritance - Archive of obsolete content
tributes xbl allows us to build composite widgets while hiding their actual implementation. however, with the features mentioned so far, the anonymous content is always created in the same way. it would be useful to add attributes to the bound elements that modify the inner elements. for example: xul: <searchbox/> xbl: <binding id="searchbinding"> <content> <xul:textbox/> <xul:button label="search"/> </content> </binding> in the example, the label attribute has been placed directly on the button element. the problem with this is that the label would be the same every time the binding was used. in this case, it would be preferable if the attribute could be specified on the searchbox instead. xbl provides an inherits attribute which can be used to inherit attributes from the bound...
...d on the searchbox instead. xbl provides an inherits attribute which can be used to inherit attributes from the bound element. it should be placed on the element that should inherit an attribute from the outer element, in this case the button. its value should be set to a comma-separated list of attribute names that are to be inherited. <xul:textbox xbl:inherits="flex"/> <xul:button xbl:inherits="label"/> when the content is generated, the textbox grabs the flex attribute from the searchbox and the button grabs the label attribute from the searchbox. this allows both the flexibility of the textbox and the label of the button to be different for each use of the binding. in addition, changing the value of the attributes on the searchbox with a script will update the textbox and button also. you ...
...s attribute has been placed in the xbl namespace, by prefixing it with 'xbl:'. the namespace should be declared somewhere earlier, usually on the bindings element. the next example demonstrates this. ...
...And 12 more matches

HTML: A good basis for accessibility - Learn web development
a</a>.</p> <p>another link, to the <a href="https://developer.mozilla.org">mozilla developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">click me!</button> <button data-message="this is from the second button">click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form</h2> <form> <div> <label for="name">fill in your name:</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">enter your age:</label> <input type="text" id="age" name="age"> </div> <div> <label for="mood">choose your mood:</label> <select id="mood" name="mood"> <option>happy</option> <option>sad</option> <option>angry</option> <option>worried</o...
... however, it is again the case that people sometimes do strange things with html. ...
... however, it is again the case that people sometimes do strange things with html. ...
...And 12 more matches

HTML: A good basis for accessibility - Learn web development
a</a>.</p> <p>another link, to the <a href="https://developer.mozilla.org">mozilla developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">click me!</button> <button data-message="this is from the second button">click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form</h2> <form> <div> <label for="name">fill in your name:</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">enter your age:</label> <input type="text" id="age" name="age"> </div> <div> <label for="mood">choose your mood:</label> <select id="mood" name="mood"> <option>happy</option> <option>sad</option> <option>angry</option> <option>worried</o...
... however, it is again the case that people sometimes do strange things with html. ...
... however, it is again the case that people sometimes do strange things with html. ...
...And 12 more matches

WAI-ARIA basics - Learn web development
, but there are also others that describe different pages structures, such as role="banner", role="search", role="tabgroup", role="tab", etc., which are commonly found in uis. properties — these define properties of elements, which can be used to give them extra meaning or semantics. ...
...are also others that describe different pages structures, such as role="banner", role="search", role="tabgroup", role="tab", etc., which are commonly found in uis. properties — these define properties of elements, which can be used to give them extra meaning or semantics. ...
...r", role="search", role="tabgroup", role="tab", etc., which are commonly found in uis. properties — these define properties of elements, which can be used to give them extra meaning or semantics. ...
...And 12 more matches

Making decisions in your code — conditionals - Learn web development
if the last example provided us with two choices, or outcomes — but what if we want more than two? there is a way to chain on extra choices/outcomes to your if...else — using else if. each extra choice requires an additional block to put in between if() { ... } and else { ... ...
... outcomes — but what if we want more than two? there is a way to chain on extra choices/outcomes to your if...else — using else if. each extra choice requires an additional block to put in between if() { ... } and else { ... ...
...tch. note: you don't have to include the default section — you can safely omit it if there is no chance that the expression could end up equaling an unknown value. if there is a chance of this, however, you need to include it to handle unknown cases. ...
...And 12 more matches

Starting our Svelte Todo list app - Learn web development
url you'll see our todos.svelte component being rendered: adding static markup for the moment we will start with a static markup representation of our app, so you can see what it will look like. ...
...os.svelte component being rendered: adding static markup for the moment we will start with a static markup representation of our app, so you can see what it will look like. ...
...rendered: adding static markup for the moment we will start with a static markup representation of our app, so you can see what it will look like. ...
...And 12 more matches

Loops and iteration - JavaScript
y repeat an action some number of times. (note that it's possible that number could be zero!) the various loop mechanisms offer different ways to determine the start and end points of the loop. there are various situations that are more easily served by one type of loop over the others. the statements for loops provided in javascript are: for statement do...while statement while statement labeled statement break statement continue statement for...in statement for...of statement for statement a for loop repeats until a specified condition evaluates to false. the javascript for loop is similar to the java and c for loop. a for statement looks as follows: for ([initialexpression]; [conditionexpression]; [incrementexpression]) statement when a for loop executes, the following o...
...statement that counts the number of selected options in a scrolling list (a <select> element that allows multiple selections). the for statement declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. ...
...elect> element that allows multiple selections). the for statement declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. ...
...And 12 more matches

Focus and Selection - Archive of obsolete content
ift to the element with the next highest tab index. that means that you can order the elements by setting indices on elements in sequence. usually, however, you would not set the tabindex attribute. if you do not, pressing tab will set the focus to the next displayed element. you only need to set tab indices if you wish to use a different order. here is an example: example 1 : source view <button label="button 1" tabindex="2"/> <button label="button 2" tabindex="1"/> <button label="button 3" tabindex="3"/> the focus event the focus event is used to respond when the focus is given to an element. the blur event is used to respond when the focus is removed from an element. you can respond to focus changes by adding an onfocus or onblur attribute on an element. they work just like their html count...
...t. example 2 : source view <script> function displayfocus(){ var elem=document.getelementbyid('sbar'); elem.setattribute('value','enter your phone number.'); } </script> <textbox id="tbox1"/> <textbox id="tbox2" onfocus="displayfocus();"/> <description id="sbar" value=""/> the focus event, when it occurs, will call the displayfocus function. this function will change the value of the text label. we could extend this example to remove the text when the blur event occurs. typically, you will use focus and blur events to update parts of the interface as the user selects elements. for instance, you might update a total as the user enters values in other fields, or use focus events to validate certain values. don't display an alert during a focus or blur event as this will be distracting for...
...we want to use a capturing event handler, so the addeventlistener method needs to be used. it registers a capturing event handler with the ...
...And 11 more matches

More Menu Features - Archive of obsolete content
and menuseparators in menupopups. however, you can create submenus by simply placing the menu element inside the menupopup element. this works because the menu element is valid even when it isn't directly placed inside a menu bar. ...
...y placing the menu element inside the menupopup element. this works because the menu element is valid even when it isn't directly placed inside a menu bar. ...
...use the menu element is valid even when it isn't directly placed inside a menu bar. the example below creates a simple submenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menuitem label="window"/> <menuitem label="message"/> </menupopup> </menu> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog. we'll just add a few simple commands to a...
...And 11 more matches

Using Remote XUL - Archive of obsolete content
the link/selecting the menu item performs some function, so we'll use xul menu elements to implement them in our document. the independent links, on the other hand, are similar to xul buttons, which perform a function when pressed, so we'll use the button element for those. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="the mozilla organization" /> <menu label="developer docs" /> <menu label="testing" /> <menu label="tools" /> <button label="faq" /> <button label="search" /> </menubar> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the menubar element is a container for a series of menus. it can also contain other elements. it serves to group menus together into a single ...
...e src="https://www.mozilla.org/" flex="1" /> </window> the menubar element is a container for a series of menus. it can also contain other elements. it serves to group menus together into a single horizontal bar like the one you see at the top of many desktop applications. the menu element defines a pull-down menu, and the button element defines a pressable button. both menus and buttons take a label attribute whose value is the text to display in the element. source | rendered step 4: menu items menus aren't terribly useful unless they contain selectable items. to add items to a menu, we need to first add a menupopup element and then put menuitem elements within it for each item we want to appear on the menu. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gateke...
...n the element. source | rendered step 4: menu items menus aren't terribly useful unless they contain selectable items. to add items to a menu, we need to first add a menupopup element and then put menuitem elements within it for each item we want to appear on the menu. ...
...And 11 more matches

Componentizing our React app - Learn web development
return ( ); } this is ok so far, but our component has to return something! ...
...is is ok so far, but our component has to return something! ...
...if at an...
...And 11 more matches

Rendering a list of Vue components - Learn web development
to add new todo items, we can start with some mock to do items. each to-do item will be represented by an object with a name and a done property. add a few sample to-do items, along the lines of those seen below. this way you have some data available for rendering using v-for. export default { name: 'app', components: { todoitem }, data() { return { todoitems: [ { label: 'learn vue', done: false }, { label: 'create a vue project with the cli', done: true }, { label: 'have fun', done: true }, { label: 'create a to-do list', done: false } ] }; } }; now that we have a list of items, we can use the v-for directive to display them. directives are applied to elements like other attributes. in case of v-for, you use a special syntax...
... to each element in your todoitems array, and assign each of them a value of uniqueid('todo-'). ...
...value of uniqueid('todo-'). ...
...And 11 more matches

Styling Vue components with CSS - Learn web development
pitalize; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1p...
...u might do it in plain html — by adding a class="" attribute to the element. add class="btn btn__primary btn__lg" to your form’s <button> element: <button type="submit" class="btn btn__primary btn__lg"> add </button> while we're here, there's one more semantic and styling change we can make. since our form denotes a specific section of our page, it could benefit from an <h2> element. ...
...imary btn__lg" to your form’s <button> element: <button type="submit" class="btn btn__primary btn__lg"> add </button> while we're here, there's one more semantic and styling change we can make. since our form denotes a specific section of our page, it could benefit from an <h2> element. the label, however, already denotes the purpose of the form. to avoid repeating ourselves, let's wrap our label in an <h2>. there are a few other global css styles which we can add as well. ...
...And 11 more matches

XUL Accessibility
introduction this article shows how xul control elements are mapped to accessibility api. it is much in progress. at api general rules this section holds some rules applied to generating accessible name and description. ...
...progress. at api general rules this section holds some rules applied to generating accessible name and description. ...
...ion holds some rules applied to generating accessible name and description. ...
...And 11 more matches

ARIA: dialog role - Accessibility
up an html based application dialog or window that separates content or ui from the rest of the web application or page. dialogs are generally placed on top of the rest of the page content using an overlay. dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with). ...
... account section.</p> <button>close</button> </div> description marking up a dialog element with the dialog role helps assistive technology identify the dialog's content as being grouped and separated from the rest of the page content. however, adding role="dialog" alone is not sufficient to make a dialog accessible. ...
...s assistive technology identify the dialog's content as being grouped and separated from the rest of the page content. however, adding role="dialog" alone is not sufficient to make a dialog accessible. additionally, the following needs to be done: the dialog must be properly labeled keyboard focus must be managed correctly the sections below describe how these two requirements can be met. labeling even though it is not required for the dialog itself to be able to receive focus, it still needs to be labeled. ...
...And 11 more matches

<input type="text"> - HTML: Hypertext Markup Language
ional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with ...
...neral rule, you should avoid using them unless it can't be helped. attribute description autocorrect a string indicating whether or not autocorrect is on or off. safari only. mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. firefox for android only. autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. permitted values are: on enable automatic correction of typos, as well as processing of text substitutions if any are configured. off disable automa...
...rrection of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. using text inputs <input> el...
...And 11 more matches

Adding menus and submenus - Archive of obsolete content
mac os x. mac os x treats menus in a very different way than other systems. if your extension involves menus in any way, you should test it on mac os x to make sure everything works adequately. ...
...s in a very different way than other systems. if your extension involves menus in any way, you should test it on mac os x to make sure everything works adequately. ...
... if your extension involves menus in any way, you should test it on mac os x to make sure everything works adequately. ...
...And 10 more matches

The Box Model - Archive of obsolete content
d next to each other from left to right. a vbox is oriented vertically by default, its child nodes displayed one below the other from top to bottom. a box is a generic version that you can orient as you please, but its default is horizontal orientation, so it's pretty much equivalent to an hbox and it is seldom used. here's a very simple example of an hbox with 3 child buttons: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like this: the orientation of boxes (and most xul elements) can be controlled using the orient attribute or the -moz-box-orient css property. with these yo...
...this is what we get: now the flexible button is taking the available inner space, moving the other two buttons all the way to the end of the box. what would happen if we also add flexibility to the "parrot" button? since both buttons have a flexibility of 1, the available space is distributed evenly among the two. note that this is not always the case. if one of the buttons has a very long label that restricts its minimum size, then it could be the label determining its size, while the other button would flex taking the rest of the room. now, if you want a different size distribution in flexible elements, you can use flexibility values higher than 1. in this case, the "cat" button has a flex value of 3, while the "parrot" button still has a flex value of 1. the "cat" button is now la...
...ex taking the rest of the room. now, if you want a different size distribution in flexible elements, you can use flexibility values higher than 1. in this case, the "cat" button has a flex value of 3, while the "parrot" button still has a flex value of 1. the "cat" button is now larger in a 3 to 1 proportion. note that, again, this can depend on the contents of the elements, in this case, the labels and paddings in the buttons. if the label of the "parrot" button was something much longer, the size ratio would not be kept. you can have even more control over the size of flexible elements using the minwidth, maxwidth, minheight and maxheight attributes, or their css counterparts: min-width, max-width, min-height and max-height. the latter are recommended to keep style code in the skin secti...
...And 10 more matches

Menu - Archive of obsolete content
u is shown. the function is invoked just before the item's menu is shown and when the items array of the item's menu is retrieved. it must return a non-function menuitem. if the item belongs to a context menu, the function is called as function(context) and otherwise function(). context is an object describing the context in which the menu was shown. string a simple menuitem with the given string label. object a menuitem with specific properties. the object may define any of the properties listed below. properties property type description command function a function that will be called when the menuitem is clicked. if the menu property is present, command will instead be called when any of the item's descendants is clicked. in th...
... data string an arbitrary string that the feature may associate with the menuitem. disabled boolean if true, the menuitem is disabled. icon string the url of an icon to display in the menuitem. note that some environments, notably gnome 2.28, do not support menuitem icons either by default or at all. label string the label of the menuitem. menu jetpack.menu if defined, the menuitem expands into a submenu. mnemonic string a character that is used as the item's shortcut key while the menu is open. it should be one of the characters that appears in the item's label. on some platforms this character is underlined in the label. ...
...fancy separators may behave differently on different platforms, however. xulid string the id of the menuitem's backing xul element, exposed for the benefit of advanced developers. ...
...And 10 more matches

List Controls - Archive of obsolete content
a menulist element to create drop-down list boxes. they work similar to the html select element, which performs both functions, but the xul elements have additional features. the simplest list box uses the listbox element for the box itself, and the listitem element for each item. for example, this list box will have four rows, one for each item. example 1 : source view <listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </listbox> like with the html option element, you can assign a value for each item using the value attribute. you can then use the value in a script. the list box will default to a suitable size, but you can control the size with the rows attribute. set it to the nu...
...bute. you can then use the value in a script. the list box will default to a suitable size, but you can control the size with the rows attribute. set it to the number of rows to display in the list box. a scroll bar will appear that the user can use to display the additional rows. the following example demonstrates these additional features: example 2 : source view <listbox rows="3"> <listitem label="butter pecan" value="bpecan" /> <listitem label="chocolate chip" value="chocchip" /> <listitem label="raspberry ripple" value="raspripple" /> <listitem label="squash swirl" value="squash" /> </listbox> the example has been changed to display only 3 rows at a time. values have also been added to each item in the list. list boxes have some additional features, which will be described later.
...n the listbox. the listcols element is used to hold the column information, each of which is specified using a listcol element. you will need one listcol element for each column in the listbox. the listcell element may be used for each cell in a row. if you want to have three columns, you will need to add three listcell elements inside each listitem. to specify the text content of a cell, place a label attribute on a listcell. for the simple case where there is only one column, you may also place the label attributes directly on the listitem elements and leave the listcell elements out entirely, as was seen in the earlier listbox examples. the following example is of a listbox with two columns and three rows: example 3 : source view <listbox> <listcols> <listcol/> <listcol/> </l...
...And 10 more matches

Modifying a XUL Interface - Archive of obsolete content
element to create. you can then set attributes of the element using the setattribute() function and append it to the xul document using the appendchild() function. for example, the following will add a button to a xul window: example 1 : source view <script> function addbutton(){ var abox = document.getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add" oncommand="addbutton();"/> </box> this example has two parts a box container element in xul. notice that this is not the same as a vbox or an hbox. (this is discussed more in the box model pages.) the box element has two attributes "id" and "width". ...
...ommand="addbutton();"/> </box> this example has two parts a box container element in xul. notice that this is not the same as a vbox or an hbox. (this is discussed more in the box model pages.) the box element has two attributes "id" and "width". the box element contains a button element. the button element has two attributes "label" and "oncommand" a javascript function named "addbutton()" this script first gets a reference to the box with getelementbyid(), which is the container to add a new button to. the function getelementbyid() does not know that the box it is looking for happens to be containing the tag that has the oncommand attribute that referenced it...
...erenced it. getelementbyid() only knows the box it is looking to find has an id with the value "abox". this is a subtle dependency between the function and the xul element to which you should pay attention. addbutton() the calls the createelement() function to create a new button. note this button is not visible, nor is it attached to anything yet. ...
...And 10 more matches

dialog - Archive of obsolete content
ar in the dialog box. these buttons will be placed in the correct locations for the user's platform. more information is available in the xul tutorial and dialogs and prompts (code snippets). ...
...x. these buttons will be placed in the correct locations for the user's platform. more information is available in the xul tutorial and dialogs and prompts (code snippets). ...
...ll be placed in the correct locations for the user's platform. more information is available in the xul tutorial and dialogs and prompts (code snippets). ...
...And 10 more matches

<input type="email"> - HTML: Hypertext Markup Language
ional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with ...
....org" "me@example.org,you@example.org" "me@example.org, you@example.org" "me@example.org,you@example.org, us@example.org" some examples of invalid strings: "," "me" "me@example.org you@example.org" placeholders sometimes it's helpful to offer an in-context hint as to what form the input data should take. this can be especially important if the page design doesn't offer descriptive labels for each <input>. this is where placeholders come in. a placeholder is a value that demonstrates the form the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "". once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears. here, we have an email input with the plac...
... a valid e-mail address, but for security purposes, we require that the address be an internal corporate e-mail address. since inputs of type email validate against both the standard e-mail address validation and the specified pattern, you can implement this easily. ...
...And 10 more matches

<input type="image"> - HTML: Hypertext Markup Language
for example, if you have a graphical button that shows an image with an icon and/or image text "login now", you should also set the alt attribute to something l...
... for example, if you have a graphical button that shows an image with an icon and/or image text "login now", you should also set the alt attribute to something like login now. ...
...d7ab0115d5a659fcfb7b.png"> the src attribute is used to specify the path to the image you want to display in the button. the alt attribute provides alt text for the image, so screen reader users can get a better idea of what the button is used for. it will also display if the image can't be shown for any reason (for example if the path is misspelled). if possible, use text which matches the label you'd use if you were using a standard submit button. the width and height attributes are used to specify the width and height the image should be shown at, in pixels. the button is the same size as the image; if you need the button's hit area to be bigger than the image, you will need to use css (e.g. padding). also, if you specify only one dimension, the other is automatically adjusted so that...
...And 10 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
t, helloworld@xuldev.org. set the contents of that file to be the full path to the work folder for your extension source files, c:\extensions\helloworld. listing 3: additional content for overlay.xul <?xml version="1.0"?> <overlay id="helloworldoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" oncommand="window.opendialog('chrome://helloworld/content/clock.xul','clock','chrome,centerscreen,modal');"/> </menupopup> </overlay> phase 2: adding a function to display the time in phase 2, we will make it so that selecting the hello world menu item we created in phase 1 will display a window with the time (figure 6). fixme: figure ...
... first, we add an event handler to the menu item that will open the window (listing 4). fixme: listing 4: event handler clock handler create the window that displays the clock (listing 5) and its controller (listing 6). we’ve already covered the dialog element in chapter 3. in this case, we only want to display an ok button, so we set the buttons attribute to accept. within the window are a label element and textbox element, wrapped in a hbox element so that they are arranged horizontally. listing 5: content for clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="clock" buttons="accept" onload="initclock();"> <script type="application/javascript...
...anged horizontally. ...
...And 9 more matches

Broadcasters and Observers - Archive of obsolete content
attribute forwarding we've already seen that elements such as buttons can be hooked up to commands. in addition, if you place the disabled attribute on the command element, any elements hooked up to it will also become disabled automatically. this is a useful way to simplify the amount of code you need to write. the technique also works for other attributes as well. ...
...mmands. in addition, if you place the disabled attribute on the command element, any elements hooked up to it will also become disabled automatically. this is a useful way to simplify the amount of code you need to write. the technique also works for other attributes as well. for instance, if you place a label attribute on a command element, any buttons attached to the command will share the same label. ...
...n the command element, any elements hooked up to it will also become disabled automatically. this is a useful way to simplify the amount of code you need to write. the technique also works for other attributes as well. for instance, if you place a label attribute on a command element, any buttons attached to the command will share the same label. example 1 : source view <command id="my_command" label="open"/> <button command="my_command"/> <checkbox label="open in a new window" command="my_command"/> in this example, the button does not have a label attribute, however it is attached to a command that does. the button will share the label with the command. the checkbox already has a label, however, it will be overridden by the command's label. the result is that both the button and the chec...
...And 9 more matches

Trees - Archive of obsolete content
lems. of course, this is independant of the performance of the view object itself. a tree view is an object which implements the nsitreeview interface. this interface contains thirty properties and functions which you may implement. these functions will be called by the tree as necessary to retrieve data and state about the tree. for instance, the getcelltext() function will be called to get the label for a particular cell in the tree. an advantage of using a tree view is that it allows the view to store the data in a manner which is more suitable for the data, or to load the data on demand as rows are displayed. this allows more flexibility when using trees. naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially ...
...uses the ids to identify the columns when rearranging and hiding them. this is no longer required in mozilla 1.8 and later, but it is still a good idea to use ids on columns. treechildren this contains the main body of the tree where the individual rows of data will be displayed. example tree with two columns example 1 : source view <tree flex="1"> <treecols> <treecol id="namecolumn" label="name" flex="1"/> <treecol id="addresscolumn" label="address" flex="2"/> </treecols> <treechildren/> </tree> first, the entire table is surrounded with a tree element. this declares an element that is used as a table or tree. as with html tables, the data in a tree is always organized into rows. the columns are specified using the treecols tag. you may place as many columns as you ...
..."2"/> </treecols> <treechildren/> </tree> first, the entire table is surrounded with a tree element. this declares an element that is used as a table or tree. as with html tables, the data in a tree is always organized into rows. the columns are specified using the treecols tag. you may place as many columns as you wish in a tree. as with listboxes, a header row will appear with column labels. a drop-down menu will appear in the upper-right corner of the tree, which the user may use to show and hide individual columns. each column is created with a treecol element. you can set the header label using the label attribute. you may also want to make the columns flexible if your tree is flexible, so that the columns stretch as the tree does. in this example, the second column will be appr...
...And 9 more matches

Using Spacers - Archive of obsolete content
more room in it. let's see what happens when a spacer is added between the text box and the find button. by adding a spacer and resizing the window, you can see that the spacer has expanded to fill the space. the buttons have been pushed over. our find file example the code to add a spacer is shown below. insert it just before the find button. <spacer flex="1"/> <button id="find-button" label="find"/> more about flexibility xul lays out elements on a window by calculating suitable widths and heights for the elements and then adding space where they are flexible. unless you specify information about the width and height of an element, the default size of an element is determined by its contents. you'll notice that the cancel button in the dialogs has always set its width so that it f...
...ndow by calculating suitable widths and heights for the elements and then adding space where they are flexible. unless you specify information about the width and height of an element, the default size of an element is determined by its contents. you'll notice that the cancel button in the dialogs has always set its width so that it fits the text inside it. if you create a button with a very long label, the button's default size will be large enough to hold the entire label. other elements, such as the text box have chosen a suitable default size. the flex attribute is used to specify if an element can change size to fit the box (in this case, the window) it is in. we've already seen the flex attribute applied to spacers, but it can be applied to any element. for example, you might want to have...
...an see in the image, by placing a flex attribute on the find button, it resizes when the window does. a spacer is really nothing special. it could really be considered a hidden button. it works much the same way as a button except it does not draw on screen. you may have noticed something about the image above. not only did the find button grow in size but some space has appeared between the main label and the button. of course, this is the spacer that we put in earlier. it has resized itself also. if you look closely enough, you should notice that the change in size has been divided up equally between the spacer and the button. the spacer has received half of the free space and the button has received the other half. the reason we're seeing this effect is that both the spacer and the find butt...
...And 9 more matches

tooltip - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used for the tooltip popups. for text-only tooltips, this element doesn't need to be used; instead you may just add a tooltiptext attribute to an element. more information is available in the xul tutorial. ...
... related ] this element is used for the tooltip popups. for text-only tooltips, this element doesn't need to be used; instead you may just add a tooltiptext attribute to an element. more information is available in the xul tutorial. ...
...the xul tutorial. ...
...And 9 more matches

Ember app structure and componentization - Learn web development
ber addon that renders the default welcome page we saw in the previous article, when we first navigated to our server at localhost:4200. however, we don't want this. instead, we want it to contain the todomvc app structure. to start with, delete the contents of application.hbs and replace them with the following: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out. this is useful in such cases where we have an <input> being used with no corresponding html text that could be turned into a label. when you save application.hbs, the developmen...
...the development server you started earlier will automatically rebuild the app and refresh the browser. the rendered output should now look like this: it doesn't take too much effort to get our html looking like a fully-featured to-do list app. ...
... our html looking like a fully-featured to-do list app. ...
...And 9 more matches

font - CSS: Cascading Style Sheets
<'font-weight'> see the font-weight css property. <'font-stretch'> see the font-stretch css property. <'font-size'> see the font-size css property. <'line-height'> see the line-height css property. <'font-family'> see the font-family css property. system font values caption the system font used for captioned controls (e.g., buttons, drop-downs, etc.). icon the system font used to label icons. menu the system font used in menus (e.g., dropdown menus and menu lists). message-box the system font used in dialog boxes. small-caption the system font used for labeling small controls. status-bar the system font used in window status bars. prefixed system font keywords browsers often implement several more, prefixed, keywords: gecko implements -moz-window, -moz-document, -moz-...
... the status bar of the window */ p { font: status-bar } live sample html <p> change the radio buttons below to see the generated shorthand and it's effect. ...
... { font: status-bar } live sample html <p> change the radio buttons below to see the generated shorthand and it's effect. ...
...And 9 more matches

<input type="number"> - HTML: Hypertext Markup Language
ional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with ...
...ansaction in which the provided value may have any security implications of any kind. mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. the following screenshot is taken from firefox for android: a simple number input in its most basic form, a number input can be implemented like this: <label for="ticketnum">number of tickets you would like to buy:</label> <input id="ticketnum" type="number" name="ticketnum" value="0"> a number input is considered valid when empty and when a single number is entered, but is otherwise invalid. if the required attribute is used, the input is no longer considered valid when empty. note: any number is an acceptable value, as long as it is a valid flo...
.... if the required attribute is used, the input is no longer considered valid when empty. note: any number is an acceptable value, as long as it is a valid floating point number (that is, not nan or infinity). placeholders sometimes it's helpful to offer an in-context hint as to what form the input data should take. this can be especially important if the page design doesn't offer descriptive labels for each <input>. this is where placeholders come in. a placeholder is a value most commonly used to provide a hint as to the format the input should take value. it is displayed inside the edit box when the element's value is "". once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears. here, we have an number input with the placeholder "mu...
...And 9 more matches

<input type="password"> - HTML: Hypertext Markup Language
ional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed from javascript code that directly sets the value of the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effec...
...how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. using password inputs password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to prevent people near the user from reading the password. a simple password input here we see the most basic password input, with a label established using the <label> element. <label for="userpassword">password: </label> <input id="userpassword" type="password"> allowing autocomplete to allow the user's password manager to automatically enter the password, specify the autocomplete attribute. for passwords, this should typically be one of the following: on allow the browser or a password manager to automatically fill out t...
...he browser or password manager to automatically enter a new password for the site; this is used on "change your password" and "new user" forms, on the field asking the user for a new password. the new password may be generated in a variety of ways, depending on the password manager in use. it may simply fill in a new suggested password, or it might show the user an interface for creating one. ...
...And 9 more matches

<input type="search"> - HTML: Hypertext Markup Language
ional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with ...
...emental whether or not to send repeated search events to allow updating live search results while the user is still editing the value of the field. webkit and blink only (safari, chrome, opera, etc.). mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. firefox for android only. results the maximum number of items that should be displayed in the drop-down list of previous search queries. safari only. autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. permitted values ar...
...y while editing the field). the search event is rate-limited so that it is not sent more more frequently than an implementation-defined interval. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. results the results attrib...
...And 9 more matches

<input type="week"> - HTML: Hypertext Markup Language
ist. methods select(), stepdown(), and stepup() value a domstring representing the value of the week/year entered into the input. the format of the date and time value used by this input type is described in format of a valid week string in date and time formats used in html. you can set a default value for the input by including a value inside the value attribute, like so: <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" value="2017-w01"> one thing to note is that the displayed format may differ from the actual value, which is always formatted yyyy-www. when the above value is submitted to the server, for example, browsers may display it as week 01, 2017, but the submitted value will always look like week=2017-w01. ...
...he user's browser or locale. however, there are issues with <input type="week"> because browser support is not guaranteed across all browsers. we'll look at basic and more complex uses of <input type="week">, then offer advice on mitigating the browser support issue later on (see handling browser support). basic uses of week the simplest use of <input type="week"> involves a basic <input> and <label> element combination, as seen below: <form> <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week"> </form> controlling input size <input type="week"> doesn't support form sizing attributes such as size. you'll have to resort to css for sizing needs. using the step attribute you should be able to use the step attribute to vary the number o...
...k/year, which is helpful, but it's still possible to submit with the field empty, and you might want to restrict the range of choosable weeks. setting maximum and minimum weeks you can use the min and max attributes to restrict the valid weeks that can be chosen by the user. in the following example we are setting a minimum value of week 01, 2017 and a maximum value of week 52, 2017: <form> <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" min="2017-w01" max="2017-w52"> <span class="validity"></span> </form> here's the css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to th...
...And 9 more matches

Adding sidebars - Archive of obsolete content
story sidebars. if not, you can open either one from the view > sidebar menu. they also have shortcuts to open or close them using the keyboard. the code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. ...
...ou're using, so you should avoid changing the css in tab boxes. on the other hand, if you need ui that behaves like a tabbox but doesn't look like one, you should still favor using a tabbox and use css to change its look. using custom-made elements are likely to cause accessibility and functional problems. creating a tabbed view is simple: <tabbox id="xulschoolhello-tabbox"> <tabs> <tab label="&xulschoolhello.maintab.label;" /> <tab label="&xulschoolhello.advancedtab.label;" /> </tabs> <tabpanels> <tabpanel> <!-- content for the main panel. --> </tabpanel> <tabpanel> <!-- content for the advanced panel. --> </tabpanel> </tabpanels> </tabbox> the first tab is selected by default, but you can change the default selection by setting the selected a...
...we recommend that you use hbox or vbox elements as children of a deck or stack. the code is easier to read and maintain this way. a deck can be very useful when you have a large piece of xul code that only changes in a small way depending on different circumstances. for instance, you could have a window that is used for two different purposes, and the only difference between the two cases is a label that has a value in one case and something else in another. using a .properties file and a string bundle is a viable option, but it involves a lot of code for something so simple, specially if that's the only case where you need dynamic text. the alternative is to use a deck with the two labels, and change the selected index depending on the purpose of the window. this way you can still use dtd, ...
...And 8 more matches

Building Menus With Templates - Archive of obsolete content
his allows for better performance as the entire content of a complex menu does not need to be created until the user needs to use the menu. it is very simple to create a menu using a template. here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button. the query generates a list of the person tags within the datasource and outputs the action body for each one. the uri attribute has not been placed on the menupopu...
...ursively. when creating recursive menus, you will need to use multiple rules, since leaf items will need to be created differently than non-leaf items. leaf items will need to use a menuitem element whereas non-leaf items will need to use a menu element. this will involve at least two rules, although you might use other rules if you had other differences to handle. ...
... other differences to handle. here is an rdf example: <button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.xulplanet.com/rdf/address"/> </menupopup> </rule> <rule> <menupopup> <menu uri="rdf:*" label="rdf:http://purl.org/dc/elements/1.1/title"/> </menupopup> </rule> </template> </button> this example uses the simple rdf query syntax. the first rule matches all houses, while the second rule is used for streets. the content generated for each rule...
...And 8 more matches

Adding more elements - Archive of obsolete content
« previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
...usnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
...e discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog. a spacer has been add...
...And 8 more matches

RDF Datasources - Archive of obsolete content
http://home.netscape.com/nc-rdf#referrer referrer of the page url http://home.netscape.com/nc-rdf#url url of the page visit count http://home.netscape.com/nc-rdf#visitcount number of page visits a typical history list will display a tree with a selection of these fields. to use them, just put the url values above in the label attributes of the buttons or treecells. you can use nc:historyroot as the value of the ref attribute. you can also use the value nc:historybydate to get the history sorted into days. using the history list example let's see an example of displaying the history list. we'll display the history in a tree with three columns, the name, the url and the date. example 1 : source <tree flex="1" datasource...
...value of the ref attribute. you can also use the value nc:historybydate to get the history sorted into days. using the history list example let's see an example of displaying the history list. we'll display the history in a tree with three columns, the name, the url and the date. ...
...he value nc:historybydate to get the history sorted into days. using the history list example let's see an example of displaying the history list. we'll display the history in a tree with three columns, the name, the url and the date. ...
...And 8 more matches

XBL Example - Archive of obsolete content
the slideshow first, let's determine what elements need to go in the xbl content. because we want page flipping, a deck element would be the most suitable to hold the page content. the content of the pages will be specified in the xul file, not in xbl, but we'll need to add it inside the deck. the children tag will need to be used. ...
...to be used. along the bottom, we'll need a button to go the previous page, a label to display the current page number, and a button to go to the next page. example 1 : source <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedindex" selectedindex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=previoustext"/> <xul:label flex="1"/> <xul:button xbl:inherits="label=nexttext"/> </xul:hbox> </xul:vbox> </content> </binding> this binding creates the slideshow structure that we want. the flex attribute has been added to a number of elements so that it stretches in the right way. the label attributes on the two buttons inherit their values from the bound element. ...
...xul:hbox> </xul:vbox> </content> </binding> this binding creates the slideshow structure that we want. the flex attribute has been added to a number of elements so that it stretches in the right way. the label attributes on the two buttons inherit their values from the bound element. here, they inherit from two custom attributes, previoustext and nexttext. this makes it easy to change the labels on the buttons. the children of the element that the xbl is bound to will be placed inside the deck. the selectedindex is inherited by the deck, so we may set the initial page in the xul. ...
...And 8 more matches

ARIA: Navigation Role - Accessibility
screen readers use landmark roles to provide keyboard navigation to important sections of a page. ...
...screen readers use landmark roles to provide keyboard navigation to important sections of a page. ...
...through layout is represented programmatically. screen readers use landmark roles to provide keyboard navigation to important sections of a page. like the html <nav> element, navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation. if a page includes more than one navigation landmark, each should have a unique label. if two or more navigational landmark on a page have the same set of links, use the same label for each. it is preferable to use the html5 <nav> element to define a navigation landmark. if the html5 nav element technique is not being used, use a role="navigation" attribute to define a navigation landmark. using the <nav> element will automatically communicate a section has a role of navigation...
...And 8 more matches

ARIA: listbox role - Accessibility
n, shift+space can be used to select contiguous items, ctrl+arrow moves without selecting, and ctrl+space can be used to select non-contiguous items. it is recommended that a checkbox, link or other method be used to select all items, and ctrl+a could be used as a shortcut key for this. when the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus. if an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. as focus moves within the list, the screen reader announces the relevant items. associated aria roles, states, and properties associated roles option one or more nested options ...
...attribute. if false or omitted, only the currently selected option, if any option is selected, needs the aria-selected attribute, and it must be set to true. aria-required a boolean attribute which indicates that an option with a non-empty string value must be selected. aria-readonly the user cannot change which options are selected or unselected, but the listbox is otherwise operable. ...
...ected, needs the aria-selected attribute, and it must be set to true. aria-required a boolean attribute which indicates that an option with a non-empty string value must be selected. aria-readonly the user cannot change which options are selected or unselected, but the listbox is otherwise operable. aria-label a human-readable string value which identifies the listbox. if there's a visible label, then aria-labelledby should be used instead to refer to that label. ...
...And 8 more matches

Border-image generator - CSS: Cascading Style Sheets
********************************************************/ /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 2px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: ce...
...mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 2px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /*************************************************************************************/ /*************************************************************************************/ /* * border image generator tool */ body ...
...: 10px 30px; background-color: #fff; opacity: 0.95; color: #888; /*border-radius: 2px;*/ box-shadow: 0 0 3px 0 #bababa; } #general-controls .property { width: 130px; float: left; } #general-controls .name { height: 20px; margin: 0 10px 0 0; line-height: 100%; text-align: right; float: left; } #general-controls .right { width: 200px; float: right; } #general-controls .ui-checkbox label { height: 10px; } #general-controls .separator { height: 40px; width: 1px; margin: -10px 15px; background-color: #eee; float: left; } /* * controls */ #controls { color: #444; margin: 10px 0 0 0; } #controls .category { height: 190px; min-width: 260px; margin: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 3px; float: left; box-shadow: 0 0 3px 0 #bababa; trans...
...And 8 more matches

disabled - HTML: Hypertext Markup Language
of a disabled checkbox, radio button, <option> and <optgroup>, as well as some form controls that are disabled via the disabled attribute set on the ancestor <fieldset> element. the <option>s are disabled, but the <select> itself is not. we could have disable the entire <select> by adding the attribute to that element rather than it's descendants. ...
...me form controls that are disabled via the disabled attribute set on the ancestor <fieldset> element. the <option>s are disabled, but the <select> itself is not. we could have disable the entire <select> by adding the attribute to that element rather than it's descendants. ...
...that are disabled via the disabled attribute set on the ancestor <fieldset> element. the <option>s are disabled, but the <select> itself is not. we could have disable the entire <select> by adding the attribute to that element rather than it's descendants. ...
...And 8 more matches

Adding preferences to an extension - Archive of obsolete content
+ symbol; function inforeceived() { var samplepanel = document.getelementbyid('stockwatcher2'); var output = httprequest.responsetext; if (output.length) { // remove any whitespace from the end of the string output = output.replace(/\w*$/, ""); // build the tooltip string var fieldarray = output.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext = "chg: " + fieldarray[4] + " | " + "open: " + fieldarray[5] + " | " + "low: " + fieldarray[6] + " | " + "high: " + fieldarray[7] + " | " + "vol: " + fieldarray[8]; } } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); htt...
... false); design the preference dialog now that we've written all the code, we need to build the xul file for the options dialog. ...
...in our case, we have a single preference, the stock symbol to monitor. preferences are identified by name; in this case, the name is "extensions.stockwatcher2.s...
...And 7 more matches

accesskey - Archive of obsolete content
« xul reference home attribute of: button, checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton, textbox accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. on non-macintosh platforms, the character on the element's label matching the accesskey is underlined. for example, when a menu labeled 'file' has an accesskey of 'f', the generated label will be 'file'. ...
... the character on the element's label matching the accesskey is underlined. for example, when a menu labeled 'file' has an accesskey of 'f', the generated label will be 'file'. when the user presses a modifier key specific to the platform (eg, control* on windows, command* on macintosh) and the access key, the element will be focused and/or activated from anywhere in the window. on the macintosh, labels are never underlined, however accesskeys can still be used by pressing the letter combined with the command key. ...
... window. on the macintosh, labels are never underlined, however accesskeys can still be used by pressing the letter combined with the command key. *(these are the keys corresponding to event.ctrlkey and event.metakey respectively when listening to key events) although the value is case insensitive, a letter with the case matching the accesskey attribute will be used if both cases exist in the label. otherwise, if the label has two or more characters which are same as its accesskey, the first of those characters in the label will be underlined. if a label doesn't have the specified character, the character will be appended to the label with parentheses. for example, when an accesskey of an 'open' label is 'a', the generated label will be 'open (a)'. however, if the last character of the la...
...And 7 more matches

ContextMenus - Archive of obsolete content
e mouse to open a context menu, the context is the element that was clicked. when using the keyboard, the context is the element in the window that is currently focused. although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case. ...
... to cancel a context menu event, you can use the preventdefault method of the event object. ...
...nt for example. attaching context menus a context menu may be attached to an element using the context attribute, which may be applied to any xul element. the value of the context attribute should be the id of a context menu within the same document. in the example, a context menu is attached to a grid. <window id="main-window"> <popupset> <menupopup id="ins-del-menu"> <menuitem label="insert"/> <menuitem label="delete"/> </menupopup> </popupset> </window> <grid context="ins-del-menu"> <columns> <column/> <column flex="1"/> </columns> <rows id="rows"> <row align="center"> <label value="name:"/> <textbox/> </row> </rows> </grid> the same context menu can be attached to multiple elements. just set the context attribute on those ...
...And 7 more matches

Box Model Details - Archive of obsolete content
lot of features of the box model. here, we'll find out some more details with some examples. more layout details the style properties such as min-width and max-height can be applied to any element. we've added them to buttons and textboxes, but we can also add them to spacers or boxes. in addition, the flex attribute can be applied to any element. example 1 : source view <hbox flex="1"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible. the two buttons indicate a minimum width of 100 pixels. the buttons will never be smaller than this size but they may grow larger. here the window should appear just over 200...
...ribute controls this behavior on a horizontal box. you can also prevent this stretching by placing a maximum height on the elements or, better, on the box itself. if a box has a maximum height, the elements inside it are constrained by this. however, the problem with this is that you need to know how big the element will be beforehand. example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> summary of the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible. the best interface is one that can be displayed at various sizes without p...
...anywhere in a xul file, including inside an html element such as a table. however, the layout will be partly controlled by the html element. that means that the flex might not work exactly as you want it. remember that flexibility only has meaning for elements that are directly inside a box or an element that is a type of box. ...
...And 7 more matches

Element Positioning - Archive of obsolete content
suitable size to hold the text. width and height attributes you may need to have more control over the size of an element in a window. there are a number of features that allow you to control the size of an element. the quick way is to simply add the width and height attributes on an element, much like you might do on an html img tag. an example is shown below: example 1: source view <button label="ok" width="100" height="40"/> however, it is not recommended that you do this. it is not very portable and may not fit in with some themes. a better way is to use style properties, which work similarly to style sheets in html. the following css properties can be used. width this specifies the width of the element. note that the css global skin of the xul application may also specify a min-...
...that have a flex attribute set to a value greater than 0. recall that flexible elements grow and shrink to fit the available space. their default size is still calculated the same as for inflexible elements. the following example demonstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier. the first two buttons will be sized at a suitable default width and the third button will be larger because it has a longer label. the first button is made flexible and all three elements have been placed inside a box...
... both will share the amount of extra space. if one button has a maximum width, the second will still continue to grow and take all of the remaining space. if a box has a maximum width or height, the children cannot grow larger than that maximum size. if a box has a minimum width or height, the children cannot shrink smaller than that minimum size. ...
...And 7 more matches

Popup Menus - Archive of obsolete content
scribed using the menupopup element. it has no special attributes and is a type of box. when invoked, it will display a window containing whatever you put inside the menupopup. however, you should always put an id attribute on the menupopup as it is used to associate the popup with an element. we'll see what this means soon. first, an example: <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> as can be seen here, a simple popup menu with three commands on it has been created. the menupopup element surrounds the three menuitem elements. you will also notice that the id has been set on the menupopup element itself. the popupset element surrounds the entire popup menu declaration. this is a g...
...the id on the popup. that way it's easy to have multiple menupopups in one file. in the example above, we want to make the popup a context menu. that means that we need to use the context attribute and add it to the element which we want to have the popup associated with. the sample below shows how we might do this: example 1 : source view <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <box context="clipmenu"> <label value="context click for menu"/> </box> here, the menupopup has been associated with a box. whenever you context-click (right-click) anywhere inside the box, the popup menu will appear. the popup will also appear even if you click on the children of the box, so it wil...
...the context attribute has been used to associate the box with a menupopup with the same id. in this case, the menupopup clipmenu will appear. this way, you can have a number of popups and associate them with different elements. you could associate multiple popups with the same element by putting more attributes of different types on an element. ...
...And 7 more matches

Tabboxes - Archive of obsolete content
g the size of the tabbox, the size of the largest page is used. that means that if there are ten textboxes on one tab page and only one on another, the tab page will be sized to fit the one with the ten on it as this takes up more room. the area taken up by the tab area does not change when the user switches to a new tab page. tabbox example example 1 : source view <tabbox> <tabs> <tab label="mail"/> <tab label="news"/> </tabs> <tabpanels> <tabpanel id="mailtab"> <checkbox label="automatically check for mail"/> </tabpanel> <tabpanel id="newstab"> <button label="clear news buffer"/> </tabpanel> </tabpanels> </tabbox> here, two tabs have been added, the first labeled 'mail' and the other 'news'. when the user clicks on the mail tab, the contents ...
... the currently selected tab element is given an additional selected attribute which is set to true. this alters the appearance of the currently selected tab to make it look selected. ...
... the currently selected tab element is given an additional selected attribute which is set to true. this alters the appearance of the currently selected tab to make it look selected. only one tab will have a true value for this attribute at a time. ...
...And 7 more matches

Templates - Archive of obsolete content
curity reasons, mozilla doesn't allow access to them from other sources. to view this example, you will need to create a chrome package and load the file from there (you can do this easily, see manifest files). you can then enter the chrome url into the browser url field. example 1 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <button uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </template> </vbox> here, a vertical box has been created that will contain a column of buttons, one for each top-level bookmark. you can see that the template contains a single button. this single button is used as a basis for all the buttons that need to be created. you can see in the image that the set of buttons has been created, one for each...
...e will usually correspond to the value of an about attribute on an rdf bag, seq or alt element. inside the template by adding these two attributes to the box above, it allows the generation of elements using the template. however, the elements inside the template need to be declared differently. you may notice in the example above that the button has a uri attribute and an unusual value for the label attribute. an attribute value inside the template that begins with 'rdf:' indicates that the value should be taken from the datasource. in the example earlier, this is the case for the label attribute. the remainder of the value refers to the name property in the datasource. it is constructed by taking the namespace url used by the datasource and appending the property name. if you don't underst...
...e remainder of the value refers to the name property in the datasource. it is constructed by taking the namespace url used by the datasource and appending the property name. if you don't understand this, try re-reading the last part of the previous section. it explains how resources in rdf can be referred to. here, we only use the name of the bookmark but numerous other fields are available. ...
...And 7 more matches

Trees and Templates - Archive of obsolete content
e difference by using mozilla's dom inspector on a tree with and without the flag. if you do use a content builder instead, note that the content won't generally get built until it is needed. with hierarchical trees, the children don't get generated until the parent nodes have been opened by the user. in the template, there will be one treecell for each column in the tree. the cells should have a label attribute to set the label for the cell. this would normally be set to an rdf property so that the label is pulled from the datasource. template-built tree example the following example demonstrates a template-built tree, in this case for the file system. example 1 : source <tree id="my-tree" flex="1" datasources="rdf:files" ref="nc:filesroot" flags="dont-build-content"> <treecols> <...
...the label for the cell. this would normally be set to an rdf property so that the label is pulled from the datasource. template-built tree example the following example demonstrates a template-built tree, in this case for the file system. ...
...the label is pulled from the datasource. template-built tree example the following example demonstrates a template-built tree, in this case for the file system. ...
...And 7 more matches

menu - Archive of obsolete content
[ examples | attributes | properties | methods | related ] an element, much like a button, that is placed on a menubar. when the user clicks the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
...s the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
...enu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
...And 7 more matches

menulist - Archive of obsolete content
st. the currently selected choice is displayed on the menulist element. to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
...used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
... ...
...And 7 more matches

menupopup - Archive of obsolete content
left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist. ...
...pshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist. ...
...ode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist. ...
...And 7 more matches

<statusbarpanel> - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox 4 note the status bar has been removed. refer to the add-on bar. an individual element of a statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. ...
...« xul reference home [ examples | attributes | properties | methods | related ] firefox 4 note the status bar has been removed. refer to the add-on bar. an individual element of a statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. ...
...removed. refer to the add-on bar. an individual element of a statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages. ...
...And 7 more matches

toolbarbutton - Archive of obsolete content
ewhere in the application where possible, provide keyboard alternatives. where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. ...
...e all toolbarbuttons focusable by -moz-user-focus: normal. ...
...ccesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarbutton accesskey="b" label="menu-button" type="menu-button"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> <toolbarbutton accesskey="m" label="menu" type="menu"> <menupopup> <menuitem label="menu item 1"/> <menuit...
...And 7 more matches

tree - Archive of obsolete content
ct, rows, seltype, statedatasource, tabindex, treelines properties accessibletype, builderview, columns, contentview, currentindex, disablekeynavigation, disabled, editingcolumn, editingrow, enablecolumndrag, firstordinalcolumn, inputfield, seltype, selstyle, tabindex, treeboxobject, view examples a tree with several columns <tree flex="1" rows="2"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> ...
...treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> a tree with several columns and nested items <tree id="mytree" flex="1" hidecolumnpicker="false" seltype="single" class="tree" rows="5"> <treecols id="mytree2-treecols"> <treecol id="mytree2-treecol0" primary="true" flex="2" label="column a" persist="width" ordinal="1"/> <splitter class="tree-splitter" ordinal="2"/> <treecol id="mytree2-treecol1" flex="1" label="column b" persist="width" ordinal="3"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="1"/> <treecell label="a"/> </treerow> </treeitem> <!-- make sure to set container=...
...if this attribute...
...And 7 more matches

treecol - Archive of obsolete content
e size and other information about the column. you can also place splitter elements between the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. ...
...in the xul tutorial. attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. ...
...itable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. ...
...And 7 more matches

How to build custom form controls - Learn web development
elect> element using non-semantic html, css, and javascript. this select was selecting one option from a limited number of options, which is the same functionality of a same-named group of radio buttons. we could therefore reinvent this using radio buttons instead; let's look at this option. ...
...lement using non-semantic html, css, and javascript. this select was selecting one option from a limited number of options, which is the same functionality of a same-named group of radio buttons. we could therefore reinvent this using radio buttons instead; let's look at this option. ...
...ns instead; let's look at this option. we can start with a completely semantic, accessible, unordered list of radio buttons with an associated <label>, labeling the entire group with a semantically appropriate <fieldset> and <legend> pair. ...
...And 7 more matches

Your first form - Learn web development
form — they are often referred to as html forms. the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too. form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and blind users. designing your form before starting to code, it's always better to step back and take the time to think about your form. designing a quick mockup will help you to define the right set of data you want to ask your user to enter. from a user experience (ux) point of view, it's important to remember that the bigger your form, the more y...
...mple contact form. let's make a rough sketch. our form will contain three text fields and one button. we are asking the user for their name, their e-mail and the message they want to send. hitting the button will send their data to a web server. active learning: implementing our form html ok, let's have a go at creating the html for our form. we will use the following html elements: <form>, <label>, <input>, <textarea>, and <button>. before you go any further, make a local copy of our simple html template — you'll enter your form html into here. the <form> element all forms start with a <form> element, like this: <form action="/my-handling-form-page" method="post"> </form> this element formally defines a form. it's a container element like a <section> or <footer> element, but speci...
...on and method attributes: the action attribute defines the location (url) where the form's collected data should be sent when it is submitted. the method attribute defines which http method to send the data with (usually get or post). note: we'll look at how those attributes work in our sending form data article later on. for now, add the above <form> element into your html <body>. the <label>, <input>, and <textarea> elements our contact form is not complex: the data entry portion contains three text fields, each with a corresponding <label>: the input field for the name is a single-line text field. the input field for the e-mail is an input of type email: a single-line text field that accepts only e-mail addresses. the input field for the message is a <textarea>; a multiline t...
...And 7 more matches

HTML text fundamentals - Learn web development
below, add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can always reset it using the reset button. if you get stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish. my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="butto...
..." class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish. ...
...step is to wrap each list item in a <li> (list item) element: <ul> <li>milk</li> <li>eggs</li> <li>bread</li> <li>hummus</li> </ul> active learning: marking up an unordered list try editing the live sample below to create your very own html unordered list. ...
...And 7 more matches

nsIPromptService
gname from javascript and as nsipromptservice::flagname from c++. button position flags on linux and mac, button 2 is on the left of the prompt, while buttons 1 and 0 are on the right. on windows and os/2, the buttons are centred in the order 0, 2, 1. constant value description button_pos_0 1 this is usually the button used to confirm the prompt. it typically has the label "ok", "yes", or "save". button_pos_1 256 this is the button used to cancel the prompt. it typically has the label "cancel" or "no". it is equivalent to pressing the escape key (or cmd+. on the mac), or closing the window through the os controls. button_pos_2 65536 this button can be used to give the user a choice of options, but still allowing the user to cancel the ...
..._pos_1 256 this is the button used to cancel the prompt. it typically has the label "cancel" or "no". it is equivalent to pressing the escape key (or cmd+. on the mac), or closing the window through the os controls. button_pos_2 65536 this button can be used to give the user a choice of options, but still allowing the user to cancel the prompt. for instance, it might have the label "don't save". button title flags these flags are used along with button position flags to set the labels of buttons in the prompt. constant value description button_title_ok 1 these flags are used to select standard labels from the user's current locale. button_title_cancel 2 button_title_yes 3 button_title_no 4 butt...
... button default flags these flags are used to select which button is the default. ...
...And 7 more matches

ARIA: checkbox role - Accessibility
the checkbox role is used for checkable interactive controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology. <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">remember my preferences</label> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria. ...
...similarly, an element with role="checkbox" can expose three states through the aria-checked attribute: true, false, or mixed. ...
...similarly, an element with role="checkbox" can expose three states through the aria-checked attribute: true, false, or mixed. ...
...And 7 more matches

<input type="checkbox"> - HTML: Hypertext Markup Language
ributes checked, indeterminate and value methods select() value a domstring representing the value of the checkbox. this is never seen on the client-side, but on the server this is the value given to the data submitted with the checkbox's name. take the following example: <form> <div> <input type="checkbox" id="subscribenews" name="subscribe" value="newsletter"> <label for="subscribenews">subscribe to newsletter?</label> </div> <div> <button type="submit">subscribe</button> </div> </form> in this example, we've got a name of subscribe, and a value of newsletter. when the form is submitted, the data name/value pair will be subscribe=newsletter. if the value attribute was omitted, the default value for the checkbox is on, so the submitted data in th...
...h them all separately, as shown above. however, if they're all related, things are not quite so simple. for example, in the following demo we include multiple checkboxes to allow the user to select their interests (see the full version in the examples section). <fieldset> <legend>choose your interests</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding"> <label for="coding">coding</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">music</label> </div> </fieldset> in this example you will see that we've given each checkbox the same name. if both checkboxes are checked and then the form is submitted, you'll get a string of name/value pairs submitted like this: interest=coding&interest=...
... captured. for one technique used with php, see handle multiple checkboxes with a single serverside variable, for example. checking boxes by default to make a checkbox checked by default, you simply give it the checked attribute. see the below example: <fieldset> <legend>choose your interests</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding" checked> <label for="coding">coding</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">music</label> </div> </fieldset> providing a bigger hit area for your checkboxes in the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated <label> element as well as on the checkbox itself. this is a really us...
...And 7 more matches

<input type="url"> - HTML: Hypertext Markup Language
ional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with ...
...neral rule, you should avoid using them unless it can't be helped. attribute description autocorrect a string indicating whether or not autocorrect is on or off. safari only. mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. firefox for android only. autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. permitted values are: on enable automatic correction of typos, as well as processing of text substitutions if any are configured. off disable automa...
...rrection of typos, as well as processing of text substitutions if any are configured. off disable automatic correction and text substitutions. mozactionhint a mozilla extension, supported by firefox for android, which provides a hint as to what sort of action will be taken if the user presses the enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. using url inputs when you cr...
...And 7 more matches

dev/panel - Archive of obsolete content
that constructor you need to supply values for various properties . you can set the constructor up manually if you like, or you can use the add-on sdk core/heritage module to simplify the mechanics of inheriting from panel. ...
... mandatory icon string the icon to display in the toolbox toolbar, specified as a resource:// url pointing t...
...ent here } }); alternatively, you can use the extend function: const { extend } = require("sdk/core/heritage"); function mypanel() {}; mypanel.prototype = extend(panel.prototype, { label: "my panel", tooltip: "...", .... }); in the constructor definition there are a number of mandatory and optional parameters for you to supply. name type description label string the string to display in the toolbox toolbar. mandatory icon string the icon to display in the toolbox toolbar, specified as a resource:// url pointing to an icon file, typically in your add-on's "data" directory. you can use the notation "./my-icon.png" as an alias for the url pointing to "data/my-icon.png". mandatory url string ...
...And 6 more matches

ui/frame - Archive of obsolete content
in this way you can customize the frame for each browser window. to do this, you call postmessage() not on the frame itself but on the source attribute of the object passed into an...
...in this way you can customize the frame for each browser window. to do this, you call postmessage() not on the frame itself but on the source attribute of the object passed into an event listener. for targetorigin, you can use the o...
... attach, load and ready, also provide access to source and origin. to receive such messages in the frame script, listen for the window's message event: window.addeventlistener("message", handlepong, false); sending json in all cases, you can send a string as a message or a json object. ...
...And 6 more matches

PopupEvents - Archive of obsolete content
icking on a link would display only those items pertaining to links. within the listener for the popupshowing event, you can append to or modify the menu as needed before it is displayed. for examples of the use of the popupshowing event when used with context menus, see hiding and showing menu items based on context. however, this technique can be applied to any type of popup. in this example, a label within a panel is initialized with the current time. <panel id="time-panel" onpopupshowing="this.lastchild.value = (new date()).tolocaleformat('%t')"> <label value="time:"/> <label id="time"/> </panel> <toolbarbutton label="show time" popup="time-panel"/> you can prevent a menu or popup from appearing by calling the preventdefault method of the event from within a popupshowing listener. th...
... <label id="time"/> </panel> <toolbarbutton label="show time" popup="time-panel"/> you can prevent a menu or popup from appearing by calling the preventdefault method of the event from within a popupshowing listener. the default operation of the popupshowing event is to continue showing the popup. the preventdefault method will stop this from happening and the popup will not be opened. <menu label="edit"> <menupopup onpopupshowing="if (gdisallowed) event.preventdefault();"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> in this example, a global variable gdisallowed is checked and the preventdefault method is called. if you want to prevent a context menu from opening it is better to call preventdefault with a handler for the contextmenu event instead, t...
...dler for the contextmenu event instead, to avoid the extra steps necessary to fire the popupshowing event if it isn't needed. when using nested submenus, make sure to check in the popupshowing event that the event corresponds to the right popup. this is because the popup events bubble so the parent menu will receieve a popupshowing event whenever it opens, or any submenus open. for example: <menu label="file"> <menupopup onpopupshowing="if (event.target == this) adjustfilemenu(this);"> <menu label="open"> <menupopup> <menuitem label="file..."/> <menuitem label="page"/> </menupopup> </menu> </menupopup> </menu> the target of the event is examined to ensure that the event is for the desired menupopup. otherwise, the adjustfilemenu function would be called ...
...And 6 more matches

Tooltips - Archive of obsolete content
tooltips a tooltip is used to provide descriptive help to the user about the control that the mouse is over. for instance, moving the mouse over top of a toolbar button and waiting for a second can display a small popup label containing text describing the button's function. when the mouse is moved again, the tooltip disappears. this is a useful means of providing additional details about a user interface without cluttering up the main interface. note that tooltips can only be activated using the mouse, so they should never contain important information that isn't available elsewhere. the tooltiptext attribute in most cases, the tooltip will display only a single label. for this, the tooltiptext attribute may be used, which is valid for all xul elements. the value of this attribute ...
...that tooltips can only be activated using the mouse, so they should never contain important information that isn't available elsewhere. the tooltiptext attribute in most cases, the tooltip will display only a single label. for this, the tooltiptext attribute may be used, which is valid for all xul elements. the value of this attribute should be the text to appear in the tooltip. <toolbarbutton label="back" tooltiptext="go back one page"/> in this example, a back button on a toolbar is given additional text to appear on a tooltip. this could also be useful if the toolbar is configured such that labels do not appear. if an element does not have a tooltiptext attribute, yet a parent element does, the parent tooltip will apply. for example, in the following, a toolbar has a tooltip set for it...
...e, a back button on a toolbar is given additional text to appear on a tooltip. this could also be useful if the toolbar is configured such that labels do not appear. if an element does not have a tooltiptext attribute, yet a parent element does, the parent tooltip will apply. for example, in the following, a toolbar has a tooltip set for it. <toolbar tooltiptext="file buttons"> <toolbarbutton label="open" tooltiptext="open a file"/> <toolbarbutton label="close"/> </toolbar> the 'open' button has a tooltiptext attribute so will have a tooltip of its own. however, the close button does not have a tooltip associated with it, yet the parent toolbar does. the result is that the toolbar's tooltip will apply when the mouse is moved over the close button, as well as when the mouse is over an em...
...And 6 more matches

Actions - Archive of obsolete content
ment. let's look at a simple example first. <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template> </vbox> in this example, we omit the <xul:rule> element around the <xul:action> as it is optional when we want to generate content unconditionally. instead, the action element is placed directly inside the <xul:template> element after the query is defined. this action contains only one element, but you can put as many or as few elements as you need. i...
...ariable, ?relateditem. you could think of this as changing the uri attribute to the id attribute, and replacing the variable. since the first result has a value of 'http://www.xulplanet.com/rdf/b' for the ?relateditem variable, the id will be set to this value. then, the remaining attributes on the element are examined and any variables are replaced in place. that is, the text ?relateditem in the label attribute will be replaced with the string 'http://www.xulplanet.com/rdf/b' for the first result. in the image, you can see that the label for the first button does indeed have this value. processing is now complete for the first result, so the builder moves on to the next result. for result b, the builder would have generated the following content: <button id="http://www.xulplanet.com/rdf/b" lab...
... the dom tree will look like the following: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template> <button id="http://www.xulplanet.com/rdf/b" label="http://www.xulplanet.com/rdf/b"/> <button id="http://www.xulplanet.com/rdf/c" label="http://www.xulplanet.com/rdf/c"/> <button id="http://www.xulplanet.com/rdf/d" label="http://www.xulplanet.com/rdf/d"/> </vbox> since the template tag is hidden, the effect will be like in the image, three button...
...And 6 more matches

Special Condition Tests - Archive of obsolete content
ement, the one with the datasources attribute on it. for inner iterations, it will be the element with the uri attribute from the previous iteration. here is a previous example, rewritten to use the parent matching syntax: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <rule parent="vbox"> <action> <groupbox uri="?"> <caption label="?name"/> </groupbox> </action> </rule> <rule> <action> <label uri="?" value="?name"/> </action> </rule> </template> </vbox> previously, an assign element was used to assign the tagname of the result to a variable, which was then compared in a rule condition. the code above accomplishes the same effect except that it using the parent matching mecha...
...f parent matching for rdf sources, you can use the same technique. to do this kind of matching, you again place a parent attribute on the rule, set to the tag to match. for instance, we might use the following: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule parent="vbox"> <groupbox uri="rdf:*"> <caption label="rdf:http://purl.org/dc/elements/1.1/title"/> </groupbox> </rule> <rule> <label uri="rdf:*" value="rdf:http://www.xulplanet.com/rdf/address"/> </rule> </template> </vbox> on the first pass, the container where generated content would be inserted is a <vbox>, so the first rule will match and a captioned <groupbox> will be created. on the next pass, the parent container w...
... </template> </vbox> on the first pass, the container where generated content would be inserted is a <vbox>, so the first rule will match and a captioned <groupbox> will be created. on the next pass, the parent container will be the element with the uri attribute from the previous pass, in this case, the <groupbox> the first rule will not match in this case, but the second rule will match and a label will be created. the result can be seen if you try the example. here is the same example using the extended template syntax: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <query> <content uri="?start"/> <member container="?start" child="?item"/> </query> <rule parent="vbox"> <binding subject="?i...
...And 6 more matches

Accesskey display rules - Archive of obsolete content
each controls of xul can have an accesskey which is specified by accesskey attribute or accesskey property (see accesskey attribute document for the detail). xul elements display their accesskeys in their label automatically if it's necessary. this document describes the rules of generating a label text. xul elements don't display any accesskeys on mac xul elements don't display any accesskeys on mac. because macos x doesn't have the conception of accesskey function on its native widgets/applications. ...
...les of generating a label text. xul elements don't display any accesskeys on mac xul elements don't display any accesskeys on mac. because macos x doesn't have the conception of accesskey function on its native widgets/applications. basic accesskey display rules on non-mac platforms, a character which is same as its accesskey is underlined. e.g., when an accesskey of "file" is 'f', the generated label will be "file". if a label has two or more characters which are same as its accesskey, the first character of them will be underlined. if a label doesn't have the character, xul elements append the accesskey character with parentheses. e.g., when an accesskey of "open" is 'a', the generated label will be "open (a)". ...
... this document calls the appended text "accesskey text". ...
...And 6 more matches

Adding Buttons - Archive of obsolete content
eresting yet. in this section, we will add two buttons, a find button and a cancel button. we will also learn a simple way to position them on the window. like html, xul has a number of tags that can be used to create user interface elements. the most basic of these is the button tag. this element is used to create simple buttons. ...
...l button. we will also learn a simple way to position them on the window. like html, xul has a number of tags that can be used to create user interface elements. the most basic of these is the button tag. this element is used to create simple buttons. the button element has two main properties associated with it, a label and an image. you need one or the other or both. thus, a button can have a label only, an image only or both a label and an image. ...
...you'll see this attribute on all elements. ...
...And 6 more matches

More Tree Features - Archive of obsolete content
l triangle or plus sign to appear before the cells in that column to indicate the cells that can be expanded. in addition, child rows are indented. note also that the user cannot hide the primary column using the drop down to the right of the columns. ...
...te the cells that can be expanded. in addition, child rows are indented. note also that the user cannot hide the primary column using the drop down to the right of the columns. ...
...op down to the right of the columns. ...
...And 6 more matches

The Box Model - Archive of obsolete content
, you can use the orient attribute to control the orientation of the box. you can set this attribute to the value horizontal to create a horizontal box and vertical to create a vertical box. thus, the two lines below are equivalent: <vbox></vbox> <box orient="vertical"></box> the following example shows how to place three buttons vertically. example 1 : source view <vbox> <button id="yes" label="yes"/> <button id="no" label="no"/> <button id="maybe" label="maybe"/> </vbox> the three buttons here are oriented vertically as was indicated by the box. to change the buttons so that they are oriented horizontally, all you need to do is change the vbox element to a hbox element. login prompt example you can add as many elements as you want inside a box, including other boxes. in the case ...
...ther boxes. in the case of a horizontal box, each additional element will be placed to the right of the previous one. the elements will not wrap at all so the more elements you add, the wider the window will be. similarly, each element added to a vertical box will be placed underneath the previous one. the example below shows a simple login prompt: example 2 : source view <vbox> <hbox> <label control="login" value="login:"/> <textbox id="login"/> </hbox> <hbox> <label control="pass" value="password:"/> <textbox id="pass"/> </hbox> <button id="ok" label="ok"/> <button id="cancel" label="cancel"/> </vbox> here four elements have been oriented vertically, two inner hbox tags and two button elements. notice that only the elements that are direct descendants of the b...
...> <textbox id="login"/> </hbox> <hbox> <label control="pass" value="password:"/> <textbox id="pass"/> </hbox> <button id="ok" label="ok"/> <button id="cancel" label="cancel"/> </vbox> here four elements have been oriented vertically, two inner hbox tags and two button elements. notice that only the elements that are direct descendants of the box are oriented vertically. the labels and textboxes are inside the inner hbox elements, so they are oriented according to those boxes, which are horizontal. you can see in the image that each label and textbox is oriented horizontally. aligning textboxes if you look closely at the image of the login dialog, you can see that the two textboxes are not aligned with each other horizontally. it would probably be better if they were. in o...
...And 6 more matches

menuitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single choice in a menupopup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
...a menupopup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
...opup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
...And 6 more matches

panel - Archive of obsolete content
is called. warning: for firefox versions between 3.6 and 4.0, placing an iframe, browser or editor inside a panel is not supported. some features may work, but only on some platforms. for those versions of firefox, it is best to avoid child frames in a panel, if possible. this limitation was resolved as of firefox 4.0. attributes backdrag, close, consumeoutsideclicks, fade, flip, ignorekeys, label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label. <panel id="thepanel"> <hbox align...
..., top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label. <panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="thepanel"/> attributes backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its background area. close type: boolean if the panel has a titleb...
...d the arrow slides towards the middle of the panel such that it is still aligned with the anchor. without flip="slide", the panel would have had its width truncated and the panel would not extend to the left of the anchor. ignorekeys type: boolean if false, the default value, the escape key may be used to close the panel. if true, the escape key cannot be used to close the panel. label type: string for panels with titlebars, the label on the titlebar. left type: integer overrides the horizontal position of the popup specified by the showpopup method. level type: one of the values below specifies whether the panel appears on top of all windows, or just on top of the window the panel is in. if this attribute is not set, the popup window level depends on the...
...And 6 more matches

Basic native form controls - Learn web development
ll browsers since the early days of the web. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand in detail the original set of native form widgets available in browsers for collecting data, and how to implement them using html. you've already met some form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>. this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text. some of the attributes that are common to all form controls. note: the features discussed in this article are supported in all browsers, which is not the case for all form controls. we cover newer form controls added in html5 in the next two ...
... hidden, the user can not see nor intentionally edit the value, it will never receive focus, and a screen reader will not notice it either. <input type="hidden" id="timestamp" name="timestamp" value="1286705410"> if you create such an element, it's required to set its name and value attributes. the value can be dynamically set via javascript. the hidden input type should not have an associated label. other text input types, like search, url, and tel, were added with html5. those will be covered in the next tutorial, html5 input types. checkable items: checkboxes and radio buttons checkable items are controls whose state you can change by clicking on them or their associated labels. there are two kinds of checkable item: the check box and the radio button. both use the checked attribute to...
...t even their name. if they are checked but have no value, the name is sent with a value of on. note: you can find the examples from this section on github as checkable-items.html (see it live also). for maximum usability/accessibility, you are advised to surround each list of related items in a <fieldset>, with a <legend> providing an overall description of the list. each individual pair of <label>/<input> elements should be contained in its own list item (or similar). the associated <label> is generally placed immediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the <legend>. see the examples linked above for structural examples. check box a check box is created using the <input> element with a t...
...And 6 more matches

Example - Learn web development
this is the example code for the article your first html form. ...
... this is the example code for the article your first html form. ...
... this is the example code for the article your first html form. ...
...And 6 more matches

Waterfall - Firefox Developer Tools
time. recorded operations, called markers, are shown as horizontal bars, laid out in a waterfall to reflect the serial nature of the browser's execution. when a marker is selected you'll see more information about it in a sidebar on the right. this includes the marker's duration and some more information that's specific to the marker type. markers the markers for operations are color-coded and labeled. the following operations are recorded: name and description color detailed information dom event javascript code that's executed in response to a dom event. event type for example, "click" or "message". event phase for example, "target" or "capture". javascript functions executed in th...
...lowing operations are recorded: name and description color detailed information dom event javascript code that's executed in response to a dom event. event type for example, "click" or "message". event phase for example, "target" or "capture". javascript functions executed in the page are labeled with the reason the function was called: script tag setinterval settimeout requestanimationframe promise callback promise init worker javascript uri event handler stack call stack, with links to functions. parse html time spent parsing the page's html. stack call stack,...
...animations styleattribute styleattribute_animations force forcedescendants layout calculating the position and size of page elements. this operation is sometimes called "reflow". paint drawing pixels to the screen. garbage collection garbage collection event. non-incremental gc events are labeled "(non-incremental)". reason a string indicating the reason gc was performed. non-incremental reason if the gc event was non-incremental, the string indicates the reason non-incremental gc was performed. new in firefox 46: if the gc event was caused by allocation pressure, a link appears, labeled "show allocation triggers". click the link to se...
...And 6 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
c.start(); osc.stop(audioctx.currenttime + 1); } controlling amplitude this is great, but wouldn't it be nice if we had an amplitude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and release. ...
...dioctx.currenttime + 1); } controlling amplitude this is great, but wouldn't it be nice if we had an amplitude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and release. ...
...ad an amplitude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and release. ...
...And 6 more matches

ARIA: Region role - Accessibility
the region landmark role is used to identify an area in the document that the author has identified as significant. it is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate. <div role="region" aria-label="example"> <!-- region content --> </div> description the region role is an aria landmark role. landmark roles provide a way to identify the organization and structure of a web page. by classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically. screen readers use landmark roles to provide keyboard navigation to important sections of a page. the region role should be reserved for sections of content sufficiently important that users ...
...portant that users will likely want to navigate to the section easily and to have it listed in a summary of the page. a region role is a more generic term, and should only be used if the section needing to be identified is not accurately described by one of the other landmark roles, such as banner, main, contentinfo, complementary, or navigation. every element with a region role should include a label that describes the purpose of the content in the region, preferably with an aria-labelledby referencing a visible header. if no visible appropriate header is present, aria-label should be used.. region landmark roles content should make sense if separated from the main content of the document. using the <section> element will automatically communicate a section has a role of region if it is giv...
... region landmark roles content should make sense if separated from the main content of the document. using the <section> element will automatically communicate a section has a role of region if it is given an accessible name. developers should always prefer using the correct semantic html element, in this case <section>, over using aria. ...
...And 6 more matches

ARIA: img role - Accessibility
the aria img role can be used to identify multiple elements inside page content that should be considered as a single image. these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner. <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> description any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img". you shouldn't count on the alt text of individual elements images for conveying context to assistive technologies; most screenreaders will consider the element with role="img" set on it to be to be like a bla...
...mg". you shouldn't count on the alt text of individual elements images for conveying context to assistive technologies; most screenreaders will consider the element with role="img" set on it to be to be like a black box, and not access the individual elements inside it. ...
...r the element with role="img" set on it to be to be like a black box, and not access the individual elements inside it. therefore, provide a comprehensive overall descriptive alt text for image, either in the surrounding text, or by using an aria-label attribute, with optional alt attributes for search engines or sighted users to be written to the page should an image fail: <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> if you wish to add a caption or label to your image that is visible on the page, you can do using: aria-labelledby when the text is a concise label. aria-describedby when the text is a longer description. for example: <div role="img" aria-labelledby="image-1"> ... <p id="image-1">te...
...And 6 more matches

HTML attribute: readonly - HTML: Hypertext Markup Language
red attribute is not permitted on inputs with the readonly attribute specified. usability browsers display the readonly attribute... constraint validation if the element is readonly, then the element's value can not be updated by the user, and does not participate in constraint validation. ...
...s not permitted on inputs with the readonly attribute specified. usability browsers display the readonly attribute... constraint validation if the element is readonly, then the element's value can not be updated by the user, and does not participate in constraint validation. ...
...readonly attribute... constraint validation if the element is readonly, then the element's value can not be updated by the user, and does not participate in constraint validation. ...
...And 6 more matches

XUL user interfaces - Archive of obsolete content
doc7.xul. ...
...ersion="1.0"?> <?xml-stylesheet type="text/css" href="style7.css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="css getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </columns> <rows> <row> <label class="text-prompt" value="date:" accesskey="d" control="date-text"/> <textbox id="date-text" type="timed" timeout="750" oncommand="refresh();"/> </row> <row> <label value="day:"/> ...
... <columns> <column/> <column/> </columns> <rows> <row> <label class="text-prompt" value="date:" accesskey="d" control="date-text"/> <textbox id="date-text" type="timed" timeout="750" oncommand="refresh();"/> </row> <row> <label value="day:"/> <hbox id="day-box"> <label class="day" value="sunday" disabled="true"/> <label class="day" value="monday" disabled="true"/> <label class="day" value="tuesday" disabled="true"/> <label class="day" value="wednesday" disabled="true"/> <label class="day" value="thursday" disabled="true"/> <label class="day" value="friday" disabled="true"/> <label class="da...
...And 5 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
lockpref("mail.identity.id1.useremail", mail); lockpref("mail.server.server2.name", mail); lockpref("mail.identity.id1.fullname", cn); //debug with popup error messages doesn't work anymore :-( !! var env_mozdebug= getenv("mozilla_debug"); if (env_mozdebug) {dis...
...es doesn't work anymore :-( !! var env_mozdebug= getenv("mozilla_debug"); if (env_mozdebug) {displayerror("no error, just a debug, cn =" + cn + " and mail = " + mail); } } } // 4) call ldap servers to get ldap attributes (mail & cn), this will finally call processldapvalues, "3)" just above. getldapattributes("ldap2.int-evry.fr","ou=people,dc=int-evry,dc=fr","uid=" + env_user,"uid,cn,mail,labeleduri"); // close the try, and call the catch() } catch(e) { displayerror("lockedpref", e); } thunderbird.cfg (version 2 with ad) using thunderbird 9.0.1 and try to use a active directory (windows server 2008) as ldap-source did not work with version 1. here's my own version. //note: for accessing the active directory of windows server later than 2000 //it is necessary to allow anonymous re...
...or autoconfig (pref extension!) but unfortunately not for ldap calls :-( (cf. moz_ldap_xpcom=1). it is not vital in firefox as it is for us in thunderbird (need to get the cn and email address to set email account, which are not available by default in the environment variables). however i could be useful to get ldap values for firefox extra config, for example to set the default home page to the labeleduri ldap attribute of the user. firefox 22 omni.jar archive file became omni.ja since http://blog.ffextensionguru.com/2011/11/16/omni-jar-to-become-omni-ja/ [root@localhost firefox]# unzip -l /usr/lib/firefox/browser/omni.ja | grep defaults/pr warning [/usr/lib/firefox/browser/omni.ja]: 3598815 extra bytes at beginning or within zipfile (attempting to process anyway) error [/usr/lib/firef...
...And 5 more matches

MenuButtons - Archive of obsolete content
menu buttons menus may be attached to buttons in several ways. both the button and the toolbar button elements support two special types used for creating menu buttons. a button or toolbarbutton with a type attribute set to 'menu' creates a button that will open a menu when pressed. an arrow appears on the button next to the label or image indicating to the user that a menu is present. a button or toolbarbutton with a type attribute set to 'menu-button' creates a button that can be pressed normally. however a segment of the button displays an arrow which, when pressed, opens a menu. in either case, a menupopup element should be placed as a direct child of the button. the 'menu' button the 'menu' type of button is used when pressing the button alone should just open the menu and...
... set the type attribute of the button to 'menu'. for instance, in the following example, pressing the 'view' button will open a menu which allows the user to select from a set of radio menuitems. presumably, when one is selected, the application view would be changed accordingly. when using the keyboard, pressing the down key will open the menu while the button is focused. <button type="menu" label="view"> <menupopup> <menuitem label="icons" type="radio" name="view"/> <menuitem label="list" type="radio" name="view"/> <menuitem label="details" type="radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected. if you do want this indication, you should use a menulist instead. the same technique can be u...
...> </button> note that when the menu is closed, the button doesn't indicate which view is selected. if you do want this indication, you should use a menulist instead. the same technique can be used for toolbarbuttons as well as buttons. in the example below a toolbarbutton with an image has a menu associated with it. ...
...And 5 more matches

MenuModification - Archive of obsolete content
the appenditem method may be used to append a new item to the end of the popup associated with a menu. this method will create a new menuitem element and insert it into the popup. this method may only be used with the menu element. <script> function addtomenu() { var menu = document.getelementbyid("edit-menu"); menu.appenditem("insert", "insert"); } </script> <menu id="edit-menu"/> <button label="add" oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed. this function appends a new item to the menu's popup with the label insert. the first argument to appenditem is the label of the menuitem, and the second argument is a value to associate with the item. this value be set as the menuitem's value attribute and can be used for whatever purp...
...ertitemat method is used to insert a new 'delete' item at the beginning of the menu's popup. the first argument is the index where the new item should be inserted. in this case, 0 is supplied as the index, which means before the first item. indicies are counted starting at 0, so to insert an item before the fourth item pass 3 as the argument. the second and third arguments to insertitemat are the label and value for the new item, as with appenditem. both the appenditem and insertitemat methods return the new menuitem, so you can further modify it, for instance to add an access key, as in the following example: var item = menu.appenditem("insert", "insert"); item.accesskey = "i"; appending submenus there is no built-in method to append submenus to a menu. to do this, we instead need to use ...
... a menu. to do this, we instead need to use the inherited node modification methods available for all elements. first, we need to retrieve the menupopup for the menu, and then use the appendchild method to append a new item. ...
...And 5 more matches

Using Recursive Templates - Archive of obsolete content
on name="laura secord"/> </group> </people> we could display this data in a flat list by using the right query: <query expr="group/person/"> or, we could display one level for the two groups, and use another level for each person. <groupbox type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <action> <vbox uri="?" class="indent"> <label value="?name"/> </vbox> </action> </template> </groupbox> in this simplified example, the xpath expression just gets the list of child elements of the reference node. for the outermost iteration, a vbox is created with a child label. since the initial reference node is the root of the xml source document, the results are two elements, one for each group element. however, a further st...
...body is again generated for each result, but instead of being inserted inside the outermost groupbox, this new content is inserted inside the content generated from the previous iteration. the content is always inserted directly inside the element with the uri attribute. the result is output like the following: <groupbox> ... ...
...eing inserted inside the outermost groupbox, this new content is inserted inside the content generated from the previous iteration. the content is always inserted directly inside the element with the uri attribute. the result is output like the following: <groupbox> ... ...
...And 5 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
addsession method. ...
...chsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultva...
...ultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. alwaysopenpopup obsolete since gecko 1.9.1 type: boolean note: applies to: thunderbird and seamonkeyif true, the autocomplete popup will be displayed even when there are no matches. if false, the default value, the popup will be hidden. this attribute is obsolete as of gecko 1.9.1; to control the display of the popup, use the minresultsforpopup attribute...
...And 5 more matches

Anonymous Content - Archive of obsolete content
xul elements and aren't valid in xbl. this namespace was declared on the bindings tag. if you don't use the namespace on xul elements, mozilla will assume that the elements are xbl, not understand them, and your elements won't work correctly. filename input field example another example, this time for a field for entering a filename: <binding id="fileentry"> <content> <textbox/> <button label="browse..."/> </content> </binding> attaching this binding to an element will cause it to contain a field for entering text, followed by a browse button. this inner content is created anonymously and cannot be seen using the dom. override the bound element the anonymous content is created automatically whenever a binding is attached to an element. if you place child elements inside the xul, th...
... created anonymously and cannot be seen using the dom. override the bound element the anonymous content is created automatically whenever a binding is attached to an element. if you place child elements inside the xul, they will override the elements provided by the binding. for example, take this xul fragment, assuming it is bound to the scrollbar xbl earlier: <scrollbar/> <scrollbar> <button label="overridden"/> </scrollbar> the first scroll bar, because it has no content of its own, will have its content generated from a binding definition declared in an xbl file. the second scroll bar has its own content so it will use that instead of the xbl content, resulting in something that isn't much of a scroll bar at all. note that the built-in elements such as scroll bars get their xbl from the...
...th the xbl content and the content provided by the xul file to be displayed. you can do this by using the children element. the children added in the xul are added in place of the children element. this is handy when creating custom menu widgets. for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it. the menup...
...And 5 more matches

Grids - Archive of obsolete content
ing the grid element. it has some similarities to the html table tag. the grid does not display anything itself; it is used only to position elements in a tabular form with rows and columns. a grid contains elements that are aligned in rows just like tables. inside a grid, you declare two things, the columns that are used and the rows that are used. just like html tables, you put content such as labels and buttons inside the rows. however, the grid allows either row or column based organization so you may put content in either rows or in columns. it is most common to use rows, as with a table. however, you can still use columns to specify the size and appearance of the columns in a grid. alternatively, you can put content inside the columns, and use the rows to specify the appearance. we'll lo...
...rly, the columns are declared with the columns element, which should be placed as a child element of the grid. inside that go individual column elements, one for each column you want in the grid. this should be easier to understand with an example. example 1 : source view <grid flex="1"> <columns> <column flex="2"/> <column flex="1"/> </columns> <rows> <row> <button label="rabbit"/> <button label="elephant"/> </row> <row> <button label="koala"/> <button label="gorilla"/> </row> </rows> </grid> two rows and two columns have been added to a grid. each column is declared with the column tag. each column has been given a flex attribute. each row contains two elements, both buttons. the first element in each row element is placed in t...
...se any element in place of the button element of course. if you wanted one particular cell to contain multiple elements, you can use a nested hbox or other box element. an hbox is a single element but you can put as many elements that you want inside it. ...
...And 5 more matches

Input Controls - Archive of obsolete content
lue password to create a textbox that hides what it types. this is usually used for password entry fields. maxlength the maximum number of characters that the textbox allows. note that while in html, several different kinds of fields can be created with the input element, in xul there are separate elements for each type. the following example shows some textboxes: example 1 : source view <label control="some-text" value="enter some text"/> <textbox id="some-text"/> <label control="some-password" value="enter a password"/> <textbox id="some-password" type="password" maxlength="8"/> multiline textbox the textbox examples above will create text inputs that can only be used for entering one line of text. html also has a textarea element for creating a larger text entry area. in xul, you ...
...mple 2 : source view <textbox multiline="true" value="this is some text that could wrap onto multiple lines."/> like the html textarea, you can use the rows and cols attributes to set the size. this should be set to the number of rows and columns of characters to display. our find files example let's add a search entry field to the find file dialog. we'll use the textbox element. <label value="search for:" control="find-text"/> <textbox id="find-text"/> <button id="find-button" label="find"/> add these lines before the buttons we created in the last section. if you open this window, you will see something much like that shown in the image. notice that the label and the text input field have now appeared in the window. the textbox is fully functional and you can type into i...
... checkboxes and radio buttons two additional elements are used for creating check boxes and radio buttons. they are variations of buttons. ...
...And 5 more matches

Manipulating Lists - Archive of obsolete content
d manipulate its items. although listboxes may be manipulated using the standard dom functions as well, it is recommended that the specialized listbox functions be used instead when possible. these functions are bit simpler and will do the right thing. the appenditem() function is used to append a new item to the end a list. similar to the dom appendchild() function except that it takes a string label, and you do not have to worry about where to add it in the list structure. here is an example: example 1 : source view <script> function additem(){ document.getelementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'. the...
...out where to add it in the list structure. here is an example: example 1 : source view <script> function additem(){ document.getelementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'. the two arguments correspond to the label attribute and the value attribute on the listitem element. the value is used only as an extra optional value associated with an item which you might wish to use in a script. similarly, there is also an insertitemat() and a removeitemat() function which inserts a new item and removes an existing item respectively. the syntax is as follows: list.insertitemat(3, "thursday", "thu"); list.removeitem...
...e selected element. for instance the selecteditem of a menulist will be the menuitem that is selected. if no item is selected, selectedindex will return -1, while selecteditem will return null. getting the selected item these two properties are commonly inspected during a select event, as in the following example: example 2 : source view <listbox id="thelist" onselect="alert(this.selecteditem.label);"> <listitem label="short"/> <listitem label="medium"/> <listitem label="tall"/> </listbox> the select event is fired for a listbox when an item in the list is selected. the select handler here displays an alert containing the label of the selected item in the list. since the select event fired we can assume that an item is selected. in other cases, you may wish to check to ensure that s...
...And 5 more matches

menuseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
... [ examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
...examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
...And 5 more matches

radio - Archive of obsolete content
e [ examples | attributes | properties | methods | related ] an element that can be turned on and off. radio buttons are almost always listed together in groups. only one radio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. ...
...utes | properties | methods | related ] an element that can be turned on and off. radio buttons are almost always listed together in groups. only one radio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. ...
...ame radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. more information is available in the xul tutorial. ...
...And 5 more matches

toolbaritem - Archive of obsolete content
oolbarbutton). if you don't need the thing you're placing in the toolbar to be customized then it doesn't need to be in a toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...e placing in the toolbar to be customized then it doesn't need to be in a toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...customized then it doesn't need to be in a toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...And 5 more matches

XForms Group Element - Archive of obsolete content
a group. all content elements (e.g. core form controls, groups, switches, repeats and host language content) within a non-relevant group are handled as non-relevant. ...
...ments (e.g. core form controls, groups, switches, repeats and host language content) within a non-relevant group are handled as non-relevant. ...
...ups, switches, repeats and host language content) within a non-relevant group are handled as non-relevant. if a group is non-relevant, then the rendering approach used to signify non-relevance is applied to the entire content of the group. ...
...And 5 more matches

XForms Repeat Element - Archive of obsolete content
ert (see the spec), delete (see the spec) and setindex (see the spec) elements. ...
...), delete (see the spec) and setindex (see the spec) elements. ...
...e spec) elements. ...
...And 5 more matches

Introduction to CSS layout - Learn web development
ound-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 10px; border-radius: 5px; } the rendered output is as follows: relative positioning relative positioning allows you to offset an item from the position in normal flow it would have by default. this means you could achieve a task such as moving an icon down a bit so it lines up with a text label. to do this, we could add the following rule to add relative positioning: .positioned { position: relative; top: 30px; left: 30px; } here we give our middle paragraph a position value of relative — this doesn't do anything on its own, so we also add top and left properties. these serve to move the affected element down and to the right — this might seem like the opposite of what you w...
...ments that are not tables, a use which is sometimes described as "using css tables". the example below shows one such use; using css tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for flexbox or grid. let's look at an example. first, some simple markup that creates an html form. ...
...using css tables". the example below shows one such use; using css tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for flexbox or grid. let's look at an example. first, some simple markup that creates an html form. each input element has a label, and we've also included a caption inside a paragraph. each label/input pair is wrapped in a <div>, for layout purposes. ...
...And 5 more matches

Looping code - Learn web development
break statement will immediately exit the loop and make the browser move on to any code that follows it. ...
...op and make the browser move on to any code that follows it. ...
... if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = 'contact not found.'; } } }); hidden code 3 <!doctype html> <html> <head> <meta charset="utf-8"> <title>simple contact search example</title> <style> </style> </head> <body> <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> <script> const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.adde...
...And 5 more matches

DevTools API - Firefox Developer Tools
s triggered for. return value: undefined. properties the tooldefinition object can contain following properties. most of them are optional and can be used to customize the presense of the tool in the browser and the toolbox. id string, required. an unique identifier for the tool. it must be a valid id for an html element. url string, required. an url of the panel document. label string, optional. the tool's name. if undefined the icon should be specified. tooltip string, optional. the tooltip for the tool's tab. panellabel string, optional. an accessibility label for the panel. ordinal integer, optional. the position of the tool's tab within the toolbox. default: 99 visibilityswitch string, optional. a preference name that controls the visiblit...
...default: false inverticonforlighttheme boolean, optional. ...
...default: false inverticonforlighttheme boolean, optional. if true the colors of the icon will be inverted for the light theme. default: false key string, optional. ...
...And 5 more matches

Example and tutorial: Simple synth keyboard - Web APIs
the keyboard, we'll put some controls for configuring the layer. for now, we will have two controls: one to set the master volume and another to select what periodic waveform to use when generating notes. the volume control first we create the <div> to contain the settings bar, so it can be styled as needed. then we establish a box that will be presented on the left side of the bar and place a label and an <input> element of type "range". the range element will typically be presented as a slider control; we configure it to allow any value between 0.0 and 1.0, stepping by 0.01 each position. <div class="settingsbar"> <div class="left"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.5" list="volumes" name="volume"> <datalist id="volume...
...e "range". the range element will typically be presented as a slider control; we configure it to allow any value between 0.0 and 1.0, stepping by 0.01 each position. <div class="settingsbar"> <div class="left"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.5" list="volumes" name="volume"> <datalist id="volumes"> <option value="0.0" label="mute"> <option value="1.0" label="100%"> </datalist> </div> we specify a default value of 0.5, and we provide a <datalist> element which is connected to the range using the name attribute to find an option list whose id matches; in this case, the data set is named "volume". this lets us provide a set of common values and special strings which the browser may optionally choose to di...
...nnected to the range using the name attribute to find an option list whose id matches; in this case, the data set is named "volume". this lets us provide a set of common values and special strings which the browser may optionally choose to display in some fashion; we provide names for the values 0.0 ("mute") and 1.0 ("100%"). the waveform picker on the right side of the settings bar, we place a label and a <select> element named "waveform" whose options correspond to the available waveforms. <div class="right"> <span>current waveform: </span> <select name="waveform"> <option value="sine">sine</option> <option value="square" selected>square</option> <option value="sawtooth">sawtooth</option> <option value="triangle">triangle</option> <option value="cust...
...And 5 more matches

ARIA: figure role - Accessibility
the aria figure role can be used to identify a figure inside page content where appropriate semantics do not already exist. a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text. <div role="figure" aria-labelledby="caption"> <img src="image.png" alt="full alternative image description"> <p id="caption">figure 1: the caption</p> </div> in the above example, we have a figure that consists of two separate content items — an image and a caption. this is wrapped by a <div> element that identifies the content as a figure using role="figure". instead of using aria to create a figure, consider using the native, semantic html <figure> element. along with the <figcaption> elemen...
...o, audio, code snippets, or other content) can be identified as a figure using role="figure". there are no hard and fast rules about how you should write your figure content. you should make sure that it is accessible just like any other content. for example, make sure it is perceivable by users of assistive technology, navigable by keyboard as well as mouse, and so on. ...
... any other content. for example, make sure it is perceivable by users of assistive technology, navigable by keyboard as well as mouse, and so on. you can add a caption or label to your figure in a number of ways. you could add an id to an element containing content that describes the figure, and then reference that id inside an appropriate attribute on the figure to associate the figure with the label: <div role="figure" aria-labelledby="figure-1"> ... <p id="figure-1">text that describes the figure.</p> </div> use aria-labelledby when the text is a concise label. use aria-describedby when the text is a longer description. again, this can be done semantically, without aria, with html's <figure> and <figcaption> elements <figure> ... <figcaption>text that describes the figure.</...
...And 5 more matches

ARIA: form role - Accessibility
important: use an html <form> element to contain your form controls, rather than the aria form role, unless you have a very good reason. the html <form> element is sufficient to tell assistive technologies that there is a form. ...
...s appropriate (e.g. main or search). using the <form> element will automatically communicate a section of content as a form landmark, if it is provided an accessible name. developers should always prefer using the correct semantic html element over using aria. use the html <form> element if possible. the <form> element defines a form landmark when it has an accessible name (e.g. aria-labelledby, aria-label or title). make sure to have a unique label on each form in a document to help users understand the purpose of the form. this label should be visible to all users, not just assistive technology users. use the search landmark instead of the form landmark when the form is used for search functionality. use the role="form" to identify a region of the page; do not use it to identify...
...ctions no role specific keyboard interactions required javascript features onsubmit the onsubmit event handler handles the event raised when the form is submitted. anything that is not a <form> cannot be submitted, therefore you would have to use javascript to build an alternative data submission mechanism, for example with xmlhttprequest. ...
...And 5 more matches

ARIA: grid role - Accessibility
the grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be focused using keyboard input. ...
...k that box even if the focus is not on the checkbox. ctrl + a selects all cells. shift + → extends selection one cell to the right. shift + ← extends selection one cell to the left. shift + ↓ extends selection one cell down. shift + ↑ extends selection one cell up. ...
...ne cell to the left. shift + ↓ extends selection one cell down. shift + ↑ extends selection one cell up. ...
...And 5 more matches

ARIA: search role - Accessibility
andmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. the search role is added to the container element that encompasses the items and objects that, as a whole, combine to create search functionality. when a <form> is a search form, use the search role instead of form. if a document includes more than one search, each should have a unique label. ...
...ntainer element that encompasses the items and objects that, as a whole, combine to create search functionality. when a <form> is a search form, use the search role instead of form. if a document includes more than one search, each should have a unique label. while there is a input of type search, there is html element that defines a search landmark. examples <form id="search" role="search"> <label for="search-input">search this site</label> <input type="search" id="search-input" name="search" spellcheck="false"> <input value="submit" type="submit"> </form> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document. using too many landmark roles can create "noise" in screen readers, making it difficult to understand th...
...y concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document. using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page. best practices prefer html using the <form> element in conjunction with a declaration of role="search" will provide the largest amount of support. ...
...And 5 more matches

ARIA: button role - Accessibility
le code. description the button role identifies an element as a button to screen readers. a button is a widget used to perform actions such as submitting a form, opening a dialog, cancelling an action, or performing a command such as inserting a new record or displaying information. a common convention to inform users a button will launch a dialog is to append "…" (ellipsis) to the button's label, e.g., "save as…". in addition to the ordinary button widget, role="button" should be included when creating a toggle button or menu button using a non button element. a toggle button is a two-state button that can be either off (not pressed) or on (pressed). the aria-pressed attribute values of true or false identify a button as a toggle button. a menu button is a button that controls a menu ...
... aria-expanded="true" set, it is currently expanded; if the button has aria-expanded="undefined" set or the attribute is ommitted, it is not expandable. basic buttons buttons should always have an accessible name. for most buttons, this name will be the same as the text inside the button. in some cases, for example buttons represented by icons, the accessible name may be provided from the aria-label or aria-labelledby attributes. toggle buttons a toggle button typically has two states: pressed and not pressed. a third mixed state is available for toggle buttons that control other elements, such as other toggle buttons or checkboxes, which do not all share the same value. whether an element is a toggle button or not can be indicated with the aria-pressed attribute in addition to the button...
...ot used, or is set to the "undefined" state, the button is not a toggle button. if aria-pressed="false" is used the button is a toggle button that is currently not pressed. if aria-pressed="true" is used the button is a toggle button that is currently pressed. if aria-pressed="mixed" is used, the button is considered to be partially pressed. ...
...And 5 more matches

ARIA: textbox role - Accessibility
t it. the default is a single line input, in which return or enter submits the form; in this case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. ...
... html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. ...
... type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. ...
...And 5 more matches

Cognitive accessibility - Accessibility
to ensure the site is navigable and content is findable: include a <title> make sure to include a <title> for the document, as titles provide a quick and easy to reference description of the screen's main point. people with cognitive disabilities, limited short-term memory, and reading disabilities all benefit from being able to identify the purpose of content this way. heading and labels include clear and descriptive headings so users can easily find information and understand relationships between different content sections. descriptive labels help users identify specific components within the content. people who read slowly and people with limited short-term memory benefit when section titles make it possible to predict what each section contains. section headings ...
... keep navigation consistent throughout the site keep the navigation order consistent between pages. for example, if you have a navigation bar on multiple pages, make that navigation uniform across the site with the same links in the same location. this doesn't just apply to navigation: present all repeated components in the same relative order each time they appear. ...
... keep the navigation order consistent between pages. for example, if you have a navigation bar on multiple pages, make that navigation uniform across the site with the same links in the same location. this doesn't just apply to navigation: present all repeated components in the same relative order each time they appear. provide consistent labeling identical functions should have similar labels every time they are utilized. ...
...And 5 more matches

Accessibility documentation index - Accessibility
ntact form, for example — that you want to put some accessible error checking into. examples of common problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname. 10 basic form hints aria, accessibility, forms when implementing forms using traditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control. 11 multipart labels: using aria for labels with embedded fields inside them aria, accessibility, ben millard, firefox, guide, help, html, html 4, jaws, needscontent, aria-labelledby, label, solution, trouble shoot, troubleshoot the solution is in an aria attribute called aria-labelledby. its parameter is a stri...
...-activedescendant this article describes the aria-activedescendant property. 18 using the aria-describedby attribute aria, accessibility, attribute the aria-describedby attribute is used to indicate the ids of the elements that describe the object. it is used to establish a relationship between widgets or groups and text that described them. this is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need. 19 using the aria-hidden attribute aria, accessibility, attribute, codingscripting, html, javascript, needscontent, role(2), agent, alert, user, useragent this technique demonstrates how to use the aria-hidden attribute. the aria-hidden attribute can eithe...
...ttribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.this may include formats such as email addresses or telephone numbers. aria-invalid can also be used to indicate that a required field has not been filled in.the attribute should be programmatically set as a result of a validation process. 21 using the aria-label attribute aria, accessibility, codingscripting, html, needscontent, reference, référence(2), agent, aria-label, user, useragent the aria-label attribute is used to define a string that labels the current element. use it in cases where a text label is not visible on the screen. if there is visible text labeling the element, use aria-labelledby instead. 22 using the aria-labe...
...And 5 more matches

:checked - CSS: Cascading Style Sheets
the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. ...
...this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. ...
...it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. ...
...And 5 more matches

HTML attribute: multiple - HTML: Hypertext Markup Language
ption> from the list of options. <select multiple name="drawfs" id="drawfs"> <option>grumpy</option> <option>happy</option> <option>sleepy</option> <option>bashful</option> <option>sneezy</option> <option>dopey</option> <option>doc</option> </select> when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown. ...
...iple name="drawfs" id="drawfs"> <option>grumpy</option> <option>happy</option> <option>sleepy</option> <option>bashful</option> <option>sneezy</option> <option>dopey</option> <option>doc</option> </select> when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown. ...
...he required attribute is present, at least one email address is required. some browsers support the appearance of the list of options from the associated <datalist> for subsequent email addresses when multiple is present. others do not. ...
...And 5 more matches

break - JavaScript
the break statement terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax break [label]; label optional identifier associated with the label of the statement. if the statement is not a loop or switch, this is required. description the break statement includes an optional label that allows the program to break out of a labeled statement. the break statement needs to be nested within the referenced label. ...
...teractive-examples and send us a pull request. syntax break [label]; label optional identifier associated with the label of the statement. if the statement is not a loop or switch, this is required. description the break statement includes an optional label that allows the program to break out of a labeled statement. the break statement needs to be nested within the referenced label. the labeled statement can be any block statement; it does not have to be preceded by a loop statement. a break statement, with or without a following label, cannot be used within the body of a function that is itself nested within the current loop, switch, or label statement that the break statement is intended to break out of. examples break in while loop the following function has a break statement t...
...notice that inner_block is nested within outer_block. ...
...And 5 more matches

simple-prefs - Archive of obsolete content
attribute description type the type of preference, as defined in the "preference types" section below. name an identifier for the preference. this is used to access the preference from your add-on: console.log(require("sdk/simple-prefs").prefs.mysettingname); this means that it must be a valid javascript identifier. title this is used as a label for the preference in the add-ons manager user interface. optional common attributes these are attributes that all preferences may have: attribute description description this appears below the preference title in the add-ons manager ui. value a default value for the preference. depending on the preference type, this may be an integer, string...
...nd stores the full path and name of the directory selected. { "type": "directory", "name": "mydirectory", "title": "select a directory" } menulist displayed as a drop-down list. the type of the stored value depends on the default value. the options are specified by a mandatory "options" attribute, that is an array of objects with mandatory attributes "label" and "value" the values of the "value" attributes must be supplied as strings. the values of the "label" attributes prefixed with "{name}_options.", where {name} is the name of the preference, are used as localization keys. if no matching entries are found, the value of the "label" attributes is used verbatim as labels. { "name": "typeofbreath", "type": "menulist",...
...el" attributes prefixed with "{name}_options.", where {name} is the name of the preference, are used as localization keys. if no matching entries are found, the value of the "label" attributes is used verbatim as labels. { "name": "typeofbreath", "type": "menulist", "title": "type of breath", "value": 0, "options": [ { "value": "0", "label": "fire" }, { "value": "1", "label": "cold" }, { "value": "2", "label": "disintegration" } ] } radio displayed as radio buttons. the type of the stored value depends on the default value. the options are specified by a mandatory "options" attribute, that is an array of objects wit...
...And 4 more matches

Boxes - Archive of obsolete content
nd vbox) by default. however, you can easily add this capability with a style change. ...
...wever, you can easily add this capability with a style change. ...
...dd this capability with a style change. ...
...And 4 more matches

onpopuphidden - Archive of obsolete content
« xul reference home onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
... « xul reference home onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...And 4 more matches

Adding HTML Elements - Archive of obsolete content
or layout in xul. (there are xul elements for doing layout). notice that the prefix html: was added to the front of each tag. this is so that mozilla knows that this is an html tag and not a xul one. if you left out the html: part, the browser would think that the elements were xul elements and they would not display because img, input, table, and so on are not valid xul tags. ...
...l elements for doing layout). notice that the prefix html: was added to the front of each tag. this is so that mozilla knows that this is an html tag and not a xul one. if you left out the html: part, the browser would think that the elements were xul elements and they would not display because img, input, table, and so on are not valid xul tags. in xul, you can add labels with the description or label element. ...
...front of each tag. this is so that mozilla knows that this is an html tag and not a xul one. if you left out the html: part, the browser would think that the elements were xul elements and they would not display because img, input, table, and so on are not valid xul tags. in xul, you can add labels with the description or label element. you should use these elements when you can. you can also add labels to controls either by using the html label element, or you can simply put the text inside another html block element (such as p or div) as in the example below. example 1 : source view <html:p> search for: <html:input id="find-text"/> <button id="okbutton" label="ok"/> </html:p> this code will cause the text 'search for:' to be displayed, followed by an input element and an ok button. not...
...And 4 more matches

Simple Menu Bars - Archive of obsolete content
cintosh has its own special menu along the top of the screen controlled by the system. although you can create custom menus, any special style rules or non-menu elements that you place on a menu may not be applied. you should keep this is mind when creating menus. ...
...olled by the system. although you can create custom menus, any special style rules or non-menu elements that you place on a menu may not be applied. you should keep this is mind when creating menus. ...
...u can create custom menus, any special style rules or non-menu elements that you place on a menu may not be applied. you should keep this is mind when creating menus. example of a simple menu bar example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> </toolbox> here, a simple menu bar is created using the menubar element. it will cr...
...And 4 more matches

Tree View Details - Archive of obsolete content
y and constructs a tree from it. this tree will only support a single parent level with an inner child level, but it could be extended to support additional levels without too much effort. we'll examine it piece by piece. <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> </window> we use a simple tree here with no data in the treechildren. the 'init' function is called when the window is loaded to initialize the tree. it simply sets the custom view by retrieving the tree and setting its 'view' property. we will define 'treeview' next. function init() { document.getelementbyid("eleme...
...if not, the function just returns since non-cont...
...if not, the function just returns since non-containers cannot be opened or closed. since the third element in the it...
...And 4 more matches

XUL Questions and Answers - Archive of obsolete content
g if it is possible to have checkbox support for multi column lists. ...
...sheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listitem> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> </listhead> <listitem type="checkbox" value="1" label="vghkvghk"/> <lis...
...if user wants checkbox support for multicolumn lists, then they will have to implement one. ...
...And 4 more matches

button - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a button that can be pressed by the user. event handlers can be used to trap mouse, keyboard and other events. it is typically rendered as a grey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. ...
.... event handlers can be used to trap mouse, keyboard and other events. it is typically rendered as a grey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key. th...
... autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. ...
...And 4 more matches

listcell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell of a listbox. by default it only contains text but iconic and checkbox listcells are also available. attributes crop, disabled, image, label, type properties disabled style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the ...
...tirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. type type: string this attribute is reserved for use by anonymous children of listitem; do not use. properties disabled type: boolean...
...r(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes listcell-iconic use this class to have an image appear on the listcell. specify the image using the image attribute. ...
...And 4 more matches

listitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single row in a listbox. the text of the listitem is specified either using listcell elements, or by placing a label attribute directly on the listitem element. by default it contains a single listcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. ...
... ] a single row in a listbox. the text of the listitem is specified either using listcell elements, or by placing a label attribute directly on the listitem element. by default it contains a single listcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. ...
...ly on the listitem element. by default it contains a single listcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters tha...
...And 4 more matches

prefwindow - Archive of obsolete content
ttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes ac...
...: accept: the ok button, which will accept the changes when pressed. this button will also be the default button. cancel: the cancel button which will cancel the operation. help: a help button for displaying help about the dialog. disclosure: a button to show more information. this might be a button or a disclosure triangle. extra1: an optional additional button. you can set its label with the buttonlabelextra1 attribute and its command with the ondialogextra1 attribute. extra2: a second optional additional button. you can set its label with the buttonlabelextra2 attribute and its command with the ondialogextra2 attribute. note: if you don't want to display any buttons in the dialog box, set the value of this attribute to "," (a single comma). warning: if the accept a...
...: accept: the ok button, which will accept the changes when pressed. this button will also be the default button. cancel: the cancel button which will cancel the operation. help: a help button for displaying help about the dialog. disclosure: a button to show more information. this might be a button or a disclosure triangle. extra1: an optional additional button. you can set its label with the buttonlabelextra1 attribute and its command with the ondialogextra1 attribute. extra2: a second optional additional button. you can set its label with the buttonlabelextra2 attribute and its command with the ondialogextra2 attribute. currentpane type: prefpane element reference to the currently displayed pane. to change the current pane, use the showpane me...
...And 4 more matches

textbox - Archive of obsolete content
tributes | properties | methods | related ] an input field where the user can enter text. it is similar to the html input element. only one line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
...isabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> <label control="your-name" value="enter your name:"/> <textbox id="your-name" value="john"/> </vbox> attr...
...er box does not have arrow buttons next to it to allow the user to adjust the value. the value may still be adjusted with the keyboard. the default value is false. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default value is 1. label type: string if present and not empty, this will be exposed to screen readers through the label property. type: integer the maximum value that the scale or number box may be set to. the default value is 100 for scales and infinity for number boxes. maxlength type: integer the maximum number of characters that the textbox allows to be entered. min ...
...And 4 more matches

Example - Learn web development
this the example for a basic payment form for the article how to structure an html form. ...
...t form html content <form method="post"> <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> <section> <h2>contact information</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <input type="radio" id="title_1" name="title" value="a"> ace </label> </li> <li> <label for="title_2"> <input type="radio" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="radio" id="title_3" name="title" value="q"> queen </label> </li> </ul> </fieldset> <p> <label for="...
...le_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="radio" id="title_3" name="title" value="q"> queen </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text" id="name" name="username"> </p> <p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</abbr></strong> </label> ...
...And 4 more matches

Other form controls - Learn web development
cted>cherry</option> <option>lemon</option> </select> if required, the default value for the select box can be set using the selected attribute on the desired <option> element — this option is then preselected when the page loads. the <option> elements can be nested inside <optgroup> elements to create visually associated groups of values: <select id="groups" name="groups"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="vegetables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> on the <optgroup> element, the value of the label attribute is displayed before the values of the nested options. the browser usually set...
.... multiple choice select box by default, a select box only lets the user select a single value. by adding the multiple attribute to the <select> element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down cmd/ctrl and clicking multiple values on desktop). ...
...select> element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down cmd/ctrl and clicking multiple values on desktop). <select id="multi" name="multi" multiple size="2"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="vegetables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> note: in the case of multiple choice select boxes, you'll notice that the select box no longer displays the values as drop-down content — instead, all values are displayed at once in a list, with the optional size attribute determining the height of the widget. n...
...And 4 more matches

Sending form data - Learn web development
hod the get method is the method used by the browser to ask the server to send back a given resource: "hey server, i want to get this resource." in this case, the browser sends an empty body. because the body is empty, if a form is sent using this method the data sent to the server is appended to the url. ...
...er to ask the server to send back a given resource: "hey server, i want to get this resource." in this case, the browser sends an empty body. because the body is empty, if a form is sent using this method the data sent to the server is appended to the url. consider the following form: <form action="http://www.foo.com" method="get"> <div> <label for="say">what greeting do you want to say?</label> <input name="say" id="say" value="hi"> </div> <div> <label for="to">who do you want to say it to?</label> <input name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> since the get method has been used, you'll see the url www.foo.com/?say=hi&to=mom appear in the browser address bar when you submit the form. the data is appended ...
...n the body of the http request: "hey server, take a look at this data and send me back an appropriate result." if a form is sent using this method, the data is appended to the body of the http request. let's look at an example — this is the same form we looked at in the get section above, but with the method attribute set to post. ...
...And 4 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
elte. ...
...no tex...
...no text content) using disabled=...
...And 4 more matches

Accessible Toolkit Checklist
used on the parent window. alt+f4 closes windows, similar to escape but even works on dialogs without cancel button alt+space opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable. default tab order should be in document order. tab order must wrap, not have invisible items in tab order dynamically added items must not corrupt the tab cycle or make it disorderly tab cycle must be identical backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visible on a...
...y combinations should cycle through panes in a window making focus visible on any widget, and focus must always be visible shift+f10 or context menu key should work like right click on focused item, and context menu should show just under and to the right of the current focus. on mac os x, ctrl+space is used to bring up the context menu. most widgets (like checkboxes) can have a label outside of themselves, which should focus the widget when clicked on, or when its mnemonic is pressed. the system should require these labels to be created/associated with each widget, not as a separate static text with no tie to the widget. the msaa support needs to know what label goes with what widget. msaa support: expose window with role_dialog, unless it's already the standard dialog ...
... supporting the most important basic iaccessible events get_accparent: get the parent of an iaccessible. get_accchildcount: get the number of children of an iaccessible. get_accchild: get the child of an iaccessible. get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item. this is one reason why a label must be created together with each widget, rather than separately. get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a url for a link, the text a user entered in a field. get_accrole: get an enumerated value representing what this iaccessible is used for, for example. is it a link, static text, editable text, a checkbox, or a table cell, etc. ...
...And 4 more matches

PKCS11 FAQ
in the regular certificate database. for the sake of completeness, it's also a good idea to expose public key objects. nss falls back to looking for for the existance of public keys to determine if the token may have the corresponding private key while the token is not logged in. ...
...ey objects. nss falls back to looking for for the existance of public keys to determine if the token may have the corresponding private key while the token is not logged in. how are permanent pkcs #11 objects found by nss? that is, which pkcs #11 attributes are used in the object searches? labels? key ids? key types? these are the general guidelines: user certificates are identified by their labels. certificates and keys are often looked up by the following methods: by looking up all private keys. by looking up all certificates. certificates may be looked up by label. by convention, all certificates making up a single personality should have the same label (that is, a pair of certificates, one for signing and one for key exchange, should have the same label). s/mime-capable...
... private keys must have the same cka_id value as their corresponding certificate, and this value must be unique on the token. orphaned keys have a cka_id generated from some part of the public key. this value is set when the key is generated, so that nss will be able to find the key when the certificate for that key is loaded. this case is interesting only for read/write tokens. ...
...And 4 more matches

CanvasRenderingContext2D.arcTo() - Web APIs
adius of 50. the lineto() method connects the arc to (20, 20) with a straight line. note that the arc's second control point and the point specified by lineto() are the same, which produces a totally smooth corner. ...
...document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const p0 = { x: 230, y: 20 } const p1 = { x: 90, y: 130 } const p2 = { x: 20, y: 20 } const labelpoint = function (p) { const offset = 15; ctx.filltext('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset); } ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, 50); ctx.lineto(p2.x, p2.y); labelpoint(p0); labelpoint(p1); labelpoint(p2); ctx.stroke(); result result of a large radius if you use a relatively large radius, the arc may appear in a place you didn't expect. in this example, the arc's connecting line goes above, instead of below, the coordinate specified by moveto(). this happens because the radius is too large for the arc to fit entirely below the starting point. html ...
...arting point. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(180, 90); ctx.arcto(180,130, 110,130, 130); ctx.lineto(110, 130); ctx.stroke(); result live demo more sophisticated demo of the method. you can play around with range input to see how arc changes. ...
...And 4 more matches

Using FormData Objects - Web APIs
number", serialnumber++); request.send(formdata); this lets you augment the form's data before sending it along, to include additional information that's not necessarily user-editable. sending files using a formdata object you can also send files using formdata. ...
...equest.send(formdata); this lets you augment the form's data before sending it along, to include additional information that's not necessarily user-editable. sending files using a formdata object you can also send files using formdata. ...
...sarily user-editable. sending files using a formdata object you can also send files using formdata. ...
...And 4 more matches

Using the slider role - Accessibility
on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: simple numerical range in the example below, a simple slider is used to select a value between 1 and 100. the current volume is 50. the application will programmatically update the value of aria-valuenow in response to user input. ...
...gy should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: simple numerical range in the example below, a simple slider is used to select a value between 1 and 100. the current volume is 50. the application will programmatically update the value of aria-valuenow in response to user input. ...
...y user input: function outputupdate(vol) { document.queryselector('#volume').value = vol; } example 2: text values sometimes, a slider is used to choose a value that is not, semantically, a number. in these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. in the example below, the slider is used to select a day of the week. ...
...And 4 more matches

ARIA annotations - Accessibility
res associated with aria annotations, and have a look at some code examples that show them in action. note: you can find all the examples discussed in this article in a demo file at aria-annotations. aria annotations features the aria attributes providing these new abilities are as follows: aria-description="" — provides a detailed description of an html element, as opposed to the brief label provided by aria-label. role="insertion" and role="deletion" — semantically denote html elements whose contents represent an insertion to or deletion from the overall document. these are semantically equivalent to the html <ins> and <del> elements. note that these aren’t part of the new aria annotations features, but they are of central relevance. role="mark" — semantically denotes html e...
...be able to use any of these yet, as screenreader support is currently not there. for the moment, you can see the annotations data being exposed with tools like firefox accessibility inspector. the annotations should just work once screenreader support is added. ...
...bility inspector. the annotations should just work once screenreader support is added. associating annotated elements with their details there are a number of different ways in which you can associate ui features with text labels or descriptions for accessibility purposes. it is useful to know when to use each. ...
...And 4 more matches

Alerts - Accessibility
on problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname. the form first, please read about the aria-required technique if you have not done so, as this technique expands upon that. ...
...ch are not valid, or a name field which does not contain at least a first name or a surname. the form first, please read about the aria-required technique if you have not done so, as this technique expands upon that. ...
...a surname. the form first, please read about the aria-required technique if you have not done so, as this technique expands upon that. ...
...And 4 more matches

Adding captions and subtitles to HTML5 video - Developer guides
5 video. ...
...ish — so we will reference all three of the relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"> </video> as you can see, each <track> element has the following attributes set: kind is given a value of subtitles, indicating the type of content the files contain label is given a value indicating which language that subtitle s...
... src is assigned a valid url pointing to the relevant webvtt subtitle file in each case. srclang indicates what language each subtitle files' contents are in. ...
...And 4 more matches

<input type="file"> - HTML: Hypertext Markup Language
its value a string containing one or more of these unique file type specifiers, separated by commas. for example, a file picker that needs content that can be presented as an image, including both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live. regardless of the user's device or operating system, the file input ...
...e with an image/* mime type. (many mobile devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an ms word document. ...
...es also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an ms word document. let's look at a more complete example: <form method="post" enctype="multipart/form-data"> <div> <label for="profile_pic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces a similar-looking output to the previous example: note: you can find this example on github too — see the source code, and also see it running live. it may look similar, but if you t...
...And 4 more matches

Inline options - Archive of obsolete content
to set a descri...
...to set a description, either use the desc attribute, or a text node as ...
...to set a description, either use the desc attribute, or a text node as a child of the <setting> tag. settings are tied to actual preferences, except the button setting, which is designed more for actions. ...
...And 3 more matches

Connecting to Remote Content - Archive of obsolete content
rt it into xul. the xslt tutorial contains details for building these templates. ...
...ains details for building these templates. ...
...after that, the xslt stylesheet can be imported int...
...And 3 more matches

Drag and Drop Example - Archive of obsolete content
he board only needs to respond to the dragdrop and dragover events. we'll add a boardobserver to the file dragboard.js in a moment. next, a palette will be added to the right side of the window. it will contain three buttons, one to create new buttons, one to create check boxes and the other to create textboxes. this buttons will respond to the draggesture event and start a drag. ...
...a moment. next, a palette will be added to the right side of the window. it will contain three buttons, one to create new buttons, one to create check boxes and the other to create textboxes. this buttons will respond to the draggesture event and start a drag. <vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="checkbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="text box" elem="textbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> </vbox> the nsdraganddrop object will be called to do most of the work. we'll create a listobserver object that will set the data to be dragged. note that each bu...
...in this case, it only accepts text. we don't need to do anything special for the ondragover function, so no code is added in its body. the ondrop handler first uses the createelement function to create a new element of the type stored in the drag ...
...And 3 more matches

id - Archive of obsolete content
« xul reference home id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. ...
...home id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. ...
...parameter to getelementbyid() and other dom functions and to reference the element in style sheets. ...
...And 3 more matches

Extensions - Archive of obsolete content
the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. ...
...the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. ...
...the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. ...
...And 3 more matches

Panels - Archive of obsolete content
will display whatever elements are placed as children of the panel element. for example, the following panel displays a textbox for entering a name. note that the panel is not placed in a separate file and is instead placed inside another window. <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example. when the button is pressed, the panel is opened. clicking outside the panel or pressing escape will close the panel. you can also place a close button in the panel which will close...
... its topleft corner just underneath the bottom edge of the button, much as a menu does. the position can, however, be changed. for more information about positioning the popup, see positioning popups. only buttons (and toolbarbuttons) have this automatic behaviour which opens the popup when pressed. for other types of elements, you need to use a different technique as in the following example. <label value="search" popup="search-panel"/> <panel id="search-panel"> <label control="search" value="terms:"/> <textbox id="search"/> </panel> to attach a panel to an non-button element, for instance to have a panel open when a label is clicked, use the popup attribute. the popup attribute should be set to the id of a panel within the same document. when the left mouse button is pressed on the...
.../> </panel> to attach a panel to an non-button element, for instance to have a panel open when a label is clicked, use the popup attribute. the popup attribute should be set to the id of a panel within the same document. when the left mouse button is pressed on the element with the popup attribute, the corresponding panel will be displayed. for instance, to attach the popup defined above to a label, use the following code: <label value="search" popup="search-panel"/> the result is a search button which opens a panel for entering the search term. when using the popup attribute, the panel will appear with the top left corner at the mouse position. in this case, you may wish to have the popup appear below the label instead. the position attribute may be used to control the placement of the ...
...And 3 more matches

Attribute Substitution - Archive of obsolete content
« previousnext » so far, attribute replacement in an action body has been used to replace an entire attribute with the value of a variable. however, you may also replace only part of attribute's value, or use multiple variables in one attribute. ...
...note that variable names must have a space after them as this is how the end of variable is determined. ...
... this is how the end of variable is determined. that is '?name?age' is considered to be a single variable with that name, not two variables together. to use two variables, place a space between them. it is sometimes useful though, to concatenate two values together without a space. this can be done simply by putting two variables next to each other in an attribute value separated by a caret (^). ...
...And 3 more matches

Recursive Generation - Archive of obsolete content
if you look at the graph again, you might begin to see why. in the graph, item c has a relateditem arrow pointing out of it to item d. this extra arrow which neither b or d have causes an extra set of buttons to be created. after generating content, the template builder always repeats the generation for inner levels as far as it can go. thus, the builder can be said to generate content from the graph recursively. ...
... generated after one iteration: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <hbox uri="?relateditem"> <button label="?start"/> <button label="?relateditem"/> </hbox> </action> </template> <hbox id="http://www.xulplanet.com/rdf/b"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/b"/> </hbox> <hbox id="http://www.xulplanet.com/rdf/c"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/...
...ction> </template> <hbox id="http://www.xulplanet.com/rdf/b"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/b"/> </hbox> <hbox id="http://www.xulplanet.com/rdf/c"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/c"/> </hbox> <hbox id="http://www.xulplanet.com/rdf/d"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/d"/> </hbox> </vbox> for the next iteration, the insertion point will be the three <hbox> elements. however, since c is the only element that will end up having any additional content, only the second <hbox> element will have additional children added to it. for a nested item, the builder processes the query in ...
...And 3 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
suite. the example below will create an autocomplete textbox that will search the user's history. ...
...match, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="hist...
...rolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. autocompletepopup type: id the id of a popup element used to hold autocomplete results for the element. autocompletesearch new in thunderbird 2requires seamonkey 1.1 type: space-separated list of values a space-separated list of search component names, each of which implements the nsiautocompletesearch interfac...
...And 3 more matches

Commands - Archive of obsolete content
cmd_'. you will probably want to use the same id if a command is already being used, however, for your own commands, you can use any command id you wish. to avoid conflicts, you may wish to include the application name in the command id. a simple way of using commands is as follows: example: simple command example 1 : source view <command id="cmd_openhelp" oncommand="alert('help!');"/> <button label="help" command="cmd_openhelp"/> in this example, instead of placing the oncommand attribute on the button, we instead place it on a command element. the two are then linked using the command attribute, which has the value of the command's id. the result is that when the button is pressed, the command 'cmd_openhelp' is invoked. there are two advantages to using this approach. first, it moves...
... additionally, if you set the disabled attribute on the command, the command will be disabled and it will not be invoked. any buttons and menu items hooked up to it will be disabled automatically. if you re-enable the command, the buttons will become enabled again. example: toggling command disabled example 2 : source view <command id="cmd_openhelp" oncommand="alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> <button label="disable" oncommand="document.getelementbyid('cmd_openhelp').setattribute('disabled','true');"/> <button label="enable" oncommand="document.getelementbyid('cmd_openhelp').removeattribute('disabled');"/> in this example, both buttons use the same command. when the disable button is p...
...the supportscommand method returns true for the 'cmd_delete' command, which is the name of the command used when the delete menu item is selected. for other commands, false should be returned since the ...
...And 3 more matches

More Button Features - Archive of obsolete content
« previousnext » in this section, we will look at some additional features of buttons. adding an image you can add an image to a button by specifying a url in the image attribute. the image is loaded from the url, which can be a relative or absolute url, and then the image is displayed on the button. the button below will have both a label and the image 'happy.png'. the image will appear to the left of the label. you can change this position by using two other attributes. this will be explained in a moment. example 1 : source view <button label="help" image="happy.png"/> button with css image another way to specify the image is by using the css list-style-image style property on the button. this is designed to allow the 'skin' (in this case, the appearance of the image) to be ...
...the style attribute functions similar to its html counterpart. in general, it can be used on all xul elements. note that you really should put the style declarations in a separate style sheet. ...
...nd" style="list-style-image: url('happy.png')"/> in this case, the image 'happy.png' is displayed on the button. the style attribute functions similar to its html counterpart. in general, it can be used on all xul elements. note that you really should put the style declarations in a separate style sheet. positioning the images by default, the image on a button will appear to the left of the text label. there are two attributes that can be used to control this position. the dir attribute controls the direction of the image and text. by setting this attribute to the value reverse, the image will be placed on the right side of the text. by using the value normal, or leaving the attribute out entirely, the image will be placed on the left side of the text. the orient attribute can be used to place...
...And 3 more matches

Tree Box Objects - Archive of obsolete content
treeboxobject interface. redrawing the tree we already saw the rowcountchanged() function of the tree box object in the previous section. it is used to indicate that one or more rows have been added to the tree or removed from the tree. the tree will redraw the affected area. you don't need to call the rowcountchanged() function when a row has simply changed in some way, for example if a cell's label changes. in this case, there are other drawing functions that can be used. the simplest is to call invalidaterow() which will redraw a specific row in the tree. the tree will call the view to get the updated data and update the contents of the tree on screen. other redrawing functions are invalidatecell() to redraw only a single cell invalidatecolumn() to redraw a column invalidaterange() t...
...ow. here is a simple example. ...
...){ var value = document.getelementbyid("tbox").value; var tree = document.getelementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.scrolltorow(value); } </script> <tree id="thetree" rows="4"> <treecols> <treecol id="row" label="row" primary="true" flex="1"/> </treecols> <treechildren> <treeitem label="row 0"/> <treeitem label="row 1"/> <treeitem label="row 2"/> <treeitem label="row 3"/> <treeitem label="row 4"/> <treeitem label="row 5"/> <treeitem label="row 6"/> <treeitem label="row 7"/> <treeitem label="row 8"/> <treeitem label="row 9"/> </treechildren> </tree> <hbox align="center"> <label value="scroll to row:"/> <textbox id="tbox"/> <button lab...
...And 3 more matches

arrowscrollbox - Archive of obsolete content
the mouse over one of the (active) arrows triggers a scroll event. more information is available in the xul tutorial. ...
...e (active) arrows triggers a scroll event. more information is available in the xul tutorial. ...
...s a scroll event. more information is available in the xul tutorial. ...
...And 3 more matches

checkbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that can be turned on and off. this is most commonly rendered as a box when the element is off and a box with a check when the element is on. the user can switch the state of the check box by selecting it with the mouse. a label, specified with the label attribute, may be added beside the check box. more information is available in the xul tutorial. ...
... on and off. this is most commonly rendered as a box when the element is off and a box with a check when the element is on. the user can switch the state of the check box by selecting it with the mouse. a label, specified with the label attribute, may be added beside the check box. more information is available in the xul tutorial. attributes accesskey, checked, command, crop, disabled, src, label, preference, tabindex properties accesskey, accessibletype, checked, command, crop, disabled, src, label, tabindex examples <checkbox label="enable javascript" checked="true"/> <checkbox label="enable java" checked="false"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appea...
... checked type: boolean indicates whether the element is checked or not. use hasattribute() to determine whether this attribute is set instead of getattribute(). ...
...And 3 more matches

listbox - Archive of obsolete content
em, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> <listbox id="thelist" rows="10" width="400"> <listhead> <listheader label="1ct gem" width="240"/> <listheader label="price" width="150"/> </listhead> <listcols> <listcol/> <listcol flex="1"/> </listcols> </listbox> var thelist = document.gete...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out tex...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not...
...And 3 more matches

listcol - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a column in a listbox. you can make some columns flexible and other columns non-flexible. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a column in a listbox. you can make some columns flexible and other columns non-flexible. ...
...s | properties | methods | related ] a column in a listbox. you can make some columns flexible and other columns non-flexible. ...
...And 3 more matches

prefpane - Archive of obsolete content
ments. both may be specified directly as children of the prefpane element, or the src attribute may be used to put a pane in a separate file. in this latter case, the separate file should use an overlay tag as its root tag since it will be loaded as an overlay to the main preferences window. more information is available in the preferences system article. ...
... element, or the src attribute may be used to put a pane in a separate file. in this latter case, the separate file should use an overlay tag as its root tag since it will be loaded as an overlay to the main preferences window. more information is available in the preferences system article. attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> ... more preferences ... <...
...more ui elements ... </prefpane> attributes helpuri type: uri the uri of the help page associated with a preference panel. the uri will be opened using the help viewer when the help button is pressed. ...
...And 3 more matches

scrollbox - Archive of obsolete content
tional functions that can be used to scroll the content. note that a scrollbox doesn't cause scrollbars to be displayed. it is intended to be used when an application wants to be able to adjust the scroll position itself. if you just want scrollbars to appear, add style='overflow: auto;'. this may also be used with any other container element. ...
...d style='overflow: auto;'. this may also be used with any other container element. examples the following shows the xul for a bunch of labels. they come out in a box. if their container doesn't give enough room to hold them (geometrically) what happens depends on the enclosing elements; often the content is just clipped off on the bottom or right (depending on what's too big to fit). ...
...any other container element. examples the following shows the xul for a bunch of labels. they come out in a box. if their container doesn't give enough room to hold them (geometrically) what happens depends on the enclosing elements; often the content is just clipped off on the bottom or right (depending on what's too big to fit). ...
...And 3 more matches

Dialogs in XULRunner - Archive of obsolete content
log. dialog xul files can have dtd, css, and javascript, just like windows. ...
...sion="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favorite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favorite fruit"/> <radiogroup> <radio...
...here is the code needed to open a dialog: function opendialog() { window.opendialog("chrom...
...And 3 more matches

Windows and menus in XULRunner - Archive of obsolete content
ype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ... </window> notice the references to css and dtd files. the css is used to apply formatting to elements, just as it would in html. the dtd is used to create entity references so strings for titles and labels are not stored directly in the xul file; this makes updating the text -- and localization of the application -- much easier. the window title is done this way in the above example. also notice the <script> element which is used to include the window’s javascript into the xul file. keeping css, dtd and javascript out of the xul file is considered a best practice. when you launch your xul appli...
... xul menus and toolbars look like: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup"> <menuitem label="&file.new;" oncommand="dofilenew();"/> <menuitem label="&file.open;" oncommand="dofileopen();"/> <menuitem label="&file.save;" oncommand="dofilesave();"/> <menuseparator/> <menuitem label="&file.exit;" oncommand="dofileexit();"/> </menupopup> </menu> <menu id="edit-...
...e;"> <menupopup id="file-popup"> <menuitem label="&file.new;" oncommand="dofilenew();"/> <menuitem label="&file.open;" oncommand="dofileopen();"/> <menuitem label="&file.save;" oncommand="dofilesave();"/> <menuseparator/> <menuitem label="&file.exit;" oncommand="dofileexit();"/> </menupopup> </menu> <menu id="edit-menu" label="&edit;"> <menupopup id="edit-popup"> <menuitem label="&edit.undo;" oncommand="doeditundo();"/> <menuitem label="&edit.redo;" oncommand="doeditredo();"/> </menupopup> </menu> </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;" oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;" oncom...
...And 3 more matches

XForms Input Element - Archive of obsolete content
e spec). attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special inputmode - not supported for this control incremental - supported. the default value is 'false'. mozilla extensions labelposition - only for boolean types: show the label before or after the checkbox (see below) type restrictions the input element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any data type derived from these. representations the xforms input element can be represented by the following widgets for the spcified data types (or types deriv...
...ent then the bound instance node will be updated when the control loses the focus. checkbox most often used when the form author only needs a simple 'true', 'false', '1', or '0' response from the user (xhtml/xul). ...
... loses the focus. checkbox most often used when the form author only needs a simple 'true', 'false', '1', or '0' response from the user (xhtml/xul). characteristics used when the instance node is of type xsd:boolean or a type derived from it analogous widgets are <xhtml:input type="checkbox"/> and <xul:checkbox/> the corresponding label can be displayed before or after the checkbox by using the labelposition attribute. ...
...And 3 more matches

CSS and JavaScript accessibility best practices - Learn web development
you can be creative with link styles, as long as you keep giving users feedback when they interact with the links. something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls. form elements elements to allow users to input data into websites: <div> <label for="name">enter your name</label> <input type="text" id="name" name="name"> </div> you can see some good example css in our form-css.html example (see it live also). most of the css you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy. you shouldn't however deviate too much from the expected visual feedback form elements...
...xt, images, tables, forms and push button that activate functions. as we looked at in our html: a good basis for accessibility article, the key considerations are: good semantics: using the right element for the right job. for example, making sure you use headings and paragraphs, and <button> and <a> elements making sure content is available as text, either directly as text content, good text labels for form elements, or text alternatives, e.g. alt text for images. we also looked at an example of how to use javascript to build in functionality where it is missing — see building keyboard accessibility back in. this is not ideal — really you should just use the right element for the right job — but it shows that it is possible in situations where for some reason you can't control the ...
... browser). the client-side validation is still really useful for reporting errors — users can know about mistakes they make instantly, rather than having to wait for a round trip to the server and a page reload. this is a definite usability advantage. note: server-side validation has not been implemented in this simple demo. we've made this form validation pretty accessible too. ...
...And 3 more matches

Practical positioning examples - Learn web development
ou can see the finished example running live at hidden-info-panel.html (source code). check it out to get an idea of what you will be building in this section of the article. as a starting point, make a local copy of hidden-info-panel-start.html from our github repo. this doesn't follow on from the previous example, so a fresh start file is required. let's have a look at the html in the file: <label for="toggle">❔</label> <input type="checkbox" id="toggle"> <aside> ... </aside> to start with here we've got a <label> element and an <input> element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). here it is associated with the <input> checkbox usin...
... description goes with what form element). here it is associated with the <input> checkbox using the for and id attributes. note: we've put a special question mark character into our html to act as our info icon — this represents the button that will be pressed to show/hide the panel. here we are going to use these elements for a slightly different purpose — another useful side effect of <label> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. this has led to the well-known checkbox hack, which provides a javascript-free way of controlling an element by toggling a button. the element we'll be controlling is the <aside> element that follows the other two (we've left its contents out of the above code listing for brevity). in t...
...vascript-free way of controlling an element by toggling a button. the element we'll be controlling is the <aside> element that follows the other two (we've left its contents out of the above code listing for brevity). in the below sections we'll explain how this all works. styling the form elements first let's deal with the form elements — add the following css in between your <style> tags: label[for="toggle"] { font-size: 3rem; position: absolute; top: 4px; right: 5px; z-index: 1; cursor: pointer; } input[type="checkbox"] { position: absolute; top: -100px; } the first rule styles the <label>; here we've: set a large font-size to make the icon nice and big. set position absolute on it, and used top and right to position it nicely in the top-right corner. set a z-ind...
...And 3 more matches

Styling web forms - Learn web development
remain when using css with forms. these problems can be divided into three categories: the good some elements can be styled with few if any problems across platforms. these include the following elements: <form> <fieldset> and <legend> single-line text <input>s (e.g. type text, url, email...), except for <input type="search">. multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling. the ugly some elements can't be styled thoroughly using css. these include: <input type="color"> date-related controls su...
...the legend contents will still be spoken in the same way; it is just the visual position that has changed. note: you could also use the transform property to help you with positioning your <legend>. however, when you position it with for example a transform: translatey();, it moves but leaves an ugly ...
...tcard" contact form; see here for the finished version. if you want to follow along with this example, make a local copy of our postcard-start.html file, and follow the below instructions. the html the html is only slightly more involved than the example we used in the first article of this guide; it just has a few extra ids and a heading. ...
...And 3 more matches

Advanced text formatting - Learn web development
t it appears as a description list in the output field. you could try using your own terms and descriptions if you like. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. a light brown color.</textarea> <div class="playable-buttons"> <input id="reset" type="...
...con the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. ...
...r the confucius quote http://www.affirmationsforpositivethinking.com for "the need to eliminate negative self talk". if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. playable code 2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 150px; width: 95%"> <p>hello and welcome to my motivation page. as confucius' quotes site says:</p> <p>it does not matter how slowly you go as long as you do not stop.</p> <p>i also love the concept of positive thinking, and the need to eliminate negative self ...
...And 3 more matches

Getting started with HTML - Learn web development
end of the line. doing this should give the line italic text formatting! see your changes update live in the output area. if you make a mistake, you can clear your work using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. </textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,s...
...ea (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. ...
... in the href attribute. remember that you need to include a space between the element name, and between each attribute. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. ...
...And 3 more matches

Useful string methods - Learn web development
is the thing on the left equal to the thing on the right? or in this case, does the method call on the left return the result on the right? hint: in this case it is probably more useful to test whether the method call isn't equal to a certain result. ...
...g what's currently there if (greetings[i]) { let listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeven...
...e value of the result variable to equal to the final result, not the input. note: a hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them. ...
...And 3 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
! {/each} </ul> go back to the app; you'll see something like this: now we've seen that this is working, let's generate a complete todo item with each loop of the {#each} directive, and inside embed the information from the todos array: id, name, and completed. ...
...om the todos array: id, name, and completed. ...
...eted. ...
...And 3 more matches

Handling common accessibility problems - Learn web development
ant to provide text alternatives for audio or support older browsers, a simple text transcript presented somewhere on the page or on a separate page might be a good idea. element relationships and context there are certain features and best practices in html designed to provide context and relationships between elements where none otherwise exists. the three most common examples are links, form labels, and data tables. the key to accessible link text is that people using screen readers will often use a common feature whereby they pull up a list of all the links on the page. in this case, the link text needs to make sense out of context. for example, a list of links labeled "click here", "click here", etc. is really bad for accessibility. it is better for link text to make sense in context an...
... text is that people using screen readers will often use a common feature whereby they pull up a list of all the links on the page. in this case, the link text needs to make sense out of context. for example, a list of links labeled "click here", "click here", etc. is really bad for accessibility. it is better for link text to make sense in context and out of context. next on our list, the form <label> element is one of the central features that allows us to make forms accessible. ...
...age. in this case, the link text needs to make sense out of context. for example, a list of links labeled "click here", "click here", etc. is really bad for accessibility. it is better for link text to make sense in context and out of context. next on our list, the form <label> element is one of the central features that allows us to make forms accessible. the trouble with forms is that you need labels to say what data should be entered into each form input. each label needs to be included inside a <label> to link it unambiguously to its partner form input (each <label> for attribute value needs to match the form element id value), and it will make sense even if the source order is not completely logical (which to be fair it should be). note: for more information about link text and form lab...
...And 3 more matches

Handling common HTML and CSS problems - Learn web development
forms, such as times, dates, colors, numbers, etc. these are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. supporting platforms provide special ui widgets when these input types are used, such as a calendar widget for entering dates. ...
...lors, numbers, etc. these are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. supporting platforms provide special ui widgets when these input types are used, such as a calendar widget for entering dates. ...
...le platforms, where providing a pain-free way of entering data is very important for the user experience. supporting platforms provide special ui widgets when these input types are used, such as a calendar widget for entering dates. ...
...And 3 more matches

Gecko info for Windows accessibility vendors
erences with internet explorer for the most part, where we support an msaa feature, we have tried to duplicate internet explorer's use of it. please let us know if you find any differences not listed here: accessible relations are supported the accnavigate() method can be used with new constants defined for gecko. the results are always returned via vt_dispatch. enum { navrelation_label_for = 0x1002 }; enum { navrelation_description_for = 0x100f }; these two relations can be used on object to determine what form control is being labelled or desribed. enum { navrelation_labelled_by = 0x1003 }; enum { navrelation_described_by = 0x100e }; these two relations are they inverse; they can be used on form controls. if the form control has an accname, you can get the iacces...
...num { navrelation_description_for = 0x100f }; these two relations can be used on object to determine what form control is being labelled or desribed. enum { navrelation_labelled_by = 0x1003 }; enum { navrelation_described_by = 0x100e }; these two relations are they inverse; they can be used on form controls. if the form control has an accname, you can get the iaccessible that it was labelled by in order to get more formatting information. it is also useful to check for a description. note that the label and description relations may be used to prevent redundant information from being presented by the screen reader, since the label and description can occur both on their own, and in the name or description fields of an iaccessible. enum { navrelation_default_button = 0x100d...
...ferences with ie role_cell html: <td> dhtml: role="wairole:gridcell" sets state_readonly in normal table. sets state_focusable in data grids and spreadsheets clears state_readonly in spreadsheets. sets state_selected in spreadsheets when a cell has selection. role_link xul: <label class="text-link"> -- this should be changed, we need a real <link> widget for xul html: <a> and <area> sets state_linked if it is pointing somewhere. sets state_traversed if link has been visited. sets state_selectable if it is an html named anchor accvalue() exposes the url that is pointed to role_helpballoon not suppor...
...And 3 more matches

Profiling with the Firefox Profiler
lable in b2g repository. $ gecko_objdir=<objdir> product_out=<objdir> target_tools_prefix= \ ./scripts/profile-symbolicate.py -o run.symb.cleo run.cleo clone cleopatra and start the server with ./run_webserver.sh. access cleopatra from your web browser by loading the page localhost:8000, and upload run.symb.cleo to render the profile with most of the symbol information. native stack vs. label stack the profiler periodically samples the stack of the selected threads in firefox and collects a stack trace. this stack trace is the combined stack of three different stacks: the native stack, the javascript stack, and the label stack. native stack the native stack is the regular c / c++ / rust function stack that you know from your debugger. it's only collected if the "stack walk" checkbo...
... the stacks you see in the ui are chains of these tags. this is good for highlighting particularly interesting parts of the code, but they miss out on un-annotated areas of the code base, and give no visibility into system libraries or drivers. ...
...ck. native stack the native stack is the regular c / c++ / rust function stack that you know from your debugger. it's only collected if the "stack walk" checkbox in the gecko profiler add-on's settings is checked. javascript stack the javascript stack is collected by the js engine. this is controlled by the "javascript" checkbox in the gecko profiler add-on's settings panel. label stack the label stack (formerly called "pseudo stack") uses function entry/exit tags added by hand to important points in the code base. the stacks you see in the ui are chains of these tags. this is good for highlighting particularly interesting parts of the code, but they miss out on un-annotated areas of the code base, and give no visibility into system libraries or drivers. tagging is done by adding macro...
...And 3 more matches

Key Values - Web APIs
of "super" and "hyper". [5] chrome 67 and firefox 63 now correctly interpret the right alt key for keyboard layouts which map that key to altgr. see firefox bug bug 900750 and chrome bug 25503 for further details. whitespace keys keyboardevent.key value description virtual keycode windows mac linux android "enter" the enter or ↵ key (sometimes labeled return). vk_return (0x0d) kvk_return (0x24) kvk_ansi_keypadenter (0x4c) kvk_powerbook_keypadenter (0x34) gdk_key_return (0xff0d) gdk_key_kp_enter (0xff8d) gdk_key_iso_enter (0xfe34) gdk_key_3270_enter (0xfd1e) qt::key_return (0x01000004) qt::key_enter (0x01000005) keycode_enter (66) keycode_numpad_enter (160) keycode_dpad_center (23) "tab...
...016) keycode_page_up (92) [1] internet explorer, edge (16 and earlier), and firefox (36 and earlier) use "left", "right", "up", and "down" instead of "arrowleft", "arrowright", "arrowup", and "arrowdown". editing keys keyboardevent.key value description virtual keycode windows mac linux android "backspace" the backspace key. this key is labeled delete on mac keyboards. vk_back (0x08) kvk_delete (0x33) gdk_key_backspace (0xff08) qt::key_backspace (0x01000003) keycode_del (67) "clear" the clear key. removes the currently selected input. vk_clear (0x0c) vk_oem_clear (0xfe) kvk_ansi_keypadclear (0x47) gdk_key_clear (0xff0b) qt::key_clear (0x0100000b) keycode_clear (28) "copy" the...
...ior to firefox 37, this key generated the key value "unidentified". application selector keys some keyboards offer special keys for launching or switching to certain common applications. key values for those are listed here. keyboardevent.key value description virtual keycode windows mac linux android "launchcalculator" [5] the calculator key, often labeled with an icon. this is often used as a generic application launcher key (appcommand_launch_app2). appcommand_launch_app2 gdk_key_calculator (0x1008ff1d) qt::key_calculator (0x010000cb) keycode_calculator (210) "launchcalendar" [5] the calendar key. often labeled with an icon. gdk_key_calendar (0x1008ff20) qt::key_calendar (0x010000e4) keycode_calend...
...And 3 more matches

Using the MediaStream Recording API - Web APIs
px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.1); height: calc(100% - 240px - 0.7rem); overflow: scroll; } note: calc() has good support across modern browsers too, even going back to internet explorer 9. ...
...eckbox hack for showing/hiding this is fairly well documented already, but we thought we'd give a mention to the checkbox hack, which abuses the fact that you can click on the <label> of a checkbox to toggle it checked/unchecked. in web dictaphone this powers the information screen, which is shown/hidden by clicking the question mark icon in the top right hand corner. ...
...s the fact that you can click on the <label> of a checkbox to toggle it checked/unchecked. in web dictaphone this powers the information screen, which is shown/hidden by clicking the question mark icon in the top right hand corner. ...
...And 3 more matches

Using the aria-required attribute - Accessibility
ssistive technology screen readers should announce the field as required. note that this attribute will not automatically change the presentation of the field. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. ...
...s should announce the field as required. note that this attribute will not automatically change the presentation of the field. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. ...
...ly change the presentation of the field. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. ...
...And 3 more matches

Operable - Accessibility
sible, then use css features like positioning to handle the layout. 2.4.4 link purpose (in context) (a) the purpose/destination of a link can be determined from the link text, or from its surroundings (e.g. the surrounding text). exceptions are where the link purpose is ambiguous to all users (see ambiguous to users in general for a useful explanation of this). see meaningful text labels. also note that you should minimize instances where multiple copies of the same text are linked to different places. this can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing. 2.4.5 multiple navigation mechanisms (aa) you should provide at l...
..., breadcrumb trail, site search, site map, list of related links, etc. the only exception to this is where a page is one step in a process, so should only logically have links to the previous and next steps. most of these mechanisms can be created using simple html features, for example see search field, creating a navigation menu, styling links as buttons. 2.4.6 headings and labels (aa) heading (e.g. <h2>) and <label> elements clearly describe the purpose of the content and form elements they are supposed to be describing. see ui controls, meaningful text labels, the basics of headings and paragraphs, the <label> element. note that you should avoid duplicating headings or labels (e.g. multiple instances of "further information"), unless the structure allows...
...steps, the user should be given an indicator of where they are in the site, for example a breadcrumb trail, sitemap or text such as "form page 2 of 10". 2.4.9 link purpose (link only) (aaa) this criterion builds on 2.4.4, stating that to conform to aaa, the purpose/destination of a link should be determinable from the link text alone, even if out of context. see meaningful text labels. also note that you should minimize instances where multiple copies of the same text are linked to different places. this can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing. 2.4.10 section headings (aaa) as well as creating a useful docume...
...And 3 more matches

:placeholder-shown - CSS: Cascading Style Sheets
the way overflowing text is displayed. html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style. ...
... html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style. ...
...><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style. ...
...And 3 more matches

Box-shadow generator - CSS: Cascading Style Sheets
fore"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> ...
...webkit-box-sizing: border-box; box-sizing: border-box; } /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: ce...
...mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /* * box shadow generator tool */ body { max-width: 1000px; height: 800px; margin: 20px auto 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box...
...And 3 more matches

Constraint validation - Developer guides
land), but some countries have postal codes with only a fixed number of digits; others, like the uk, have more complex structures, allowing letters at some specific positions. note: this is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. ...
...s have postal codes with only a fixed number of digits; others, like the uk, have more complex structures, allowing letters at some specific positions. note: this is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. ...
...of digits; others, like the uk, have more complex structures, allowing letters at some specific positions. note: this is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. ...
...And 3 more matches

<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
this technique is useful for situations where there is mor...
...ss criterion 2.4.1 | w3c understanding wcag 2.0 understanding success criterion 2.4.6 | w3c understanding wcag 2.0 understanding success criterion 2.4.10 | w3c understanding wcag 2.0 labeling section content another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout. sectioning content can be labeled using a combination of the aria-labelledby and id attributes, with the label concisely describing the purpose of the section. ...
...ading software is to generate a list of sectioning content and use it to determine the page's layout. sectioning content can be labeled using a combination of the aria-labelledby and id attributes, with the label concisely describing the purpose of the section. this technique is useful for situations where there is more than one sectioning element on the same page. ...
...And 3 more matches

<input type="submit"> - HTML: Hypertext Markup Language
<input> elements of type submit are rendered as buttons. when the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server. ...
... to submit the form to the server. <input type="submit" value="send request"> value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <input type="submit"> element's value attribute contains a domstring which is displayed as the button's label. buttons do not have a true value otherwise. <input type="submit" value="send request"> if you don't specify a value, the button will have a default label, chosen by the user agent. ...
...tes type and value idl attributes value methods none value an <input type="submit"> element's value attribute contains a domstring which is displayed as the button's label. buttons do not have a true value otherwise. <input type="submit" value="send request"> if you don't specify a value, the button will have a default label, chosen by the user agent. ...
...And 3 more matches

continue - JavaScript
the continue statement terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax continue [label]; label identifier associated with the label of the statement. description in contrast to the break statement, continue does not terminate the execution of the loop entirely: instead, in a while loop, it jumps back to the condition. ...
... examples using continue with while the following example shows a while loop that has a continue statement that executes when the value of i is 3. ...
... examples using continue with while the following example shows a while loop that has a continue statement that executes when the value of i is 3. thus, n takes on the values 1, 3, 7, and 12. ...
...And 3 more matches

Localization - Archive of obsolete content
calized strings from html, add a data-l10n-id attribute to the html tag where you want the localized string to appear, and assign the identifier to it: <html> <body> <h1 data-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized-hello", label: "localized hello", icon: "./icon-16.png", onclick: function() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 75, width: 150, contenturl: require("sdk/self").data.url("my-panel.html") }); given locale files for "en-us" and "fr" which provide translations of hello_id, the panel will now display "hello!" or "bonjour !", according to the current locale: t...
...l using a statement like: # does not work. html tags are inserted as text. ...
..._id= <blink>hello!</blink> localizing element attributes this feature is new in firefox 39 you can localize certain attributes of elements with an l10n-id by setting its value with l10n-id.attributename in the properties file like: hello_id.accesskey= h the following attributes are supported: accesskey alt label title placeholder further the localization of the aria attributes aria-label, aria-valuetext and aria-moz-hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamozhint using localized strings in javascript to reference localized strings from your main add-on code, you do this: var _ = require("sdk/l10n").get; console.log(_("hello_id")); assigning to "_" in particular is not required, but is a convention from the gettext tools and...
...And 2 more matches

Custom XUL Elements with XBL - Archive of obsolete content
ip with each other, it makes sense to keep them together. as for the css file, it's usually good to have a single file declaring all bindings in your extension. content under the content tag you define the xul content that will be displayed for your element. ...
...s in your extension. content under the content tag you define the xul content that will be displayed for your element. <content> <xul:hbox> <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> <xul:label xbl:inherits="value=name" /> <xul:description xbl:inherits="value=greeting" /> </xul:vbox> <xul:vbox> <xul:button label="&xulshoolhello.remove.label;" accesskey="&xulshoolhello.remove.accesskey;" oncommand="document.getbindingparent(this).remove(event);" /> </xul:vbox> </xul:hbox> </content> our element is very simple, displaying an image, a couple of text lines and a button. here are a couple of important things to notice: the "xul:" namespace must be used for all xul tags you have in ...
...to notice: the "xul:" namespace must be used for all xul tags you have in your content. the xbl:inherits attribute lets your inner xul use the attributes that are set on the node. so, if you have this: <xshelloperson name="pete" greeting="good morning" image="" />, then those attribute values are "inherited" to the content nodes that have this special attribute. the value attribute of the xul:label element would be "pete". the oncommand attribute of the button has some code you've probably never seen before: document.getbindingparent(this). this code gets the dom object that corresponds to the xshelloperson tag, allowing you access to its methods and properties. in this case we're calling the remove method, which we will discuss later on. if you need to create a container element, or any...
...And 2 more matches

Settings - Archive of obsolete content
k will automatically generate a user interface from this specification that users of your jetpack may use to customize the settings. the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
...ers of your jetpack may use to customize the settings. the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
... open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
...And 2 more matches

Settings - Archive of obsolete content
will automatically generate a user interface from this specification that users of your jetpack may use to customize the settings. the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
...rs of your jetpack may use to customize the settings. the user can open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
... open this interface from the "settings" button next to your jetpack on the "installed features" tab of the about:jetpack page. ...
...And 2 more matches

Positioning - Archive of obsolete content
y clicking in the same location. for a tooltip, the position attribute controls how the tooltip is anchored to the element with the tooltip attribute. you wouldn't normally use the position attribute on a tooltip; instead you would just want the tooltip to appear at its default position which is near the mouse pointer. for instance: <menupopup id="edititems" position="end_before"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="clipboard" popup="edititems"/> in this example, a menupopup is attached to a label via the popup attribute, which will cause the popup to appear when the label is left-clicked. the position attribute is used to specify that the popup should appear at the 'end_before' location, which will cause the popup t...
...there are several possible values for the position attribute, described here, along with images which show how a popup would be aligned in each case. the following assumes a left to right user interface. for right to left user interfaces, the same values should be used, but will cause the popup to appear and be aligned on the opposite side. ...
... if the menupopup did not have a position attribute, the popup would appear at its default position, in this case, the mouse position. when opening a popup via a script using the openpopup method, the second argument may be used to specify the position instead of using the position attribute. for example, the following might be used with the above example to open the popup: menupopup.openpopup(label, "end_before", 0, 0, false, false); note that the position has been set to 'end_before', as above. when both are used, the value supplied to openpopup overrides the attribute. however, if the attributesoverride argument to openpopup (the last argument, false in the example above) was true, the attribute would override the value supplied to openpopup. this allows the script and xul code to coord...
...And 2 more matches

Building Hierarchical Trees - Archive of obsolete content
examined for results using the photo as the starting point instead of the top level ref value. ...
... point instead of the top level ref value. ...
...flags="dont-build-content" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <treecols> <treecol id="address" primary="true" label="address" flex="1"/> <treecol id="floors" label="floors" flex="1"/> </treecols> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.xulplanet.com/rdf/address"/> <treecell label="rdf:http://www.xulplanet.com/rdf/floors"/> </treerow> </treeitem> </treechildren> </rule> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> </treerow> </treeitem> </t...
...And 2 more matches

Sorting Results - Archive of obsolete content
the column headers, however, you can programmatically change the sort as well. sorting tree results we'll examine sorting of trees first since trees are the most common element used with sorted items. using a tree builder, you can sort the results in a tree by a column. to do this, place a sort attribute on a treecol element referring to the variable to sort by for that column. <treecol id="name" label="name" sort="?name" flex="1"/> <treecol id="date" label="date" sort="?date" flex="1"/> in this example, the first column will be sorted by the ?name variable and the second column by the ?date variable. when the sort is ascending, the tree rows will be sorted in alphabetical order. when the sort is descending, the tree rows will be sorted in the reverse order. for natural sorting, the rows will ...
... sorted by other means. if you don't want to allow sorting by a certain column, you can leave out the sort attribute. only specify this attribute on columns that you wish to allow the user to sort by. here is a complete example of sorting a tree. the sort attribute should be set to the variable that holds the values to sort by. usually, this would be the same variable that is used to generate the label for the cells in that column, however this is not actually necessary. for instance, in the example the second column sorts by date, but if you were to use a different variable such as ?description, the tree would sort by the value of the description variable for each row. in almost all situations however, you would normally sort using the same variable used for the label value. however, one situa...
.../rdf:rdf> you can also specify parsetype="integer" for numbers which will allow sorting numerically. by specifing different types for different values, you can sort alphabetically, numerically or by date. if you are using the simple rdf query syntax, there are no variables, so you need to specify the full predicate including the rdf: prefix in the sort attribute. for instance: <treecol id="name" label="name" sort="rdf:http://purl.org/dc/elements/1.1/title" flex="1"/> note that all of this discussion about sorting only applies to tree builders. for other elements or content trees, sorting is done by placing the attributes on the root element. content sorting for content builders (templates that do not use flags="dont-build-content"), sorting is done by placing the sort and sortdirection attrib...
...And 2 more matches

Static Content - Archive of obsolete content
ontent in a template. the static content is any content that is a sibling of the template element. this content is displayed as is without affecting the generated content from the template. ...
...the content will be displayed just like it would be as if the template wasn't present. that is, before the template is examined, the menulist would have one i...
...ue="?country"/> </menupopup> </action> </template> </menulist> the only difference between the previous example and this one is that the menulist element has some additional content added before the template. the content will be displayed just like it would be as if the template wasn't present. that is, before the template is examined, the menulist would have one item in it, with the label 'all'. the template generates two results as before, one for each country, and appends a menuitem for each one. one interesting thing about this example is that only one menupopup will be created, even though there are two in the code, one outside the template and another one inside the action body. this demonstrates how the template builder generates content, and the specifics of how this is don...
...And 2 more matches

XML Templates - Archive of obsolete content
n name="laura secord" gender="female"/> </people> xml query syntax the query syntax is fairly simple for xml datasources. just place an expr attribute on the query element containing an xpath expression returns the set of results to output. here is an example: <listbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the expr attribute is a very simple xpath expression which simply retrieves the person elements from within the datasource. as there are five in the xml document, five results will be generated. the action element defines the content to generate for each result. the content of the action element will be generated and repeated for each result, whic...
...s element are only copied once. this is useful when recursive generation or multiple rules are used, and we'll see examples of why this is useful later. for an rdf query, the uri attribute specifies the member variable; for an xml query the member variable is always '?' so the value of the uri attribute for xml templates should always be the single question mark character as in this example. the label attribute has been set to a special value ?name. when a question mark character followed by a string appears in an attribute value, the label value is not directly, but instead the value of an attribute for the source xml is used. for each node generated by the xpath expression used in the query, the attribute on the generated xml node is taken and substituted for the question mark and following ...
... label value is not directly, but instead the value of an attribute for the source xml is used. for each node generated by the xpath expression used in the query, the attribute on the generated xml node is taken and substituted for the question mark and following string. in the above example, the use of the ?name value, causes the name attribute on each result node to be used as the value of the label. you can see the name attributes in the original xml data above. this substitution occurs for any attribute within the action body, so you can also set other attributes with this technique. in this example, an hbox element containing a button and a label is generated for each result. <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> ...
...And 2 more matches

Adding Event Handlers - Archive of obsolete content
ld be the event name preceded by the word 'on'. for example, the corresponding attribute for the 'command' event is 'oncommand'. the value of the attribute should be some script that should be executed when the event occurs. typically, this code will be short or just call a function defined in a separate script. ...
...if a second listener (the oncommand attribute) were placed on the button, its code will be called first, followed by the handler on the vbox. ...
...if a second listener (the oncommand attribute) were placed on the button, its code will be called first, followed by the handler on the vbox. event handlers are passed the event object as an implied argument called 'event'. ...
...And 2 more matches

Adding Style Sheets - Archive of obsolete content
manifest file and install the skin. our find files dialog example let's modify the find files dialog so that its style comes from a separate style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
...log so that its style comes from a separate style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
...separate style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
...And 2 more matches

Creating Dialogs - Archive of obsolete content
is pressed and the docancel() function is called when the cancel button is pressed. the two functions dook() and docancel() both return true, which indicates that the dialog should be closed. if the dialog shouldn't be closed, false should be returned instead. this would be used, for example, if an invalid value was entered in a field in the dialog. amongst other useful attributes are buttonlabelaccept - label to appear on the accept button egsave buttonaccesskeyaccept - access key to use for the accept button egs defaultbutton - button is activated when the enter key is pressed note: the label attributes are required by remote sites and are probably missing in the above examples due to bug 224996. example dialog with more features <?xml version="1.0"?> <?xml-stylesheet href="chro...
...re probably missing in the above examples due to bug 224996. ...
...> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favourite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favourite fruit"/> <radio id="orange" label="oranges because they are fruity"/> <r...
...And 2 more matches

Groupboxes - Archive of obsolete content
describes a way to include elements into groups groupboxes the groupbox element is used to group related xul elements together, much like the html fieldset element is used to group html elements. the groupbox is a type of box, and the elements it contains are aligned according to the xul box rules. however, there are several differences between groupboxes and regular boxes: the groupbox can be labeled using the caption element. the groupbox is displayed in a special way—usually with a beveled border and a caption, although you can change the appearance using css. you can create a caption for your groupbox by inserting a caption element as the first child. groupboxes are box elements, so you can use the box attributes, such as orient and flex. a simple groupbox example the example below ...
......
...the text elements stack in a single column. more complex captions you can also add child elements inside the caption element to create a more complex caption. for example, mozilla's font preferences panel uses a drop-down menu as a caption. although any content can be used, usually you would use a checkbox or dropdown menu. example 2 : source view <groupbox flex="1"> <caption> <checkbox label="enable backups"/> </caption> <hbox> <label control="dir" value="directory:"/> <textbox id="dir" flex="1"/> </hbox> <checkbox label="compress archived files"/> </groupbox> in this example, a checkbox has been used as a caption. we might use a script to enable and disable the contents of the groupbox when the checkbox is checked and unchecked. the groupbox contains a horizontal...
...And 2 more matches

box - Archive of obsolete content
f the box has an orient attribute that is set to horizontal, the child elements are laid out from left to right in the order that they appear in the box. if orient is set to vertical, the child elements are laid out from top to bottom. child elements do not overlap. the default orientation is horizontal. more information is available in the xul tutorial. ...
...izontal, the child elements are laid out from left to right in the order that they appear in the box. if orient is set to vertical, the child elements are laid out from top to bottom. child elements do not overlap. the default orientation is horizontal. more information is available in the xul tutorial. ...
...ts are laid out from left to right in the order that they appear in the box. if orient is set to vertical, the child elements are laid out from top to bottom. child elements do not overlap. the default orientation is horizontal. more information is available in the xul tutorial. ...
...And 2 more matches

grid - Archive of obsolete content
ements within the rows and use the columns only to define their flexibility and width. whichever of the columns and rows is last in the grid is displayed on top; commonly the columns element appears in the grid first. more information is available in the xul tutorial. example <!-- groupbox containing a grid. ...
...id is displayed on top; commonly the columns element appears in the grid first. more information is available in the xul tutorial. example <!-- groupbox containing a grid. ...
...ormation is available in the xul tutorial. example <!-- groupbox containing a grid. ...
...And 2 more matches

menubar - Archive of obsolete content
g the top of the screen, and all non-menu related elements inside the menubar will be ignored. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...the menubar will be ignored. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...o look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...And 2 more matches

tab - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single tab which should be placed inside a tabs element. the user may click a tab to bring the associated page of the tabbox to the front. more information is available in the xul tutorial. attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the character...
... afterselected type: boolean this is set to true if the tab is immediately after the currently selected tab. this is automatically set when needed and you shouldn't adjust it manually. ...
...nd the selected tab. beforeselected type: boolean this is set to true if the tab is immediately before the currently selected tab. this is set automatically set when needed and you shouldn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.
...And 2 more matches

tabbox - Archive of obsolete content
d the second a tabpanels element which contains the contents of the pages. more information is available in the xul tutorial. ...
...t which contains the contents of the pages. more information is available in the xul tutorial. ...
...of the pages. more information is available in the xul tutorial. ...
...And 2 more matches

Theme changes in Firefox 2 - Archive of obsolete content
ected="true"] you may of course wish to change other styles as well. feeds/addfeedreader.css this is a new file in firefox 2. it's used to skin the window displayed to add a new feed reader, which is defined in the file browser/feeds/addfeedreader.xul. #imagebox the box that displays the feed icon. #content style information for the content area of the window. #sitelabel style information for the site label. feeds/subscribe.css this is a new file in firefox 2. it skins the window displayed to subscribe to an rss feed, which is at browser/feeds/subscribe.xhtml. #application #feedbody #feedchangesubscribeoptions #feederror #feedheader #feedheader[firstrun="true"] #feedheader[firstrun="true"] #feedintrotext #feedheader[firstrun="true"] #feeds...
...mode="text"] .toolbarbutton-1 > stack > toolbarbutton > .toolbarbutton-text toolbar[mode="text"] .toolbarbutton-icon you may wish to change other styles as well. ...
...ors #extensioncontributors #extensioncreatorlabel the following styles were added: .indent .sectiontitle you may wish to make changes to other styles as well. ...
...And 2 more matches

::-ms-check - Archive of obsolete content
*/ color: red; /* this will make the circle red when the button is checked.
...*/ color: red; /* this will make the circle red when the button is checked. */ } input[type=checkbox]...
...*/ color: red; /* this will make the circle red when the button is checked. */ } input[type=checkbox]::-ms-check { border-color: green; /* this will ma...
...And 2 more matches

::-ms-clear - Archive of obsolete content
*/ /* the cross can be...
...*/ /* the cross can be hidden by setting the display attr...
...*/ /* the cross can be hidden by setting the display attribute as "none" */ } result the following screenshot shows what the feature will look like: ...
...And 2 more matches

Video and Audio APIs - Learn web development
tml open the html index file. ...
... the <video> element contain...
... the <video> element contains two <source> elements so that different formats can be loaded depending on the b...
...And 2 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
iew" template, when we are just viewing a todo; this is what we’ve used in rest of the tutorial so far. the "editing" template, when we are editing a todo. we're about to create this. ...
... are just viewing a todo; this is what we’ve used in rest of the tutorial so far. the "editing" template, when we are editing a todo. we're about to create this. ...
...torial so far. the "editing" template, when we are editing a todo. we're about to create this. ...
...And 2 more matches

Using Vue computed properties - Learn web development
structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn how to use vue computed properties. using computed properties the aim here is to add a summary count of our to-do list. this can be useful for users, while also serving to label the list for assistive technology. if we have 2 of 5 items completed in our to-do list, our summary could read "3 items completed out of 5". while it might be tempting to do something like this: <h2>{{todoitems.filter(item => item.done).length}} out of {{todoitems.length}} items completed</h2> it would be recalculated on every render. for a small app like this, that probably doesn't matter too...
...d todoitems, and return a string reporting this. computed: { listsummary() { const numberfinisheditems = this.todoitems.filter(item =>item.done).length return `${numberfinisheditems} out of ${this.todoitems.length} items completed` } } now we can add {{listsummary}} directly to our template; we'll add this inside an <h2> element, just above our <ul>. ...
...d: { listsummary() { const numberfinisheditems = this.todoitems.filter(item =>item.done).length return `${numberfinisheditems} out of ${this.todoitems.length} items completed` } } now we can add {{listsummary}} directly to our template; we'll add this inside an <h2> element, just above our <ul>. we'll also add an id and an aria-labelledby attribute to assign the <h2> contents to be a label for the <ul> element. ...
...And 2 more matches

Accessibility API cross-reference
specific kind of button that drops down a menu, msaa only buttonmenu n/a n/a expressed with aria-haspopup on an element with a button role represents the system's caret caret n/a n/a n/a a brief portion of text describing a table or figure. ...
...of button that drops down a menu, msaa only buttonmenu n/a n/a expressed with aria-haspopup on an element with a button role represents the system's caret caret n/a n/a n/a a brief portion of text describing a table or figure. ...
... expressed with aria-haspopup on an element with a button role represents the system's caret caret n/a n/a n/a a brief portion of text describing a table or figure. ...
...And 2 more matches

Application Translation with Mercurial
w to revert changes and also pull changes and reapply your local changes. go back to the localization directory: cd /c/mozilla/de-mozilla-aurora initiate mercurial queues: hg qinit get to know the translation style for having good chances that the translation suggestions get accepted, they should match the translation style of the texts in the application already translated. in general, the labels in the applications should have the same style like the operating system, e.g. use the same order of subject, verb and objects; decline verbs or not like the operating system does. the following resources can help figuring out the translation style and translate according to them: check your localization team's page by clicking on the team with your language code (e.g. "de" for german) for a...
...(e.g. "de" for german) for a style guide (e.g. style guide for german). transvision offers searching for texts and text ids ("entities" or "keys"), allowing to quickly find translations for already translated texts. microsoft's terminology search allows fast lookups of localized technical terms. choosing what to translate go to the localization status page and click on the '<number> missing' label of the firefox branch on which you want to translate, e.g. fx_aurora. the page which opens has a bar holding information about how many texts (strings) have already been translated, how many there are in english and your locale and have the same text, and how many are missing in your local. the interesting part follows below as list of missing texts. the first line shows the locale for which t...
....learnmore and the line <!-- to be removed post-australis --> to the localized file. this text is a comment (which in .dtd files always can be found between <!-- and -->). there is no need to translate this text. ...
...And 2 more matches

Localization content best practices
nd don't have problems working with vcs systems. it's important to consider this when adding strings, and especially localization comments for strings that contain references, or obscure technical details. localization files choose good key ids the ids (names) chosen for your keys, regardless of the file format, should always be descriptive of the string, and its role in the interface (button label, title, etc.). think of them as long variable names. when you have to change a key id, adding a progressive number to the existing key should always be used as a last resort. for example, suppose this string needs to be changed from "event" to "add new event": new-event-header = event add-new-event-header is definitely a better choice for the new string than new-event-header1. if a string is t...
...ng a progressive number to the existing key should always be used as a last resort. for example, suppose this string needs to be changed from "event" to "add new event": new-event-header = event add-new-event-header is definitely a better choice for the new string than new-event-header1. if a string is tied to an accesskey or a tooltip, use string ids that highlight this relation: neweventbtn.label = add event neweventbtn.accesskey = a neweventbtn.tooltip = add a new event don't duplicate ids if you're adding new strings, check that you're not duplicating an existing id. depending on the parser logic, one of these two translations will be ignored. add localization notes localizers usually work on the localizable files without the context of the source files including the localized stri...
...ings in different contexts this is particularly important for mobile, where different context often means different font and available space for the string. for example, if you're adding a new menu item in settings on android, don't use the same string for the menu item and the following screen header. another example, some locales use nouns for titles, and verbs for actions (for example button labels). sometimes they coincide with english, but they rarely do in other languages. take bookmark: it can be both a noun and a verb in english. a developer could be tempted to reuse the same string "bookmark" in the button to add a bookmark, and in the header for the next dialog. this won't work in some languages. avoid unnecessary complexity in strings consider this string: privacy-link = <p>by p...
...And 2 more matches

PKCS11 Implement
okeninfo if a token is a permanent device (that is, if the ckf_removable_device flag is not set), nss calls c_gettokeninfo only on startup or when it loads a new module. if the token is a removable device, nss may call c_gettokeninfo anytime it's looking for a new token to check whether the token is write protected, whether it can generate random numbers, and so on. the nss expects ck_token_info.label to contain the name of the token. if the ckf_write_protected flag is set, nss won't use the token to generate keys. the nss interprets the combination of the ckf_login_required and ckf_user_pin_initialized flags as shown in table 1.1. nss's interpretation of the ckf_login_required and ckf_user_pin_initialized flags cfk_login_required cfk_user_pin_initialized nss assumes that: false fal...
...xample, if a particular token can't do des encryption, nss decrypts the key, then copies it over to the token that can do des encryption. the nss creates certificates as token objects. it loads the token object only if the private key for that certificate exists on the token and was generated by nss. all the fields defined by pkcs #11 for certificates are set. the nss also sets the cka_id and cka_label attributes for the token. currently, the cka_id attribute is set to the modulus for rsa or to the public value on dsa. the nss may hash this value in the future. in either case, nss does set the cka_id attribute and expects it to remain the same. if a certificate is loaded, the value of the certificate's cka_id attribute must match the value of the cka_id attribute for the corresponding private k...
...ka_id attribute is set to the modulus for rsa or to the public value on dsa. the nss may hash this value in the future. in either case, nss does set the cka_id attribute and expects it to remain the same. if a certificate is loaded, the value of the certificate's cka_id attribute must match the value of the cka_id attribute for the corresponding private key, and the value of the certificate's cka_label attribute must also match the value of the cka_label attribute for the private key. for private keys that don't include certificates, nss doesn't set the cka_label attribute, or sets it to null, until it receives the certificate. c_copyobject the nss rarely calls c_copyobject but may sometimes do so for non-token private keys. c_destroyobject the nss calls c_destroyobject to destroy certifi...
...And 2 more matches

nsIAccessibleRelation
ly. constants constant value description relation_nul 0x00 relation_controlled_by 0x01 some attribute of this object is affected by a target object. relation_controller_for 0x02 this object is interactive and controls some attribute of a target object. ...
...tant value description relation_nul 0x00 relation_controlled_by 0x01 some attribute of this object is affected by a target object. relation_controller_for 0x02 this object is interactive and controls some attribute of a target object. relation_label_for 0x03 this object is label for a target object. ...
...elation_nul 0x00 relation_controlled_by 0x01 some attribute of this object is affected by a target object. relation_controller_for 0x02 this object is interactive and controls some attribute of a target object. relation_label_for 0x03 this object is label for a target object. relation_labelled_by 0x04 this object is labelled by a target object. ...
...And 2 more matches

nsIAccessibleRole
different kinds of information. it is used for xul:statusbar. role_table 24 represents a table that contains rows and columns of cells, and optionally, row headers and column headers. it is used for html:table, role="grid". also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell. role_columnheader 25 represents a column header, providing a visual label for a column in a table. it is used for xul tree column headers, html:th, role="colheader". also refer to role_table. role_rowheader 26 represents a row header, which provides a visual label for a table row. it is used for role="rowheader". also, see role_table. role_column 27 represents a column of cells within a table. also, see role_table. role_row 28 represents a row of cells within a t...
...mn of cells within a table. also, see role_table. role_row 28 represents a row of cells within a table. also, see role_table. role_cell 29 represents a cell within a table. it is used for html:td, xul:tree cell and xul:listcell. also, see role_table. role_link 30 represents a link to something else. this object might look like text or a graphic, but it acts like a button. it is used for xul:label@class="text-link", html:a, html:area, xforms:trigger@appearance="minimal". role_helpballoon 31 displays a help topic in the form of a tooltip or help balloon. role_character 32 represents a cartoon-like graphic object, such as microsoft office assistant, which is displayed to provide help to users of an application. role_list 33 represents a list box, allowing the user to select one or more...
...ed for xul:tab, role="treeitem". also refer to role_pagetablist. role_propertypage 38 represents a property sheet. it is used for xul:tabpanel, role="tabpanel". role_indicator 39 represents an indicator, such as a pointer graphic, that points to the current item. role_graphic 40 represents a picture. is is used for xul:image, html:img. role_statictext 41 represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. is is used for xul:label, xul:description, html:label, role="label", or xforms:output. role_text_leaf 42 represents selectable text that allows edits or is designated read-only. role_pushbutton 43 represents a push button control. it is used for xul:button, html:button, role="button", xforms:trigg...
...And 2 more matches

nsIMsgFilter
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilter.idl attributes type attribute nsmsgruleactiontype type; priority // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; targetfolderuri // target folder.. ...
...defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilter.idl attributes type attribute nsmsgruleactiontype type; priority // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; targetfolderuri // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; label // target label. ...
... public/ nsimsgfilter.idl attributes type attribute nsmsgruleactiontype type; priority // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; targetfolderuri // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; label // target label. ...
...And 2 more matches

Dominators view - Firefox Developer Tools
nators view consists of two panels: the dominators tree panel shows you which nodes in the snapshot are retaining the most memory the retaining paths panel (new in firefox 47) shows the 5 shortest retaining paths for a single node. dominators tree panel the dominators tree tells you which objects in the snapshot are retaining the most memory. in the main part of the ui, the first row is labeled "gc roots". immediately underneath that is an entry for: every gc root node. in gecko, there is more than one memory graph, and therefore more than one root. there may be many (often temporary) roots. for example: variables allocated on the stack need to be rooted, or internal caches may need to root their​ elements. any other node that's referenced from two different roots (since in this...
...is very small: almost all of its retained size is in the nodes that it dominates. by clicking on the disclosure arrow next to the function, we can see those nodes. in this way you can quickly get a sense of which objects retain the most memory in the snapshot. you can use alt + click to expand the whole graph under a node. ...
...you can use alt + click to expand the whole graph under a node. call stack in the toolbar at the top of the tool is a dropdown called "label by": by default, this is set to "type". however, you can set it instead to "call stack" to see exactly where in your code the objects are being allocated. this option is called "allocation stack" in firefox 46. to enable this, you must check the box labeled "record call stacks" before you run the code that allocates the objects. then take a snapshot, then select "call stack" in the "label by" drop-down. now the node's name will contain the name of the function that allocated it, and the file, line number and character position of the exact spot where the function allocated it. clicking the file name will take you to that spot in the debugger. ...
...And 2 more matches

HTMLFormElement - Web APIs
info'].value would also work } function setforminfo(f){ // argument should be a form element reference. ...
...(f){ // argument should be a form element reference. ...
...should be a form element reference. ...
...And 2 more matches

The HTML DOM API - Web APIs
htmlbodyelement htmlbuttonelement htmlcanvaselement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement html...
... disabled if it's not already disabled. otherwise, the code ensures that the button is enabled. with this in place, the "send" button is always enabled whenever the user name input field has a value, and disabled when it's empty. html the html for the form looks like this: <p>please provide the information below. ...
...herwise, the code ensures that the button is enabled. with this in place, the "send" button is always enabled whenever the user name input field has a value, and disabled when it's empty. html the html for the form looks like this: <p>please provide the information below. ...
...And 2 more matches

Using IndexedDB - Web APIs
://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <h1>indexeddb demo: storing blobs, e-publication example</h1> <div class="note"> <p> works and tested with: </p> <div id="compat"> </div> </div> <div id="msg"> </div> <form id="register-form"> <table> <tbody> <tr> <td> <label for="pub-title" class="required"> title: </label> </td> <td> <input type="text" id="pub-title" name="pub-title" /> </td> </tr> <tr> <td> <label for="pub-biblioid" class="required"> bibliographic id:<br/> <span class="note">(isbn, issn, etc.)...
...required"> title: </label> </td> <td> <input type="text" id="pub-title" name="pub-title" /> </td> </tr> <tr> <td> <label for="pub-biblioid" class="required"> bibliographic id:<br/> <span class="note">(isbn, issn, etc.)</span> </label> </td> <td> <input type="text" id="pub-biblioid" name="pub-biblioid"/> </td> </tr> <tr> <td> <label for="pub-year"> year: </label> </td> <td> <input type="number" id="pub-year" name="pub-year" /> </td> </tr> ...
...ub-biblioid" name="pub-biblioid"/> </td> </tr> <tr> <td> <label for="pub-year"> year: </label> </td> <td> <input type="number" id="pub-year" name="pub-year" /> </td> </tr> </tbody> <tbody> <tr> <td> <label for="pub-file"> file image: </label> </td> <td> <input type="file" id="pub-file"/> </td> </tr> <tr> <td> <label for="pub-file-url"> online-file image url:<br/> <span class="note">(same origin url)</span> </label> </...
...And 2 more matches

Intersection Observer API - Web APIs
old for each percentage point of visibility; that is, the intersectionobserver.thresholds array is [0.00, 0.01, 0.02, ..., 0.99, 1.00]. the second box has a single threshold, at the 50% mark. the third box has thresholds every 10% of visibility (0%, 10%, 20%, etc.). the last box has thresholds each 25%. ...
...ility; that is, the intersectionobserver.thresholds array is [0.00, 0.01, 0.02, ..., 0.99, 1.00]. the second box has a single threshold, at the 50% mark. the third box has thresholds every 10% of visibility (0%, 10%, 20%, etc.). the last box has thresholds each 25%. ...
...r.thresholds array is [0.00, 0.01, 0.02, ..., 0.99, 1.00]. the second box has a single threshold, at the 50% mark. the third box has thresholds every 10% of visibility (0%, 10%, 20%, etc.). the last box has thresholds each 25%. ...
...And 2 more matches

ARIA live regions - Accessibility
ing because of rapid updates or other reasons, silence them with aria-live="off". dropdown box updates useful onscreen information a website specializing in providing information about planets provides a dropdown box. when a planet is selected from the dropdown, a region on the page is updated with information about the selected planet. ...
...er reasons, silence them with aria-live="off". dropdown box updates useful onscreen information a website specializing in providing information about planets provides a dropdown box. when a planet is selected from the dropdown, a region on the page is updated with information about the selected planet. ...
...uld always present the live region as a whole, even if only part of the region changes. the possible settings are: false or true. the default setting is false. aria-relevant: the aria-relevant=[list_of_changes] is used to set what types of changes are relevant to a live region. the possible settings are one or more of: additions, removals, text, all. the default setting is: additions text. aria-labelledby: the aria-labelledby=[idlist] is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region. and label identifiers are separated with a space. aria-describedby: the aria-describedby=[idlist] is used to associate a region with its descriptions, similar to aria-controls but instead associating descriptions to the region and description id...
...And 2 more matches

ARIA: Complementary role - Accessibility
roles are intended to be used sparingly, to identify larger overall sections of the document. using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page. best practices prefer html using the <aside> element will automatically communicate a section has a role of complementary. if at all possible, prefer using it instead. ...
...ise" in screen readers, making it difficult to understand the overall layout of the page. best practices prefer html using the <aside> element will automatically communicate a section has a role of complementary. if at all possible, prefer using it instead. ...
...cult to understand the overall layout of the page. best practices prefer html using the <aside> element will automatically communicate a section has a role of complementary. if at all possible, prefer using it instead. labeling landmarks multiple landmarks if there is more than one complementary landmark role or <aside> element in a document, provide a label for each landmark using the aria-label attribute, or, if the aside has an appropriately descriptive title, point to it with the aria-labelledby attribute. ...
...And 2 more matches

ARIA: contentinfo role - Accessibility
making it difficult to understand the overall layout of the page. one contentinfo landmark per page the <body> element there should be only one contentinfo landmark per document, used as the immediate descendant of the <body> element. mega-footers do not nest additional <footer> elements or contentinfo landmarks inside of the document's footer. use other content sectioning elements instead. ...
... only one contentinfo landmark per document, used as the immediate descendant of the <body> element. mega-footers do not nest additional <footer> elements or contentinfo landmarks inside of the document's footer. use other content sectioning elements instead. labeling landmarks multiple landmarks if there is more than one contentinfo landmark role or <footer> element in a document, provide a label with the aria-label attribute for each landmark. ...
...ediate descendant of the <body> element. mega-footers do not nest additional <footer> elements or contentinfo landmarks inside of the document's footer. use other content sectioning elements instead. labeling landmarks multiple landmarks if there is more than one contentinfo landmark role or <footer> element in a document, provide a label with the aria-label attribute for each landmark. this label will allow assitive technology users to quickly understand the purpose of each landmark. <body> ... ...
...And 2 more matches

:default - CSS: Cascading Style Sheets
<input type="radio"> match if they have the checked attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input> types that submit forms, like image or submit. ...
...if they have the checked attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input> types that submit forms, like image or submit. ...
...rm>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input> types that submit forms, like image or submit. ...
...And 2 more matches

:invalid - CSS: Cascading Style Sheets
s any <input> or other <form> element whose contents fail to validate. /* selects any invalid <input> */ input:invalid { background-color: pink; } this pseudo-class is useful for highlighting field errors for the user. syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
...t whose contents fail to validate. /* selects any invalid <input> */ input:invalid { background-color: pink; } this pseudo-class is useful for highlighting field errors for the user. syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
...d { background-color: pink; } this pseudo-class is useful for highlighting field errors for the user. syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
...And 2 more matches

Border-radius generator - CSS: Cascading Style Sheets
over { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: ce...
...mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -web...
...***************************************************/ /******************************************************************************/ #radius-lock { width: 200px; height: 75px; margin: 30px 0 0 30px; padding: 30px; border: 3px solid #555; border-radius: 10px; position: relative; float: left; } #radius-lock .ui-checkbox { color: #fff; position: absolute; } #radius-lock .ui-checkbox > label { height: 20px; width: 34px; padding: 0; } #radius-lock .info { height: 20%; width: 100%; line-height: 20%; font-size: 20px; text-align: center; position: relative; top: 40%; } #radius-lock [data-topic="top-left"] { top: 10px; left: 10px; } #radius-lock [data-topic="top-right"] { top: 10px; right: 10px; } #radius-lock [data-topic="bottom-right"] { bottom: 10px; right: 10px; } ...
...And 2 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
orem</div> firefox chrome safari edge checkbox-container div { color: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; } <div>lorem</div> firefox the element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. ...
...afari edge checkbox-container div { color: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; } <div>lorem</div> firefox the element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. normally it would contain a label and a checkbox. ...
...or: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; } <div>lorem</div> firefox the element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. normally it would contain a label and a checkbox. ...
...And 2 more matches

HTML attribute: pattern - HTML: Hypertext Markup Language
d against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from javascript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end. ...
...slightly different from javascript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end. ...
...the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end. examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each. i...
...And 2 more matches

<optgroup> - HTML: Hypertext Markup Language
es no role permitted dom interface htmloptgroupelement note: optgroup elements may not be nested. attributes this element includes the global attributes. disabled if this boolean attribute is set, none of the items in this option group is selectable. often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones. ...
... note: optgroup elements may not be nested. attributes this element includes the global attributes. disabled if this boolean attribute is set, none of the items in this option group is selectable. often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones. label the name of the group of options, which the browser can use when labeling the options in the user interface. ...
...lean attribute is set, none of the items in this option group is selectable. often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones. label the name of the group of options, which the browser can use when labeling the options in the user interface. this attribute is mandatory if this element is used. ...
...And 2 more matches

<track>: The Embed Text Track element - HTML: Hypertext Markup Language
able for users who are deaf or when the sound is muted. descriptions textual description of the video content. suitable for users who are blind or where the video cannot be seen. chapters chapter titles are intended to be used when the user is navigating the media resource. metadata tracks used by scripts. not visible to the user. label a user-readable title of the text track which is used by the browser when listing available text tracks. src address of the track (.vtt file). must be a valid url. this attribute must be specified and its url value must have the same origin as the document — unless the <audio> or <video> parent element of the track element has a crossorigin attribute. srclang language of the track text dat...
...ed. usage notes track data types the type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. the element points to a source file containing timed text that the browser exposes when the user requests additional data. a media element cannot have more than one track with the same kind, srclang, and label. detecting cue changes the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed. this happens even if the track isn't associated with a media element. if the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the htmlt...
...</video> specifications specification status comment html living standardthe definition of 'track element' in that specification. living standard ...
...And 2 more matches

Example - SVG: Scalable Vector Graphics
very natural-looking behavior. this is done completely in w3c standards–xhtml, svg, and javascript–no flash or any vendor-specific extensions. this example should work in firefox 1.5 and above. ...
...t–no flash or any vendor-specific extensions. this example should work in firefox 1.5 and above. view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles. first, each mote tries to move towards ...
...ilme' href='#'>nick johnson</a> <script type='text/javascript'> <![cdata[ // foil spam bots var email = '@riovia.net'; email ='nick' + email; document.getelementbyid('emailme').href = 'mailto:'+email; ]]> </script> this software is free for you to use in any way whatsoever, and comes with no warranty at all. ...
...And 2 more matches

XUL Migration Guide - Archive of obsolete content
accessing tabbrowser this example uses the action button api, which is only available from firefox 29 onwards. the tabs/utils module gives you direct access to the tabbrowser object and the xul tab ob...
...this is useful, because it means that if a malicious web page is able to inject code into your add-on's context, it is only able to use the apis you have imported. for e...
...rect access to the components object, which you can then use to load and access any xpcom object. the following complete add-on uses nsipromptservice to display an alert dialog: var {cc, ci} = require("chrome"); var promptsvc = cc["@mozilla.org/embedcomp/prompt-service;1"]. getservice(ci.nsipromptservice); require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png", onclick: function() { promptsvc.alert(null, "my add-on", "hello from xpcom"); } }); it's good practice to encapsulate code which uses xpcom by packaging it in its own module. for example, we could package the alert feature implemented above using a script like: var {cc, ci} = require("chrome"); var promptsvc = cc["@mozilla.org/embedcomp/pr...
... ci} = require("chrome"); var promptsvc = cc["@mozilla.org/embedcomp/prompt-service;1"]. getservice(ci.nsipromptservice); exports.alert = function(title, text) { promptsvc.alert(null, title, text); }; if we save this as "alert.js" in our add-on's lib directory, we can rewrite main.js to use it as follows: require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png", onclick: function() { require("./alert").alert("my add-on", "hello from xpcom"); } }); one of the benefits of this is that we can control which parts of the add-on are granted chrome privileges, making it easier to review and secure the code. security implications we saw above that using powerful low-level modules like tab-browser increase...

simple-storage - Archive of obsolete content
onstruct array objects conditionally in your code, or you may zero them each time the construction code runs. for example, this add-on tries to store the urls of pages the user visits: var ss = require("sdk/simple-storage"); ss.storage.pages = []; require("sdk/tabs").on("ready", function(tab) { ss.storage.pages.push(tab.url); }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { console.log(ss.storage.pages); } }); but this isn't going to work, because it empties the array each time the add-on runs (for example, each time firefox is started). line 2 needs to be made conditional, so the array is only constructed if it does not already exist: if (!ss.storage.pages) ss.storage.pages = []; deleting data you c...
...ine 2 needs to be made conditional, so the array is only constructed if it does not already exist: if (!ss.storage.pages) ss.storage.pages = []; deleting data you can delete properties using the delete operator. ...
... the delete operator. ...
...").actionbutton({ id: "write", label: "write", icon: "./write.png", onclick: function() { ss.storage.value = 1; console.log("setting value"); } }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { console.log(ss.storage.value); } }); require("sdk/ui/button/action").actionbutton({ id: "delete", label: "delete", icon: "./delete.png", onclick: function() { delete ss.storage.value; console.log("deleting value"); } }); if you run it, you'll see that after clicking "read" after clicking "delete" gives you the expected output: info: undefined note that to run this add-on you'll have to save icon files named "write.png", "read.png", and "delete.png" to the add-on's "data" directory...

ui - Archive of obsolete content
o button, toolbar, and sidebar ui objects. this module exports constructors for the following: actionbutton togglebutton frame toolbar sidebar each object has its own reference page, linked above: for all the details please refer to the reference page. this page just provides a quick overview. actionbutton an action button is a button in the main firefox toolbar. you give it an icon, a label, and a click handler: var ui = require("sdk/ui"); var action_button = ui.actionbutton({ id: "my-button", label: "action button!", icon: "./icon.png", onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar. if it's standalone, it appears in the toolbar at the top right of the browser window: tog...
...a toolbar gives you a horizontal strip of space which you can use for presenting a more complex user interface. ...
... interface. ...
...you initialize a sidebar with a url pointing to an html docum...

Add a Context Menu Item - Archive of obsolete content
rned the basics of jpm. to add items and submenus to the firefox context menu, use the context-menu module. here's an add-on that adds a new context menu item. the item is displayed whenever something in the page is selected. ...
...appear: click it, and the selection is logged to the console (or the shell, if you're running an instance of firefox from the command line): info: elephantine lizard details all this add-on does is to construct a context menu item. you don't need to add it: once you have constructed the item, it is automatically added in the correct context. the constructor in this case takes four options: label, context, contentscript, and onmessage. label the label is just the string that's displayed. context the context describes the circumstances in which the item should be shown. the context-menu module provides a number of simple built-in contexts, including this selectioncontext(), which means: display the item when something on the page is selected. if these simple contexts aren't enough, yo...
...age you can add an image to a context menu item with the image option. this is a url pointing to a 16x16 icon that's displayed at the left side of the context menu item. ...
...16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35. from firefox 35 you can specify an access key using the accesskey option. this must be a single-character string. ...

Modifying the Page Hosted by a Tab - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm. to modify the page hosted by a particular tab, load one or more content scripts into it using attach() method of tab object. the job of these scripts is to interact with web content. here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory. you could download this icon: . this add-on creates a button with mozilla favicon as an icon. it has a click handler which fetches the active tab and ...
...he code easier to maintain, debug, and review. to do this, provide option contentscriptfile not contentscript, whose value is a url pointing to one or more content script files. for example, if we save the script above under the add-on's data directory in a file called my-script.js: var self = require("sdk/self"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscriptfile: self.data.url("my-script.js") }); } }); you can load more than one script, and the scripts can interact directly with each other. so you can load jquery, and then your content script can use that. loading several content script files the data assigned to con...
... be loaded in the same order as the vector. in the following example, we are loading two scripts, first.js & second.js. both scripts will be executed in the same context, so everything publicly defined in first.js will be accessible from second.js. ...
... injecting css unlike the page-mod api, tab.attach() doesn't enable yo...

Dialogs and Prompts - Archive of obsolete content
ur script. if they return anything but false, the dialog will be closed. buttons in <dialog> predefined there are six button types you can use in the buttons attribute of dialog. they are: accept — ok button. cancel — cancel button. disclosure — more info button. help — help button (doesn't work in thunderbird 1.0 bug 256915) extra1, extra2 — two buttons without any predefined labels or meaning. extra2 is positioned at the left side of the dialog (by default). for each of these buttons you can set their label, accesskey and oncommand handler by adding buttonlabel<buttonname>, buttonaccesskey<buttonname> and ondialog<buttonname> attributes to the dialog element. for example, to add an apply button to your dialog, use the following code: <dialog xmlns="http://www.mozilla.or...
...d handler by adding buttonlabel<buttonname>, buttonaccesskey<buttonname> and ondialog<buttonname> attributes to the dialog element. for example, to add an apply button to your dialog, use the following code: <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." buttons="accept,cancel,extra1" ondialogaccept="onaccept();" ondialogextra1="onapply();" buttonlabelextra1="apply" buttonaccesskeyextra1="a"> <!-- content --> </dialog> you can even get the element object for any of predefined buttons with gdialog.getbutton(dlgtype);, where gdialog is the <dialog> element and dlgtype is one of the six button types listed above. explicit if you are not satisfied with the layout of predefined buttons in dialog, you can put explicit button elements in your x...
...nd on the button with dlgtype, because button's oncommand is executed only when the button is pressed, and ondialog* handlers are executed for keyboard and other events too. example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ondialogaccept="alert('ok!');"> <hbox> <label value="hey!"/> <spacer flex="1"/> <vbox> <button dlgtype="accept"/> <button dlgtype="cancel"/> </vbox> </hbox> </dialog> default button since firefox 1.5, there are defaultbutton attributes and properties on the <dialog> element bug 284776. the possible values for the attribute are the names of buttons listed above, and the default is "accept", for compatibility with previous ver...
...//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="mydialogid" title="my dialog" ondialogaccept="return onok();" onload="onload();" persist="screenx screeny width height" windowtype="mydialogwindowtype"> <script type="application/javascript" src="chrome://myext/content/mydialog.js"/> <grid> <columns><column/><column/></columns> <rows> <row align="center"><label value="name:"/><textbox id="name"/></row> <row align="center"><label value="description:"/><textbox id="description"/></row> <row align="center"><spacer/><checkbox id="enabled" label="check to enable"/></row> </rows> </grid> </dialog> mydialog.js: // called once when the dialog displays function onload() { // use the arguments passed to us by the caller document.getelemen...

Adding Events and Commands - Archive of obsolete content
newest (and preferred) one introduced in firefox 3.5. event handlers can take an event argument, which is an event object that holds information on the event. you can get information on key modifiers (in case the user was holding a modifier key like alt while performing the event), screen coordinates for mouse events, and most importantly, the target element for the event. for example: <button label="&xulschoolhello.defaultgreeting.label;" oncommand="xulschoolchrome.browseroverlay.changegreeting(event);" /> then on the javascript code you would have something like this: changegreeting : function(aevent) { // more stuff aevent.target.setattribute("label", somenewgreeting); } the target in this example is the button element, so clicking on it will change its text. the advantage of u...
... these elements are completely invisible, so you can put them anywhere. it is recommended that you have them at the top of the xul code, along with script declarations and other invisible elements with as popupset and commandset. then you need to identify which of your xul elements will be linked to this broadcaster, using the observes attribute: <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" observes="xulschoolhello-online-broadcaster" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> the attribute value is set to be the id of the broadcaster element, indicating that this element will observe all attribute changes that happen in the broadcaster. you can have as many elements as you wa...
...that this element will observe all attribute changes that happen in the broadcaster. you can have as many elements as you want observing a broadcaster. with that set, all you need to do now is set or remove attributes in the broadcaster using javascript. all nodes observing it will automatically have those attribute values set or removed as well. you can override pre-existing values, such as the label attribute value in the example. let onlinebroadcaster = document.getelementbyid("xulschoolhello-online-broadcaster"); onlinebroadcaster.setattribute("label", "something"); you can also have finer-grained control to this behavior by adding the observes element as a child to your observer node. this allows you to choose which attributes you want it to observe. broadcasters allow you to easily ...
...ut they should be used when oncommand is one of the shared attributes. our menu example is in fact better suited for a command. <commandset id="xulschoolhello-commandset"> <command id="xulschoolhello-hello-command" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> <!-- more commands. --> </commandset> <!-- more code here... --> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" command="xulschoolhello-hello-command" /> commands allow you to keep your javascript calls in a single place, avoiding code repetition and possible bugs. your ui can easily scale this way. you can create an extension that adds toolbar buttons, statusbar buttons and menu items, all with equivalent behavior, and w...

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
ause the object is frozen or sealed, then creating a proxy around the object might be a viable approach. triggering event handlers sometimes scripts might want to manually trigger an event handler that is defined directly in the xul document. consider the following xul fragment throughout the rest of this section. ...
...ect is frozen or sealed, then creating a proxy around the object might be a viable approach. triggering event handlers sometimes scripts might want to manually trigger an event handler that is defined directly in the xul document. consider the following xul fragment throughout the rest of this section. ...
...ider the following xul fragment throughout the rest of this section. <menuitem id="mymenu" oncommand="executesomething(); executesomethingelse();"/> <label id="mylabel" onclick="executesomething(); executesomethingelse();"/> add-on authors commonly use eval to trigger the handlers. // do not use eval(document.getelementbyid("mymenu").getattribute("oncommand")); eval(document.getelementbyid("mylabel").getattribute("onclick")); alternative: dispatch real events dispatching real events has the added bonus that all other event listeners for that element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event. // fake a command event var event = document.createevent("events"); event.initevent("command", true, tr...
...lance to a real user event. // fake a command event var event = document.createevent("events"); event.initevent("command", true, true); document.getelementbyid("mymenu").dispatchevent(event); // fake a mouse click var mouseevent = document.createevent("mouseevents"); event.initmouseevent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); document.getelementbyid("mylabel").dispatchevent(mouseevent); please see the corresponding documentation on how to use and initialize particular event types. alternative: element.click() xul and html elements have a pre-defined .click() method that will fire a synthesized click event. document.getelementbyid("mybutton").click(); alternative: element.docommand() xul elements that have a command (oncommand or command attri...

Monitoring downloads - Archive of obsolete content
ll items in table try { while (statement.executestep()) { var row = document.createelement('listitem'); // add the cells to the row var cell = document.createelement('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltiptext", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute("label", (statement.getint64(1) / 1024).tofixed(1) + "kb"); // size cell.setattribute("style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint64(2) / 1000); // start time cell = document.creat...
...'listcell'); cell.setattribute("label", (statement.getint64(1) / 1024).tofixed(1) + "kb"); // size cell.setattribute("style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint64(2) / 1000); // start time cell = document.createelement('listcell'); var datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); thedate = new date(statement.getint64(3)); // end time cell = document.createelement('listcell'); datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.createelement('listcell'); cell.s...
... row.appendchild(cell); thedate = new date(statement.getint64(3)); // end time cell = document.createelement('listcell'); datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.createelement('listcell'); cell.setattribute("label", speed.tofixed(1) + "kb/sec"); cell.setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statu...
...it starts by opening the sqlite database containing the log information, then creates a select sql statement to pull all entries from the database. to iterate over the result...

menuitem.name - Archive of obsolete content
« xul reference home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
... « xul reference home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
... « xul reference home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
...ame as put into a group. only one menuitem in each radio group can be checked at a time. ...

statustext - Archive of obsolete content
string used to set the text that appears on the status bar when the user moves the mouse over the element. mozilla doesn't adjust the status bar automatically however. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. ...
...s bar automatically however. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. ...
...nu bar. ...
...r" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <button label="ping" statustext="ping the server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <statusbar> <statusbarpanel id="mystatuspanel" label="" flex="1"/> <spacer flex="1"/> </statusbar> <script> function setstatusmessage(obj){ document.getelementbyid('mystatuspanel').label = obj.getattribute('statustext'); } function clearstatusmessage(obj){ document.getelementbyid('mystatuspanel').label = ''; } </script> see also statusbar and statusbarpanel ...

Dynamically modifying XUL-based user interface - Archive of obsolete content
n the document. note: document.createelementns() creates an element, but does not put it anywhere in the document. you need to use other dom methods, such as appendchild() to insert the newly created element in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. ...
...ed element in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. ...
...t in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. ...
...anonymous content (xbl) xbl is the language used in mozilla to define new widgets. ...

How to implement a custom XUL query processor component - Archive of obsolete content
we are not really using the datasources in our sample component, so we set it to a dummy value. an empty string would be ok too. the querytype is i...
...we are not really using the datasources in our sample component, so we set it to a dummy value. an empty string would be ok too. the querytype is important. it is used to create an instance ...
...we are not really using the datasources in our sample component, so we set it to a dummy value. an empty string would be ok too. the querytype is important. it is used to create an instance of our xpcom object. the contract id of ou...
...<column flex="1"/> <column flex="3"/> <column flex="2"/> <column flex="1"/> </columns> <rows datasources="dummy" ref="." querytype="simpledata"> <template> <row uri="?"> <label value="?name"/> <label value="?age"/> <label value="?hair"/> <label value="?eye"/> </row> </template> </rows> </grid> </window> a few things to note. we are not really using the datasources in our sample component, so we set it to a dummy value. an empty string would be ok too. the querytype is important. it is used to create an instance of our xpcom object. the contract id of our xpcom component should be of the form "@m...

appendItem - Archive of obsolete content
« xul reference home appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items. you may optionally set a value. the function returns the newly created element. ...
......
...l, value ) return type: element creates a new item and adds it to the end of the existing list of items. you may optionally set a value. the function returns the newly created element. ...
...you may optionally set a value. the function returns the newly created element. ...

appendNotification - Archive of obsolete content
this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. keep in mind that this is all xul so using html elements for styling might still need additional css in order to work as you might expect. value - value used to identify the notification image - url of image to appear on the notification. ...
...hen the button is activated. this function is passed three arguments: the <notification> the button is associated with the button description as passed to appendnotification. the element which was the target of the button press event. if the return value from this function is not true, then the notification is closed. the notification is also not closed if an error is thrown. label - the label to appear on the button popup - the id of a popup for the button. if null, the button is not a button popup (e.g. a menu). the type property must also be set to "menu", or "menu-button". isdefault - if true, this is the default button. there can be only one default button. if no button has this set, the first button in the array is the default. type - a string. valid values are "me...
...thenotification, buttoninfo, eventtarget) { window.alert("button 2 pressed"); //do not prevent notification from closing: }; function testnotificationcallback(reason) { window.alert("reason is: " + reason); }; let notifybox = gbrowser.getnotificationbox(); let buttons = []; let button1 = { isdefault: false, accesskey: "1", label: "button 1", callback: testnotificationbutton1callback, type: "", // if a popup, then must be: "menu-button" or "menu". popup: null }; buttons.push(button1); let button2 = { isdefault: true, accesskey: "2", label: "button 2", callback: testnotificationbutton2callback, type: "", // if a popup, then must be: "menu-button"...
...up, then must be: "menu-button" or "menu". popup: null }; buttons.push(button1); let button2 = { isdefault: true, accesskey: "2", label: "button 2", callback: testnotificationbutton2callback, type: "", // if a popup, then must be: "menu-button" or "menu". ...

Multiple Rules - Archive of obsolete content
the query generates a list of the photos and assigns the title of each photo to the variable '?title'. note that the full query syntax must be used to use conditions within rul...
...this photo is that of the first rule with the button, whereas the content for the other photos is that of the second rule with the normal images. here is another example for an xml source: <radiogroup datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <rule> <where subject="?gender" rel="equals" value="male"/> <action> <radio uri="?" label="?name is male"/> </action> </rule> <rule> <action> <radio uri="?" label="?name is female" disabled="true"/> </action> </rule> </template> </radiogroup> in this example, all male people are matched with the first rule, and a radio button is generated for each one. we assume that anyone that isn't male is female and use the second rule to create a disabled ...
...people with only a single name, as 'cleopatra' in this example, won't match any rule so won't have...
...bove, used to calculate the '?letters' variable from the length of the name, minus one for the space character. naturally, this won't work for people with more than two names (joan of arc for instance), but rule conditions allow a number of useful ways to filter results. <rule> <where subject="?name" rel="contains" value=" "/> <where subject="?letters" rel="less" value="15"/> <action> <label uri="?" value="?name has two names for a total length of ?letters"/> </action> </rule> negating a condition you can reverse a where clause by using the negate attribute. by setting the negate attribute to true, the condition matches only those that don't match the condition, reversing the results that match. for example, these two conditions have the opposite effect. the first matches only r...

Result Generation - Archive of obsolete content
since it's a graph, arrows can point all over the place and nodes can have any number of arrows pointing out of them and pointing at them. and also because it is a graph, there is no real starting point or root node so you can just start anywhere. ...
...since it's a graph, arrows can point all over the place and nodes can have any number of arrows pointing out of them and pointing at them. and also because it is a graph, there is no real starting point or root node so you can just start anywhere. ...
...lowing the arrows to b, c or d. or you could start at b and go to a and then go to c and d, etc. no requirement exists to follow the arrows in the direction they point; you can easily go the other way (though in only one direction within a given series of iterations). the picture was generated from the w3c's rdf validator, a good place to go to check if your rdf is valid. the text in red are the labels for the arrows, called predicates. in this example, all the arrows have the same label. usually, this won't be the case. templates provide a means of navigating around using only arrows with specific labels. here is one serialization of rdf/xml for this graph, though there are many others. <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rel="http://...
...for example, the name of the thing, such as 'fred'. a resource's value is a uri which for your own rdf data you can just make up (though if you plan to use your model with others, it should be unique, preferably a url for a site you own, so as to avoid future conflicts with mixing of other types). we'll use the uri of the resource nodes in a template. in the image, the resource uri's are the blue labels of each node. there are no literals in this example, but we'll see some later. let's say we want the starting point to be a from the above example graph. we will use a's uri (http://www.xulplanet.com/rdf/a) as the reference starting point. in a xul template, you specify the starting point using the 'ref' attribute. here is an example: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ...

Simple Query Syntax - Archive of obsolete content
a <query> element is present, the full syntax is used instead. in the simple syntax, the builder will use the default query shown above, although the variable names are randomly generated. since the photos list iterates over the children of a container, we can use the simple syntax. here is what it might look like: <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> there is no <query> or <action> element used. instead, the builder uses a default query, and the action is placed directly inside the <template> element. you can see that this code is much simpler than the full syntax. to understand how this works, let's examine how the builder processes a simple query. first, it evaluates...
...matches have been found so the content will be duplicated three times. there are several attributes in the example xul content above that have values prefixed with 'rdf:'. since you can't declare variables in the simple syntax, a different way is used to grab rdf data. the 'rdf:' prefix means look up a predicate pointing out of the node for that result (the child or member node). for example, the label's value attribute has a value of rdf:http://purl.org/dc/elements/1.1/title'. this means look up the value of the predicate http://purl.org/dc/elements/1.1/title' pointing out of the current result. of course, it should be obvious that this causes the value attribute to be set to the photo's title. you can get other predicates in the same way, just by using the predicate uri and prefixing it with ...
...s/1.1/title' pointing out of the current result. of course, it should be obvious that this causes the value attribute to be set to the photo's title. you can get other predicates in the same way, just by using the predicate uri and prefixing it with 'rdf:'. you can also combine two in one attribute by separating them with a space or a caret (^) just as you can with the full syntax. for example: <label value="rdf:http://purl.org/dc/elements/1.1/title http://www.xulplanet.com/rdf/country"/> the 'rdf:' form is really equivalent to the <binding> tag in the full syntax. the subject of the binding is the result member resource, the predicate is the string that comes after 'rdf:' and the object isn't necessary as the value is replaced directly in the attribute. as with bindings, the value is not req...
... to be accepted. for example, to filter for photos with a specific country: <hbox id="photoslist" datasources="template-guide-photos4.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:r="http://www.xulplanet.com/rdf/"> <template> <rule r:country="http://www.daml.org/2001/09/countries/iso#it"> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </rule> </template> </hbox> this example shows how a single attribute may be used to filter for only those results that have a country set to 'http://www.daml.org/2001/09/countries/iso#it'. photos that do not have this country will not have any content generated for them. the attribute has a namespace that, when expanded, be...

Using Multiple Queries to Generate More Results - Archive of obsolete content
result for each person. a header class is used to distinguish the content, although you could use exactly the same content if you wish. ...
... multiple queries with xml sources you can also use more than query when using an xml source. here is an example which generates two sets of results and shows them together. <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <queryset> <query expr="group[@na...
... </queryset> </template> you can view the example. multiple queries with xml sources you can also use more than query when using an xml source. here is an example which generates two sets of results and shows them together. ...
...g an xml source. here is an example which generates two sets of results and shows them together. ...

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
or extensions to add their toolbar buttons to the toolbar palette, rather than adding them directly to the toolbar. the latter is possible, but is not recommended and is harder to implement. adding a button to the toolbar palette is very easy. just add code like this to your overlay: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" oncommand="myextension.ontoolbarbuttoncommand(event);"/> </toolbarpalette> notes: the id of the palette (browsertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button). see below for the list of common palette ids. class="toolbarbutton-1" makes the toolbar button ap...
...he button is clicked in the oncommand attribute. if you need to handle middle-click, add this line after the oncommand line. onclick="checkformiddleclick(this, event)" you can also handle middle-click and right-click using onclick handler and check event.button in it like this: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" onclick="myextension.onclick(event);"/> </toolbarpalette> onclick: function(event) { switch(event.button) { case 0: // left click break; case 1: // middle click break; case 2: // right click break; } } to add more buttons, put more <toolbarbutton> elements inside the <toolbarpalette> element. wrap elements other than <toolbarbut...
... adding the button bootstrap style adding a button to the browserpalette on runtime in a bootstrap addon is a bit different because the browserpalette is indirectly reached. a simple document.getelementbyid('browsertoolbarpalette') will not work. this is the code to create and add it in. ...
...ontent/addressbo...ddressbook.xul thunderbird - address book addressbooktoolbarpalette chrome://editor/content/editor.xul kompozer - main window nvutoolbarpalette chrome://calendar/content/calendar.xul sunbird - main window calendartoolbarpalette more information xulplanet.com references: <toolbarbutton>, <toolbaritem>. how to adjust toolbar button's label position a forum thread about adding an item to the toolbar (instead of just adding it to palette) right after an extension is installed. note that this is not recommended. there is another page on mdc with information about adding buttons to various windows in seamonkey. includes useful information about overlays for chatzilla. ...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
tton_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> <!-- mail, message --> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="15"/> </hbox> <!-- composer --> <toolbar id="edittoolbar"> <toolbarbutton id="custom-button-1" position="18"/> </toolbar> <!-- chat --> <menubar id="mainmenu"> <menu id="custom-menu" position="4" label="custom" accesskey="c"> <menupopup> <menuitem id="custom-item-1" label="custom item 1" accesskey="1" tooltiptext="my custom menu item" oncommand="custombutton[1]()" /> </menupopup> </menu> </menubar> <!-- calendar --> <toolbar id="calendar-bar"> <toolbarbutton id="custom-button-1" position="10"/> </toolbar> <!-- button details --...
...change the text between double-quote characters on those lines. ...
...change the text between double-quote characters on those lines. optionally remove the sections for toolbars that you do not need. save the file. ...
...r changes take effect when you restart the application. adding more buttons to add another button, edit button.xul. for each toolbar, duplicate the line that specifies custom-button-1, change the new line to specify custom-button-2, and change its position attribute to position the new button in the toolbar. duplicate the last section. in the id and oncommand attributes, change 1 to 2. change the label, accesskey and tooltiptext attributes to whatever you want. do not change the class attribute. now edit button.css. duplicate the first two lines, changing the new lines to specify button-2. edit button.js and add javascript code for the new button. be sure to add the extra code before the curly brace on the last line of the file. for example, you could add this code for testing: 2: function () {...

Advanced Rules - Archive of obsolete content
this will be the variable assigned in the child attribute of the member element. complete tree example the following example shows a complete tree with conditions and an action. ...
...he member element. complete tree example the following example shows a complete tree with conditions and an action. ...
... if using the dont-build-content flag on a tree, replace the content element with ...
... if using the dont-build-content flag on a tree, replace the content element with a treeitem element. adding additional b...

Custom Tree Views - Archive of obsolete content
e object for each tree. naturally, since a custom tree view is being used, the content tree view will not be used, so the treeitem, treerow, and treecell elements will have no purpose since the custom view will get its data from elsewhere. thus, you can just leave the treechildren element empty. the following example shows this: <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" label="date" flex="1"/> </treecols> <treechildren/> </tree> to assign data to be displayed in the tree, the view object needs to be created which is used to indicate the value of each cell, the total number of rows plus other optional information. the tree will call methods of the view to get the information that it needs to display. in general, ...
...the setview() function has been called in the onload() handler for the window, but you could also set the view later if you wish. you can change the view at any time. one thing to note...
...the setview() function has been called in the onload() handler for the window, but you could also set the view later if you wish. you can change the view at any time. one thing to note is that the getcelltext() function is only called...
...at are currently displayed. in the image, only seven rows are displayed, the last only partially, so getcelltext() will be called only 14 times, one for each row and column. it is called for other rows when the user scrolls through them. this makes the tree much more efficient. note that the view object is also available for trees using the built-in content view. you can use this to get the cell labels and other information. the nsitreeview interface lists all of the properties and methods that you can implement for the tree view. we'll look at more of these in the next section. next, we'll look at more features of tree views. « previousnext » ...

Keyboard Shortcuts - Archive of obsolete content
bute called accesskey which specifies the key which a user can press to activate the menu or menu item. in the example below, the file menu can be selected by pressing alt + f together (or some other key combination for a specific platform). once the file menu is open, the close menu item can be selected by pressing c. example 1 : source view <menubar id="sample-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem id="close-command" label="close" accesskey="c"/> </menupopup> </menu> </menubar> you can also use the accesskey attribute on buttons. when the key is pressed in this case, the button is selected. you might want to set up more general keyboard shortcuts however. for example, pressing ctrl + c to copy text to the clipboa...
...sociate the key element directly with the menu command. to do this, also add a key attribute on the menuitem. set its value to the id of the key that you want to use. the example below demonstrates this. example 2 : source view <keyset> <key id="paste-key" modifiers="accel" key="v" oncommand="alert('paste invoked')"/> </keyset> <menubar id="sample-menubar"> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem id="paste-command" accesskey="p" key="paste-key" label="paste" oncommand="alert('paste invoked')"/> </menupopup> </menu> </menubar> the menuitem's key attribute, which here is paste-key is equal to the id of the defined key. you can use this for additional keys as well to define keyboard shortcuts for ...
...w xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <keyset> <key id="cut_cmd" modifiers="accel" key="x"/> <key id="copy_cmd" modifiers="accel" key="c"/> <key id="paste_cmd" modifiers="accel" key="v"/> <key id="close_cmd" keycode="vk_escape" oncommand="window.close();"/> </keyset> <vbox flex="1"> <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem label="open search..." accesskey="o"/> <menuitem label="save search..." accesskey="s"/> <menuseparator/> <menuitem label="close" accesskey="c" key="close_cmd" oncommand="window.close();"/> </menupopup> </menu> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"...
..."f"> <menupopup id="file-popup"> <menuitem label="open search..." accesskey="o"/> <menuitem label="save search..." accesskey="s"/> <menuseparator/> <menuitem label="close" accesskey="c" key="close_cmd" oncommand="window.close();"/> </menupopup> </menu> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem label="cut" accesskey="t" key="cut_cmd"/> <menuitem label="copy" accesskey="c" key="copy_cmd"/> <menuitem label="paste" accesskey="p" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> </toolbox> </vbox> </window> now we can use those shortcuts to activate the commands. of course, the clipboard commands don't do anything anyway, as we haven't written those scr...

More Event Handlers - Archive of obsolete content
a reference to the element where the event occurred. a similar property currenttarget holds the element that is currently having its event listeners handled. in the example below, currenttarget is always the vbox, whereas target would be the specific element, either the button or checkbox, that was activated. example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing. depending on how you attach the event listener to an element, there are different ways of doing this...
...s will trigger before any bubbling listeners. if a capturing event stops the event propagation, none of the later capturing listeners, nor any of the bubbling listeners will ever receive notification about the events. to manually stop event propagation, call the event object's stoppropagation method, as in the following example. ...
...at will happen depends on the event and the type of element. for example, the 'popupshowing' event is sent to a popup just before it is displayed. the default action is to display the popup. if the default action is prevented, the popup will not be displayed. the default action can be prevented with the event object's preventdefault method, as in the example below. example 3 : source view <button label="types" type="menu"> <menupopup onpopupshowing="event.preventdefault();"> <menuitem label="glass"/> <menuitem label="plastic"/> </menupopup> </button> alternatively, for attribute event listeners, you can just return false from the code. note that preventing the default action is not the same as stopping event propagation with the stoppropagation method. even if the default action ha...
...operties and are relative to the top left corner of the screen. the second set, clientx and clienty, are relative to the top left corner of the document. here is an example which displays the current mouse coordinates: example 4 : source view <script> function updatemousecoordinates(e){ var text = "x:" + e.clientx + " y:" + e.clienty; document.getelementbyid("xy").value = text; } </script> <label id="xy"/> <hbox width="400" height="400" onmousemove="updatemousecoordinates(event);"/> in this example, the size of the box has been set explicitly so the effect is easier to see. the event handler gets the clientx and clienty properties and creates a string from them. this string is then assigned to the value property of the label. note that the event argument must be passed to the updatemouse...

XPCOM Examples - Archive of obsolete content
ave already had that knowledge. creating a window menu the list of currently open mozilla windows can be used as an rdf datasource. this allows you to create a window menu with a list of the currently open windows in the application. the datasource for this is rdf:window-mediator. we can use this as in the following example: example 1 : source <toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows. try this example by opening a number of bro...
...resource. that means that in order to switch the window focus, we need to do the following: determine the element that the user clicked on. get the value of the id attribute from the element. pass this value to getwindowforresource() to get a window object. switch the focus to this window. ...
...this value to getwindowforresource() to get a window object. switch the focus to this window. ...
...ce an enumerator just returns a generic object, we need to queryinterface() it to an nsicookie before we can use it. in this case, we just use the instanceof operator to accomplish this. finally, an item is added to the menu for the cookie. the host, name and value properties of the cookie are used for this. menus have an appenditem() function which can be used to add an item to the menu, given a label and a value. see also more examples are available below. code snippets http://kb.mozillazine.org/category:xpcom_example_code next, we'll look at how to create trees. « previousnext » ...

Using multiple DTDs - Archive of obsolete content
dgets used in all your xul files, additionally to the ones specific to the file. single dtd to make strings in your xul file localizable, you normally add a dtd declaration at the beginning of the file like this: <!doctype window system "chrome://myextension/locale/mainwindow.dtd"> where "window" is the local name of the document (root) element. ...
...o make strings in your xul file localizable, you normally add a dtd declaration at the beginning of the file like this: <!doctype window system "chrome://myextension/locale/mainwindow.dtd"> where "window" is the local name of the document (root) element. ...
...our xul file localizable, you normally add a dtd declaration at the beginning of the file like this: <!doctype window system "chrome://myextension/locale/mainwindow.dtd"> where "window" is the local name of the document (root) element. ...
... with your xul file, you can simply list all of the dtds inside your dtd declaration: <!doctype window [ <!entity % commondtd system "chrome://myextensions/locale/common.dtd"> %commondtd; <!entity % mainwindowdtd system "chrome://myextension/locale/mainwindow.dtd"> %mainwindowdtd; ]> you can now access the entities declared in the dtds as shown above. assume you have an entity okbutton.label defined in file common.dtd. then accessing entities from both dtds would look like this: <button id="somebutton" label="&somebutton.label"> ... <button id="okbutton" label="&okbutton.label"> note that there is no such thing as namespaces with multiple dtds. you have to make sure by yourself that the entities defined in the various dtds do not clash. ...

XUL Accesskey FAQ and Policies - Archive of obsolete content
mulating a click on that element. for example, an apply button may have the letter a underlined. on windows and unix, pressing alt+a is a convenient way to push that button. on macintosh, accesskeys are available only in html not in xul, and they are activated using ctrl+letter instead of alt. how is an accesskey added to a form control? an accesskey can be added to an html or xul form control or label by using the accesskey attribute. for example, here's how we add an accesskey to a xul button: <button label="apply instantly" accesskey="a" /> apply instantly - or - <button label="apply instantly" accesskey="a" /> apply instantly in mozilla, we use dtd's for one more layer of abstraction, for purposes of internationalization. the above example should say: ...
...if methods like confirm(), confirmex() or prompt() are being used to create a dialog, use an & before the button or checkbox text to make the next character an accesskey. ...
...e same window. be especially careful of drop down menus in the same window. for example, in the manage bookmarks dialog, don't use f, e, v, t or h (file, edit, view, tasks, help). help wanted: it would be useful to have an automated tool to check for duplicate and missing accesskeys in xul files. make it easy to see use letters at the beginning of the first or second word of the label. use a distinctive consonant or a vowel in the label. use letters with wide widths, such as w, m, and capital letters. avoid: letters with descenders, such as p, g, q, or y. example: p, g, q, y. letters next to a letter with a descender. letters that are only one pixel wide, such as i or l. example: i, l. make it easy to remember do the most impor...
...d in windows as well, like properties. if not, try the first letter of the first word in the prompt. next, try the first letter of another word in the prompt. finally, use any non-silent letter in an action word (do these after the rest of the dialog has accesskeys chosen). common elements that don't get accesskeys ok buttons. cancel buttons. close buttons. tab panel labels. toolbar buttons tree items list items column headers are there any crucial bugs i should know about? bug 143065 - scope of accesskeys is not limited to the current tab panel. where do accesskeys need to be added? look for dependencies of bug 129179 (the xul accesskey hookup meta bug), or look for bugs with "accesskey" or "mnemonic" in the summary, or look for dialogs where ...

caption - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a header for a groupbox. it may contain either a text label, using the label attribute, or child elements for a more complex caption. more information is available in the xul tutorial. attributes accesskey, crop, image, label, tabindex properties accesskey, crop, image, label, tabindex examples <groupbox> <caption label="my groupbox"/> </groupbox> <groupbox flex="1"> <caption> <checkbox label="a checked groupbox"/> </caption> </groupbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. ...
...an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. ...
...e. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements...
... user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties accesskey type: character gets and sets the value of the accesskey attribute. crop type: string gets and sets the value of the crop attribute. image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. tabindex type: integer gets and sets the value of the tabindex attribute. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(...

command - Archive of obsolete content
and function to invoke the command. using this function has the advantage that the command will be sent to the part of the ui which will respond to it. typically, this will be the currently focused element. like a broadcaster, commands forward attributes to other elements. more information is available in the xul tutorial. ...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. ...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. ...
...is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. oncommand type: script code this event handler is called when the command is activated. this occurs when a user selects a menu item or presses a keyboard ...

groupbox - Archive of obsolete content
ng the top of the groupbox. typically, the groupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...oupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...ound it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...

listcols - Archive of obsolete content
ethods | related ] a container for the columns of a listbox, each of which are created with the listcol element. there should be only one listcols element in a list box. if there is no listcols element, the list box has a single column. ...
...iner for the columns of a listbox, each of which are created with the listcol element. there should be only one listcols element in a list box. if there is no listcols element, the list box has a single column. ...
...ed with the listcol element. there should be only one listcols element in a list box. if there is no listcols element, the list box has a single column. ...
...there should be only one listcols element in a list box. if there is no listcols element, the list box has a single column. ...

notificationbox - Archive of obsolete content
this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. ...
...this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. ...
...this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. ...
...hen the button is activated. this function is passed three arguments: the <notification> the button is associated with the button description as passed to appendnotification. the element which was the target of the button press event. if the return value from this function is not true, then the notification is closed. the notification is also not closed if an error is thrown. label - the label to appear on the button popup - the id of a popup for the button. if null, the button is not a button popup (e.g. a menu). the type property must also be set to "menu", or "menu-button". isdefault - if true, this is the default button. there can be only one default button. if no button has this set, the first button in the array is the default. type - a string. valid values are "me...

popupset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for menupopup, panel and tooltip elements. this element is optional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a container for menupopup, panel and tooltip elements. this element is optional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...
...reference home [ examples | attributes | properties | methods | related ] a container for menupopup, panel and tooltip elements. this element is optional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...
...| properties | methods | related ] a container for menupopup, panel and tooltip elements. this element is optional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...

richlistbox - Archive of obsolete content
you can click on any richlistitem element and use the keyboard to move the selection around. attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elem...
...eave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this feature may be disabled by setting this attribute to true. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. seltype type: one of the valu...
...ueryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata additemtoselection( item ) return type: no return value selects the given item, without deselecting any other items that are already selected. appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items. you may optionally set a value. the function returns the newly created element. clearselection() return type: no return value deselects all of the items. a select event is sent before the items are deselected. ensureelementisvisible( element ) return type: no return value...
...ows are displayed. getselecteditem( index ) return type: element when multiple items are selected, you can retrieve each selected item using this method. the argument index specifies the index in the list of the selected items, not the row number of the item. the item index is zero-based, thus this example will return the first selected item: getselecteditem(0). insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. invertselection() return type: no return value reverses the selected state of all items. selected items become deselected, and deselected items become selected. movebyoffset( offset , isselecting, isselecting...

richlistitem - Archive of obsolete content
if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. ...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. ...
...wed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. searchlabel type: string text used for 'find-as-you-type' (fayt) searching. in situations where the search text is ambiguous or missing, searchlabel can be used to give context to fayt. if searchlabel is not present, fayt falls back to use the label property. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the s...
...te("value") do not access or affect the contents displayed to the user. properties accessible type: nsiaccessible returns the accessibility object for the element. control type: element id gets and sets the value of the control attribute. disabled type: boolean gets and sets the value of the disabled attribute. label type: string gets the concatentation of text from any child label elements. does not support setting label values. use the child elements directly to set label text. searchlabel type: string gets and sets the value of the searchlabel attribute. selected type: boolean this property's value is true if this element is selected, or false if it is not. this property i...

toolbar - Archive of obsolete content
when set to false, the default, the toolbar is visible. this only has an effect on...
...when set to false, the default, the toolbar is visible. this only has an effect on windows and needs to be combined with type="menubar" and a menub...
...when set to false, the default, the toolbar is visible. this only has an effect on windows and needs to be combined with type="menubar" and a menubar element. currentset not in seamonkey 1.x type: comma-se...
...from the toolbarpalette. for example, back-button,forward-button,print-button. grippyhidden seamonkey only type: boolean when set to true, the grippy will be hidden. when set to false, the default, the grippy will be shown. grippytooltiptext seamonkey only type: string the text to appear on the tooltip for the toolbar's grippy when the toolbar is collapsed. this would be used to label the grippy so that the user knows which toolbar it represents. height type: string (representing an integer) the preferred height of the element in pixels. the actual displayed height may be different if the element or its contents have a minimum or maximum height. the css height property may also be used. iconsize type: string indicates whether the toolbar should display large ...

treecell - Archive of obsolete content
also useful for disabling editing of individual treecells. ...
...also useful for disabling editing of individual treecells. ...
...n to be changed, especially useful when <treecol type="checkbox">. also useful for disabling editing of individual treecells. when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell. the tree and treecol must also be marked as editable in order for this to work. the tree must be a content tree for this to work on treecells. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. mode type: one of the values below for columns that are progress meters, this determines the type of progress meter to use. none no progress mete...
...ts, this attribute is used to specify the root rdf node where content generation begins. this will correspond to the value of an about attribute on an rdf container. this attribute should be placed alongside the datasources attribute. src type: uri set this to the uri of an image to appear in the tree cell. if this attribute is left out, no image appears. you can have both an image and a label. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "dat...

XForms Switch Module - Archive of obsolete content
esignated as an event handler using xml events or may also be contained in an action element. in either scenario, it would be triggered by an event. attributes events special case - the idref of a case element to select representations the case element doesn't have a visual representation. ...
...ing xml events or may also be contained in an action element. in either scenario, it would be triggered by an event. attributes events special case - the idref of a case element to select representations the case element doesn't have a visual representation. ...
...ect representations the case element doesn't have a visual representation. ...
... representations the case element doesn't have a visual representation. ...

Audio for Web games - Game development
uerying the playing track's current time gives you enough information to synchronize separate pieces of audio. ...
...me gives you enough information to synchronize separate pieces of audio. ...
...uitar</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-decribedby="guitar-play-label"> <span id="guitar-play-label">play</span> </button> </li> <li data-loading="true"> <a href="bassguitar.mp3" class="track">bass guitar</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="bass-play-label"> <span id="bass-play-label">play</span> </button> </li> <li data-loading="true"> <a href="drums.mp3" class="track">drums</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="drums-play-label"> <span id="drums-play-label">play</span> </button> </li> <li data-loading="true"> <a href="horns.mp3"...
...ss="track">drums</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="drums-play-label"> <span id="drums-play-label">play</span> </button> </li> <li data-loading="true"> <a href="horns.mp3" class="track">horns</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="horns-play-label"> <span id="horns-play-label">play</span> </button> </li> <li data-loading="true"> <a href="clav.mp3" class="track">clavi</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="clavi-play-label"> <span id="clavi-play-label">play</span> </button> </li> </ul> <p class="sourced">all tracks sourced from <...

What is a Domain Name? - Learn web development
supposed to indicate a resource in a particular language or country. tlds containing .gov are only allowed to be used by government departments. the .edu tld is only for use by educational and academic institutions. tlds can contain special as well as latin characters. a tld's maximum length is 63 characters, although most are around 2–3. the full list of tlds is maintained by icann. ...
...ource in a particular language or country. tlds containing .gov are only allowed to be used by government departments. the .edu tld is only for use by educational and academic institutions. tlds can contain special as well as latin characters. a tld's maximum length is 63 characters, although most are around 2–3. the full list of tlds is maintained by icann. label (or component) the labels are what follow the tld. ...
...country. tlds containing .gov are only allowed to be used by government departments. the .edu tld is only for use by educational and academic institutions. tlds can contain special as well as latin characters. a tld's maximum length is 63 characters, although most are around 2–3. the full list of tlds is maintained by icann. label (or component) the labels are what follow the tld. ...
...gth is 63 characters, although most are around 2–3. the full list of tlds is maintained by icann. label (or component) the labels are what follow the tld. a label is a case-insensitive character sequence anywhere from one to sixty-three characters in length, containing only the letters a through z, digits 0 through 9, and the - character (which may not be the first or last character in the label). a, 97, and hello-strange-person-16-how-are-you are all examples of valid labels. the label located right before the tld is also called a secondary level domain (sld). a domain name can have many labels (or components). it is not mandatory nor necessary to have 3 labels to form a domain name. for instance, www.inf.ed.ac.uk is a valid domain name. for any domain you control (e.g. mozilla.org), ...

Images in HTML - Learn web development
t is 200px wide and 171px high), then experiment with other values to see what the effect is. set a title on the image. if you make a mistake, you can always reset it using the reset button. ...
...abel">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <img> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() ...
...ut of the title attribute, remove the title attribute, and put the text inside a <figcaption> element below the image. if you make a mistake, you can always reset it using the reset button. ...
...a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() ...

A first splash into JavaScript - Learn web development
min-width: 480px; margin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100. see if you can guess it in 10 turns or fewer. ...
...argin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100. see if you can guess it in 10 turns or fewer. ...
... code (note how they are inside a <div> element, which is itself used to select all three later on for resetting, when we restart the game): <div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </div> the next two constants store references to the form text input and submit button and are used to control submitting the guess later on. <label for="guessfield">enter a guess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> our final two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later). note: you'll learn a lot more about variables/cons...
...me'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } the first two lines disable the form text input and button by setting their disabled properties to true. this is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up. the next three lines generate a new <button> element, set its text label to "start new game", and add it to the bottom of our existing html. the final line sets an event listener on our new button so that when it is clicked, a function called resetgame() is run. now we need to define this function too! add the following code, again to the bottom of your javascript: function resetgame() { guesscount = 1; const resetparas = document.queryselectorall('.resultpar...

Arrays - Learn web development
equal to "current item name — $current item price", for example "shoes — $23.99" in each case, so the correct information for each item is printed on the invoice. this is just simple string concatenation, which should be familiar to you. ...
...in an animated scene for example, you might have an array of objects representing the background graphics ...
...e entered into the search input to the start of the array. this can be retrieved using searchinput.value. add a line below the // number 2 comment that removes the value currently at the end of the array. ...
...{ // number 2 } // empty the search input and focus it, ready for the next term to be entered searchinput.value = ''; searchinput.focus(); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeven...

Focus management with Vue refs - Learn web development
he value of the attribute. it's important to note that a ref needs to be unique within a component. no two elements rendered at the same time should have the same ref. adding a ref to our app so, let's attach a ref to our "edit" button in todoitem.vue. update it like this: <button type="button" class="btn" ref="editbutton" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> to access the value associated with our ref, we use the $refs property provided on our component instance. to see the value of the ref when we click our "edit" button, add a console.log() to our toggletoitemeditform() method, like so: toggletoitemeditform() { console.log(this.$refs.editbutton); this.isediting = true; } if you activate the "edit" button at this point, you...
... tag. runs after the component is deactivated. note: the vue docs provide a nice diagram for visualizing when these hooks happen. this article from the digital ocean community blog dives into the lifecycle methods more deeply. now that we’ve gone over the lifecycle methods, let's use one to trigger focus when our todoitemeditform component is mounted. in todoitemeditform.vue, attach ref="labelinput" to the <input> element, like so: <input :id="id" ref="labelinput" type="text" autocomplete="off" v-model.lazy.trim="newname" /> next, add a mounted() property just inside your component object — note that this should not be put inside the methods property, but rather at the same hierarchy level as props, data(), and methods. lifecycle methods are special methods that sit on their own, n...
... property just inside your component object — note that this should not be put inside the methods property, but rather at the same hierarchy level as props, data(), and methods. lifecycle methods are special methods that sit on their own, not alongside the user-defined methods. this should take no inputs. ...
...e put inside the methods property, but rather at the same hierarchy level as props, data(), and methods. lifecycle methods are special methods that sit on their own, not alongside the user-defined methods. this should take no inputs. note that you cannot use an arrow function here since we need access to this to access our labelinput ref. mounted() { } inside your mounted() method, assign your labelinput ref to a variable, and then call the focus() function of the ref. you don't have to use $nexttick here because the component has already been added to the dom when mounted() is called. mounted() { const labelinputref = this.$refs.labelinput; labelinputref.focus(); } now when you activate the "edit" button with your keyboard, focus should immediately be moved to the edit <input>. han...

How to implement a custom autocomplete search component
* @return {string} the comment of the result at the given index */ getcommentat: function(index) { if (this._comments) return this._comments[index]; else return ''; }, /** * @return {string} the style hint for the result at the given index */ getstyleat: function(index) { if (!this._comments || !this._comments[index]) return null; // not a category label, so no special styling if (index == 0) return 'suggestfirst'; // category label on first line of results return 'suggesthint'; // category label on any other line of results }, /** * gets the image for the result at the given index * * @return {string} the uri to the image to display */ getimageat : function (index) { return ''; }, /** * get the f...
...n(index) { return this.getvalueat(index); }, /** * removes the value at the given index from the autocomplete results. * if removefromdb is set to true, the value should be removed from * persistent storage as well. ...
...iven index */ getvalueat: function(index) { return this._results[index]; }, /** * get the comment of the result at the given index */ getcommentat: function(index) { return this._comments[index]; }, /** * get the style hint for the result at the given index */ getstyleat: function(index) { if (!this._comments[index]) return null; // not a category label, so no special styling if (index == 0) return "suggestfirst"; // category label on first line of results return "suggesthint"; // category label on any other line of results }, /** * get the image for the result at the given index * the return value is expected to be an uri to the image to display */ getimageat : function (index) { return ""; }, /** ...
...} return simpleautocompletesearchfactory; } you need to explicitly register the component by adding these lines into your chrome.manifest file: component {6224daa1-71x2-4d1a-ad90-01ca1c08e323} components/.js contract @mozilla.org/autocomplete/search;1?name=simple-autocomplete {6224daa1-71x2-4d1a-ad90-01ca1c08e323} you need to add the following method: getlabelat: function(index) { return this._results[index]; } to simpleautocompleteresult use this newly available component in a xul file like this: <textbox id="text1" type="autocomplete" autocompletesearch="simple-autocomplete" showcommentcolumn="true" autocompletesearchparam='[{"value":"mark","comment":"cool dude"},{"value":"mary","comment":"nice lady"},{"value":"jimmy","comm...

Localizing with Koala
n koala file view sidebar filter field and click "search". this will filter the list of files down to the files with "search" in the name. right-click searchbar.dtd file in the sidebar and choose "open file". this file does not yet exist in your locale file structure, so koala will ask if you want to create it. click "ok". when the file is created and opens in a new tab, right-click searchendcap.label in the sidebar (it's listed under the searchbar.dtd file) and choose "add entity". we're starting by the second entity in this file on purpose, you'll see in a moment how koala nicely handles entity order. the entity was added to the file and the english string is automatically highlighted, so that you can translate it right away. this entity is used in the tooltip that appears when you hover ...
...e starting by the second entity in this file on purpose, you'll see in a moment how koala nicely handles entity order. the entity was added to the file and the english string is automatically highlighted, so that you can translate it right away. this entity is used in the tooltip that appears when you hover over the magnifying glass icon in the search bar. once you translated the searchendcap.label entity, add the other one from this file, i.e. cmd_enginemanager.label. you can right-click it and choose "add entity" as you did previously, or just double-click the entity name to add it to the file. note how koala is smart enough to insert this entity before searchendcap.label. this is helpful for keeping the localization files clean and tidy at all times. the string to translated is selected...
...now let's create the other file. double-click on search.properties and click "ok" when koala asks if you want to create this file. ...
...etail, including the exact list of missing (green "+" icon), obsolete and translated (white circle icon) entities. now that you've translated these 3 strings, let's commit your work to the local hg repository that you created in the "creating a new project" section. committing your work hopefully by now, you have translated 3 strings in the following 2 files: searchbar.dtd: cmd_enginemanager.label searchendcap.label search.properties: cmd_addfoundengine it's time to put these files under mercurial's version control system. this will allow you to track changes, export them to remote repositories (first on bitbucket, later on hg.mozilla.org) and revert files to earlier versions in case of errors. version control systems add a lot of transparency to your work and allow others to get i...

Creating localizable web applications
ry, $tab, $page) = explode('/', $path); to get this information directly from the url. after that, it is tempting to use the $category or $tab variables in the interface. however, this is problematic for localization. you probably don't want to localize the urls to keep them uniform across locales as well as to avoid issues with non-latin and/or rtl characters. ...
...on't want to localize the urls to keep them uniform across locales as well as to avoid issues with non-latin and/or rtl characters. so in order to display a localized label of a category or a tab, you should create a mapping between the non-localizable english names used in the urls and the localizable english strings used in the interface. consider the following example: snippet 1. ...
...for english, add hreflang="en" to links to resources that are not going to be localized or are external to your web application. ...
...part\n" " third part\n" msgstr "" in order to indent your code, you must use string concatenation. see snippet 4 above for an example of how to do this. use gettext contexts depending on context in which it is used, one english string might require two or more different translations. this is particularly true for short strings, like "file" or "log in". for instance, "log in" as a button label might be translated by a localizer as the imperative, but for a dialog title, the localizer may choose to use a different form, like gerund (much like "logging in"). gettext's context feature allows the developer to distinguish between two identical english strings and disambiguate the translation. use gettext plurals whenever you put numbers in your messages, make it possible to use different ...

NSS Key Log Format
are not affected). distributors can re-enable it at compile time though (using the nss_allow_sslkeylogfile=1 make variable) which is done for the official firefox binaries. (see bug 1188657.) notably, debian does not have this option enabled, see debian bug 842292. this key log file is a series of lines. comment lines begin with a sharp character ('#') and are ignored. ...
...e time though (using the nss_allow_sslkeylogfile=1 make variable) which is done for the official firefox binaries. (see bug 1188657.) notably, debian does not have this option enabled, see debian bug 842292. this key log file is a series of lines. comment lines begin with a sharp character ('#') and are ignored. secrets follow the format <label> <space> <clientrandom> <space> <secret> where: <label> describes the following secret. ...
...n enabled, see debian bug 842292. this key log file is a series of lines. comment lines begin with a sharp character ('#') and are ignored. secrets follow the format <label> <space> <clientrandom> <space> <secret> where: <label> describes the following secret. <clientrandom> is 32 bytes random value from the client hello message, encoded as 64 hexadecimal characters. <secret> depends on the label (see below). ...
...this key log file is a series of lines. comment lines begin with a sharp character ('#') and are ignored. secrets follow the format <label> <space> <clientrandom> <space> <secret> where: <label> describes the following secret. <clientrandom> is 32 bytes random value from the client hello message, encoded as 64 hexadecimal characters. <secret> depends on the label (see below). ...

nss tech note5
ingsymkey, tobewrappedpvtkey, wrapmech, secparam, &wrappedkey, null);</big> <big><big>transport/store or do whatever with the wrapped key (wrappedkey.data, wrappedkey.len)</big></big> <big><big>unwrapping.</big></big> prepare the args for the unwrap function. ...
... secparam, &wrappedkey, null);</big> <big><big>transport/store or do whatever with the wrapped key (wrappedkey.data, wrappedkey.len)</big></big> <big><big>unwrapping.</big></big> prepare the args for the unwrap function. ...
... secparam, &wrappedkey, null);</big> <big><big>transport/store or do whatever with the wrapped key (wrappedkey.data, wrappedkey.len)</big></big> <big><big>unwrapping.</big></big> prepare the args for the unwrap function. ...
..._unwrap; numattribs = 4; } else if(keytype == ckk_dsa) { attribs[0] = cka_sign; numattribs = 1; } <big>do the unwrap</big> seckeyprivatekey *unwrappedpvtkey = pk11_unwrapprivkey(slot, wrappingsymkey, wrapmech, secparam, &wrappedkey, &label, pubvalue, token, pr_true /* sensitive */ keytype, attribs, numattribs, null /*wincx*/); clean up pk11_freesymkey(wrappingsymkey); <big>if (secparam) secitem_freeitem(secparam, pr_true);</big> <big>secitem_freeitem(&wrappedkey, pr_true);</big> if (pubvalue) secitem_freeitem(pubvalue, pr_true);...

Parser API
statements surrounded by braces. interface expressionstatement <: statement { type: "expressionstatement"; expression: expression; } an expression statement, i.e., a statement consisting of a single expression. interface ifstatement <: statement { type: "ifstatement"; test: expression; consequent: statement; alternate: statement | null; } an if statement. ...
...e expressionstatement <: statement { type: "expressionstatement"; expression: expression; } an expression statement, i.e., a statement consisting of a single expression. interface ifstatement <: statement { type: "ifstatement"; test: expression; consequent: statement; alternate: statement | null; } an if statement. interface labeledstatement <: statement { type: "labeledstatement"; label: identifier; body: statement; } a labeled statement, i.e., a statement prefixed by a break/continue label. interface breakstatement <: statement { type: "breakstatement"; label: identifier | null; } a break statement. interface continuestatement <: statement { type: "continuestatement"; label: identifier | null; } a continue statement. interface...
...cation returns: customstatement callback to produce a custom empty statement node. blockstatement(body[, loc]) body: customstatement loc: sourcelocation returns: customstatement callback to produce a custom block statement node. expressionstatement(expr[, loc]) expr: customexpression loc: sourcelocation returns: customstatement callback to produce a custom expression statement node. labeledstatement(label, body[, loc]) label: customidentifier body: customstatement loc: sourcelocation returns: customstatement callback to produce a custom labeled statement node. ifstatement(test, cons, alt[, loc]) test: customexpression cons: customstatement alt: customstatement | null loc: sourcelocation returns: customstatement callback to produce a custom if statement node. switchstatem...
...ck to produce a custom for statement node. forinstatement(left, right, body, isforeach[, loc]) left: customvariabledeclaration | customexpression right: customexpression body: customstatement isforeach: boolean loc: sourcelocation returns: customstatement callback to produce a custom for-in statement node. the isforeach flag indicates whether the node is a for each statement. breakstatement(label[, loc]) label: customidentifier | null loc: sourcelocation returns: customstatement callback to produce a custom break statement node. continuestatement(label[, loc]) label: customidentifier | null loc: sourcelocation returns: customstatement callback to produce a custom continue statement node. withstatement(obj, body[, loc]) obj: customexpression body: customstatement loc: sourceloca...

Gecko Roles
ttom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. role_table represents a table that contains rows and columns of cells, and optionally, row headers and column headers. role_columnheader represents a column header, providing a visual label for a column in a table. role_rowheader represents a row header, which provides a visual label for a table row. role_column represents a column of cells within a table. role_row represents a row of cells within a table. role_cell represents a cell within a table. role_link represents a link to something else. this object might look like text or a graphic, b...
... represents an item in an outline or tree structure. role_pagetab represents a page tab, it is a child of a page tab list. role_propertypage represents a property sheet. role_indicator represents an indicator, such as a pointer graphic, that points to the current item. role_graphic represents a picture. role_statictext represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. role_text_leaf represents selectable text that allows edits or is designated read-only. role_pushbutton represents a push button control. role_checkbutton represents a check box control. role_radiobutton represents an option button, also called a radio button. it is one...
... page tab controls. role_clock represents a control that displays time. role_splitbutton represents a button on a toolbar that has a drop-down list icon directly adjacent to the button. role_ipaddress represents an edit control designed for an internet protocol (ip) address. the edit control is divided into sections for the different parts of the ip address. role_accel_label represents a label control that has an accelerator. role_arrow represents an arrow in one of the four cardinal directions. role_canvas represents a control that can be drawn into and is used to trap events. role_check_menu_item represents a menu item with a check box. role_color_chooser represents a specialized dialog that lets the user choose a color. role...
...le bar, border, menu bar, etc. it is often used as the primary window for an application. role_glass_pane a glass pane. a pane that is guaranteed to be painted on top of all panes beneath it. role_html_container a document container for html, whose children represent the document content. role_icon a small fixed size picture, typically used to decorate components. role_label presents an icon or short string in an interface. role_layered_pane a layered pane. a specialized pane that allows its children to be drawn in layers, providing a form of stacking order. this is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a window. role_option_pane a specialized pane whose primary use is inside a ...

Building the WebLock UI
user to toggle a particulart state, as the figure above illustrates. in xul individual <radio/> elements are contained within a parent element called <radiogroup/>. grouping radio elements together creates the toggling ui by requiring that one or another of the elements be selected, but not both. the xul that defines the radiogroup in the web lock manager dialog is this: <radiogroup> <radio label="lock"/> <radio label="unlock" selected="true"/> </radiogroup> since the weblock component always starts up in the unlocked position, you can add the selected="true" attribute and value on the unlock radio button and reset it dynamically as the user takes action. site adding ui the next step is to create that part of the user interface that lets you add a new site to the white list. there ...
...o include some ui that lets you view the white list or edit it as a list. in this part of the tutorial, however, we only provide the means of adding an url provided as a string (which is not checked for validity) and passing it through to the addsite api we defined in the earlier part of the tutorial. <separator class="thin"/> <hbox align="center"> <textbox id="url.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout widgets in xul. the separator that appears at the top of this snippet creates a little divider between widgets like the kind you see in menus that divide sets of functionality available there. the parent of the textbox that users enter an url into is something called an <hbox/>, which is a...
...r/there.is.only.xul" title="web lock manager" style="width: 30em;" persist="screenx screeny" screenx="24" screeny="24"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox flex="1"> <separator class="thin"/> <hbox align="center"> <textbox id="dialog.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> <hbox align="center"> <radiogroup onchange="togglelock();"> <radio label="lock"/> <radio label="unlock"/> </radiogroup> <spacer flex="1"/> </hbox> </vbox> </hbox> </dialog> overlaying new user interface into mozilla you've got a dialog that will interact with...
...rpanel) and the ui already defined within that browser <statusbar/> at runtime. other resources this chapter describes the remaining files that must be added to and packaged up with the weblock component to provide user interface for web locking. other front end resources in some ui packages, localization resources are also defined. these include dtds in which the language in which the ui is labelled can be extracted into external files, which are swapped with dtds for other languages. for example, user interface packages often include an english dtd that defines labels and strings for button and menus and other elements in the interface. when the user selects a different language pack, all of the english that's been externalized in these files is dynamically replaced with the new choice. ...

nsIDOMXULSelectControlElement
dom/interfaces/xul/nsidomxulselectcntrlel.idlscriptable please add a summary to this article. inherits from: nsidomxulcontrolelement last changed in gecko 1.9 (firefox 3) method overview nsidomxulselectcontrolitemelement appenditem(in domstring label, in domstring value); long getindexofitem(in nsidomxulselectcontrolitemelement item); nsidomxulselectcontrolitemelement getitematindex(in long index); nsidomxulselectcontrolitemelement insertitemat(in long index, in domstring label, in domstring value); nsidomxulselectcontrolitemelement removeitemat(in long index); attributes attribute type description itemcount unsigned long read only. selectedindex long selecteditem nsidomxulselectcontrolitemelement value domstring methods appenditem() nsidomxul...
...ment insertitemat(in long index, in domstring label, in domstring value); nsidomxulselectcontrolitemelement removeitemat(in long index); attributes attribute type description itemcount unsigned long read only. ...
...g label, in domstring value); nsidomxulselectcontrolitemelement removeitemat(in long index); attributes attribute type description itemcount unsigned long read only. ...
... in domstring value ); parameters label value return value getindexofitem() long getindexofitem( in nsidomxulselectcontrolitemelement item ); parameters item return value getitematindex() nsidomxulselectcontrolitemelement getitematindex( in long index ); parameters index return value insertitemat() nsidomxulselectcontrolitemelement insertitemat( in long index, in domstring label, in domstring value ); parameters index label value return value removeitemat() nsidomxulselectcontrolitemelement removeitemat( in long index ); parameters index return value ...

nsIMsgRuleAction
msgfilter.idl [scriptable, uuid(190a2a18-d245-473a-a402-9f0814598c7f)] interface nsimsgruleaction : nsisupports { attribute nsmsgruleactiontype type; // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; // target label. ...
...-473a-a402-9f0814598c7f)] interface nsimsgruleaction : nsisupports { attribute nsmsgruleactiontype type; // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; // target label. ...
...)] interface nsimsgruleaction : nsisupports { attribute nsmsgruleactiontype type; // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; // target label. ...
...e nsimsgruleaction : nsisupports { attribute nsmsgruleactiontype type; // target priority.. throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; // target folder.. throws an exception if the action is not move to folder attribute acstring targetfolderuri; // target label. ...

Working with windows in chrome code
you can find the window's opene...
...you can find the window's opener using its window.opener property or via a callback function passed to the window in a way described in the previo...
...s add code to the previous example to notify the opener when the user presses cancel on the progress dialog. using window.opener. the opener property returns its window's opener; that is, the window object that opened it. if we're sure the window that opened the progress dialog declares the canceloperation function, we can use window.opener.canceloperation() to notify it, like this: <button label="cancel" oncommand="opener.canceloperation(); close();" /> using a callback function. alternatively, the opener window can pass a callback function to the progress dialog in the same way we passed the status string in the previous example: function oncancel() { alert("operation canceled!"); } ... window.opendialog( "chrome://test/content/progress.xul", "myprogress", "chrome,centersc...
... the progress dialog in the same way we passed the status string in the previous example: function oncancel() { alert("operation canceled!"); } ... window.opendialog( "chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10}, oncancel ); the progress dialog can then run the callback like this: <button label="cancel" oncommand="window.arguments[1](); close();" /> example 3: using nsiwindowmediator when opener is not enough the window.opener property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places. in more complicated cases you need to use the nsiwindowmediator interface, introduced above. one case in which you might want t...

Accessibility Inspector - Firefox Developer Tools
...
...ent accessibility-relevant states that can apply to the current item. for example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. for a full list of internal states, see gecko states. relations — a list of the accessiblity-relevant relationships between this item and other items. for example, in a form, an entry item could have a "labelled by" relation with a label item, which in turn has a "label for" relation to the entry item. attributes — a list of all the accessibility-relevant attributes that are applied to the item. this can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case...
...tab in the viewer. check for accessibility issues you can check for accessibility issues by clicking the drop-down menu next to: check for issues. the available menu items include: none — don't show the possible list of issues all issues — check for all types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the type of issues you selected. depending on the size and complexity of your document, this may take a few seconds. when the scan is complete, the left side of the accessibility inspector panel displays only the items that have that type of issue. in the right side of the panel, the c...
...ase the shift key. when the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the esc key. typical use cases the accessibility inspector is very useful for spotting accessibility problems at a glance. for a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example. it is also very handy for verifying semantics — you can use the inspect accessibility properties context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or a link is really a link). ...

Browser Console - Firefox Developer Tools
d by a pane that display messages. at the top, a toolbar enables you to filter the messages that appear. at the bottom, a command line interpreter enables you to evaluate javascript expressions. beginning with firefox 68, the browser console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled show content messages. the following image shows the browser console focused on the same page as above after clicking on the show content messages checkbox. browser console logging the browser console logs the same sorts of messages as the web console: http requests warnings and errors (including javascript, css, security warnings and errors, and messages explicitly logged by javascript...
...document.queryselector('.webconsole-clear-console-button'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically. here's an example add-on that just logs an error when the user clicks a widget: widget = require("sdk/widget").widget({ id: "an-error-happened", label: "error!", width: 40, content: "error!", onclick: logerror }); function logerror() { console.error("something went wrong!"); } if you build this as an xpi file, then open the browser console, then open the xpi file in firefox and install it, you'll see a widget labeled "error!" in the add-on bar: click the icon. you'll see output like this in the browser console: for add-on sdk-base...
...owser's chrome window, you can also modify the browser's user interface. ...
...ethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); on macos, this similar code will add a new item to the "tools" menu: var parent = window.document.getelementbyid("menu_toolspopup"); var makethetea = gbrowser.ownerdocument.defaultview.document.createelementns("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); makethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); ...

Using files from web applications - Web APIs
id="fileselect">select some files</button> the code that handles the click event can look like this: const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"); fileselect.addeventlistener("click", function (e) { if (fileelem) { fileelem.click(); } }, false); you can style the new button for opening the file picker as you wish. using a label element to trigger a hidden file input element to allow opening the file picker without using javascript (the click() method), a <label> element can be used. note that in this case the input element must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be keyboard-accessible. use the visually-hidden technique instead. consider this html: <input type="fi...
...file picker without using javascript (the click() method), a <label> element can be used. note that in this case the input element must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be keyboard-accessible. use the visually-hidden technique instead. ...
...e click() method), a <label> element can be used. note that in this case the input element must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be keyboard-accessible. use the visually-hidden technique instead. ...
...e="file" id="fileelem" multiple accept="image/*" class="visually-hidden"> <label for="fileelem">select some files</label> and this css: .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibility, :focus-within is required on modern firefox and chrome */ input.visually-hidden:focus + label { outline: thin dotted; } input.visually-hidden:focus-within + label { outline: thin dotted; } there is no need to add javascript code to call fileelem.click(). also in this case you can style the label element as you wish. you need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow. (as of ...

FileReader: abort event - Web APIs
the abort event is fired when a read has been aborted: for instance because the program called filereader.abort(). ...
...the abort event is fired when a read has been aborted: for instance because the program called filereader.abort(). ...
...eader.onabort examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid...
... </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} b...

FileReader: load event - Web APIs
the load event is fired when a file has been read successfully. ...
... the load event is fired when a file has been read successfully. ...
...reader.onload examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid...
... </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} b...

FileReader: loadend event - Web APIs
the loadend event is fired when a file read has completed, successfully or not. ...
... the loadend event is fired when a file read has completed, successfully or not. ...
...der.onloadend examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid...
... </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} b...

FileReader: loadstart event - Web APIs
the loadstart event is fired when a file read operation has begun. ...
... the loadstart event is fired when a file read operation has begun. ...
...r.onloadstart examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid...
... </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} b...

FileReader: progress event - Web APIs
the progress event is fired periodically as the filereader reads data. ...
... the progress event is fired periodically as the filereader reads data. ...
...er.onprogress examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid...
... </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} b...

HTMLInputElement.stepDown() - Web APIs
stepdecrement the optional stepdecrement paremeter is a numeric value. if no parameter is passed, stepdecrement defaults to 1. if the value is a float, the value will increment as if math.floor(stepdecrement) was passed. if the value is negative, the value will be incremented instead of decremented. ...
... the value is a float, the value will increment as if math.floor(stepdecrement) was passed. if the value is negative, the value will be incremented instead of decremented. ...
...at, the value will increment as if math.floor(stepdecrement) was passed. if the value is negative, the value will be incremented instead of decremented. ...
...ple click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrementer" min="-2" max="15"> </label> </p> <input type="button" value="decrement" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutton'); button.addeventlistener('click', function() { stepondown();} ); function stepondown() { let input = document.getelementbyid('thenumber'); let val = document.getelementbyid('decrementer').value; if (val) { /* increment with...

HTMLInputElement.stepUp() - Web APIs
in the the table above), or if the step value is set to any, an invalidstateerror exception is thrown. syntax element.stepup( [ stepincrement ] ); parameters stepincrement the optional stepincrement paremeter is a numeric value. if no parameter is passed, stepincrement defaults to 1. ...
...pup( [ stepincrement ] ); parameters stepincrement the optional stepincrement paremeter is a numeric value. if no parameter is passed, stepincrement defaults to 1. ...
...t ] ); parameters stepincrement the optional stepincrement paremeter is a numeric value. if no parameter is passed, stepincrement defaults to 1. ...
...mple click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="incrementer" min="0" max="25"> </label> </p> <input type="button" value="increment" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutton') button.addeventlistener('click', function() { steponup() }) function steponup() { let input = document.getelementbyid('thenumber') let val = document.getelementbyid('incrementer').value if (val) { /* increment with a parame...

HTMLSelectElement.disabled - Web APIs
the htmlselectelement.disabled is a boolean that reflects the disabled html attribute, which indicates whether the control is disabled. if it is disabled, it does not accept clicks. a disabled element is unusable and un-clickable. ...
... the htmlselectelement.disabled is a boolean that reflects the disabled html attribute, which indicates whether the control is disabled. if it is disabled, it does not accept clicks. a disabled element is unusable and un-clickable. ...
... the htmlselectelement.disabled is a boolean that reflects the disabled html attribute, which indicates whether the control is disabled. if it is disabled, it does not accept clicks. a disabled element is unusable and un-clickable. ...
...nt.disabled is a boolean that reflects the disabled html attribute, which indicates whether the control is disabled. if it is disabled, it does not accept clicks. a disabled element is unusable and un-clickable. ...

HTMLSelectElement.options - Web APIs
the htmlselectelement.options read-only property returns a htmloptionscollection of the <option> elements contained by the <select> element. syntax var options = select.options; return value a htmloptionscollection containing the <option> elements contained by the <select> element. ...
... the htmlselectelement.options read-only property returns a htmloptionscollection of the <option> elements contained by the <select> element. syntax var options = select.options; return value a htmloptionscollection containing the <option> elements contained by the <select> element. ...
... the htmlselectelement.options read-only property returns a htmloptionscollection of the <option> elements contained by the <select> element. syntax var options = select.options; return value a htmloptionscollection containing the <option> elements contained by the <select> element. ...
...ments contained by the <select> element. example html <label for="test">label</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.options.length; i++) { console.log(select.options[i].label); // "option 1" and "option 2" } }); specifications specification status comment html living standardthe definition of 'options' in that specification. living standard no change html5the definition of 'options' in that specification. recommendation initial definition ...

Using the Payment Request API - Web APIs
this returns a promise that fulfills with a paymentresponse ob...
...this returns a promise that fulfills with a paymentresponse object if the payment is successful: request.show().then(function(paymentresponse) { // here we would pro...
...knowing about. paymentrequest.canmakepayment() can be used to check whether the paymentrequest object is capable of making a payment before you start the payment process. ...
...entrequest constructor should contain the same method names and data. // the page has loaded. should the page use paymentrequest? // if paymentrequest fails, should the page fallback to manual // web form checkout? const supportedpaymentmethods = ... let shouldcallpaymentrequest = true; let fallbacktolegacyonpaymentrequestfailure = false; (new paymentrequest(supportedpaymentmethods, {total: {label: 'stub', amount: {currency: 'usd', value: '0.01'}}}) .canmakepayment() .then(function(result) { shouldcallpaymentrequest = result; }).catch(function(error) { console.log(error); // the user may have turned off query ability in their privacy settings. // let's use paymentrequest by default and fallback to legacy // web form based checkout. shouldcallpaymentrequest = true; fallbacktol...

RadioNodeList.value - Web APIs
d as a string. if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. ...
...o buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. ...
...or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. ...
...cked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. syntax value = radionodelist.value; radionodelist.value = string; example html <form> <label><input type="radio" name="color" value="blue">blue</label> <label><input type="radio" name="color" value="red">red</label> </form> javascript // get the form const form = document.forms[0]; // get the form's radio buttons const radios = form.elements['color']; // choose the "red" option radios.value = 'red'; result specifications specification status comments html living standardthe definition of 'radionodelist.value' in that specification. living standard initial definitio...

Selection.setBaseAndExtent() - Web APIs
he setbaseandextent() method with the specified offsets, and copies the selection into the output paragraph at the very bottom of the html. ...
...he specified offsets, and copies the selection into the output paragraph at the very bottom of the html. ...
...om of the html. ...
...ent example</h1> <div> <p class="one"><span>fish</span><span>dog</span><span>cat</span><span>bird</span></p> <p>middle</p> <p class="two"><span>car</span><span>bike</span><span>boat</span><span>plane</span></p> </div> <div> <p> <label for="aoffset">anchor offset</label> <input id="aoffset" name="aoffset" type="number" value="0"> </p> <p> <label for="foffset">focus offset</label> <input id="foffset" name="foffset" type="number" value="0"> </p> <p><button>capture selection</button></p> </div> <p><strong>output</strong>: <span class="output"></span></p> the javascript looks like so: var one = document.queryselector('.one'); var two = document.queryselector('.two'); var aoffset = document.getelementbyid('aoffset'); var foffset = document.getelementbyid('foffset'...

Using XMLHttpRequest - Web APIs
rm-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>upload example</legend> <p> first name: <input type="text" name="firstname" /><br /> last name: <input type="text" name="lastname" /><br /> sex: <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">male</label> <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> ...
...ype="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> post your photos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> </body> </html...
...rm-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>upload example</legend> <p> first name: <input type="text" name="firstname" /><br /> last name: <input type="text" name="lastname" /><br /> sex: <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">male</label> <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> ...
...ype="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> post your photos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> </body> </html>...

Using the alertdialog role - Accessibility
rtdialog role. the alertdialog role is used to notify the user of urgent information that demands the user's immediate attention. as the name implies, alertdialog is a type of dialog. this means that most of the instructions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: the alert dialog must always be given an accessible name (through aria-labelledby or aria-label) , and in most cases the alert text will have to be marked up as the alert dialog's accessible description (using aria-describedby). unlike regular alerts, an alert dialog must have at least one focusable control and focus must be moved to that control when the alert dialog appears. generally alert dialogs have at least a confirmation, close or cancel button that can be used t...
...er agents and assistive technology when the alertdialog role is used, the user agent should do the following: expose the element as a dialog in the operating system's accessibility api. fire an accessible alert event using the operating system's accessibility api if it supports it. when the alert dialog appears, screen readers should announce the alert. when the alert dialog is correctly labeled and focus is moved to a control inside the dialog, screen readers should announce the dialog's accessible role, name and optionally description before announcing the focused element. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: a basic alert dialog ...
...cription before announcing the focused element. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: a basic alert dialog the code snippet below shows how to mark up an alert dialog that only provides a message and an ok button. ...
... and an ok button. ...

Using the aria-describedby attribute - Accessibility
description the aria-describedby attribute is used to indicate the ids of the elements that describe the object. it is used to establish a relationship between widgets or groups and text that described them. this is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need. the aria-describedby attribute is not used only for form elements; it is also used to associate static text with widgets, groups of elements, panes, regions that have a heading, definitions, and more. the examples section below provides more information about how to use the attribute in these cases. this attribute can be used with any typical html form element; it is not limited to elements that have an aria role assigned. v...
...fer on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: application landmark descriptions in the example below, an introductory paragraph describes a calendar application. aria-describedby is used to associate the paragraph with the application container. <div role="application" aria-labelledby="calendar" aria-describedby="info"> <h1 id="calendar">calendar</h1> <p id="info"> this calendar shows the game schedule for the boston red sox. </p> <div role="grid"> ... </div> </div> example 2: a close button in the example below, a link that functions as a 'close' button on a dialog is described elsewhere in the document. the aria-describedby attribu...
...dar</h1> <p id="info"> this calendar shows the game schedule for the boston red sox. </p> <div role="grid"> ... </div> </div> example 2: a close button in the example below, a link that functions as a 'close' button on a dialog is described elsewhere in the document. the aria-describedby attribute is used to associate the description with the link. <button aria-label="close" aria-describedby="descriptionclose" onclick="mydialog.close()">x</button> ... <div id="descriptionclose">closing this window will discard any information entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descri...
...ain page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document. used by aria roles all elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-describedby ...

ARIA: feed role - Accessibility
eed. see keyboard interactions below. if the number of articles is known, set aria-setsize on the articles themselves. however, if the total number is extremely large, indefinite, or changes often, set aria-setsize="-1" to indicate that the size of the feed is not known. another feature of the feed pattern is skim reading: articles within a feed can contain both an accessible name with the aria-label and a description with an aria-describedby, suggesting to screen readers which elements to speak after the label when navigating by article. by identifying the elements inside of an article that provide the title and the primary content, assistive technologies can provide functions that enable users to jump from article to article and efficiently discern which articles they want to read. the fee...
... posts, the convention is to tab into the nested feed with the tab key and to provide another key, such as alt + page down, to navigate from an 'outer' article to the first item in that article's nested feed. navigate between the nested feed and main feed with control + end , moving focus from the inner feed to the next article in the outer feed. wai-aria roles, states, and properties aria-labelled if the feed has no visible title, the feed element has a label specified with aria-label. if it does, see aria-labelledby. aria-labelledby if the feed has a visible title, the feed element has aria-labelledby referring to the element containing the title. if not, add an aria-label. aria-busy when busy, such as when articles are being added or removed from the feed, set aria-busy="true" du...
...each article should preferably have aria-describedby referring to one or more elements inside the article that serve as the primary content of the article. ...
...from the feed, set aria-busy="true" during the update operation. make sure it's reset to false when the operation is complete or the changes may not become visible. article each section of content in a feed should be contained in an <article> or element with role article. each article should have an aria-labelledby referring to the article title or other child that can serve as a distinguishing label. each article should preferably have aria-describedby referring to one or more elements inside the article that serve as the primary content of the article. each article element has aria-posinset set to a value that represents its position in the feed and an aria-setsize set to a value that represents either the total number of articles that have been loaded or the total number in the feed, depen...

ARIA: tab role - Accessibility
the common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs. ...
...thout javascript, there are no substitute combination of html and css only that will provide the same set of functionality that's required above for accessible tabs with content. example this example combines the role tab with tablist and elements with tabpanel to create an interactive group of tabbed content. here we are enclosing our group of content in a div, with our tablist having an aria-label to label it for assistive technology. each tab is a button with the attributes previously mentioned. the first tab has tabindex=0 on it, which we will later change to whatever tab has aria-selected=true. all of the tabpanel elements have tabindex=0 to make them tabbable, and all but the currently active one have the hidden attribute, which we will change with javascript. there is some basic styli...
...nd all but the currently active one have the hidden attribute, which we will change with javascript. there is some basic styling applied that restyles the buttons and changes the z-index to of tab elements to give the illusion of it connecting to the tabpanel for active elements, and the illusion that inactive elements are behind the active tabpanel. ...
...nel-1" id="tab-1" tabindex="0"> first tab </button> <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1"> second tab </button> <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1"> third tab </button> </div> <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> <p>content for the first panel</p> </div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </div> <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>content for the third panel</p> </div> </div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; ...

ARIA: table role - Accessibility
the table value of the aria role attribute identifies the element containing the role as having a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element. ...
...igation, or allows the user to rearrange cell order use grid or treegrid instead. to create an aria table, add role="table" to the container element. within that container, each row has role="row" set and contains child cells. each cell has a role of either columnheader, rowheader, or simply cell. rows can be children of the table or within a rowgroup. the table caption can be defined via aria-labelledby or aria-label. all other semantic table elements, such as <tbody>, <thead>, <tr>, <th>, and <td> need to be added via associated roles, such as rowgroup, row, columnheader, and cell. if the table contains sortable columns or rows, the aria-sort attribute should be added on the header cell element (not the table itself). if any rows or columns are hidden, the aria-colcount or aria-rowcount ...
...ies role="rowgroup" an optional child of the table, the row group encapsulates a group of rows, similar to thead, tbody, and tfoot. role="row" a row within the table, and optionally within a rowgroup, that is a container for one or more cells, columnheaders, or rowheaders. aria-describedby attribute takes as its value the id of the element that serves as a description for the table. aria-label attribute the aria-label provides an accessible name for the table. aria-colcount attribute this attribute is only required if the columns are not present in the dom all the time. it provides an explicit indication of the number of columns in the full table. set the value to the total number of columns in the full table. if unknown, set aria-colcount="-1". aria-rowcount attribute this at...
...columns, see the columnheader aria role. the first rule of aria use is if you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and adding an aria role, state or property to make it accessible, then do so. employ the html <table> element instead of the aria role of table whenever possible. ...

An overview of accessible web applications and widgets - Accessibility
technology. the problem dynamic content on a web page can be particularly problematic for users who, for whatever reason, are unable to view the screen. stock tickers, live twitter feed updates, progress indicators, and similar content modify the dom in ways that an assistive technology (at) may not be aware of. that's where aria comes in. example 1: markup for a tabs widget built without aria labeling. there's no information in the markup to describe the widget's form and function. <!-- this is a tabs widget. how would you know, looking only at the markup? --> <ol> <li id="ch1tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <div id="ch1panel">ch...
.... <!-- now *these* are tabs! --> <!-- we've added role attributes to describe the tab list and each tab. ...
...--> <ol role="tablist"> <li id="ch1tab" role="tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab" role="tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab" role="tab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <!-- notice the role and aria-labelledby attributes we've added to describe these panels. --> <div id="ch1panel" role="tabpanel" aria-labelledby="ch1tab">chapter 1 content goes here</div> <div id="ch2panel" role="tabpanel" aria-labelledby="ch2tab">chapter 2 content goes here</div> <div id="quizpanel" role="tabpanel" aria-labelledby="quiztab">quiz content goes here</div> </div> aria is well supported by all major browsers, including firefox, safari, opera, chrome, and internet explorer, and many assistive technologies. presenta...
...ng display:none. here is an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. the example shows a simple web form with tooltips containing instructions associated with the entry fields. in this example, the html for the tooltip has the form shown in example 2a. line 9 sets the aria-hidden state to true. example 2a. html for a tooltip <div class="text"> <label id="tp1-label" for="first">first name:</label> <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" /> <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">your first name is optional</div> </div> the css for this markup is shown in example 2b. note that...

HTML To MSAA - Accessibility
em_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible ...
...em_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible has children for each map item input @type=button, submit, reset role_system_ pushbutton from @value attribute, @alt attribute, default label, @src attribute, @data attribute n/a state_system_ default if @type attribute has value "submit" n/a "press" n/a input @type=text, textarea role_system_ text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @type=password role_system_ text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ pro...
...stem_ checked if checked property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state is changed input type="radio" role_system_ radiobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" event_object_ statechange when state is changed label role_system_ statictext from child nodes n/a n/a n/a n/a n/a legend role_system_ statictext n/a n/a n/a label_for (0x1002), points to caption element n/a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a ...
.../a n/a legend role_system_ statictext n/a n/a n/a label_for (0x1002), points to caption element n/a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_system_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_syst...

Perceivable - Accessibility
gument against longdesc. multimedia content (i.e., audio or video) should at least have a descriptive identification available, such as a caption or similar. see text alternatives for static caption options, and audio transcripts, video text tracks, and other multimedia content for other alternatives. ui controls such as form elements and buttons should have text labels that describe their purpose. buttons are simple—you should make sure the button text describes the function of the button (e.g., <button>upload image</button>). for more information on other ui controls, see ui controls. implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users. decorative images ...
...multiple ways, accomodating their differing needs. success criteria how to conform to the criteria practical resource 1.3.1 info and relationships (a) any content structure—or visual relationship made between content—can also be determined programmatically, or be inferred from text description. the main situations in which this is relevant are: text labels and the form elements they describe. these are associated unambiguously using the <label> element, which can be picked up by screenreaders, etc. image alt text. content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g., alt text), or otherwise is easy to associate (e.g., describes it and is sat right next to...
...a good basis for accessibility. 1.3.3 sensory characteristics (a) instructions for operating controls or understanding content do not rely on a single sense. this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. so, for example: "click the round button to continue" the button should be clearly labelled so that it is obvious that it is the button you need to press. if there are multiple buttons, make sure they are all clearly labelled to distinguish their function. "listen to the audio instructions for guidance" this is obviously problematic—audio will be inaccessible to those with hearing impairments, whereas text can be read, but also spoken by a screenreader if required. ...
... convey instructions), but it applies in other situations too. success criteria how to conform to the criteria practical resource 1.4.1 use of color (a) color should not be solely relied upon to convey information. for example, in forms, you should never mark required fields purely with a color (like red). instead (or as well as), something like an asterisk with a label of "required" would be more appropriate. see color and color contrast and multiple labels. 1.4.2 audio controls (a) for any audio that plays for longer than three seconds, provide accessible controls to play and pause the audio/video, and mute/adjust volume. use native <button>s to provide accessible keyboard controls, as shown in video player styling basics. 1.4.3 ...

Understandable - Accessibility
see also styling links as buttons for a useful accessible navigation menu example. 3.2.4 consistent identification (aa) controls or components that have the same functionality should be identified in the same way across different pages or views. a currency converter appearing on every page of a world travel site for example should be exactly the same, semantically and in terms of labels. again, sensible design! "labels" can refer to descriptive information in text content, or html form labels. see meaningful text labels for more information. 3.2.5 change on request (aaa) changes in context that could possibly confuse or disorient users should only occur only when requested by the user, or the user should be able to turn them off. if you need to...
...the user to a change on the page. note: server-side validation should *always* be used alongside client-side validation. client-side validation is too easy to turn off or otherwise get around, so it can't be relied on alone. see form data validation for comprehensive validation information, and wai-aria: dynamic content updates for information on live regions. 3.3.2 labels or instructions (a) clear instructions should be provided when data input is required. when a simple instruction or prompt is required, you can use <label> elements for single inputs like name or age, a combination or <label>s and <fieldset>s/<legend>s for multiple inputs that go together (like the elements of a date of birth or postal address). when more complex explanation is requ...
...suggesting alternatives when the user is choosing a user name and has selected one that is already taken), unless doing so would cause a security issue (e.g. ...
...suggesting alternatives when the user is choosing a user name and has selected one that is already taken), unless doing so would cause a security issue (e.g. when entering a password) or context problem (e.g. ...

::placeholder - CSS: Cascading Style Sheets
e of the input in close visual proximity, then use aria-describedby to programmatically associate the <input> with its hint. with this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. ...
...with this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. most screen reading technology will use aria-describedby to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary. ...
...is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. most screen reading technology will use aria-describedby to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary. <label for="user-email">your email address</label> <span id="user-email-hint" class="input-hint">example: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> placeholders in form fields are harmful — nielsen norman group windows high contrast mode placeholder text will appear with the same styling as user-entered text content when rendered in windows high contrast mode. this will m...
...laceholders in form fields are harmful — nielsen norman group windows high contrast mode placeholder text will appear with the same styling as user-entered text content when rendered in windows high contrast mode. this will make it difficult for some people to determine which content has been entered, and which content is placeholder text. greg whitworth — how to use -ms-high-contrast labels placeholders are not a replacement for the <label> element. without a label that has been programmatically associated with an input using a combination of the for and id attributes, assistive technology such as screen readers cannot parse <input> elements. mdn basic form hints placeholders in form fields are harmful — nielsen norman group examples red text html <input placeholder="t...

:enabled - CSS: Cascading Style Sheets
e element also has a disabled state, in which it can't be activated or accept focus. /* selects any enabled <input> */ input:enabled { color: blue; } syntax :enabled examples the following example makes the color of text and button <input>s green when enabled, and gray when disabled. this helps the user understand which elements can be interacted with. ...
...t can't be activated or accept focus. /* selects any enabled <input> */ input:enabled { color: blue; } syntax :enabled examples the following example makes the color of text and button <input>s green when enabled, and gray when disabled. this helps the user understand which elements can be interacted with. ...
...t> */ input:enabled { color: blue; } syntax :enabled examples the following example makes the color of text and button <input>s green when enabled, and gray when disabled. this helps the user understand which elements can be interacted with. ...
...nabled examples the following example makes the color of text and button <input>s green when enabled, and gray when disabled. this helps the user understand which elements can be interacted with. html <form action="url_of_form"> <label for="firstfield">first field (enabled):</label> <input type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; } result specifications specification status comment html living standardthe definition of ':enabled' in that specification. living standard no change. ...

:in-range - CSS: Cascading Style Sheets
do-class only applies to elements that have (and can take) a range limitation. in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid. ...
...hat have (and can take) a range limitation. in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid. ...
... living standard defines when :in-range matches elements in html. ...
... living standard defines when :in-range matches elements in html. selectors level 4the definition of ':in-range' in that specification. working draft initial specification. ...

:out-of-range - CSS: Cascading Style Sheets
applies to elements that have (and can take) a range limitation. ...
... can take) a range limitation. ...
... living standard defines when :out-of-range matches elements in html. ...
... living standard defines when :out-of-range matches elements in html. selectors level 4the definition of ':out-of-range' in that specification. ...

Linear-gradient Generator - CSS: Cascading Style Sheets
, subscribe : subscribe, unsubscribe : unsubscribe, setpickermode : setpickermode }; })(); /** * ui-dropdown select */ var dropdownmanager = (function dropdownmanager() { 'use strict'; var subscribers = {}; var dropdowns = []; var active = null; var visbility = ["hidden", "visible"]; var dropdown = function dropdown(node) { var topic = node.getattribute('data-topic'); var label = node.getattribute('data-label'); var selected = node.getattribute('data-selected') | 0; var select = document.createelement('div'); var list = document.createelement('div'); var uval = 0; var option = null; var option_value = null; list.classname = 'ui-dropdown-list'; select.classname = 'ui-dropdown-select'; while (node.firstelementchild !== null) { option = node.firstel...
...0 : 1; else this.state = 1 ^ this.state; if (active !== this) { if (active) active.toggle(false); active = this; } if (this.state ===...
...0 : 1; else this.state = 1 ^ this.state; if (active !== this) { if (active) active.toggle(false); active = this; } if (this.state === 0) this.dropmenu.setattribu...
...ack); }; var unsubscribe = function unsubscribe(topic, callback) { subscribers[topic].indexof(callback); subscribers[topic].splice(index, 1); }; var notify = function notify() { if (subscribers[this.topic] === undefined) return; for (var i = 0; i < subscribers[this.topic].length; i++) subscribers[this.topic][i](this.value); }; var createslider = function createslider(topic, label) { var slider = document.createelement('div'); slider.classname = 'ui-input-slider'; slider.setattribute('data-topic', topic); if (label !== undefined) slider.setattribute('data-info', label); new inputslider(slider); return slider; }; var init = function init() { var elem = document.queryselectorall('.ui-input-slider'); var size = elem.length; for (var i = 0; i < size; ...

border-image-slice - CSS: Cascading Style Sheets
s the border to look somewhat irregular, but can have some interesting effects. border-width: changes the width of the border. the sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an svg image). ...
...teresting effects. border-width: changes the width of the border. the sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an svg image). ...
... which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an svg image). ...
...can start to look somewhat pixellated (unless of course you use an svg image). ...

font-style - CSS: Cascading Style Sheets
d to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. see font-variation-settings. for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in which font-style: oblique can accept an <angle>. ...
...ant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. see font-variation-settings. for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in which font-style: oblique can accept an <angle>. ...
...tine lizard up holborn hill.</p> </div> css /* amstelvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is used here under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; }...
...; } .container { max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantinput.value}deg`; slantlabel.textcontent = `font-style: ${slant};`; sampletext.style.fontstyle = slant; } slantinput.addeventlistener('input', update); update(); accessibility concerns la...

font-weight - CSS: Cascading Style Sheets
loser degree of control over the chosen weight. for truetype or opentype variable fonts, the "wght" variation is used to implement varying widths. for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in which font-weight can be any number between 1 and 1000. ...
...r the chosen weight. for truetype or opentype variable fonts, the "wght" variation is used to implement varying widths. for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in which font-weight can be any number between 1 and 1000. ...
...g like an elephantine lizard up holborn hill.</p> </div> css /* mutator sans is created by letterror (https://github.com/letterror/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .cont...
...ht: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function update() { weightlabel.textcontent = `font-weight: ${weightinput.value};`; sampletext.style.fontweight = weightinput.value; } weightinput.addeventlistener('input', update); update(); accessibility concerns people experiencing...

min() - CSS: Cascading Style Sheets
mension> | <percentage> | ( <calc-sum> ) accessibility concerns when using min() to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function). ...
... font can still be scaled at least 200% for readability (without assistive technology like a zoom function). mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 examples setting a maximum size for a label and input another use case for css functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks. let's look at some css: input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 400px); background-color: pink; } form { margin: 4px; border: 1px solid black; padding: 4px; } here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width. we decla...
...hrink as the width of the form shrinks. let's look at some css: input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 400px); background-color: pink; } form { margin: 4px; border: 1px solid black; padding: 4px; } here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width. we declare the input and label to be the lesser of 40% of the form width up to the padding or 400px wide, whichever is smaller. in other words, the widest that the label and input can be is 400px. the narrowest they will be is 40% of the form's width, which on a smartwatch's screen is very small. ...
...rm itself, along with the margin, border, and padding, will be 100% of its parent's width. we declare the input and label to be the lesser of 40% of the form width up to the padding or 400px wide, whichever is smaller. in other words, the widest that the label and input can be is 400px. the narrowest they will be is 40% of the form's width, which on a smartwatch's screen is very small. <form> <label>type something:</label> <input type="text"> </form> specifications specification status comment css values and units module level 4the definition of 'min()' in that specification. editor's draft initial definition. ...

Content categories - Developer guides
embedded content. they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and text. a few other elements belong to this category, but only if a specific condition is fu...
...n and is at least partially supported by most browsers. phrasing content phrasing content defines the text and the mark-up it contains. runs of phrasing content make up paragraphs. elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters). a few other elements belong to this category, but only if a specific condition is fulfilled: <a>, if it contains only...
...k-up language or namespace into the document. elements that belong to this category include: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>. interactive content interactive content includes elements that are specifically designed for user interaction. elements that belong to this category include: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>. some elements belong to this category only under specific conditions: <audio>, if the controls attribute is present <img>, if the usemap attribute is present <input>, if the type attribute is not in the hidden state <menu>, if the type attribute is in the toolbar state <object>, if the usemap attribute is present <video>, if the controls attribute is present ...
...substantive. elements whose model is flow content or phrasing content should have at least one node which is palpable. form-associated content form-associated content comprises elements that have a form owner, exposed by a form attribute. a form owner is either the containing <form> element or the element whose id is specified in the form attribute. <button> <fieldset> <input> <keygen> <label> <meter> <object> <output> <progress> <select> <textarea> this category contains several sub-categories: listed elements that are listed in the form.elements and fieldset.elements idl collections. contains <button>, <fieldset>, <input>, <keygen>, <object>, <output>, <select>, and <textarea>. labelable elements that can be associated with <label> elements. contains <button>, <input>...

HTML attribute: accept - HTML: Hypertext Markup Language
d select any file they wish, and then choose incorrect file types. because of this, you should make sure that expected requirement is validated server-side. examples when set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type. most operating systems lighten the files that don't match the criteria and aren't selectable. ...
...incorrect file types. because of this, you should make sure that expected requirement is validated server-side. examples when set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type. most operating systems lighten the files that don't match the criteria and aren't selectable. <p> <label for="soundfile">select an audio file:</label> <input type="file" id="soundfile" accept="audio/*"> </p> <p> <label for="videofile">select a video file:</label> <input type="file" id="videofile" accept="video/*"> </p> <p> <label for="imagefile">select some images:</label> <input type="file" id="imagefile" accept="image/*" multiple> </p> note the last example allows you to select multiple iamges. see the multiple attribute for mor...
... its value a string containing one or more of these unique file type specifiers, separated by commas. for example, a file picker that needs content that can be presented as an image, including both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live. regardless of the user's device or operating system, the file input ...
...e with an image/* mime type. (many mobile devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an ms word document. let's look at a more complete example: <form method="post" enctype="multipart/form-data"> <div> <label for="profile_pic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } specifications specification status html living standardthe definition of 'accept attribute' in that specification. living sta...

HTML attribute: size - HTML: Hypertext Markup Language
ontrol will be the default width based on the user agent. if css targets the element with properties impacting the width, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
...based on the user agent. if css targets the element with properties impacting the width, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
...nt with properties impacting the width, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
...ss takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...

<details>: The Details disclosure element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: the common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties." a <details> widget can be in one of two states. the default closed state displays only the triangle and the label inside <summary> (or a user agent-defined default string if no <summary>). this might look like the following: here we see a standard disclosure widget with the label "system requirements", in its default closed state. when the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents: from there, you can use css to style the disclosure wid...

<fieldset>: The Field Set element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as the example above shows, the <fieldset> element provides a grouping for a part of an html form, with a nested <legend> element providing a caption for the <fieldset>. ...
.... otherwise, it establishes a block formatting context. you can feel free to style the <fieldset> and <legend> in any way you want to suit your page design. examples simple fieldset this example shows a really simple <fieldset> example, with a <legend>, and a single control inside it. ...
... formatting context. you can feel free to style the <fieldset> and <legend> in any way you want to suit your page design. examples simple fieldset this example shows a really simple <fieldset> example, with a <legend>, and a single control inside it. ...
...mple fieldset</legend> <input type="radio" id="radio"> <label for="radio">spirit of radio</label> </fieldset> </form> disabled fieldset this example shows a disabled <fieldset> with two controls inside it. note how both the controls are disabled due to being inside a disabled <fieldset>. <form action="#"> <fieldset disabled> <legend>disabled fieldset</legend> <div> <label for="name">name: </label> <input type="text" id="name" value="chris"> </div> <div> <label for="pwd">archetype: </label> <input type="password" id="pwd" value="wookie"> </div> </fieldset> </form> technical summary content categories flow content, sectioning root, listed, form-associated element, palpable content. permitted content an opti...

<form> - HTML: Hypertext Markup Language
_top: load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). if no parent, behaves the same as _self. this value can be overridden by a formtarget attribute on a <button>, <input type="submit">, or <input type="image"> element. ...
...ontext that is an ancestor of the current one and has no parent). if no parent, behaves the same as _self. this value can be overridden by a formtarget attribute on a <button>, <input type="submit">, or <input type="image"> element. ...
... overridden by a formtarget attribute on a <button>, <input type="submit">, or <input type="image"> element. ...
...it">, or <input type="image"> element. examples html <!-- form which will send a get request to the current url --> <form> <label>name: <input name="submitted-name" autocomplete="name"> </label> <button>save</button> </form> <!-- form which will send a post request to the current url --> <form method="post"> <label>name: <input name="submitted-name" autocomplete="name"> </label> <button>save</button> </form> <!-- form with fieldset, legend, and label --> <form method="post"> <fieldset> <legend>title</legend> <label><input type="radio" name="radio"> select me</label> </fieldset> </form> specifications specification status comment html living standardthe definition of '<form>' in that specification. living standard ...

<input type="button"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: while <input> elements of type button are still perfectly valid html, the newer <button> element is now the favored way to create buttons. ...
...e to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: while <input> elements of type button are still perfectly valid html, the newer <button> element is now the favored way to create buttons. given that a <button>’s label text is inserted between the opening and closing tags, you can include html in the label, even images. value a domstring used as the button's label events click supported common attributes type, and value idl attributes value methods none value an <input type="button"> elements' value attribute contains a domstring that is used as the button's label. <input type="button" value="click me"> if you don't specify...
...have no real value to be constrained. examples the below example shows a very simple drawing app created using a <canvas> element and some simple css and javascript (we'll hide the css for brevity). the top two controls allow you to choose the color and size of the drawing pen. the button, when clicked, invokes a function that clears the canvas. ...
...imple drawing app created using a <canvas> element and some simple css and javascript (we'll hide the css for brevity). the top two controls allow you to choose the color and size of the drawing pen. the button, when clicked, invokes a function that clears the canvas. ...

<input type="range"> - HTML: Hypertext Markup Language
t type="range" min="5" max="10" step="0.01"> if you want to accept any value regardless of how many decimal places it extends to, you can specify a value of any for the step attribute: <input type="range" min="0" max="3.14" step="any"> this example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected. adding hash marks and labels the html specification gives browsers some flexibility on how to present the range control. nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. the specification describes how to add custom points to the range control using the list attribute and a <datalist> element, but does not have any requirements or even recommendations for standardize...
..."></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50"></option> <option value="60"></option> <option value="70"></option> <option value="80"></option> <option value="90"></option> <option value="100"></option> </datalist> screenshot live a range control with hash marks and labels you can add labels to your range control by adding the label attribute to the <option> elements corresponding to the tick marks you wish to have labels for. html examples <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option>...
... the label attribute to the <option> elements corresponding to the tick marks you wish to have labels for. html examples <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50" label="50%"></option> <option value="60"></option> <option value="70"></option> <option value="80"></option> <option value="90"></option> <option value="100" label="100%"></option> </datalist> screenshot live note: currently, no browser fully supports these features. ...
...e="40"></option> <option value="50" label="50%"></option> <option value="60"></option> <option value="70"></option> <option value="80"></option> <option value="90"></option> <option value="100" label="100%"></option> </datalist> screenshot live note: currently, no browser fully supports these features. firefox doesn't support hash marks and labels at all, for example, while chrome supports hash marks but doesn't support labels. version 66 (66.0.3359.181) of chrome supports labels but the <datalist> tag has to be styled with css as its display property is set to none by default, hiding the labels. change the orientation by default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right.

<input type="reset"> - HTML: Hypertext Markup Language
to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. you should usually avoid including reset buttons in your forms. they're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <input type="reset"> element's value attribute contains a domstring that is used as the button's label. buttons such as reset don't have a value otherwise. <input type="reset" value="reset the form"> if you don't specify a value, you get ...
... supported common attributes type and value idl attributes value methods none value an <input type="reset"> element's value attribute contains a domstring that is used as the button's label. buttons such as reset don't have a value otherwise. <input type="reset" value="reset the form"> if you don't specify a value, you get an button with the default label (typically "reset," but this will vary depending on the user agent): <input type="reset"> using reset buttons <input type="reset"> buttons are used to reset forms. if you want to create a custom button and then customize the behaviour using javascript, you need to use <input type="button">, or better still, a <button> element. a simple reset button we'll begin by creating a simple reset ...
... will vary depending on the user agent): <input type="reset"> using reset buttons <input type="reset"> buttons are used to reset forms. if you want to create a custom button and then customize the behaviour using javascript, you need to use <input type="button">, or better still, a <button> element. a simple reset button we'll begin by creating a simple reset button: <form> <div> <label for="example">type in some sample text</label> <input id="example" type="text"> </div> <div> <input type="reset" value="reset the form"> </div> </form> this renders like so: try entering some text into the text field, and then pressing the reset button. adding a reset keyboard shortcut to add a keyboard shortcut to a submit button — just as you would with any <input> for wh...
...ton. adding a reset keyboard shortcut to add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute. in this example, r is specified as the access key (you'll need to press r plus the particular modifier keys for your browser/os combination; see accesskey for a useful list of those). <form> <div> <label for="example">type in some sample text</label> <input id="example" type="text"> </div> <div> <input type="reset" value="reset the form" accesskey="r"> </div> </form> the problem with the above example is that there's no way for the user to know what the access key is! this is especially true since the modifiers are typically non-standard to avoid conflicts. when building a s...

<menu> - HTML: Hypertext Markup Language
none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree dom interface htmlmenuelement attributes this element includes the global attributes. label the name of the menu as shown to the user. used within nested menus, to provide a label through which the submenu can be accessed. must only be specified when the parent element is a <menu> in the context menu state. type this attribute indicates the kind of menu being declared, and can be one of two values. context : indicates the popup menu state, which represents a group of commands...
...m>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> result toolbar toolbar menus haven't been implemented in any known browsers yet. html <!-- a context menu for a simple editor, - containing two menu buttons. ...
...rated action</menuitem> </menu> result toolbar toolbar menus haven't been implemented in any known browsers yet. html <!-- a context menu for a simple editor, - containing two menu buttons. ...
...taining two menu buttons. --> <menu type="toolbar"> <li> <button type="menu" menu="file-menu">file</button> <menu type="context" id="file-menu"> <menuitem label="new..." onclick="newfile()"> <menuitem label="save..." onclick="savefile()"> </menu> </li> <li> <button type="menu" menu="edit-menu">edit</button> <menu type="context" id="edit-menu"> <menuitem label="cut..." onclick="cutedit()"> <menuitem label="copy..." onclick="copyedit()"> <menuitem label="paste..." onclick="pasteedit()"> </menu> </li> </menu> result specifications specification status comment html living standardthe definition of '<menu>' in that specification. living standard no change from latest snapshot, unknown html ...

<menuitem> - HTML: Hypertext Markup Language
commands can also optionally include a checkbox or be grouped to share radio buttons. ...
...title can be used to describe the command, or provide usage hints. checked boolean attribute which indicates whether the command is selected. may only be used when the type attribute is checkbox or radio. command specifies the id of a separate element, indicating a command to be invoked indirectly. may not be used within a menu item that also includes the attributes checked, disabled, icon, label, radiogroup or type. default this boolean attribute indicates use of the same command as the menu's subject element (such as a button or input). disabled boolean attribute which indicates that the command is not available in the current state. note that disabled is distinct from hidden; the disabled attribute is appropriate in any context where a change in circumstances might render the comma...
...mand as the menu's subject element (such as a button or input). disabled boolean attribute which indicates that the command is not available in the current state. note that disabled is distinct from hidden; the disabled attribute is appropriate in any context where a change in circumstances might render the command relevant. icon image url, used to provide a picture to represent the command. label the name of the command as shown to the user. required when a command attribute is not present. radiogroup this attribute specifies the name of a group of commands to be toggled as radio buttons when selected. may only be used where the type attribute is radio. type this attribute indicates the kind of command, and can be one of three values. command: a regular command with an associated...
...fferent states. radio: represent one selection from a group of commands that can be toggled as radio buttons. example html content <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents. </menuitem> <menuitem type="command" label="this command has javascript" onclick="alert('command clicked')"> commands don't render their contents. </menuitem> <hr> <menuitem type="radio" radiogroup="group1">radio button 1</menuitem> <menuitem ty...

<select>: The HTML Select element - HTML: Hypertext Markup Language
nt represents a control that provides a menu of options: the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the above example shows typical <select> usage. it is given an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. each menu option is defined by an <option> element nested inside the <select>. each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. if no value attribute is included, the value defaults ...
...is selected by default. ...
...hoice"> <option value="first">first value</option> <option value="second" selected>second value</option> <option value="third">third value</option> </select> advanced select with multiple features the follow example is more complex, showing off more features you can use on a <select> element: <label>please choose one or more pets: <select name="pets" multiple size="4"> <optgroup label="4-legged pets"> <option value="dog">dog</option> <option value="cat">cat</option> <option value="hamster" disabled>hamster</option> </optgroup> <optgroup label="flying pets"> <option value="parrot">parrot</option> <option value="macaw">macaw</option> <option value="albatross">albatross</option> </optgroup> </select> </label> you'll see that: ...
...p> elements to divide the options up into different groups. this is a purely visual grouping, its visualization generally consists of the group name being bolded, and the options being indented. the "hamster" option includes a disabled attribute and therefore can't be selected at all. technical summary content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element permitted content zero or more <option> or <optgroup> elements. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role combobox with no multiple attribute and no size attribute greater than 1, otherwise...

<textarea> - HTML: Hypertext Markup Language
mment on a review or feedback form. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the above example demonstrates a number of features of <textarea>: an id attribute to allow the <textarea> to be associated with a <label> element for accessibility purposes a name attribute to set the name of the associated data point submitted to the server when the form is submitted. rows and cols attributes to allow you to specify an exact size for the <textarea> to take. setting these is a good idea for consistency, as browser defaults can differ. default content entered between the opening and closing tags. <textarea> does...
...at the user should enter. name the name of the control. placeholder a hint to the user of what can be entered in the control. carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint. note: placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. see labels and placeholders in <input>: the input (form input) element for a full explanation. readonly this boolean attribute indicates that the user cannot modify the value of the control. unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. the value of a read-only control is still submitted w...
... also have the required attribute set. placeholder this example has a placeholder set. notice how it disappears when you start typing into the box. <textarea name="textarea" rows="5" cols="30" placeholder="comment text."></textarea> note: placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. see labels and placeholders in <input>: the input (form input) element for a full explanation. disabled and readonly this example shows two <textarea>s — one of which is disabled, and one of which is readonly. have a play with both and you'll see the difference in behavior — the disabled element is not selectable in any way (and its value is not submitted), wher...
...han firefox, such as chrome, the disabled textarea content may be selectable and copyable. <textarea name="textarea" rows="5" cols="30" disabled>i am a disabled textarea</textarea> <textarea name="textarea" rows="5" cols="30" readonly>i am a readonly textarea</textarea> technical summary content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element. permitted content text tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role textbox permitted aria roles no role permitted dom interface htmltextareaelement specificati...

contextmenu - HTML: Hypertext Markup Language
m all browsers the contextmenu global attribute is the id of a <menu> to use as the contextual menu for this element. a context menu is a menu that appears upon user interaction, such as a right-click. html5 now allows us to customize this menu. here are some implementation examples, including nested menus. example html <body contextmenu="share"> <menu type="context" id="share"> <menu label="share"> <menuitem label="twitter" onclick="shareviatwitter()"></menuitem> <menuitem label="facebook" onclick="shareviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. </li> <li contextmenu="changefont" id="fontsizing"> on this spec...
... anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. ...
...facebook using the share menu from your context menu. ...
...i am learning contextmenu from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/eleme...

Control flow and error handling - JavaScript
and returns false. function checkdata() { if (document.form1.threechar.value.length == 3) { return true; } else { alert( 'enter exactly three characters. ' + `${document.form1.threechar.value} is not valid.`); return false; } } switch statement a switch statement allows a program to evaluate an expression and attempt to match the expression's value to a case label. ...
... 'enter exactly three characters. ' + `${document.form1.threechar.value} is not valid.`); return false; } } switch statement a switch statement allows a program to evaluate an expression and attempt to match the expression's value to a case label. if a match is found, the program executes the associated statement. ...
...`${document.form1.threechar.value} is not valid.`); return false; } } switch statement a switch statement allows a program to evaluate an expression and attempt to match the expression's value to a case label. if a match is found, the program executes the associated statement. ...
... case label. if a match is found, the program executes the associated statement. a switch statement looks like this: switch (expression) { case label_1: statements_1 [break;] case label_2: statements_2 [break;] … default: statements_def [break;] } javascript evaluates the above switch statement as follows: the program first looks for a case clause with a label matching the value of expression and then transfers control to that clause, executing the associated statements. if no matching label is found, the program looks for the optional default clause: if a default clause is found, the program transfers control to that clause, executing the associated statements. if no default clause is found, the program resumes execution at the statement fol...

FinalizationRegistry.prototype.unregister() - JavaScript
is no longer registered in the registry. there is no need to all unregister in your cleanup callback. only call unregister if you haven't received a cleanup callback and no longer need to receive one. ...
...allback and no longer need to receive one. examples using unregister this example shows registering a target object using that same object as the unregister token, then later unregistering it via unregister: class thingy { #cleanup = label => { // ^^^^^−−−−− held value console.error( `the \`release\` method was never called for the object with the label "${label}"` ); }; #registry = new finalizationregistry(this.#cleanup); /** * constructs a `thingy` instance. ...
...s thingy { #cleanup = label => { // ^^^^^−−−−− held value console.error( `the \`release\` method was never called for the object with the label "${label}"` ); }; #registry = new finalizationregistry(this.#cleanup); /** * constructs a `thingy` instance. be sure to call `release` when you're done with it. * * @param label a label for the `thingy`. */ constructor(label) { // vvvvv−−−−− held value this.#registry.register(this, label, this); // target −−−−−^^^^ ^^^^−−−−− unregister token } /** * releases resources held by this `thingy` instance. */ release() { this.#registry.
... finalizationregistry(this.#cleanup); /** * constructs a `thingy` instance for the given file. be sure to call `release` when you're done with it. * * @param filename the name of the file. */ constructor(filename) { this.#file = file.open(filename); // vvvvv−−−−− held value this.#registry.register(this, label, this.#file); // target −−−−−^^^^ ^^^^^^^^^^−−−−− unregister token } /** * releases resources held by this `thingy` instance. */ release() { if (this.#file) { this.#registry.unregister(this.#file); // ^^^^^^^^^^−−−−− unregister token file.close(this.#fil...

Working with Events - Archive of obsolete content
adding listeners in constructors event emitters may be modules, as is the case for the ready event above, or they may be objects returned by constructors. in the latter case the opt...
...alternative to calling the object's on() method. for example: the actionbutton object emits an event when the button is clicked. the following add-on creates a button and assigns a listener to the onclick property of the options object supplied to the button's constructor. ...
...quire("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").open("https://developer.mozilla.org/"); } }); this is exactly equivalent to constructing the button and then calling the button's on() method: var button = require("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-16.png" }); button.on("click", function() { require("sdk/tabs").open("https://developer.mozilla.org/"); }); removing event listeners event listeners can be removed by calling removelistener(type, listener), supplying the type of event and the listener to remove. the listener must have been previously been added using one of the methods described above. in...

panel - Archive of obsolete content
e panel's constructor or to its show() method. ...
..."sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it. var textentrypanel = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button. function handleclick(state) { textentrypanel.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event t...
... attach a content script: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it. var textentrypanel = require("sdk/panel").panel({ contenturl: data.url("text-entry.html") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button. function handleclick(state) { textentrypanel.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event t...

passwords - Archive of obsolete content
rty should match the url property. usernamefield the value of the "name" attribute for the form's username field. passwordfield the value of the "name" attribute for the form's password field. ...
...the url property. usernamefield the value of the "name" attribute for the form's username field. passwordfield the value of the "name" attribute for the form's password field. ...
... value of the "name" attribute for the form's username field. passwordfield the value of the "name" attribute for the form's password field. so: given a form at http://www.example.com/login with the following html: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <label>username:</label> <input type="text" name="uname"> <label>password:</label> <input type="password" name="pword"> </form> the corresponding values for the credential (excluding username and password) should be: url: "http://www.example.com" formsubmiturl: "http://login.example.com" usernamefield: "uname" passwordfield: "pword" note that for both url and formsubmiturl, the portion of the url after the hostname is omitted. http authenticatio...

jpm - Archive of obsolete content
he current directory (or --addon-dir). jpm sign --api-key ${jwt_issuer} --api-secret ${jwt_secret} this submits an xpi it to the addons.mozilla.org signing api, then downloads a signed xpi to the working directory if it passes validation. to get values for --api-key and --api-secret, you will need to create api credentials on addons.mozilla.org. on the amo key management page, these values are labeled "jwt_issuer" and "jwt_secret". here are some possible outcomes of running the sign command: your add-on passed validation, was signed by mozilla, and a new signed xpi was downloaded to your working directory. your add-on failed validation, was not signed, and you got a link to a detailed report. after fixing the validation errors, you can run the command again. you add-on passed validatio...
...e a listed add-on, just submit it directly to addons.mozilla.org where it is signed automatically. see the debugging section if you are experiencing difficulty installing a signed add-on. jpm sign accepts the following options: --api-key=jwt_issuer api access key (string) generated on the addons.mozilla.org key management page. on the amo key management page, this value is labeled "jwt issuer". --api-secret=jwt_secret api access secret (string) generated on the addons.mozilla.org key management page. this value should be guarded with care and never checked into version control. if your secret is compromised, another developer could upload add-ons to your account. you should revoke and regenerate compromised api credentials immediately. on the am...
...ecret=jwt_secret api access secret (string) generated on the addons.mozilla.org key management page. this value should be guarded with care and never checked into version control. if your secret is compromised, another developer could upload add-ons to your account. you should revoke and regenerate compromised api credentials immediately. on the amo key management page, this value is labeled "jwt secret". --api-url-prefix=http://.../api an optional api url prefix in case you'd like to use a pre-production signing api. for example, you could pass https://addons-dev.allizom.org/api/v3 to use the dev instance of addons.mozilla.org. --xpi=/path/to/file.xpi an xpi file to sign. when no file is specified, a new xpi will be generated from the...

Alerts and Notifications - Archive of obsolete content
, 'chrome://global/content/alerts/alert.xul', '_blank', 'chrome,titlebar=no,popup=yes', null); win.arguments = [image, title, msg, false, '']; } using notification box another way of non-modal notification and further interaction with users is using of xul elements notificationbox and notification (implicitly). ...
... box another way of non-modal notification and further interaction with users is using of xul elements notificationbox and notification (implicitly). however it is possible to use only buttons and a label there. ...
... interaction with users is using of xul elements notificationbox and notification (implicitly). however it is possible to use only buttons and a label there. ...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
d by extensions. to add your buttons, all you need to do is overlay the palette in your main browser overlay. <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="xulschoolhello-hello-world-button" class="toolbarbutton-1 chromeclass-toolbar-additional" label="&xulschoolhello.helloworld.label;" tooltiptext="&xulschoolhello.helloworld.tooltip;" oncommand="xulschoolchrome.browseroverlay.dosomething(event);" /> <!-- more buttons here. --> </toolbarpalette> <!-- more overlay stuff. --> </overlay> one detail that is easy to overlook is the fact that the toolbarpalette element is outside of the window element. if you put the toolbarpal...
...schoolchrome.browseroverlay.dosomething(event);" /> <!-- more buttons here. --> </toolbarpalette> <!-- more overlay stuff. --> </overlay> one detail that is easy to overlook is the fact that the toolbarpalette element is outside of the window element. if you put the toolbarpalette element inside the window element in your overlay, some weird errors will begin to happen. always set the label and tooltiptext attributes of a toolbarbutton. in the case of a toolbaritem element (discussed later), use the title attribute instead of label. tooltips are very important for users that want to know what a button does before clicking it. setting the image for a toolbar button is done with css: #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-wo...
...s this is not what you want as default behavior, because it would be very hard for the user to discover your buttons. keep in mind most users don't know how to customize toolbars in firefox. let's add our own toolbar. this is done in the overlay as well. ...

Creating a dynamic status bar extension - Archive of obsolete content
our extension will refresh the stock information display when the use...
...ar samplepanel = document.getelementbyid('stockwatcher'); var output = httprequest.responsetext; if (output.length) { // remove whitespace from the end of the string; // this gets rid of the end-of-line characters output = output.replace(/\w*$/, ''); // build the tooltip string var fieldarray = output.split(','); // assert that fieldarray[0] == 'goog' samplepanel.label = 'goog: ' + fieldarray[1]; samplepanel.tooltiptext = 'chg: ' + fieldarray[4] + ' | ' + 'open: ' + fieldarray[5] + ' | ' + 'low: ' + fieldarray[6] + ' | ' + 'high: ' + fieldarray[7] + ' | ' + 'vol: ' + fieldarray[8]; } } the first thing we do here is get the status bar panel into the variable samplepanel by calling the document.getelementbyid() dom funct...
...like this: "goog",414.20,"5/1/2006","1:36pm",-3.74,417.85,419.44,412.19,4760215 we then parse the text. we use the split() string function to split the comma-separated value string into its individual parts, with each field in a separate element in the array fieldarray. at index 0 is the ticker symbol itself, which we don't need since we know which stock we're looking at. the status bar panel's label is set to indicate the current value of the stock, which is stored in fieldarray, by setting the samplepanel.label property. we then set the tooltip for the status bar panel by assigning an appropriate string to the samplepanel.tooltiptext property. the string is built from a combination of static strings and various elements from the fieldarray array. see it in action now you can install it and ...

JXON - Archive of obsolete content
ame": "name", "@value": "captured" }], "table": { "tr": [{ "th": { "@style": "text-align: right;", "keyvalue": "product:" }, "td": { "span": [{ "input": { "@type": "radio", "@name": "nome", "@id": "rel_tshirt", "@value": "tshirt" }, "label": { "@for": "rel_tshirt", "keyvalue": "t-shirt" }, "@class": "product" }, { "input": { "@type": "radio", "@name": "nome", "@id": "rel_trousers", "@value": "trousers" }, "label": { "@for": "rel_trousers", "keyvalue": "...
...s", "@value": "trousers" }, "label": { "@for": "rel_trousers", "keyvalue": "trousers" }, "@class": "product" }, { "input": { "@type": "radio", "@name": "nome", "@id": "rel_pullover", "@value": "pullover" }, "label": { "@for": "rel_pullover", "keyvalue": "pullover" }, "@class": "product" }] } }, { "th": { "@style": "text-align: right;", "keyvalue": "quantity:" }, "td": { "input": { "@type": "text", "@name": "myinput", "@onkeypress": "return num...
...ipt> <input type="hidden" name="instid" value="1234" /> <input type="hidden" name="currency" value="gbp" /> <input type="hidden" name="amount" value="0" /> <input type="hidden" name="name" value="captured" /> <table> <tr> <th style="text-align: right;">product:</th> <td><span class="product"><input type="radio" name="nome" id="rel_tshirt" value="tshirt"/><label for="rel_tshirt">t-shirt</label></span><span class="product"><input type="radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">trousers</label></span><span class="product"><input type="radio" name="nome" id="rel_pullover" value="pullover"/><label for="rel_pullover">pullover</label></span> </td> </tr> <tr> <th style="text-align: right;">quant...

Localizing an extension - Archive of obsolete content
l file that comprises the user interface for your extension should have a locale file in its locale directory. each locale file maps entity names referenced in the xul files to the strings themselves. ...
...his: <!entity options_window_title "stockwatcher 2 preferences"> <!entity options_symbol.label "stock to watch: "> the "options_window_title" entity maps to the string "stockwatcher 2 preferences", which is used as the title of the preference window. the stockwatcher2.dtd file contains the mappings for the stockwatcher2.xul file: <!entity panel_loading "loading..."> <!entity menu_refresh_now.label "refresh now"> <!entity menu_apple.label "apple (aapl)"> <!entity menu_google.label "google (goog)"> <!entity menu_microsoft.label "microsoft (msft)"> <!entity menu_yahoo.label "yahoo (yhoo)"> update the xul files each xul file needs to reference its corresponding locale file. we also need to update the code to use the entities instead of the strings, so that the substitutions take place bas...
...bes how to do it. note that the urls of the dtd files don't actually include the name of the localization to use. the chrome registry resolves the uris based on the user's current locale setting and the data you provide in your chrome manifest. then we simply replace each text string in our xul files with the corresponding entity. for example, in stockwatcher2.xul, we change this line: <menuitem label="refresh now" oncommand="stockwatcher.refreshinformation()"/> to <menuitem label="&menu_refresh_now.label;" oncommand="stockwatcher.refreshinformation()"/> do this for every string used in each xul file. update the chrome manifest to let firefox know about the locale files, we need to make a revision to our chrome.manifest file, adding one line for each localization: locale stockwatcher2 en-u...

Creating a Firefox sidebar extension - Archive of obsolete content
ated. it is listed in example 2. the locale includes the name and shortcut keys for the sidebar. example 2. chrome/locale/emptysidebar.dtd <!entity emptysidebar.title "emptysidebar"> <!entity openemptysidebar.commandkey "e"> <!entity openemptysidebar.modifierskey "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3. it creates a page holding one label. other elements can be included, please read the xul tutorials for more information. example 3. chrome/content/emptysidebar.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?> <!doctype page system "chrome://emptysidebar/locale/emptysidebar.dtd"> <page id="sbemptysidebar" title=...
...this is an separate xul file that specifies the location of menu items. the sidebar here is added to the view | sidebar menu. the overlay file is listed in example 4. example 4. chrome/content/firefoxoverlay.xul <?xml version="1.0"?
...armenu"> <menuitem key="key_openemptysidebar" observes="viewemptysidebar" /> </menupopup> <keyset id="mainkeyset"> <key id="key_openemptysidebar" command="viewemptysidebar" key="&openemptysidebar.commandkey;" modifiers="&openemptysidebar.modifierskey;" /> </keyset> <broadcasterset id="mainbroadcasterset"> <broadcaster id="viewemptysidebar" label="&emptysidebar.title;" autocheck="false" type="checkbox" group="sidebar" sidebarurl="chrome://emptysidebar/content/emptysidebar.xul" sidebartitle="&emptysidebar.title;" oncommand="togglesidebar('viewemptysidebar');" /> </broadcasterset> </overlay> the overlay file consists of three entries, ...

Nanojit - Archive of obsolete content
| lc_assembly; #else lc.lcbits = 0; #endif // set up the basic nanojit objects. allocator *alloc = new vmallocator(); codealloc *codealloc = new codealloc(); assembler *assm = new (&gc) assembler(*codealloc, *alloc, &core, &lc); fragmento *fragmento = new (&gc) fragmento(&core, &lc, cache_size_log2, codealloc); lirbuffer *buf = new (*alloc) lirbuffer(*alloc); #ifdef debug fragmento->labels = new (*alloc) labelmap(*alloc, &lc); buf->names = new (*alloc) lirnamemap(*alloc, fragmento->labels); #endif // create a fragment to hold some native code. fragment *f = fragmento->getanchor((void *)0xdeadbeef); f->lirbuf = buf; f->root = f; // create a lir writer lirbufwriter out(buf); // write a few lir instructions to the buffer: add the first parameter // to the constant 2. ou...
...ojit). lins *rec_ins = out.insskip(sizeof(guardrecord) + sizeof(sideexit)); guardrecord *guard = (guardrecord *) rec_ins->payload(); memset(guard, 0, sizeof(*guard)); sideexit *exit = (sideexit *)(guard + 1); guard->exit = exit; guard->exit->target = f; f->lastins = out.insguard(lir_loop, out.insimm(1), rec_ins); // compile the fragment. compile(assm, f, *alloc verbose_only(, fragmento->labels)); if (assm->error() != none) { fprintf(stderr, "error compiling fragment\n"); return 1; } printf("compilation successful.\n"); // call the compiled function. typedef js_fastcall int32_t (*addtwofn)(int32_t); addtwofn fn = reinterpret_cast<addtwofn>(f->code()); printf("2 + 5 = %d\n", fn(5)); return 0; } code explanation interesting part are the lines 46-50: // write a few lir in...
..._ret, result); basically, what the code provided above is doing is feeding raw lir into the lir buffer, using the lirwriter's writer object. from an operational point of view, it is creating a function, which takes an integer input, and adds it to two, and outputs the result. the function is created here on lines 57-69: // compile the fragment. compile(assm, f, *alloc verbose_only(, fragmento->labels)); if (assm->error() != none) { fprintf(stderr, "error compiling fragment\n"); return 1; } printf("compilation successful.\n"); // call the compiled function. typedef js_fastcall int32_t (*addtwofn)(int32_t); addtwofn fn = reinterpret_cast<addtwofn>(f->code()); printf("2 + 5 = %d\n", fn(5)); return 0;</addtwofn> this upper half of this snippet includes code where the...

Creating XPI Installer Modules - Archive of obsolete content
a very simple one, but it uses the new packaging scheme and the chrome registry to make itself a piece of self-contained and redistributable software. once you have created a package like the one described here, mozilla users can download and install it in a single step. the barley package the barley package is a simple xul window with a couple of buttons and an image element. one of the buttons, labeled "show aphids", displays an alert dialog by calling a function defined in the javascript file barley.js. since we are not updating the mozilla ui to provide special access to this window (e.g., an item in the tasks menu or elsewhere), the measure of the success of the installation of the barley package is that the user can, as before, invoke our software by using a special startup option: mozill...
...note that the stylesheet processing instruction at the top of the xul file does not refer to any new skin, but imports communicator.css to make use of that skin's basic widget styles. the javascript file barley.js contains a single functi...
...note that the stylesheet processing instruction at the top of the xul file does not refer to any new skin, but imports communicator.css to make use of that skin's basic widget styles. the javascript file barley.js contains a single function, bar(), defined as follows: functi...

Attribute (XUL) - Archive of obsolete content
s alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed color cols command commandupdater completedefaultindex container containment contentcontextmenu contenttooltip context contextmenu control...
...oup handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchan...
... onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext toolti...

insertItemAt - Archive of obsolete content
« xul reference home insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. ...
...note: you cannot insert an item to an index that does not exist, eg: trying to insert an item at the end with element.getrowcount() + 1 example <!-- this example inserts at the selected item or appends, then selects the newly created item --> <script language="javascript"> function insertitemtolist(){ var mylistbox = document.getelementbyid('mylistbox'); // create a date to get some labels and values var somedate = new date(); if(mylistbox.selectedindex == -1){ // no item was selected in list so append to the end mylistbox.appenditem( somedate.tolocaletimestring(), somedate.gettime() ); var newindex = mylistbox.getrowcount() -1 }else{ // item was selected so insert at the selected item var newindex = mylistbox.selectedindex; ...
...tring(), somedate.gettime() ); var newindex = mylistbox.getrowcount() -1 }else{ // item was selected so insert at the selected item var newindex = mylistbox.selectedindex; mylistbox.insertitemat(newindex, somedate.tolocaletimestring(), somedate.gettime()); } // select the newly created item mylistbox.selectedindex = newindex; } </script> <button label="insert item at selected" oncommand="insertitemtolist()"/> <listbox id="mylistbox"> <listitem label="foo"/> </listbox> see also appenditem() removeitemat() ...

Floating Panels - Archive of obsolete content
floating panels a floating panel is used for secondary popups such as tool palettes and property inspector panels. it will have a titlebar which the user may use to move the panel around on the screen. a floating panel can be created using the panel element with at least two additional attributes as in the following example: <panel id="tools-panel" noautohide="true" titlebar="normal"> <label control="name" value="name:"/> <textbox id="name"/> </panel> the noautohide attribute is used to indicate that the panel is not temporary. when set to true, the popup will not close when the user clicks outside of it, nor when the user presses the escape key. the titlebar attribute creates a panel with a titlebar. currently, only the value normal is supported, which creates a default titlebar. in the ...
... distinction will be available to support titlebars of differing styles. the floating panel can be placed and moved independently of the main window, however it will always appear above the main window. on mac, floating panels are invisible when another application is made active, and become visible again when the xul application is made active. a floating panel may contain any type of element. a label for the titlebar may be set using the label attribute, as in the following example: <panel id="info-panel" noautohide="true" titlebar="normal" label="image properties"> closing a floating panel unlike other panels, a floating panel does not close when clicking outside of it. you can use the close attribute to have a close button on the titlebar. when the user presses it, the popup will be closed...
...see closing a popup for more information about this. ...

Special per-platform menu considerations - Archive of obsolete content
for many menu commands, convention dictates where these items will be placed. for instance, the edit menu always starts with the undo command if such a feature is available in the application, followed by redo, cut, copy, paste, and so forth. some menu items have specific common labels or locations where certain menu items would go that differ on each platform. for instance, on windows, the menu item which exits the application is labeled "exit" and is normally placed at the end of the file menu. the mac application menu on the macintosh, an extra menu exists beside the file menu; its name is the same as the name of the application. this menu contains a number of items that pertain to the application. for instance, this is the proper place to put the menu items which open the applica...
...pt this one. menu_mac_show_all selecting this item will show the windows for all applications. checkforupdates the item that opens the update dialog for the application, for applications that have one (such as seamonkey; firefox does not have this item). the last five items aren't normally used but are listed for completeness. here is an example: <menubar> <menu label="tools"> <menupopup> <menuitem label="spell check"/> <menuitem id="menu_preferences" label="preferences" oncommand="window.opendialog('options.xul', '_new', 'chrome');"/> </menupopup> </menu> </menubar> this menu item will be placed on the application menu on the macintosh but left in the tools menu on other platforms. when moved to the application menu, ...
...however, regardless of the platform, the command event will be fired on the menu item when it is activated by the user. ...

Sorting and filtering a custom tree view - Archive of obsolete content
code will only work from privileged script. ...
...ort.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" ...
...clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator" sortdirection="ascending"/> <splitter class="tree-splitter"/> <treecol id="description" label="description" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> <splitter class="tree-splitter"/> <treecol id="weapon" label="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treecols> <treechildren id="tree-children"/> </tree> </window> sort.js var table = null; var data = null; var tr...

Multiple Queries - Archive of obsolete content
ide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </queryset> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> <action> <image uri="?photo" src="?photo"/> </action> </queryset> </template> </hbox> this template contains two queries, the first contains a <triple> which matches only the photo with...
...ax you can also use multiple queries with rdf datasources using the simple query syntax. here is the previous example rewritten using the simple syntax: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template> <rule dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </rule> <rule> <image uri="rdf:*" src="rdf:*"/> </rule> </template> </hbox> the result to the user in this example is the same as the previous example. you can also mix simple and extended queries in one template, although you may prefer to use the same style in all queries for consistency. however, if you are going to be using a number of queries, ...
...orthand. you can remove the <rule> element and place the rule's conditions directly on the <template>. there's no performance benefit, but it does save some typing. <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </template> </hbox> this example shows only a single photo since a condition is used to filter out the other two photos. note that in this shorthand, the query conditions are placed directly on the <template> element. « previousnext » ...

SQLite Templates - Archive of obsolete content
sed. the query for an sqlite datasource is just an sql select statement, as text inside the query element. this simple example shows how to display a listbox containing the values in one column in a database table. <listbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name from myfriends </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the query returns the list of values from the 'name' column in the table 'myfriends'. the action body, starting at the node with uri="?" is repeated for each result returned from the query. if the query returns six results, six listitems will be generated. the labels have the special value '?name'. the syntax with the question mark is similar as w...
...lace this with the value of the name column. the effect is a listbox containing the names from the database. you can return multiple columns or filtered data by using a more complex query. <vbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name, email from myfriends where age >= 30 </query> <action> <hbox uri="?"> <label value="?name"/> <label value="?email"/> </hbox> </action> </template> </vbox> this template displays the results of two columns. any occurance of a question mark in the action body is replaced with the value from the query results. here, this is used two times, once to display the name and the second to display the email. the uri attribute on the hbox element is required on o...
...uld also set the type attribute. <listbox id="friends" datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name, from myfriends where age >= :minage && age <= :maxage <param id="minage" name="minage" type="integer">30</param> <param id="maxage" name="maxage" type="integer">40</param> </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> here, the age is an integer number, so the type attribute is set to integer. integers are 32-bit values, but you can use the value int64 for 64-bit integers. you can also use the value double for double precision floating point values. if no type is specified, a string is assumed. we could later change the age to use in the query with a short scri...

Things I've tried to do with XUL - Archive of obsolete content
; height: 100%;"> <box style="height: 30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style="background: green;"/> <box style="height: 50%" flex="1" style="background: green;"/> </html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated. so, as soon as you add a label or some other element inside, there will be a different amount of "empty space" to allocate in different boxes. enn: percentages won't have any effect in these examples though, since the actual height of the container isn't known, and 30% of an unknown number is still an unknown number. vlad: sure; the snippets assume that there's some enclosing structure that will provide the actual height. wra...
...create a frame for it, and the xbl doesn't get attached... a workaround for that is to create the element, insert it in the document and set its style attribute with a -moz-binding property, all of that from c++ instead of js. multi-column listboxes when adding items to multi-column listboxes, you can't use the appenditem api: // auto-create and attach 1st cell var row = mylistbox.appenditem( label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... while this works at first, after a number of rows have been added it breaks and stops displaying the first cell (the one specified by the appenditem call). instead, you must build up your own listit...
...r a number of rows have been added it breaks and stops displaying the first cell (the one specified by the appenditem call). instead, you must build up your own listitem full of listcells, and then add that listitem to the listbox, using generic dom calls: var row = document.createelement('listitem'); // create and attach 1st cell var cell = document.createelement('listcell'); cell.setattribute('label', label ); cell.setattribute('value', value ); row.appendchild( cell ); // create and attach 2nd cell cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... // attach row mylistbox.appendchild( row ); ...

Custom toolbar button - Archive of obsolete content
change the text between double-quote characters on these two lines. optionally remove the sections for toolbars that you do not need. sav...
...change the text between double-quote characters on these two lines. optionally remove the sections for toolbars that you do not need. save the file. ...
...out any knowledge of programming, see this page: code samples your changes take effect when you restart the application. adding more buttons to add another button, edit button.xul. for each application, duplicate the line that specifies custom-button-1, and change the new line to specify custom-button-2. duplicate the last section. in the id and oncommand attributes, change 1 to 2. change the label and tooltiptext attributes to whatever you want. do not change the class attribute. now edit button.css. duplicate the first three lines, changing the new lines to specify button-2. edit button.js and add javascript code for the new button. be sure to add the extra code before the curly brace on the last line of the file. for example, you could add this code for testing: 2: function () { ale...

Creating a Wizard - Archive of obsolete content
ted automatically. ...
...f="chrome://global/skin/" type="text/css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a best friend"/> </menupopup> </menulist> </wizardpage> <wizardpage description="dog details"> <label value="provide additional details about the dog you would like:"/> <radiogroup> <caption label="size"/> <radio value="small" label="small"/> <radio val...
...people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a best friend"/> </menupopup> </menulist> </wizardpage> <wizardpage description="dog details"> <label value="provide additional details about the dog you would like:"/> <radiogroup> <caption label="size"/> <radio value="small" label="small"/> <radio value="large" label="large"/> </radiogroup> <radiogroup> <caption label="gender"/> <radio value="male" label="male"/> <radio value="female" label="female"/> </radiogroup> </wizardpage> </wizard> this wizard has two pages, one that has a drop-down menu and the other with a set of radio buttons. the wizard will be formatted automatically, with a title across the top and a set of bu...

XUL Reference - Archive of obsolete content
eference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar sc...
...izardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuit...
...utton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where s...

XUL Template Primer - Bindings - Archive of obsolete content
we'll use a the following data model to illustrate how bindings work. see the rdf/xml file friends.rdf, below, a simple database with name and address inf...
... we'll use a the following data model to illustrate how bindings work. see the rdf/xml file friends.rdf, below, a simple database with name and address information for some of my good friend...
...) in our example, the <rule> will be instantiated three times: once each for alison, jack, and lumpy. however, in lumpy's case, we won't be able to bind the ?addr variable because lumpy has no home! (well, there are no statements with lumpy as the subject and a nc:address as the predicate, anyway.) nevertheless, the rule still matches. in the content that's built for lumpy's <hbox>, the second <label>'s value attribute (which should contain the value of ?street) is just left blank. related documents xul template primer xul template basics. xul template primer - multiple rules illustrates how to write templates with multiple <rule> elements. xul template primer - nested content illustrates how a template can be used recursively to build nested content. xul template primer - outliner ...

iframe - Archive of obsolete content
tension without security issues. more information is available in the xul tutorial. ...
...able in the xul tutorial. ...
..., transparent properties accessibletype, contentdocument, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myframe" flex="1"/> <script> function donav(obj) { var url = obj.selecteditem.value; // note the firstchild is the menupopup element document.getelementbyid('myframe').setattribute('src', url); } </script> attributes showcaret type: boolean...

radiogroup - Archive of obsolete content
ertical orientation. more information is available in the xul tutorial. attributes disabled, focused, preference, tabindex, value properties accessibletype, disabled, focuseditem, itemcount, selectedindex, selecteditem, tabindex, value methods appenditem, checkadjacentelement, getindexofitem, getitematindex, insertitemat, removeitemat examples <radiogroup> <radio id="orange" label="red"/> <radio id="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> </radiogroup> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focuse...
...you may optionally set a value. the function returns the newly created element. checkadjacentelement( dir ) return type: no return value deselects the currently selected radio button in the group and selects the one adjacent to it. if the argument dir is true, the next radio b...
...rue, the next radio button is selected. if it is false, the previous radio button is selected. getindexofitem( item ) return type: integer returns the zero-based position of the specified item. items are numbered starting at the first item displayed in the list. getitematindex( index ) return type: element returns the element that is at the specified index. insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. removeitemat( index ) return type: element removes the child item in the element at the specified index. the method returns the removed item. related interfaces nsiaccessibleprovider, nsi...

splitter - Archive of obsolete content
e element directly since they will fit more naturally with the user's selected theme. tree-splitter this splitter is intended to be used in tree columns (in-between treecol elements). the splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized. ...
...e. tree-splitter this splitter is intended to be used in tree columns (in-between treecol elements). the splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized. ...
...en treecol elements). the splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized. ...

vbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to vertical orientation. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to vertical orientation. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to vertical orientation. more information is available in the xul tutorial. ...

window - Archive of obsolete content
ditor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!! ...
...s include!! ...
...box> <image src="application_form.png"/> <description>register online!</description> </hbox> <groupbox align="start"> <caption label="your information"/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="your-lname" value="enter last name:"/> <textbox id="your-lname" value="hernandez"/> </hbox> <hbox> <button oncommand="alert('save!')"> <description>save</description> </button> </hbox> </vbox> </radiogroup> </groupbox> </vbox> </window> attributes accelerated type: booleanset this attr...

wizard - Archive of obsolete content
moreover this hides separator between titlebar and window...
...moreover this hides separator between titlebar and window contents. this only affects mac os x. firstpage type: boolean true if the wizard is on the first page. inactivetitl...
...tep type: integer this property returns the number of pages that the user has navigated through so far, meaning that the user would press the back button this many times to go back to the beginning. this property is different than pageindex, because pages are not necessarily navigated in order. title type: string the title that appears at the top of the wizard. this is overridden by the label attribute on the individual pages. wizardpages type: dom nodelist of wizardpage elements this property holds the list of wizardpage elements in the wizard. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), get...

E4X for templating - Archive of obsolete content
var strs = cc['@mozilla.org/intl/stringbundle;1'].getservice(ci.nsistringbundleservice). ...
...mozilla.org/intl/stringbundle;1'].getservice(ci.nsistringbundleservice). ...
...function _if (cond, h, _else) { if (cond && cond != undefined) { // we need undefined condition for e4x return h(cond); } else if (_else) { return _else(cond); } return ''; // empty string allows conditions in attribute as well as element content } for example: {_if(elems.length(), function () <description>{elems[0]}</description>, function _else () <label>no data</label> )} note that the simple xmllist() constructor (<></>) may be useful to still be able to use an expression closure (i.e., without needing return statements and braces): {_if(elems.length(), function () <> <markup/> <markup/> </>)} note that, while it is convenient to store such e4x in separate file templates (to be eval()d at a later time, taking into account secu...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
btn_comments = new ext.button({ text: "submit", ...
...runat="both" src="/jaxer_examples/js/validatecomments.js"/> <script> var txt_name; var txt_email; var txt_message; var btn_comments; var form_comments; ext.onready( function() { // create the name text field txt_name = new ext.form.textfield({ name: "name", fieldlabel: "name", width: 200 }); // create the e-mail text field txt_email = new ext.form.textfield({ name: "email", fieldlabel: "e-mail", width: 200 }); // create the message text field txt_message = new ext.form.textarea({ name: "message", fieldlabel: "message", width: 200 }); // create a button used to send the form details. btn_comments = new ext.button({ text: "submit", fieldlabel: "", handler: formhandler }); // create the form panel, attach the inputs form_comments = new ext.form.formpanel(...
...-mail", width: 200 }); // create the message text field txt_message = new ext.form.textarea({ name: "message", fieldlabel: "message", width: 200 }); // create a button used to send the form details. btn_comments = new ext.button({ text: "submit", fieldlabel: "", handler: formhandler }); // create the form panel, attach the inputs form_comments = new ext.form.formpanel({ labelalign: "right", width: 400, title: "comments", items: [ txt_name, txt_email, txt_message, btn_comments ], renderto: "form-comments" }); }); </script> the code in listing 6 starts by hooking in the ext js library which is used to produce the ui elements of the form. next a script named validatecomments.js is hooked in with the runat attribute set...

XForms Custom Controls - Archive of obsolete content
le where base bindings for a control are placed is controlfile.xml. controlfile-xhtml.xml contains the xhtml implementation bindings for the control and controlfile-xul.xml contains the implementation bindings for when this control is hosted in a xul document. the following list shows where the base bindings for our xforms controls are defined: xforms.xml - contains the base bindings for output, label, trigger, submit, case, message, hint, help, alert, upload and repeat xforms controls. input.xml - contains the base bindings for input, secret and textarea xforms controls. select.xml - contains the base bindings for select and select1 xforms controls (except minimal/default select1 that is hosted in select1.xml file) range.xml - contains the base bindings for the range xforms control. xforms.x...
...content of the instance node bound to this control --> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> </bindings> <xf:model> <xf:instance xmlns=""> <data> <curimg></curimg> <img label="firefox">http://www.mozilla.com/images/firefox-logo-64x64.png</img> <img label="thunderbird">http://www.mozilla.com/images/thunderbird-logo-64x64.png</img> <img label="bugzilla">http://www.mozilla.org/images/p-bugz.gif</img> <img label="mozilla">http://www.mozilla.org/images/mozhead-80x64.gif</img> </data> </xf:instance> </xf:model> <style type="text/css"> @namespa...
...abel="mozilla">http://www.mozilla.org/images/mozhead-80x64.gif</img> </data> </xf:instance> </xf:model> <style type="text/css"> @namespace xf url(http://www.w3.org/2002/xforms); xf|output[mediatype="image/*"] { -moz-binding: url('#output-image'); } </style> </head> <body> <h1>custom control sample</h1> <xf:select1 ref="curimg"> <xf:label>select image to display: </xf:label> <xf:itemset nodeset="../img"> <xf:label ref="@label"/> <xf:value ref="."/> </xf:itemset> </xf:select1> <xf:output ref="curimg" mediatype="image/*"/> </body> </html> ...

Implementation Status - Archive of obsolete content
297083; 343443; 8.3.4 help supported 8.3.5 hint partial problems with hints in xul-hosted documents and ephemeral message positioning 349667; ...
... 297083; 343443; 8.3.4 help supported 8.3.5 hint partial problems with hints in xul-hosted documents and ephemeral message positioning 349667; 8.3.6 alert ...
....2 item supported 8.2.3 value supported 8.3.1 filename supported 8.3.2 mediatype supported 8.3.3 label partial labels for items inside a choices element has bind problems. we'd like to expand how we render labels bound to different, unique types. 297083; 343443; 8.3.4 help supported 8.3.5 hint partial problems with hints in xul-hosted documents and ephemeral message positioning 349667; 8.3.6 alert supported 9. container form controls section t...

XForms Alert Element - Archive of obsolete content
tyle. ...
...you should type only numbers!</xforms:alert> </xforms:input> ...
...ce xforms url("http://www.w3.org/2002/xforms"); xforms|input:invalid xforms|alert.inline { display: inline; font-style: italic; width: 40%; } } </style> <xforms:input bind="x"> <xforms:label>you can type only numbers (validation happens on blur): </xforms:label> <xforms:alert>wrong value! you should type only numbers!</xforms:alert> </xforms:input> <xforms:input bind="x"> <xforms:label>you can type only numbers (validation happens on blur): </xforms:label> <xforms:alert class="inline">wrong value! you should type only numbers!</xforms:alert> </xforms:input> ...

Accessible multimedia - Learn web development
ything by default; to add functionality, we will use javascript. we will first need to store references to each of the controls — add the following to the top of your javascript file: const playpausebtn = document.queryselector('.playpause'); const stopbtn = document.queryselector('.stop'); const rwdbtn = document.queryselector('.rwd'); const fwdbtn = document.queryselector('.fwd'); const timelabel = document.queryselector('.time'); next, we need to grab a reference to the video/audio player itself — add this line below the previous lines: const player = document.queryselector('video'); this holds a reference to a htmlmediaelement object, which has several useful properties and methods available on it that can be used to wire up functionality to our buttons. before moving onto creatin...
... further reading this gives you a basic idea of how to add...
... further reading this gives you a basic idea of how to add custom player functionality to video/audio player instances. ...

The HTML5 input types - Learn web development
e. the slider-thumb can be moved via mouse or touch, or with the arrows of the keypad. it's important to properly configure your slider. to that end, it's highly recommended that you set the min, max, and step attributes which set the minimum, maximum and increment values, respectively. let's look at the code behind the above example, so you can see how its done. first of all, the basic html: <label for="price">choose a maximum house price: </label> <input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000"> <output class="price-output" for="price"></output> this example creates a slider whose value may range between 50000 and 500000, which increments/decrements by 100 at a time. we've given it default value of 250000, using the value attribute. one prob...
...250000, using the value attribute. one problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. this is why we've included an <output> element — to contain the current value (we'll also look at this element in the next article). you could display an input value or the output of a calculation inside any element, but <output> is special — like <label>, it can take a for attribute that allows you to associate it with the element or elements that the output value came from. to actually display the current value, and update it as it changed, you must use javascript, but this is relatively easy to do: const price = document.queryselector('#price'); const output = document.queryselector('.price-output'); output.textcontent = price.value; price...
... the first thursday of that year—which may not include the first day of the year, or may include the last few days of the previous year. <input type="week" name="week" id="week"> constraining date/time values all date and time controls can be constrained using the min and max attributes, with further constraining possible via the step attribute (whose value varies according to input type). <label for="mydate">when are you available this summer?</label> <input type="date" name="mydate" min="2013-06-01" max="2013-08-31" step="7" id="mydate"> browser support for date/time inputs you should be warned that the date and time widgets don't have the best browser support. at the moment, chrome, edge, and opera support them well, but there is no support in internet explorer, safari has some mobil...

Sending forms through JavaScript - Learn web development
r formdata object; http headers are set automatically xhr.send( fd ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live result: using formdata bound to a form element you can also bind a formdata object to an <form> element. this creates a formdata object that represents the data contained in the form. ...
... automatically xhr.send( fd ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live result: using formdata bound to a form element you can also bind a formdata object to an <form> element. this creates a formdata object that represents the data contained in the form. ...
.... to learn more about the filereader api, see using files from web applications. the least complicated way of sending binary data is by using formdata's append() method, demonstrated above. if you have to do it by hand, it's trickier. in the following example, we use the filereader api to access binary data and then build the multi-part form data request by hand: <form id="theform"> <p> <label for="thetext">text data:</label> <input id="thetext" name="mytext" value="some text data" type="text"> </p> <p> <label for="thefile">file data:</label> <input id="thefile" name="myfile" type="file"> </p> <button>send me!</button> </form> as you see, the html is a standard <form>. there's nothing magical going on. the "magic" is in the javascript: // because we want to access...

Test your skills: Other controls - Learn web development
e an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. other controls 1 in our first "other controls" assessment, we'll get you to create a multi-line text input. create a basic multi-line text input. associate it semantically with the provided "comment" label. give the input 35 columns, and 10 rows of space in which to add comments. give the comments a maximum length of 100 characters. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. other controls 2 now it's time to have a go at implementing a drop-down select menu, to allow a use...
...code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. other controls 2 now it's time to have a go at implementing a drop-down select menu, to allow a user to pick their favourite food from the choices provided. create your basic select box structure. associate it semantically with the provided "comment" label. inside the list, split the choices up into 2 subgroups — "mains" and "snacks". try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. other controls 3 in our final task of this set, we start with much the same list of food choices. however, this time we want to do things different...
... try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. other controls 3 in our final task of this set, we start with much the same list of food choices. however, this time we want to do things differently: create a basic text input that is semantically associated with the provided label. put the food choices into a list that can be associated with a form input. associate the list with your text input, so that when you type characters, any of the list options that match the character sequence are given in a dropdown list as autocomplete suggestions. try updating the live code below to recreate the finished example: download the starting point for this task to work in your...

Introduction to events - Learn web development
he server and give an error message saying what's wrong and what needs to be done to put things right. some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. let's look at a simple example. ...
...age saying what's wrong and what needs to be done to put things right. some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. let's look at a simple example. ...
...right. some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. let's look at a simple example. first, a simple html form that requires you to enter your first and last name: <form> <div> <label for="fname">first name: </label> <input id="fname" type="text"> </div> <div> <label for="lname">last name: </label> <input id="lname" type="text"> </div> <div> <input id="submit" type="submit"> </div> </form> <p></p> div { margin-bottom: 10px; } now some javascript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. if they are, we...

What is JavaScript? - Learn web development
nd fonts, and laying out our content in multiple columns. javascript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (okay, not everything, but it is amazing what you can achieve with a few lines of javascript code.) the three layers build on top of one another nicely. let's take a simple text label as an example. we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6...
... so what can it really do? the core client-side javascript language consists of some common programming features that allow you to do things like: store useful values inside variables. in the above example...
...mon programming features that allow you to do things like: store useful values inside variables. in the above example for instance, we ask for a new name to be entered then store that name in a variable called name. operations on pieces of text (known as "strings" in programming). in the above example we take the string "player 1: " and join it to the name variable to create the complete text label, e.g. ''player 1: chris". running code in response to certain events occurring on a web page. we used a click event in our example above to detect when the button is clicked and then run the code that updates the text label. and much more! what is even more exciting however is the functionality built on top of the client-side javascript language. so-called application programming interfaces (...

Displaying Places information using views
ery uris for information on query uris. the following example uses the built-in tree view to display bookmarks whose titles or urls contain "mozilla". remember that, because xul is xml, any ampersands in query uris must be written as entity reference &amp; and not simply &. <tree type="places" place="place:terms=mozilla&amp;onlybookmarked=1&amp;querytype=1"> <treecols> <treecol id="title" label="my bookmarks" flex="1" primary="true" /> </treecols> <treechildren /> </tree> the next example does the same as the last but uses javascript to set the tree's place attribute: var histserv = cc["@mozilla.org/browser/nav-history-service;1"]. getservice(ci.nsinavhistoryservice); var query = histserv.getnewquery(); query.searchterms = "mozilla"; query.onlybookmarked = true; var opts = ...
...v.placesroot], 1); var result = histserv.executequery(query, opts); // hook up the result's viewer and the tree's nsitreeview to our custom view. ...
...ee's nsitreeview to our custom view. var treeview = document.getelementbyid("mytreeview"); result.addobserver(view); treeview.view = view; the following xul defines the mytreeview element referenced in the javascript: <tree id="mytreeview" flex="1"> <treecols> <treecol id="title" label="title" flex="1" primary="true" /> <splitter class="tree-splitter" /> <treecol anonid="fulluri" label="fulluri" flex="1" /> <splitter class="tree-splitter" /> <treecol id="indexinparent" label="indexinparent" /> <splitter class="tree-splitter" /> <treecol id="parity" label="parity" /> </treecols> <treechildren /> </tree> the full code listing is available in the files section of the page below. note that the tree element above does not have the special type attribute common...

IPDL Tutorial
temporary objects, so copy them if you need to keep their data around. direction each message type includes a "direction." the message direction specifies whether the message can be sent from-parent-to-child, from-child-to-parent, or both ways. three keywords serve as direction specifiers; child was introduced above. the second is parent, which means that the messages declared under the parent label can only be sent from-child-to-parent. the third is both, which means that the declared messages can be sent in both directions. the following artificial example shows how these specifiers are used and how these specifiers change the generated abstract actor classes. // pdirection.ipdl async protocol pdirection { child: async foo(); // can be sent from-parent-to-child parent: async bar(); ...
... parameters message declarations allow any number of parameters. parameters specify data that are sent with the message. their values are serialized by the sender and deserialized by the receiver. ipdl supports built-in and custom primitive types, as well as unions and arrays. the bui...
... parameters message declarations allow any number of parameters. ...

Widget Wrappers
type of the widget's current area isgroup true, will be false for wrappers around single widget nodes source for api-provided widgets, whether they are built-in to firefox or add-on-provided disabled for api-provided widgets, whether the widget is currently disabled. nb: this property is writable, and will toggle all the widgets' nodes' disabled states label for api-provided widgets, the label of the widget tooltiptext for api-provided widgets, the tooltip of the widget showinprivatebrowsing for api-provided widgets, whether the widget is visible in private browsing single wrapper properties all of a wrapper's properties are read-only unless otherwise indicated. attribute description id the wid...
...note that you may prefer to use the group wrapper's getter/setter instead...
...note that you may prefer to use the group wrapper's getter/setter instead. ...

CustomizableUI.jsm
s that span the entire menu panel. panel_column_count number 3, the (constant) number of columns in the menu panel. examples createwidget - button type this is likely the code you need for your widget. only rare need a type:custom widget. ...
...so if we register listener first, then it catches the initial adds. when the button is in the panel area, it needs a 32x32 icon, and when in other p...
...ter a style sheet for that. this example here uses nsistylesheetservice to do so. ...

Interfacing with the Add-on Repository
installing the add-on the shownotification() routine displays a notification box offering to install the recommended add-on, if one was found, or reports an error if the search failed: shownotification: function(prompt, button, installobj) { ...
...e shownotification() routine displays a notification box offering to install the recommended add-on, if one was found, or reports an error if the search failed: shownotification: function(prompt, button, installobj) { this.install = installobj; var box = popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", prompt, null, /* anchor id */ { label: button, accesskey: "i", callback: function() { if (popupnotifications.install) { popupnotifications.install.install(); } else { popupnotifications.remove(box); } } }, null /* secondary action */ ); } the code here starts by stashing the passed-in addonins...
... the pop-up callback function that gets called when the user clicks the button looks to see if there's a non-null addoninstall object reference; if it's null, then the pop-up is displaying an error notification, so clicking the button simply dismisses the pop-up. otherwise, the addoninstall object's install() method is called to install the add-on. this doesn't display ...

nss tech note2
display verbose information, including template values, array values, etc. to enable this mode, set: nspr_log_modules=nss_mod_log:4 nspr_log_file=<logfile> the output format is the same as above, but with more information. ...
...collect performance data. this mode is most useful in ...
...collect performance data. this mode is most useful in optimized builds. the number of calls to each pkcs #11 function will be counted, and the time spent in each function as well. ...

PKCS #11 Module Specs
ationalize string (utf8). this value will be truncated at 32 bytes (no null, partial utf8 characters dropped). librarydescription override the default librarydescription value for the module returned in the ck_info structure with an internationalize string (utf8). this value will be truncated at 32 bytes (no null, partial utf8 characters dropped). cryptotokendescription override the default label value for the internal crypto token returned in the ck_token_info structure with an internationalize string (utf8). this value will be truncated at 32 bytes (no null, partial utf8 characters dropped). dbtokendescription override the default label value for the internal db token returned in the ck_token_info structure with an internationalize string (utf8). this value will be truncated at 32 by...
...this value will be truncated at 32 bytes (no null, partial utf8 characters dropped). ...
... fipsslotdescription, optimizespace, certprefix, keyprefix, flags, and minpwlen are copied from the parameters above. parameters: configdir the location of the databases for this token. if configdir is not specified, the default configdir specified earlier will be used. certprefix cert prefix for this token. keyprefix prefix for the key database for this token. tokendescription the label value for this token returned in the ck_token_info structure with an internationalize string (utf8). this value will be truncated at 32 bytes (no null, partial utf8 characters dropped). slotdescription the slotdescription value for this token returned in the ck_slot_info structure with an internationalize string (utf8). this value will be truncated at 64 bytes (no null, partial utf8 characters...

Index
is method returns accessible relation for this accessible object by index. 271 getrelations this method returns multiple accessible relations for this accessible object. 272 getstate this method retrieves states of the accessible. 273 groupposition this method returns grouping information. used for tree items, list items, tab panel labels, radio buttons, etc. also used for collectons of non-text objects. 274 help help text associated with node. 275 indexinparent the 0-based index of this accessible in its parent's list of children, or -1 if this accessible does not have a parent. 276 keyboardshortcut provides localized string of accesskey name, such as alt+d (alt +...
...ed_node_iterator_type or ordered_node_iterator_type result. 531 nsidomxulcontrolelement interfaces, interfaces:scriptable, reference, référence(2), xpcom interface reference no summary! 532 nsidomxulelement interfaces, interfaces:scriptable, needscontent, xpcom, xpcom interface reference attempts to remove focus from the element. ...
... base/ public/ nsmsgfolderflags.idl 1125 nsmsgjunkstatus interfaces, interfaces:scriptable, xpcom, xpcom interface reference, thunderbird defined in comm-central/ mailnews/ base/ public/ mailnewstypes2.idl 1126 nsmsgkey xpcom, xpcom interface reference, thunderbird defined in comm-central/ mailnews/ base/ public/ mailnewstypes2.idl 1127 nsmsglabelvalue xpcom, xpcom interface reference, thunderbird defined in comm-central/ mailnews/ base/ public/ mailnewstypes2.idl 1128 nsmsgpriorityvalue xpcom, xpcom interface reference, thunderbird defined in comm-central/ mailnews/ base/ public/ mailnewstypes2.idl 1129 nsmsgruleactiontype interfaces, interfaces:scriptable, xpcom, xpcom interface reference, ...

nsIMacDockSupport
ort:', docksupport); var win = services.wm.getmostrecentwindow('navigator:browser'); var macmenu = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyi...
...check and wait for the window to be loaded. this can be done by adding a event listenr for load of the hidden window. this is the recommended way to add to the native menu, just maniuplate the default menu dom element. ...
... ...

nsIMsgDatabase
; void deleteheader(in nsimsgdbhdr msghdr, in nsidbchangelistener instigator,in boolean commit, in boolean notify); void removeheadermdbrow(in nsimsgdbhdr msghdr); void undodelete(in nsimsgdbhdr msghdr); void markmarked(in nsmsgkey key, in boolean mark, in nsidbchangelistener instigator); void markoffline(in nsmsgkey key, in boolean offline, in nsidbchangelistener instigator); void setlabel(in nsmsgkey key, in nsmsglabelvalue label); void setstringproperty(in nsmsgkey akey, in string aproperty, in string avalue); void markimapdeleted(in nsmsgkey key, in boolean deleted, in nsidbchangelistener instigator); void applyretentionsettings(in nsimsgretentionsettings amsgretentionsettings, in boolean adeleteviafolder); boolean hasnew(); void clearnewlist(in boolean notify); void...
...essage counts. ...
...oid removeheadermdbrow(in nsimsgdbhdr msghdr); undodelete() void undodelete(in nsimsgdbhdr msghdr); markmarked() void markmarked(in nsmsgkey key, in boolean mark, in nsidbchangelistener instigator); markoffline() void markoffline(in nsmsgkey key, in boolean offline, in nsidbchangelistener instigator); setlabel() void setlabel(in nsmsgkey key, in nsmsglabelvalue label); setstringproperty() void setstringproperty(in nsmsgkey akey, in string aproperty, in string avalue); markimapdeleted() void markimapdeleted(in nsmsgkey key, in boolean deleted, in nsidbchangelistener instigator); applyretentionsettings() purge...

nsPIPromptService
underbird 3.1 / fennec 1.0) implemented by: the contract id isn't defined. this interface defines the meaning of each indexes of getint(), setint(), getstring() and setstring() of the nsidialogparamblock interface but they are defined on in c++. the indexes for getstring() and setstring() are: emsg the value is 0. this is the message text of the dialog. echeckboxmsg the value is 1. this is the label text of a checkbox on the dialog. eiconclass the value is 2. this is the class attribute value of the icon image. etitlemessage the value is 3. this is the heading of the message. eeditfield1msg the value is 4. this is the label text of the first text field on the dialog. eeditfield2msg the value is 5. this is the label text of the second text field on the dialog. eeditfield1value the value is 6.
...edialogtitle the value is 12. this is the title of the dialog. ...
...the dialog. eeditfield1value the value is 6. this is the default value of the first text field. this is also used for the result of the dialog. eeditfield2value the value is 7. this is the default value of the second text field. this is also used for the result of the dialog. ebutton0text the value is 8. this is the label of the first button on the dialog. ebutton1text the value is 9. this is the label of the second button on the dialog. ebutton2text the value is 10. this is the label of the third button on the dialog. ebutton3text the value is 11. this is the label of the forth button on the dialog. edialogtitle the value is 12. this is the title of the dialog. eopeningsound obsolete since gecko 1.9.2 the value is 13. this is the system sound name which should be played when the dialog is sho...

Add Option to Context Menu
erlay chrome://messenger/content/mailwindowoverlay.xul chrome://myext/content/thunderbird-overlay.xul add the next in thunderbird-overlay.xul. ...
...t/mailwindowoverlay.xul chrome://myext/content/thunderbird-overlay.xul add the next in thunderbird-overlay.xul. ...
... <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </popup> </overlay> for thunderbird 2 and 3 in the same xpi if our extension needs to support thunderbird 2 and 3 we need to make custom overlays for each version. this can be reached by adding these lines to the chrome.manifest file: overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tbov...

Using popup notifications
eated using the popupnotifications.jsm javascript code module. this code module is imported by the browser, so you don't need to do it explicitly yourself. then you can create the popup notification at the appropriate time like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions provided to the user through the drop-down menu. this notification looks like this: that's not very pretty; where's the icon?
...s/skin/mozlogo.png"); } with this css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, [ { label: "first secondary option", accesskey: "1", callback: function() { alert("first secondary option selected."); } }, { label: "second ...
... ...

Responsive Design Mode - Firefox Developer Tools
are no longer automatic, and informed about how you can make them automatic. for example: developer toolbox with rdm you can show or hide the developer tools toolbox independently of toggling responsive design mode itself: while responsive design mode is enabled, you can continue browsing as you normally would in the resized content area. device selection just above the viewport there is a label "no device selected"; click this to see a list of device names. select a device, and responsive design mode sets the following properties to match the selected device: screen size device pixel ratio (the ratio of device physical pixels to device-independent pixels) touch event simulation additionally, firefox sets the user-agent http request header to identify itself as the default browser...
..., firefox sets the user-agent http request header to identify itself as the default browser on the selected device. for example, if you've selected an iphone, then firefox identifies itself as safari. the navigator.useragent property is set to the same value. the devices listed in the drop-down are just a subset of the devices that can be selected. at the end of the drop-down, there is an item labeled edit list. select this to see a panel containing all the choices, which enables you to check the devices you want to see in the drop-down. the set of devices, and the values associated with each device, are taken from https://github.com/mozilla/simulated-devices. you can also define a custom device, as described below. creating custom devices you can create and save custom devices in responsi...
.../s 500 regular 2g 250 kb/s 50 kb/s 300 good 2g 450 kb/s 150 kb/s 150 regular 3g 750 kb/s 250 kb/s 100 good 3g 1.5 mb/s 750 kb/s 40 regular 4g/lte 4 mb/s 3 mb/s 20 dsl 2 mb/s 1 mb/s 5 wi-fi 30 mb/s 15 mb/s 2 to select a network, click the list box that's initially labeled "no throttling": ...

Console messages - Firefox Developer Tools
into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from javascript, which code triggered them. reflow events are logged as "reflow" messages, as distinct from css errors or warnings. by default, they are disabled. you can enable them by clicking the "css" button in the toolbar and selecting "reflows". each message is labeled "reflow" and shows the time taken to execute the reflow. if the reflow is a synchronous reflow triggered from javascript, it also shows a link to the line of code that triggered the reflow. click the link to open the file in the debugger. synchronous and asynchronous reflows if a change is made that invalidates the current layout — for example, the browser window is resized or some javascr...
... temp1, etc.) whose value is the selected object. the name of the variable appears as an input to the interpreter, and its value appears as a response. copy object copies the selected object to the clipboard. filtering and searching filtering by category you can use the toolbar along the top to constrain the results displayed. to see only messages of particular categories, click the button labeled with that category (errors, css, and so on). for errors and warnings, when you turn off display of the category, a number appears next to the button text to indicate how many messages of that type are available. for example, "warnings (25)". network requests with response codes in the 400-499 (client error) or 500-599 (server error) ranges are considered errors. their display is controlled by...
...to the button text to indicate how many messages of that type are available. for example, "warnings (25)". network requests with response codes in the 400-499 (client error) or 500-599 (server error) ranges are considered errors. their display is controlled by the errors button, not the requests button. filtering by text to see only messages that contain a specific string, type in the text box labeled "filter output". for example, if you entered the string img into the text box, you would have a list something like this: a small "x" icon appears at the right end of the text box when you have entered a string on which to filter the output. click the "x" icon to clear the filter and show the entire list again. you can negate a text search by prefixing it with the - character. for example, ...

AddressErrors - Web APIs
we declare the variables supportedhandlers, which is compatible with paymentmethoddata, and defaultpaymentdetails, which is a paymentdetailsupdate object. ...
...defaultpaymentdetails, which is a paymentdetailsupdate object. let supportedhandlers = [ { supportedmethods: "basic-card", data: { supportednetworks: ["visa", "mastercard", "amex", "discover"], supportedtypes: ["credit", "debit"] } } ]; let defaultpaymentdetails = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; supportedhandlers describes the supported payment handlers and the details for those. in this example, only the basic card handler is supported, ...
...e } ] }; supportedhandlers describes the supported payment handlers and the details for those. in this example, only the basic card handler is supported, and it's configured to permit both debit and credit cards from visa, master card, american express, and discover. defaultpaymentdetails describes the payment being requested. a description of the total amount being requested (including a label and the currency used), a list of the line items (in this case only one, "original donation amount"), and a list of shipping options available; in this case only one. process the payment the main payment processing code is found in the process() method, up next. let request; function process() { let options = {requestshipping: true}; try { request = new paymentrequest(supportedhandle...

AudioTrack - Web APIs
an be used to locate a specific track within an audio track list by calling audiotracklist.gettrackbyid(). the id can also be used as the fragment part of the url if the media supports seeking by media fragment per the media fragments uri specification. kind read only a domstring specifying the category into which the track falls. for example, the main audio track would have a kind of "main". label read only a domstring providing a human-readable label for the track. for example, an audio commentary track for a movie might have a label of "commentary with director john q. public and actors john doe and jane eod." this string is empty if no label is provided. language read only a domstring specifying the audio track's primary language, or an empty string if unknown. the language is spec...
...the user's preferred language (taken from a variable userlanguage) and disabling any others. tracks.foreach(function(track) { if (track.language === userlanguage) { track.enabled = true; } else { track.enabled = false; } }); the language is in standard (rfc 5646) format. for us english, this would be "en-us", for example. example this example returns an array of track kinds and labels for potential use in a user interface to select audio tracks for a specified media element. the list is filtered to only allow certain track kinds through. function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { ...
...ified media element. the list is filtered to only allow certain track kinds through. function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label. specifications specification status comment html living standardthe definition of 'audiotrack' in that specification. living standard ...

Background Tasks API - Web APIs
r know how long decoding "quantum filament tachyon emissions" will take, after all) as well as a second main box (with the id "logbox"), which is used to display textual output. <p> demonstration of using <a href="/docs/web/api/background_tasks_api"> cooperatively scheduled background tasks</a> using the <code>requestidlecallback()</code> method. ...
...> demonstration of using <a href="/docs/web/api/background_tasks_api"> cooperatively scheduled background tasks</a> using the <code>requestidlecallback()</code> method. </p> <div class="container"> <div class="label">decoding quantum filament tachyon emissions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <span id="currenttasknumber">0</span> of <span id="totaltaskcount">0</span> </div> </div> <div class="logbox"> <div class="logheader"> log </div> <div id="log"> </div> </div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress. in addition, there's a ...
... background-color: lightblue; border-bottom: 1px solid black; border-radius: 6px 6px 0 0; } #log { font: 12px "courier", monospace; padding: 6px; overflow: auto; overflow-y: scroll; width: 388px; height: 460px; } .container { width: 400px; padding: 6px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; display: block; overflow: auto; } .label { display: inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; margin-top: 0; color: white; background-color: darkgreen; } #progress { width: 100%; padding-top: 6px; } jav...

BasicCardRequest - Web APIs
these three (supportedinstruments in the example below) contains a data property that has to conform to the structure defined by the basiccardrequest dictionary. ...
... conform to the structure defined by the basiccardrequest dictionary. ...
... // call show() to trigger the browser's payment flow. request.show().then(function(instrumentresponse) { // do something with the res...

BasicCardResponse - Web APIs
e example below) contains a data property that has to conform to the structure defined by the basiccardrequest dictionary. ...
... basiccardrequest dictionary. ...
... // call show() to trigger the browser's payment flow. request.show().then(function(instrumentresponse) { // do something with the res...

BroadcastChannel: message event - Web APIs
no cancelable no interface messageevent event handler property onmessage examples live example in this example there's a "sender" <iframe> that broadcasts the contents of a <textarea> when the user clicks a button. there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
... messageevent event handler property onmessage examples live example in this example there's a "sender" <iframe> that broadcasts the contents of a <textarea> when the user clicks a button. there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
...adcast:</label><br/> <textarea id="message" name="message" rows="1" cols="40">hello</textarea> <button id="broadcast-message" type="button">broadcast message</button> body { border: 1px solid black; padding: .5rem; height: 150px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('click', () => { channel.postmessage(messagecontrol.value); }) receiver...

Console.table() - Web APIs
displays tabular data as a table. this function takes one mandatory argument data, which must be an array or an object, and one additional optional parameter columns. it logs data as a table. each element in the array (or enumerable property if data is an object) will be a row in the table. the first column in the table will be labeled (index). if data is an array, then its values will be the array indices. if data is an object, then its values will be the property names. note that (in firefox) console.table is limited to displaying 1000 rows (first row is the labeled index). note: this feature is available in web workers. collections of primitive types the data argument may be an array or an object. // an array of strings console.table(["apples", "oranges", "bananas"]); // an objec...
... // an object whose properties are objects var family = {}; family.mother = new person("jane", "smith"); family.father = new person("john", "smith"); family.daughter = new person("emily", "smith"); console.table(family); restricting the columns displayed by default, console.table() lists all elements in each row. you can use the optional columns parameter to sel...
...objects, logging only firstname function person(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } var john = new person("john", "smith"); var jane = new person("jane", "doe"); var emily = new person("emily", "jones"); console.table([john, jane, emily], ["firstname"]); sorting columns you can sort the table by a particular column by clicking on that column's label. syntax console.table(data [, columns]); parameters data the data to display. this must be either an array or an object. columns an array containing the names of columns to include in the output. specifications specification status comment console apithe definition of 'console.table()' in that specification. living standard initial definition ...

Document: readystatechange event - Web APIs
the readystatechange event is fired when the readystate attribute of a document has changed. ...
... the readystatechange event is fired when the readystate attribute of a document has changed. ...
...> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcon...

Element: compositionend event - Web APIs
a pinyin ime. ...
...dler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; }...
...xample"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textco...

Element: compositionstart event - Web APIs
pinyin ime. ...
...er property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; }...
...xample"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textco...

Element: compositionupdate event - Web APIs
inyin ime. ...
...r property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; }...
...xample"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textco...

Element: error event - Web APIs
no interface event or uievent event handler property onerror the event object is a uievent instance if it was generated from a user interface element, or an event instance otherwise. ...
...rface event or uievent event handler property onerror the event object is a uievent instance if it was generated from a user interface element, or an event instance otherwise. ...
...> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: loading image\n`; console.log(event) }); const imgerror = documen...

HTMLMediaElement: loadstart event - Web APIs
the loadstart event is fired when the browser has started to load a resource. ...
...adstart event is fired when the browser has started to load a resource. ...
...> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } js const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', ...

HTMLMediaElement: progress event - Web APIs
the progress event is fired periodically as the browser loads a resource. ...
...he progress event is fired periodically as the browser loads a resource. ...
...> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } javascript const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('pro...

HTMLMedia​Element​.textTracks - Web APIs
here we print all the properties of each english track to the console. var tracks = document.queryselector('video').texttracks; ...
... here we print all the properties of each english track to the console. var tracks = document.queryselector('video').texttracks; for (var i = 0, l = tracks.length; i < l; i++) { /* tracks.length == 10 */ i...
...s" src="samplesubtitles_en.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_ja.vtt" srclang="ja"> <track kind="subtitles" src="samplesubtitles_oz.vtt" srclang="oz"> <track kind="metadata" src="keystage1.vtt" srclang="en" label="key stage 1"> <track kind="metadata" src="keystage2.vtt" srclang="en" label="key stage 2"> <track kind="metadata" src="keystage3.vtt" srclang="en" label="key stage 3"> </video> the htmlmediaelement.texttracks returns a texttrackslist thru which we can iterate. here we print all the properties of each english track to the console. var tracks = document.queryselector('video').texttracks; for (var i = 0, l = tracks.length; i < l; i++) { /* tracks.length == 10 */ if (tracks[i].language == 'en') { console.dir(tracks[i]); } } prope...