Search completed in 1.18 seconds.
1087 results for "label":
Your results are loading. Please wait...
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
the solution is in an aria attribute called aria-labelledby.
... both aria-labelledby and aria-describedby are specified on the form element that is to be labelled, for example an <input> in both cases, the label for/label control bindings that may also exist are overridden by aria-labelledby.
... if on an html page you provide aria-labelledby, you should also provide a label for construct to also support older browsers that do not have aria support yet.
...And 4 more matches
Text labels and names - Accessibility
there are many situations in which a control, dialog, or other website feature should be given a descriptive name or label to allow users of assistive technologies to understand what its purpose is and to be able to understand and operate it correctly.
... use alt attribute to label area elements that have the href attribute in image maps, give each <area> element an alt attribute containing a name that describes what resources the areas links to.
... see also <area> h24: providing text alternatives for the area elements of image maps dialogs should be labeled for any container whose contents act as a dialog box (for example, a modal dialog asking the user to make a choice or respond to an action being taken), give it a descriptive label or name, so that assistive technology users can easily discover what its purpose is.
...And 27 more matches
<label> - HTML: Hypertext Markup Language
WebHTMLElementlabel
the html <label> element represents a caption for an item in a user interface.
... associating a <label> with an <input> element offers some major advantages: the label text is not only visually associated with its corresponding text input; it is programmatically associated with it too.
... this means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
...And 23 more matches
Adding Labels and Images - Archive of obsolete content
« previousnext » this section describes a way to add labels and images to a window.
...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.
...And 12 more matches
label - Archive of obsolete content
ArchiveMozillaXULlabel
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to provide a label for a control element.
... if the user clicks the label, it will move the focus to the associated control, specified with the control attribute.
... attributes accesskey, control, crop, disabled, href, value properties accesskey, accessibletype, control, crop, disabled, value style classes header, indent, monospace, plain, small-margin, text-link examples <label value="email address" control="email"/> <textbox id="email"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...And 10 more matches
Using the aria-labelledby attribute - Accessibility
description the aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element ids, which refer to elements that have the text needed for labeling.
... this idea is similar to how the "for" attribute is used to link a label to an input.
... aria-labelledby is very similar to aria-describedby: a label provides essential information about an object, while a description provides extended information that the user might need.
...And 9 more matches
label - JavaScript
the labeled statement can be used with break or continue statements.
... note: labeled loops or blocks are very uncommon.
... syntax label : statement label any javascript identifier that is not a reserved word.
...And 9 more matches
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.
...And 8 more matches
HTMLLabelElement - Web APIs
the htmllabelelement interface gives access to properties specific to <label> elements.
...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...
... htmllabelelement.control read only is a htmlelement representing the control with which the label is associated.
...And 7 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.
...And 5 more matches
AudioTrack.label - Web APIs
WebAPIAudioTracklabel
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.
... syntax var audiotracklabel = audiotrack.label; value a domstring specifying the track's human-readable label, if one is available in the track metadata.
... for example, a track whose kind is "commentary" might have a label such as "commentary with director mark markmarkimark and star donna donnalidon".
...And 4 more matches
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.
...And 4 more matches
VideoTrack.label - Web APIs
WebAPIVideoTracklabel
the read-only videotrack property label returns a string specifying the video track's human-readable label, if one is available; otherwise, it returns an empty string.
... syntax var videotracklabel = videotrack.label; value a domstring specifying the track's human-readable label, if one is available in the track metadata.
... for example, a track whose kind is "sign" might have a label such as "a sign-language interpretation.".
...And 3 more matches
nsIDOMXULLabeledControlElement
dom/interfaces/xul/nsidomxullabeledcontrolel.idlscriptable this interface is used as a basis for labeled control elements in xul.
...this should be one of the characters that appears in the label for the element.
...on non-macintosh platforms, the character on the element's label matching the access key is underlined.
...And 2 more matches
<mlabeledtr> - MathML
the mathml <mlabeledtr> element is used to represent a label in a row either on the left or on the right side (determined using the side attribute on the <mtable> element).
... child elements of <mlabeledtr> must be <mtd> elements.
... the first child is the label whereas all other children are representing row contents and are treated identically to children of <mtr> elements.
...And 2 more matches
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.
... 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.
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 standard no change html5the definition of 'labels' in that specification.
HTMLLabelElement.form - Web APIs
the read-only htmllabelelement.form property returns an htmlformelement object which represents the form of which the label's associated control is a part, or null if there is either no associated control, or if that control isn't in a form.
... this property is just a shortcut for htmllabelelement.control.form.
... syntax form = htmllabelelement.form value an htmlformelement which represents the form with which the label's control is associated.
... if control is null (meaning the label isn't associated with a control), or if the control isn't part of a form, this property returns null.
HTMLLabelElement.htmlFor - Web APIs
the htmllabelelement.htmlfor property reflects the value of the for content property.
... that means that this script-accessible property is used to set and read the value of the content property for, which is the id of the label's associated control element.
... syntax controlid = htmllabelelement.htmlfor htmllabelelement.htmlfor = newid value a domstring which contains the id string of the element which is associated with the control.
... if this property has a value, the htmllabelelement.control property must refer to the same control.
HTMLMeterElement.labels - Web APIs
the htmlmeterelement.labels read-only property returns a nodelist of the <label> elements associated with the <meter> element.
... syntax var labelelements = meter.labels; return value a nodelist containing the <label> elements associated with the <meter> element.
... example html <label id="label1" for="test">label 1</label> <meter id="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.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.
HTMLOutputElement.labels - Web APIs
the htmloutputelement.labels read-only property returns a nodelist of the <label> elements associated with the <output> element.
... syntax var labelelements = output.labels; return value a nodelist containing the <label> elements associated with the <output> element.
... example html <label id="label1" for="test">label 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.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.
HTMLProgressElement.labels - Web APIs
the htmlprogresselement.labels read-only property returns a nodelist of the <label> elements associated with the <progress> element.
... syntax var labelelements = progress.labels; return value a nodelist containing the <label> elements associated with the <progress> element.
... example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.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.
HTMLSelectElement.labels - Web APIs
the htmlselectelement.labels read-only property returns a nodelist of the <label> elements associated with the <select> element.
... syntax var labelelements = select.labels; return value a nodelist containing the <label> elements associated with the <select> element.
... example html <label id="label1" for="test">label 1</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.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.
HTMLTextAreaElement.labels - Web APIs
the htmltextareaelement.labels read-only property returns a nodelist of the <label> elements associated with the <textarea> element.
... syntax var labelelements = textarea.labels; return value a nodelist containing the <label> elements associated with the <textarea> element.
... example html <label id="label1" for="test">label 1</label> <textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.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.
MediaDeviceInfo.label - Web APIs
the label readonlyinline property of the mediadeviceinfo interface returns a domstring, that is a label describing this device (for example "external usb webcam").
... syntax var label = mediadeviceinfo.label; value a domstring which describes the media device.
... for security reasons, the label is always an empty string ("") if the user has not obtained permission to use at least one media device, either by starting a stream from the microphone or camera, or by persistent permissions being granted.
... specifications specification status comment media capture and streamsthe definition of 'label' in that specification.
label - Archive of obsolete content
« xul reference home label type: string the label that will appear on the element.
... see also treeitem.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="alert(document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="document.getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click" oncommand="document.getelementbyid('mycheckbox').setattribute('label','still not checked');"/> <button label="show label of checkbox" onco...
...mmand="alert( document.getelementbyid('mycheckbox').getattribute('label') )"/> ...
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.
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.
HTMLButtonElement.labels - Web APIs
the htmlbuttonelement.labels read-only property returns a nodelist of the <label> elements associated with the <button> element.
... syntax var labelelements = button.labels; return value a nodelist containing the <label> elements associated with the <button> element.
... example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
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.
... html5the definition of 'htmlelement.accesskeylabel' in that specification.
HTMLLabelElement.control - Web APIs
the read-only htmllabelelement.control property returns a reference to the control (in the form of an object of type htmlelement or one of its derivatives) with which the <label> element is associated, or null if the label isn't associated with a control.
... syntax control = htmllabelelement.control value an htmlelement derived object representing the control with which the <label> is associated, or null if the label stands alone.
... if this property has a value and htmllabelelement.htmlfor has a value, the htmllabelelement.htmlfor property must refer to the same control.
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".
...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.
Label and description - Archive of obsolete content
to cause the text to wrap: ensure the long-running text is a text node child of <description/> or <label/> (i.e., do not specify the long-running text in the value attribute of these elements).
... <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.
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.
... además label ...
label - Archive of obsolete content
ArchiveMozillaXULPropertylabel
« xul reference label type: string gets and sets the value of the label attribute.
... see also richlistitem.label textbox.label ...
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.
buttonlabelaccept - Archive of obsolete content
« xul reference home buttonlabelaccept type: string the label to appear on the "accept" button.
buttonlabelcancel - Archive of obsolete content
« xul reference home buttonlabelcancel type: string the label to appear on the "cancel" button.
buttonlabeldisclosure - Archive of obsolete content
« xul reference home buttonlabeldisclosure type: string the label to appear on the "disclosure" button.
buttonlabelextra1 - Archive of obsolete content
« xul reference home buttonlabelextra1 type: string the label to appear on the first extra button.
buttonlabelextra2 - Archive of obsolete content
« xul reference home buttonlabelextra2 type: string the label to appear on the second extra button.
buttonlabelhelp - Archive of obsolete content
« xul reference home buttonlabelhelp type: string the label to appear on the "help" button.
label.value - Archive of obsolete content
« xul reference home value type: string the text to be used for the label.
panel.label - Archive of obsolete content
« xul reference home label type: string for panels with titlebars, the label on the titlebar.
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.
searchLabel - Archive of obsolete content
« xul reference searchlabel type: string gets and sets the value of the searchlabel attribute.
nsMsgLabelValue
defined in comm-central/ mailnews/ base/ public/ mailnewstypes2.idl typedef unsigned long nsmsglabelvalue; ...
Index - Archive of obsolete content
195 label and description code snippets no summary!
...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 33 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
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.
... <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.
...the value is used as the value of the <label>'s for attribute to link the label with the form control.
...And 33 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
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.
... <label value="horizontal layout"/> <hbox> <button label="horizontal1"/> <button label="horizontal2"/> </hbox> <label value="vertical layout"/> <vbox> <button label="vertical1"/> <button label="vertical2"/> </vbox> <label value="mixed"/> <hbox> <button label="mixed1"/> <vbox> <button label="mixed2"/> <button label="mixed3"/> </vbox> <button label="mixed4"/> </hbox> listing 3: ho...
... <box flex="1" align="end" pack="end"> <button label="happy"/> <button label="sad"/> </box> listing 2: how align and pack respond to orient figure 2: output from listing 2 flex elements ordinarily have fixed height and width.
...And 31 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
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.
... 42 buttonlabelaccept xul attributes, xul reference no summary!
...And 31 more matches
Menus - Archive of obsolete content
when another item is selected, the label of the item is set as the label of the menulist.
... 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.
...And 29 more matches
How to structure a web form - Learn web development
you can label a <fieldset> by including a <legend> element just below the opening <fieldset> tag.
... 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.
...And 29 more matches
context-menu - Archive of obsolete content
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.
... 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.
...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.
...And 27 more matches
ui/button/toggle - Archive of obsolete content
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 ...
...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.
...you can also add, or change, the listener afterwards: 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" }, onclick: firstclick, onchange: firstchange }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.l...
...And 27 more matches
Building accessible custom components in XUL - Archive of obsolete content
label elements for each cell in the spreadsheet.
...the label for each header and cell is defined in the value attribute.
...note: the row and column headers are denoted by description elements, and individual cells are denoted by label elements.
...And 26 more matches
Index - Web APIs
WebAPIIndex
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.
...the value, if any, specifies the default file name for use in labeling the resource in a local file system.
... 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.
...And 24 more matches
ARIA Test Cases - Accessibility
markup used: role="alert" aria-labeledby notes: in the uiuc test example, the 'close' button cannot recieve focus.
... 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.
... from mixed to fully checked, nothing spoken n/a fail fail zoom (leopard) pass n/a pass pass zoomtext pass - fail fail orca - n/a - - combobox testcases: editable combo 2 dojo nightly build (combobox) dojo nightly build (combobox with auto complete) expected at behavior: on focus, screen reader announces the label, the role and the current content of the combobox.
...And 24 more matches
Creating our first Vue component - Learn web development
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.
...And 21 more matches
ui/button/action - Archive of obsolete content
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.
...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.
...you can also add, or change, the listener afterwards: 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: firstclick }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } the l...
...And 20 more matches
XUL accessibility guidelines - Archive of obsolete content
for toolbar buttons with images it is recommended to use both a text label in the label attribute and image alt text in the tooltiptext attribute.
...--> <toolbarbutton label="stop" image="stop.png" tooltiptext="stop loading the page" /> title provide unique titles to window container elements such as windows, wizards, and dialogs.
... <dialog id="print_dialog" title="print" ...> <window id="mywindow" title="my application" ...> <wizard id="reg_window" title="register your software" ...> form labels labels are not automatically associated to form elements.
...And 19 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
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).
...And 19 more matches
The Box Model - Archive of obsolete content
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.
...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.
...note that, again, this can depend on the contents of the elements, in this case, the labels and paddings in the buttons.
...And 18 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.
...in reality, the keyboard shortcut is handled by the key element, however, the menu item will display the shortcut next to its label.
... <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.
...And 17 more matches
Accesskey display rules - Archive of obsolete content
xul elements display their accesskeys in their label automatically if it's necessary.
... this document describes the rules of generating a label text.
...e.g., when an accesskey of "file" is 'f', the generated label will be "file".
...And 17 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.
...And 15 more matches
XUL controls - Archive of obsolete content
<button label="save" accesskey="s"/> more information about the button element.
... <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this type of menu button element.
... <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.
...And 15 more matches
UI pseudo-classes - Learn web development
for example: <form> <fieldset> <legend>feedback form</legend> <div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> </div> <div> <label for="lname">last name: </label> <input id="lname" name="lname" type="text" required> </div> <div> <label for="email">email address (include if you want a response): </label> <input id="email" name="email" type="email"> </div> <div><button>...
... this is really useful when you want to add a visual indicator to an element, such as a label or icon, but don't want it to be picked up by assistive technologies.
... back to our required/optional example from before, this time we'll not alter the appearance of the input itself — we'll use generated content to add an indicating label (see it live here, and see the source code here).
...And 15 more matches
Loops and iteration - JavaScript
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.
... <form name="selectform"> <p> <label for="musictypes">choose some music types, then click the button below:</label> <select id="musictypes" name="musictypes" multiple="multiple"> <option selected="selected">r&b</option> <option>jazz</option> <option>blues</option> <option>new age</option> <option>classical</option> <option>opera</option> </select> </p> <p><input id="btn" type="button" ...
...while (true) { console.log('hello, world!'); } labeled statement a label provides a statement with an identifier that lets you refer to it elsewhere in your program.
...And 15 more matches
widget - Archive of obsolete content
for example, this widget contains an image, so it looks like a simple icon: require("sdk/widget").widget({ id: "mozilla-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.
...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.
...And 14 more matches
Tooltips - Archive of obsolete content
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.
... the tooltiptext attribute in most cases, the tooltip will display only a single label.
... <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.
...And 12 more matches
Localization - Archive of obsolete content
<button label="&findlabel;"/> the text that will appear on the label will be the value that the entity &findlabel; has.
...in english, the &findlabel; entity will probably be declared to have the text "find".
... 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".
...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...
...ption> </select> </div> </form> this means using links, buttons, form elements, and labels appropriately (including the <label> element for form controls).
... meaningful text labels ui control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.
...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...
...ption> </select> </div> </form> this means using links, buttons, form elements, and labels appropriately (including the <label> element for form controls).
... meaningful text labels ui control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.
...And 12 more matches
Focus and Selection - Archive of obsolete content
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.
...this function will change the value of the text label.
...d="focus-example" title="focus example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init(){ addeventlistener("focus",setfocusedelement,true); } function setfocusedelement(){ var focused = document.commanddispatcher.focusedelement; document.getelementbyid("focused").value = focused.tagname; } </script> <hbox> <label control="username" value="user name:"/> <textbox id="username"/> </hbox> <button label="hello"/> <checkbox label="remember this decision"/> <label id="focused" value="-no focus-"/> </window> in this example, a focus event handler is attached the window.
...And 11 more matches
Templates - Archive of obsolete content
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 may notice in the example above that the button has a uri attribute and an unusual value for the label attribute.
...in the example earlier, this is the case for the label attribute.
...And 11 more matches
XBL Attribute Inheritance - Archive of obsolete content
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.
...<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.
...And 11 more matches
Vue conditional rendering: editing existing todos - Learn web development
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.
... copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for &quot;{{label}}&quot;</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__primary"> ...
... save <span class="visually-hidden">edit for {{label}}</span> </button> </div> </form> </template> <script> export default { props: { label: { type: string, required: true }, id: { type: string, required: true } }, data() { return { newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block...
...And 11 more matches
ARIA: Navigation Role - Accessibility
<div role="navigation" aria-label="main"> <!-- list of links to main website locations --> </div> this is a website's main navigation.
...by classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically.
...if a page includes more than one navigation landmark, each should have a unique label.
...And 11 more matches
ARIA: dialog role - Accessibility
<div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user 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 se...
...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="tel"> - HTML: Hypertext Markup Language
WebHTMLElementinputtel
see labels and placeholders in <input>: the input (form input) element for more information.
... 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.
...this information is used to decide what kind of label to use on the enter key on the virtual keyboard.
...And 11 more matches
Broadcasters and Observers - Archive of obsolete content
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.
...And 10 more matches
Modifying a XUL Interface - Archive of obsolete content
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.
... 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.
... addbutton() then assigns the label 'a new button' to the button using the setattribute() function.
...And 10 more matches
XBL Example - Archive of obsolete content
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 label attributes on the two buttons inherit their values from the bound element.
...And 10 more matches
Accessibility/XUL Accessibility Reference - Archive of obsolete content
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.
...And 10 more matches
Client-side form validation - Learn web development
this example involves a simple text <input> with an associated <label> and a submit <button>.
... <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.
... <form> <label for="choose">would you prefer a banana or cherry?
...And 10 more matches
Starting our Svelte Todo list app - Learn web development
copy and paste the following into our todos.svelte component file, replacing the existing content: <!-- todos.svelte --> <div class="todoapp stack-large"> <!-- newtodo --> <form> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg"> what needs to be done?
... </label> </h2> <input type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled="" class="btn btn__primary btn__lg"> add </button> </form> <!-- filter --> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</span>...
... <span class="visually-hidden">tasks</span> </button> </div> <!-- todosstatus --> <h2 id="list-heading">2 out of 3 items completed</h2> <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <div class="stack-small"> <form class="stack-small"> <div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' </label> <input type="text" id="todo-1" autocomplete="off" class="todo-text" /> </div> <div class="btn-group"> <button class="btn todo-cancel" type="button"> cancel <span class="visually-hidden">renami...
...And 10 more matches
nsIPromptService
it typically has the label "ok", "yes", or "save".
...it typically has the label "cancel" or "no".
...for instance, it might have the label "don't save".
...And 10 more matches
simple-prefs - Archive of obsolete content
title this is used as a label for the preference in the add-ons manager user interface.
... 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.
...And 9 more matches
The Essentials of an Extension - Archive of obsolete content
we'll skip some code that is covered in the locale section, moving on to the most important part of the content: <menubar id="main-menubar"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="helpmenu"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menubar> <vbox id="a...
...ppmenusecondarypane"> <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="appmenu_addons"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </vbox> this is the code that adds the hello world menu to the browser window.
... one recommended location for menus in the classic menu vase is under the tools menu, so the code should really look like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertbefore="devtoolsendseparator"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menu...
...And 9 more matches
Actions - Archive of obsolete content
<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.
...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.
...And 9 more matches
The Box Model - Archive of obsolete content
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.
...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.
...the labels and textboxes are inside the inner hbox elements, so they are oriented according to those boxes, which are horizontal.
...And 9 more matches
dialog - Archive of obsolete content
attributes buttonaccesskeyaccept, buttonaccesskeycancel, buttonaccesskeydisclosure, buttonaccesskeyextra1, buttonaccesskeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css...
..."?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selected="true"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... buttonlabelaccept type: string the label to appear on the "accept" button.
...And 9 more matches
WAI-ARIA basics - Learn web development
as an example, aria-required="true" specifies that a form input needs to be filled in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">.
... as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute.
...ture like this: <header> <h1>...</h1> <nav role="navigation"> <ul>...</ul> <form role="search"> <!-- search form --> </form> </nav> </header> <main> <article role="article">...</article> <aside role="complementary">...</aside> </main> <footer>...</footer> we've also given you a bonus feature in this example — the <input> element has been given the attribute aria-label, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a <label> element.
...And 9 more matches
Your first form - Learn web development
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.
...we will use the following html elements: <form>, <label>, <input>, <textarea>, and <button>.
... 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.
...And 9 more matches
Beginning our React todo list - Learn web development
the jsx copy the following snippet to your clipboard, then paste it into app.js so that it replaces the existing app() function: function app(props) { return ( <div classname="todoapp stack-large"> <h1>todomatic</h1> <form> <h2 classname="label-wrapper"> <label htmlfor="new-todo-input" classname="label__lg"> what needs to be done?
... </label> </h2> <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> <div classname="filters btn-group stack-exception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>active</span> <span classname="v...
...on" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit ...
...And 9 more matches
PKCS11 FAQ
MozillaProjectsNSSPKCS11FAQ
labels?
... these are the general guidelines: user certificates are identified by their labels.
... certificates may be looked up by label.
...And 9 more matches
ARIA: Region role - Accessibility
<div role="region" aria-label="example"> <!-- region content --> </div> description the region role is an aria landmark role.
...by classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically.
... 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.
...And 9 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.
... syntax break [label]; label optional identifier associated with the label of the statement.
... description the break statement includes an optional label that allows the program to break out of a labeled statement.
...And 9 more matches
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
string a simple menuitem with the given string label.
... label string the label of the menuitem.
...it should be one of the characters that appears in the item's label.
...And 8 more matches
Element Positioning - Archive of obsolete content
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.
...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.
...And 8 more matches
List Controls - Archive of obsolete content
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.
...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.
...to specify the text content of a cell, place a label attribute on a listcell.
...And 8 more matches
ARIA: form role - Accessibility
<div role="form" id="contact-info" aria-label="contact information"> <!-- form content --> </div> this is a form that collects and saves a user's contact information.
...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.
...And 8 more matches
Accessibility documentation index - Accessibility
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.
...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.
...And 8 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
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 forma...
... 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 of 2017-06-01t08:30 and a maximum datetime of 2017-06-30t16:30: <form> <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30"> </form> the result here is that: only days in june 2017 can be selected — only the "days" part of the date value will be editable, and dates outside june can't be scrolled to in the datepicker widget.
...And 8 more matches
<input type="month"> - HTML: Hypertext Markup Language
WebHTMLElementinputmonth
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.
... you can also get and set the date value in javascript using the htmlinputelement.value property, for example: <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"> var monthcontrol = document.queryselector('input[type="month"]'); monthcontrol.value = '1978-06'; additional attributes in addition to the attributes common to <input> elements, month inputs offer the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the latest year and month to accept as a valid input ...
... basic uses of month the simplest use of <input type="month"> involves a basic <input> and <label> element combination, as seen below: <form> <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month"> </form> setting maximum and minimum dates you can use the min and max attributes to restrict the range of dates that the user can choose.
...And 8 more matches
<input type="time"> - HTML: Hypertext Markup Language
WebHTMLElementinputtime
you can set a default value for the input by including a valid time in the value attribute when creating the <input> element, like so: <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time" value="13:30"> you can also get and set the date value in javascript using the htmlinputelement.value property, for example: var timecontrol = document.queryselector('input[type="time"]'); timecontrol.value = '15:30'; time value format the value of the time input is always in 24-hour for...
...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>.
... basic uses of time the simplest use of <input type="time"> involves a basic <input> and <label> element combination, as seen below: <form> <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time"> </form> controlling input size <input type="time"> doesn't support form sizing attributes such as size, since times are always about the same number of characters long.
...And 8 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues */ function processldapvalues(values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn = getldapvalue(values, "cn"); var mail = getldapvalue(values, "mail"); var url = getldapvalue(values, "labeleduri"); // those ldap variables are only available in this processldapvalues context!
... 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.
...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.
...And 7 more matches
Building Trees - Archive of obsolete content
here is an example (using an rdf source): <tree id="photoslist" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> <treecell label="rdf:http://purl.org/dc/elements/1.1/date"/> </treerow> </treeitem> </treechildren> </template> </tree> note: the tree ...
...the builder looks at the label for the corresponding cell, translates any variables or predicates into values, and returns the value.
...the builder doesn’t compute any labels until the view asks for them.
...And 7 more matches
Adding Buttons - Archive of obsolete content
the button element has two main properties associated with it, a label and an image.
...thus, a button can have a label only, an image only or both a label and an image.
... syntax of buttons the button tag has the following syntax: <button id="identifier" class="dialog" label="ok" image="images/image.jpg" disabled="true" accesskey="t"/> the attributes are as follows, all of which are optional: id a unique identifier so that you can identify the button with.
...And 7 more matches
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
for instance, the getcelltext() function will be called to get the label for a particular cell in the tree.
... 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.
...as with listboxes, a header row will appear with column labels.
...And 7 more matches
menulist - Archive of obsolete content
attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, select ...
... examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> 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.
...And 7 more matches
<statusbarpanel> - Archive of obsolete content
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.
... attributes crop, image, label properties image, label style classes statusbarpanel-iconic, statusbarpanel-iconic-text, statusbarpanel-menu-iconic examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> 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.
...And 7 more matches
toolbarbutton - Archive of obsolete content
attributes accesskey, 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 a...
...ccesskey="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"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> </toolbar> <toolbar id="radio-toolbar"> <toolbarbutton accesskey="1" label="radio 1" type="radio" group="radiogroup"/> <toolbarbutton accesskey="2" label="radio 2" type="radio" group="radiogroup"/> <toolbarbutton accesskey="3" label="radio 3" type="radio" group="radiogroup"/> </toolbar> 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.
...And 7 more matches
treecol - Archive of obsolete content
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.
... <tree flex="1" editable="true"> <treecols> <treecol label="active" type="checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> to make the checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type).
... 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.
...And 7 more matches
HTML text fundamentals - Learn web development
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="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() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code...
... 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%">milk eggs bread hummus</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...
...And 7 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...
...the label, however, already denotes the purpose of the form.
... to avoid repeating ourselves, let's wrap our label in an <h2>.
...And 7 more matches
DevTools API - Firefox Developer Tools
label string, optional.
... panellabel string, optional.
... an accessibility label for the panel.
...And 7 more matches
Waterfall - Firefox Developer Tools
markers the markers for operations are color-coded and labeled.
... 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.
...non-incremental gc events are labeled "(non-incremental)".
...And 7 more matches
ARIA: search role - Accessibility
if a document includes more than one search, each should have a unique label.
... 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.
... labeling landmarks multiple landmarks if there is more than one search landmark role in a document, provide a label for each landmark.
...And 7 more matches
ARIA: listbox role - Accessibility
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.
... 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 7 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.
...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.
...And 7 more matches
Operable - Accessibility
see meaningful text labels.
...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.6 headings and labels (aa) heading (e.g.
...And 7 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...
...nter 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 { width: 100%; margin: 0 auto; padding: 0 0 20px 0; font-family: "segoe ui", arial, helvetica, sans-serif; /*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/ border: 1px solid #eee; -moz-box-sizing: border-box; -webkit-bo...
...: 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 7 more matches
<input type="password"> - HTML: Hypertext Markup Language
WebHTMLElementinputpassword
see labels and placeholders in <input>: the input (form input) element for more information.
... 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.
...And 7 more matches
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
see labels and placeholders in <input>: the input (form input) element for more information.
... 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.
...this information is used to decide what kind of label to use on the enter key on the virtual keyboard.
...And 7 more matches
<input type="text"> - HTML: Hypertext Markup Language
WebHTMLElementinputtext
see labels and placeholders in <input>: the input (form input) element for more information.
... 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.
...this information is used to decide what kind of label to use on the enter key on the virtual keyboard.
...And 7 more matches
dev/panel - Archive of obsolete content
you can use the class utility function: const { panel } = require("dev/panel"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool", icon: "./my-devtool.png", url: "./my-devtool.html", setup: function(options) { // my setup goes here }, dispose: function() { // my teardown goes here }, onready: function() { // i can send messages to // the panel document here } }); alternatively, you can use the extend function: const { extend } = require("sdk/core/he...
...ritage"); function mypanel() {}; mypanel.prototype = extend(panel.prototype, { label: "my panel", tooltip: "...", ....
... name type description label string the string to display in the toolbox toolbar.
...And 6 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
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).
...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" src="chrome://helloworld/content/clock.js"/> <hbox align="center"> <label value="current time:" /> <textbox id="currenttime" /> </hbox> </dialog> listing 6: content for clock.js function initclock() { showcurrenttime(); window.setinterval(showcurrenttime, 1000); } function showcurrenttime() { var textbox = document.getelementbyid("currenttime"); textbox.value = new date().tolocaletimestring(); textbox.select(); } operations check perform an operations check to make...
...And 6 more matches
Adding Methods to XBL-defined Elements - Archive of obsolete content
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.
... 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 6 more matches
Box Objects - Archive of obsolete content
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.
...example 2 : source view <script> function showpositionandsize() { var labelbox = document.getelementbyid('thelabel').boxobject; alert("position is (" + labelbox.x + "," + labelbox.y + ") and size is (" + labelbox.width + "," + labelbox.height + ")"); } </script> <button label="hide" oncommand="document.getelementbyid('thelabel').hidden = true;"/> <button label="show" oncommand="document.getelementbyid('thelabel').hidden = false;"/> <bu...
...tton label="collapse" oncommand="document.getelementbyid('thelabel').collapsed = true;"/> <button label="uncollapse" oncommand="document.getelementbyid('thelabel').collapsed = false;"/> <button label="show position/size" oncommand="showpositionandsize();"/> <label id="thelabel" value="i am a label"/> note that if you hide and collapse the label, it will be treated as hidden.
...And 6 more matches
Input Controls - Archive of obsolete content
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.
... <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.
... notice that the label and the text input field have now appeared in the window.
...And 6 more matches
Manipulating Lists - Archive of obsolete content
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 two arguments correspond to the label attribute and the value attribute on the listitem element.
...And 6 more matches
More Button Features - Archive of obsolete content
the button below will have both a label and the image 'happy.png'.
... the image will appear to the left of the label.
...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.
...And 6 more matches
menu - Archive of obsolete content
ArchiveMozillaXULmenu
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <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> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
...this should be one of the characters that appears in the label attribute for the element.
...And 6 more matches
menuitem - Archive of obsolete content
attributes acceltext, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"...
.../> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
...this should be one of the characters that appears in the label attribute for the element.
...And 6 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
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> ...
... </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="true" --> <treeitem container="true" open="true"> <treerow> <treecell label="2"/> <treecel...
...l label="b"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="2a"/> <treecell label="ba"/> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> attributes disabled type: boolean indicates whether the element is disabled or not.
...And 6 more matches
Making decisions in your code — conditionals - Learn web development
} — check out the following more involved example, which could be part of a simple weather forecast application: <label for="weather">select the weather type today: </label> <select id="weather"> <option value="">--make a choice--</option> <option value="sunny">sunny</option> <option value="rainy">rainy</option> <option value="snowing">snowing</option> <option value="overcast">overcast</option> </select> <p></p> const select = document.queryselector('select'); const para = document.queryselector('p'); ...
... a switch example let's have a look at a real example — we'll rewrite our weather forecast application to use a switch statement instead: <label for="weather">select the weather type today: </label> <select id="weather"> <option value="">--make a choice--</option> <option value="sunny">sunny</option> <option value="rainy">rainy</option> <option value="snowing">snowing</option> <option value="overcast">overcast</option> </select> <p></p> const select = document.queryselector('select'); const para = document.queryselector('p'); ...
... <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my website</h1> const select = document.queryselector('select'); const html = document.queryselector('html'); document.body.style.padding = '10px'; function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.co...
...And 6 more matches
Handling common accessibility problems - Learn web development
the three most common examples are links, form labels, and data tables.
...for example, a list of links labeled "click here", "click here", etc.
... next on our list, the form <label> element is one of the central features that allows us to make forms accessible.
...And 6 more matches
Profiling with the Firefox Profiler
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.
... label stack the label stack (formerly called "pseudo stack") uses function entry/exit tags added by hand to important points in the code base.
...And 6 more matches
ARIA annotations - Accessibility
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.
... 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.
...you’ll see examples of most of these later on in the article, but briefly: aria-label="" can be set on an element to provide a brief descriptive label when it isn't appropriate to have the label actually appearing in the ui, for example a search input in a horizontal nav bar.
...And 6 more matches
ARIA: figure role - Accessibility
<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.
... 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"> ...
...And 6 more matches
ARIA: img role - Accessibility
<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".
... 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 l...
... for example: <div role="img" aria-labelledby="image-1"> ...
...And 6 more matches
<input type="date"> - HTML: Hypertext Markup Language
WebHTMLElementinputdate
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.
...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.
... 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.
...And 6 more matches
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
the resulting html looks like this: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> here you see the three radio buttons,...
...they each also have a unique id, which is used by the <label> element's for attribute to associate the labels with the radio buttons.
...the html is revised to add a <pre> block to output the form data into: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> <pre id="log"> </pre> then...
...And 6 more matches
<input type="url"> - HTML: Hypertext Markup Language
WebHTMLElementinputurl
see labels and placeholders in <input>: the input (form input) element for more information.
... 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.
...this information is used to decide what kind of label to use on the enter key on the virtual keyboard.
...And 6 more matches
ContextMenus - Archive of obsolete content
<hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute.
...however, the event will also fire when the label is right-clicked for instance, so the event handler should check to make sure that the target of the contextmenu event is what is desired.
... <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.
...And 5 more matches
MenuModification - Archive of obsolete content
<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.
...And 5 more matches
Panels - Archive of obsolete content
<?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.
... <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.
...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.
...And 5 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
attributes accesskey, alwaysopenpopup, autocompletesearch, autocompletesearchparam, autofill, autofillaftermatch, autofill, completedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, au...
...tofill, 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, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes ...
...this should be one of the characters that appears in the label attribute for the element.
...And 5 more matches
Using Remote XUL - Archive of obsolete content
<?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.
...both menus and buttons take a label attribute whose value is the text to display in the element.
... <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="the mozilla organization"> <menupopup> <menuitem label="at a glance" value="https://www.mozilla.org/mozorg.html" /> <menuitem label="feedback" value="https://www.mozilla.org/feedback.html" /> <menuitem label="get involved" value="https://www.mozilla.org/get-involved.html" /> <menuitem label="newsgroups" value="https://www.mozilla.org/community.html" /> ...
...And 5 more matches
menuseparator - Archive of obsolete content
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut k...
...this should be one of the characters that appears in the label attribute for the element.
... 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.
...And 5 more matches
richlistitem - Archive of obsolete content
attributes disabled, searchlabel, selected, tabindex, value properties accessible, control, disabled, label, selected, tabindex, value examples (example needed) attributes disabled type: boolean indicates whether the element is disabled or not.
... 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.
...And 5 more matches
XForms Input Element - Archive of obsolete content
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.
...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.
...labelposition - a mozilla xforms extension in the namespace http://www.mozilla.org/projects/xfor...009/extensions.
...And 5 more matches
Componentizing our React app - Learn web development
go back to src/app.js, copy the first <li> from inside the unordered list, and paste it into todo.js so that it reads like this: export default function todo() { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat</span> </button> </div> ...
...your <ul> should read like this: <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <todo /> <todo /> <todo /> </ul> when you look back at your browser, you'll notice something unfortunate: your list now repeats the first task three times!
... putting all that together, your todo() function should read like this: export default function todo(props) { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">{props.name}</span> ...
...And 5 more matches
Componentizing our Svelte app - Learn web development
put the following contents inside this file: <script> export let todo </script> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" on:click={() => todo.completed = !todo.completed} checked={todo.completed} /> <label for="todo-{todo.id}" class="todo-label">{todo.name}</label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger" on:click={() => alert('not implemented')}> delete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> ...
... update the {#each} block inside todos.svelte like so: <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each filtertodos(filter, todos) as todo (todo.id)} <li class="todo"> <todo {todo} /> </li> {:else} <li>nothing to do here!</li> {/each} </ul> the list of todos is displayed on the page, and the checkboxes should work (try checking/unchecking a couple, and then observing that the filters still work as expected), but our "x out of y items completed...
... the following gives you an idea of what the basic if block structure looks like: <div class="stack-small"> {#if editing} <!-- markup for editing todo: label, input text, cancel and save button --> {:else} <!-- markup for displaying todo: checkbox, label, edit and delete button --> {/if} </div> the non-editing section — that is, the {:else} part (lower half) of the if block — will be very similar to the one we had in our todos component.
...And 5 more matches
Accessible Toolkit Checklist
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.
... 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.
...And 5 more matches
Key Values - Web APIs
whitespace keys keyboardevent.key value description virtual keycode windows mac linux android "enter" the enter or ↵ key (sometimes labeled return).
...this key is labeled delete on mac keyboards.
... keyboardevent.key value description virtual keycode windows mac linux android "launchcalculator" [5] the calculator key, often labeled with an icon.
...And 5 more matches
ARIA: button role - Accessibility
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 some cases, for example buttons represented by icons, the accessible name may be provided from the aria-label or aria-labelledby attributes.
... as an example, the mute button on an audio player labeled "mute" could indicate that sound is muted by setting the aria-pressed state true.
...And 5 more matches
font - CSS: Cascading Style Sheets
WebCSSfont
icon the system font used to label icons.
... small-caption the system font used for labeling small controls.
...</p> <form action="createshorthand()"> <div class="cf"> <div class="setpropcont"> font-style<br/> <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setcss()"> <label for="font-style-none">none</label><br/> <input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setcss()"> <label for="font-style-normal">normal</label><br/> <input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setcss()"> <label for="font-style-italic">italic</label><br/> <input type="radio" id="fon...
...And 5 more matches
<input type="email"> - HTML: Hypertext Markup Language
WebHTMLElementinputemail
see labels and placeholders in <input>: the input (form input) element for more information.
...this can be especially important if the page design doesn't offer descriptive labels for each <input>.
...let's see how: body { font: 16px sans-serif; } .emailbox { padding-bottom: 20px; } .messagebox { padding-bottom: 20px; } label { line-height: 22px; } label::after { content: ":"; } <form> <div class="emailbox"> <label for="emailaddress">your e-mail address</label><br> <input id="emailaddress" type="email" size="64" maxlength="64" required placeholder="username@beststartupever.com" pattern=".+@beststartupever.com" title="please provide only a best startup ever corporate e-mail address"> ...
...And 5 more matches
<input type="week"> - HTML: Hypertext Markup Language
WebHTMLElementinputweek
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.
... 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.
...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.
...And 5 more matches
Adding menus and submenus - Archive of obsolete content
the toolbox should be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.long.label;" ...
... oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting.
...menus require a menupopup element as a container for its children, which are usually menuitem elements, but can also be menuseparator, or menu in order to have multiple nesting levels: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingsizes.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" ...
...And 4 more matches
Adding sidebars - Archive of obsolete content
<menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="checkbox" autocheck="false" group="sidebar" sidebarurl="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;" oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the example in the mdc page includes a shortcut key combination to toggle ...
... 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.
...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.
...And 4 more matches
MenuButtons - Archive of obsolete content
an arrow appears on the button next to the label or image indicating to the user that a menu is present.
... <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.
... <toolbarbutton type="menu" image="cookies.png"> <menupopup> <menuitem label="block cookies" type="checkbox"/> <menuitem label="clear cookies"/> </menupopup> </toolbarbutton> the 'menu-button' button the 'menu-button' type of button is used when you want to attach a menu to a button but want to have a default action carried out when the button is pressed by itself.
...And 4 more matches
Attribute Substitution - Archive of obsolete content
for instance, to include a prefix before a variable value, you can use: <label value="my name is ?name"/> the effect will be that the ?name part of the attribute will be replaced by the value of the variable ?name.
...you can include multiple variables in one attribute if desired: <label value="my name is ?name and my age is ?age"/> this technique will work for any variable replacement in the action body, except for the uri attribute since that wouldn't be meaningful.
...<label value="?name" class="?gender^?nationality"/> the caret is considered a separator between variables, however it will not appear in the output.
...And 4 more matches
Building Menus With Templates - Archive of obsolete content
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.
...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"/> </menupopu...
...p> </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.
...And 4 more matches
Special Condition Tests - Archive of obsolete content
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.
...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 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.
...And 4 more matches
XML Templates - Archive of obsolete content
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.
... 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.
...And 4 more matches
Anonymous Content - Archive of obsolete content
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.
...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.
...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.
...And 4 more matches
Grids - Archive of obsolete content
ArchiveMozillaXULTutorialGrids
just like html tables, you put content such as labels and buttons inside the rows.
... 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.
...for example: example 2 : source view <grid flex="1"> <columns> <column/> <column flex="1"/> </columns> <rows> <row> <label control="doctitle" value="document title:"/> <textbox id="doctitle" flex="1"/> </row> <row> <label control="docpath" value="path:"/> <hbox flex="1"> <textbox id="docpath" flex="1"/> <button label="browse..."/> </hbox> </row> </rows> </grid> notice in the image how the first column of elements containing the labels has only a single elemen...
...And 4 more matches
Tabboxes - Archive of obsolete content
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'.
...in this case, the page with the check box labeled 'automatically check for mail' will appear.
... when the second tab is clicked, the page containing the button labeled 'clear news buffer' will appear instead.
...And 4 more matches
Trees and Templates - Archive of obsolete content
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.
...example 1 : source <tree id="my-tree" flex="1" datasources="rdf:files" ref="nc:filesroot" flags="dont-build-content"> <treecols> <treecol id="name" label="name" primary="true" flex="1"/> <splitter/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> here, a tree is created with ...
...And 4 more matches
Using Spacers - Archive of obsolete content
<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.
...if you create a button with a very long label, the button's default size will be large enough to hold the entire label.
...not only did the find button grow in size but some space has appeared between the main label and the button.
...And 4 more matches
button - Archive of obsolete content
you can specify the label of the button using the label attribute or by placing content inside the button.
... 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.
... this should be one of the characters that appears in the label attribute for the element.
...And 4 more matches
checkbox - Archive of obsolete content
a label, specified with the label attribute, may be added beside the check box.
... 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 appears in the label attribute for the element.
...And 4 more matches
radio - Archive of obsolete content
ArchiveMozillaXULradio
a label, specified with the label attribute may be added beside the radio button.
... attributes accesskey, command, crop, disabled, focused, group, image, label, selected, tabindex, value properties accesskey, accessibletype, control, crop, disabled, image, label, radiogroup, selected, tabindex, value examples <radiogroup> <radio id="orange" label="red" accesskey="r"/> <radio id="violet" label="green" accesskey="g" selected="true"/> <radio id="yellow" label="blue" accesskey="b" disabled="true"/> </radiogroup> 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.
...And 4 more matches
textbox - Archive of obsolete content
attributes cols, decimalplaces, disabled, 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, se...
...archbutton, 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> attributes cols type: integer for multiline textboxes, the number of columns to display.
... label type: string if present and not empty, this will be exposed to screen readers through the label property.
...And 4 more matches
Practical positioning examples - Learn web development
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 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.
...And 4 more matches
Advanced form styling - Learn web development
for example, let's take the following controls: <form> <p> <label for="search">search: </label> <input id="search" name="search" type="search"> </p> <p> <label for="text">text: </label> <input id="text" name="text" type="text"> </p> <p> <label for="date">date: </label> <input id="date" name="date" type="datetime-local"> </p> <p> <label for="radio">radio: </label> <input id="radio" name="radio" type="radio"> </p> <p> ...
... <label for="checkbox">checkbox: </label> <input id="checkbox" name="checkbox" type="checkbox"> </p> <p><input type="submit" value="submit"></p> <p><input type="button" value="button"></p> </form> applying the following css to them removes system-level styling.
... chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with appearance:none; let's take this example html: <form> <fieldset> <legend>fruit preferences</legend> <p> <label> <input type="checkbox" name="fruit-1" value="cherry"> i like cherry </label> </p> <p> <label> <input type="checkbox" name="fruit-2" value="banana" disabled> i can't like banana </label> </p> <p> <label> <input type="checkbox" name="fruit-3" value="strawberry"> i like strawberry </label> </p> </fie...
...And 4 more matches
Basic native form controls - Learn web development
you've already met some form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>.
...the hidden input type should not have an associated label.
... checkable items: checkboxes and radio buttons checkable items are controls whose state you can change by clicking on them or their associated labels.
...And 4 more matches
Looping code - Learn web development
first, some simple html — a text <input> allowing us to enter a name to search for, a <button> element to submit a search, and a <p> element to display the results in: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: 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.addeventlistener(...
... 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...
...loop itself is a bit different: let num = input.value; for (let i = 1; i <= num; i++) { let sqroot = math.sqrt(i); if (math.floor(sqroot) !== sqroot) { continue; } para.textcontent += i + ' '; } here's the output: hidden code 4 <!doctype html> <html> <head> <meta charset="utf-8"> <title>integer squares generator</title> <style> </style> </head> <body> <label for="number">enter number: </label> <input id="number" type="text"> <button>generate integer squares</button> <p>output: </p> <script> const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { para.textcontent = 'output: '; let num = inp...
...And 4 more matches
Ember app structure and componentization - Learn web development
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.
...update the application.hbs file again so its content looks like this: <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 class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" ...
...And 4 more matches
Rendering a list of Vue components - Learn web development
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.
... your app.vue <script> element contents should now look like this: import todoitem from './components/todoitem.vue'; import uniqueid from 'lodash.uniqueid' export default { name: 'app', components: { todoitem }, data() { return { todoitems: [ { id: uniqueid('todo-'), label: 'learn vue', done: false }, { id: uniqueid('todo-'), label: 'create a vue project with the cli', done: true }, { id: uniqueid('todo-'), label: 'have fun', done: true }, { id: uniqueid('todo-'), label: 'create a to-do list', done: false } ] }; } }; now, add the v-for directive and key attribute to the <li> element in your app.vue template, like so: <ul...
...> <li v-for="item in todoitems" :key="item.id"> <to-do-item label="my todo item" :done="true"></to-do-item> </li> </ul> when you make this change, every javascript expression between the <li> tags will have access to the item value in addition to the other component attributes.
...And 4 more matches
Gecko info for Windows accessibility vendors
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 iaccessible that it was labelled by in order to get more formatting information.
...And 4 more matches
PKCS11 Implement
the nss expects ck_token_info.label to contain the name of the token.
...the nss also sets the cka_id and cka_label attributes for the token.
...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.
...And 4 more matches
nsIAccessibleRole
role_columnheader 25 represents a column header, providing a visual label for a column in a table.
... role_rowheader 26 represents a row header, which provides a visual label for a table row.
...it is used for xul:label@class="text-link", html:a, html:area, xforms:trigger@appearance="minimal".
...And 4 more matches
nsPIPromptService
this is the label text of a checkbox on the dialog.
...this is the label text of the first text field on the dialog.
...this is the label text of the second text field on the dialog.
...And 4 more matches
nsMsgViewCommandType
label0 21 attach a label to the selected messages.
... label1 22 attach a label to the selected messages.
... label2 23 attach a label to the selected messages.
...And 4 more matches
Cognitive accessibility - Accessibility
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.
... provide consistent labeling identical functions should have similar labels every time they are utilized.
...And 4 more matches
Perceivable - Accessibility
ui controls such as form elements and buttons should have text labels that describe their purpose.
...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.
...And 4 more matches
<input type="checkbox"> - HTML: Hypertext Markup Language
WebHTMLElementinputcheckbox
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.
... <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.
...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.
...And 4 more matches
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
see labels and placeholders in <input>: the input (form input) element for more information.
...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.
...this can be especially important if the page design doesn't offer descriptive labels for each <input>.
...And 4 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.
... syntax continue [label]; label identifier associated with the label of the statement.
... the continue statement can include an optional label that allows the program to jump to the next iteration of a labeled loop statement instead of the current loop.
...And 4 more matches
Inline options - Archive of obsolete content
nt type attribute: type attribute displayed as preference stored as bool checkbox boolean boolint checkbox integer (use the attributes on and off to specify what values to store) integer textbox integer string textbox string color colorpicker string (in the #123456 format) file browse button and label string directory browse button and label string menulist menulist dependent on the menu item values radio radio buttons dependent on the radio values control button no pref stored the pref attribute should have the full name of the preference to be stored.
... the title attribute is used as a label for the controls.
...color"/> <!-- file and directory examples --> <setting pref="extensions.myaddon.file" type="file" title="file"/> <setting pref="extensions.myaddon.directory" type="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon.options1" type="menulist" title="options 1"> <menulist> <menupopup> <menuitem value="500" label="small"/> <menuitem value="800" label="medium"/> <menuitem value="1200" label="large"/> </menupopup> </menulist> </setting> <!-- radio button example (this example would be stored as a boolean) --> <setting pref="extensions.myaddon.options2" type="radio" title="options 2"> <radiogroup> <radio value="false" label="disabled"/> <radio value="true" label="enabled"/> </r...
...And 3 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...
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow id="stockwatcher2-prefs" title="stockwatcher 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </preferences> <hbox align="center"> <label control="symbol" value="stock to watch: "/> <textbox preference="pref_symbol" id="symbol" maxlength="4"/> </hbox> </prefpane> </prefwindow> the <preferences> block establishes all the settings we implement as well a...
...the first is a label describing the textbox.
...And 3 more matches
appendNotification - Archive of obsolete content
« xul reference home appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
... label - label to appear on the notification.
... label - the label to appear on the button popup - the id of a popup for the button.
...And 3 more matches
PopupEvents - Archive of obsolete content
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.
...<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.
...And 3 more matches
Recursive Generation - Archive of obsolete content
however, the labels on the second set of buttons are different than the first set.
... 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/...
...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.
...And 3 more matches
Result Generation - Archive of obsolete content
rdf, in mathematical terms, is a labeled directed graph.
... that means that rdf is a graph of nodes and arrows between them where each node and arrow has some label.
... the text in red are the labels for the arrows, called predicates.
...And 3 more matches
Sorting Results - Archive of obsolete content
<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.
...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.
...in almost all situations however, you would normally sort using the same variable used for the label value.
...And 3 more matches
Using Recursive Templates - Archive of obsolete content
<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.
... <vbox id="row2" container="true" empty="false" class="indent"> <label value="male"/> <vbox id="row4" class="indent"><label value="napoleon bonaparte"/></vbox> <vbox id="row5" class="indent"><label value="julius caesar"/></vbox> <vbox id="row6" class="indent"><label value="ferdinand magellan"/></vbox> </vbox> <vbox id="row3" container="true" empty="false" class="indent"> <label value="female"/> <vbox id="row7" class="indent"><label value="cle...
...And 3 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, 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, highlightnonmat...
...ches, 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="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.
...And 3 more matches
Box Model Details - Archive of obsolete content
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.
...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.
...layout examples using spacers example 3 : source view <hbox> <button label="one"/> <spacer style="width: 5px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels.
...And 3 more matches
More Menu Features - Archive of obsolete content
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> </me...
... <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"/> </menupopup> </menu> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem label="cut" accesskey="t"/> <menuitem label="copy" accesskey="c"/> <menuitem label="paste" accesskey="p" disabled="true"/> </menupopup> <...
...you will see in the image that this letter has been underlined in the menu label.
...And 3 more matches
Popup Menus - Archive of obsolete content
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 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.
...the popup will also appear even if you click on the children of the box, so it will work if you click on the label element also.
...And 3 more matches
Tree Box Objects - Archive of obsolete content
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.
... example 1 : source view <script> function doscroll(){ 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 ali...
...gn="center"> <label value="scroll to row:"/> <textbox id="tbox"/> <button label="scroll" oncommand="doscroll();"/> </hbox> note that we use the rows attribute on the tree to specify that only four rows are displayed at a time.
...And 3 more matches
XUL Accesskey FAQ and Policies - Archive of obsolete content
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: <button label="apply instantly" accesskey="&applyinstantly.accesskey" /> (always use accesskey instead of akey).
...And 3 more matches
caption - Archive of obsolete content
it may contain either a text label, using the label attribute, or child elements for a more complex caption.
... 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.
...And 3 more matches
listcell - Archive of obsolete content
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.
... label type: string the label that will appear on the element.
...note that both an image and a label are added when this style is set.
...And 3 more matches
listitem - Archive of obsolete content
the text of the listitem is specified either using listcell elements, or by placing a label attribute directly on the listitem element.
... 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 that appears in the label attribute for the element.
...And 3 more matches
panel - Archive of obsolete content
ArchiveMozillaXULpanel
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="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.
... label type: string for panels with titlebars, the label on the titlebar.
...And 3 more matches
prefpane - Archive of obsolete content
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="extension...
... </preferences> <checkbox label="number one?" preference="pref_one"/> ...
... label type: string the label that will appear on the element.
...And 3 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...
...you can set its label with the buttonlabelextra1 attribute and its command with the ondialogextra1 attribute.
...you can set its label with the buttonlabelextra2 attribute and its command with the ondialogextra2 attribute.
...And 3 more matches
tooltip - Archive of obsolete content
attributes crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, page, position properties accessibletype, label, popupboxobject, position, state methods hidepopup, moveto, openpopup, openpopupatscreen, showpopup, sizeto examples <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <label value="click here to see more information"/> <label value="really!" style="color: red;"/> <...
.../tooltip> <vbox> <button label="simple" tooltiptext="a simple popup"/> <button label="more" tooltip="moretip"/> </vbox> 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.
... label type: string the label that will appear on the element.
...And 3 more matches
Introduction to CSS layout - Learn web development
this means you could achieve a task such as moving an icon down a bit so it lines up with a text label.
...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 3 more matches
What is a Domain Name? - Learn web development
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.
...And 3 more matches
Other form controls - Learn web development
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.
... <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 ...
... <label for="myfruit">what's your favorite fruit?</label> <input type="text" name="myfruit" id="myfruit" list="mysuggestion"> <datalist id="mysuggestion"> <option>apple</option> <option>banana</option> <option>blackberry</option> <option>blueberry</option> <option>lemon</option> <option>lychee</option> <option>peach</option> <option>pear</option> </datalist> datalist support and fallb...
...And 3 more matches
Advanced text formatting - Learn web development
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.
...a light brown color.</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'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea...
... 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.
...And 3 more matches
Getting started with HTML - Learn web development
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,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() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.v...
... playable code2 <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%"> &lt;p&gt;a link to my favorite website.&lt;/p&gt; </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-se...
...And 3 more matches
Useful string methods - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </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="height: 290px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let greetings = ['happy birthday!', 'merry christmas my love', 'a happy christmas to all the family', 'you\'re all...
...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...
... playable code 2 <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </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="height: 250px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let cities = ['london', 'manchester', 'birmingham', 'liverpool']; for (let i = 0; i < cities.length; i++) { let input = cities[i]; // write your code just below...
...And 3 more matches
Localization content best practices
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.).
... 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.
... another example, some locales use nouns for titles, and verbs for actions (for example button labels).
...And 3 more matches
Localizing with Koala
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".
... once you translated the searchendcap.label entity, add the other one from this file, i.e.
... cmd_enginemanager.label.
...And 3 more matches
Parser API
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.
...And 3 more matches
Dominators view - Firefox Developer Tools
in the main part of the ui, the first row is labeled "gc roots".
... call stack in the toolbar at the top of the tool is a dropdown called "label by": by default, this is set to "type".
... to enable this, you must check the box labeled "record call stacks" before you run the code that allocates the objects.
...And 3 more matches
ARIA: Complementary role - Accessibility
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.
... this label will allow an assistive technology user to be able to quickly understand the purpose of each landmark.
... <aside aria-label="note about usage"> <!-- content --> </aside> ...
...And 3 more matches
ARIA: contentinfo role - Accessibility
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.
... <article> <h2>everyday pad thai</h2> <!-- article content --> <footer aria-label="everyday pad thai metadata"> <p>posted on <time datetime="2018-09-23 12:17">may 16</time> by <a href="#">lisa</a>.</p> </footer> </article> ...
...And 3 more matches
ARIA: feed role - Accessibility
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.
... 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.
...And 3 more matches
Understandable - Accessibility
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.
... "labels" can refer to descriptive information in text content, or html form labels.
... see meaningful text labels for more information.
...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...
...nter 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; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #container { width: 100%; padding: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* container...
...And 3 more matches
<input type="image"> - HTML: Hypertext Markup Language
WebHTMLElementinputimage
sion formtarget a string indicating a browsing context from where to load the results of submitting the form height the height, in css pixels, at which to draw the image src the url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not to show images, or if the user is using a screen reading device).
... if provided, it must be a non-empty string appropriate as a label for the button.
...if possible, use text which matches the label you'd use if you were using a standard submit button.
...And 3 more matches
<input type="range"> - HTML: Hypertext Markup Language
WebHTMLElementinputrange
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.
..."></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.
...And 3 more matches
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
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.
... 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.
...And 3 more matches
ui/frame - Archive of obsolete content
eweather(e.data); } }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); function updateweather(location) { frame.postmessage(weather[location], frame.url); } to listen to these messages in the frame script, add a listener to the window's message event: window.addeventlistener("message", updateweather, false); function updateweather(message) { var label = window.document.getelementbyid("weather"); label.textcontent = message.data; } from add-on to a specific frame you can send a message from the main add-on code to the frame hosted by a particular browser window.
...if you send a json object, the sdk takes care of serializing and deserializing it for you: // frame.js var label = window.document.getelementbyid("linky"); label.addeventlistener("click", function() { window.parent.postmessage({ "type" : "ping", "reason" : "they clicked me" }, "*"); }, true); // main.js var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); frame.on("message", pong); function pong(e) { if (e.data.type == "ping") { console.log(e.da...
...wser window) of the frame: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./frame.html" }); var toolbar = toolbar({ name: "my-toolbar", title: "my toolbar", items: [frame] }); frame.postmessage("ping", frame.url); frame scripts can receive these messages using window.addeventlistener(): function ponged(message) { label.textcontent = message.data; } window.addeventlistener("message", ponged, false); to send a message only to the frame instance hosted by a specific browser window call postmessage() on the source property of the object passed into any of the frame's event listeners.
...And 2 more matches
Add a Context Menu Item - Archive of obsolete content
when it's clicked, the selection is sent to the main add-on code, which just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run the add-on, load a web page, select some text and righ...
...the constructor in this case takes four options: label, context, contentscript, and onmessage.
... label the label is just the string that's displayed.
...And 2 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...
...hello_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 ...
...the label attribute of each option is displayed to the user.
...And 2 more matches
Dialogs and Prompts - Archive of obsolete content
help — help button (doesn't work in thunderbird 1.0 bug 256915) extra1, extra2 — two buttons without any predefined labels or meaning.
... 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.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.
...And 2 more matches
Adding Events and Commands - Archive of obsolete content
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.
... 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 override pre-existing values, such as the label attribute value in the example.
...And 2 more matches
Drag and Drop Example - Archive of obsolete content
<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...
...ur("text/unicode"); return flavours; }, ondragover: function (event, flavour, session) {}, ondrop: function (event, dropdata, session) { if (dropdata.data != "") { var elem = document.createelement(dropdata.data); event.target.appendchild(elem); elem.setattribute("left", "" + event.pagex); elem.setattribute("top", "" + event.pagey); elem.setattribute("label", dropdata.data); } } } the getsupportedflavours function needs only to return a list of flavours that the stack can accept to be dropped on it.
...the label attribute is set to the data from the drag also so that the button has a default label.
...And 2 more matches
Positioning - Archive of obsolete content
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 to appear to the right of the label aligned along the top edge.
...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.
...And 2 more matches
Static Content - Archive of obsolete content
<menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" oncommand="applyfilter(event.target.value);"> <menupopup> <menuitem label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <menupopup> ...
... <menuitem uri="?country" label="?countrytitle" value="?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.
...that is, before the template is examined, the menulist would have one item in it, with the label 'all'.
...And 2 more matches
Adding Event Handlers - Archive of obsolete content
an example of responding to a button being pressed: example 1 : source view <button label="ok" oncommand="alert('button was pressed!');"/> since the command event will bubble, it is also possible to place the event listener on an enclosing element.
... example 2 : source view <vbox oncommand="alert(event.target.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> in this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled.
... <menuitem label="close" accesskey="c" oncommand="window.close();"/> ...
...And 2 more matches
Adding HTML Elements - Archive of obsolete content
in xul, you can add labels with the description or label element.
...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.
...And 2 more matches
Adding more elements - Archive of obsolete content
<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 bo...
...you will also notice that the label was removed.
...<spacer style="height: 10px"/> <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> <spacer style...
...And 2 more matches
Groupboxes - Archive of obsolete content
however, there are several differences between groupboxes and regular boxes: the groupbox can be labeled using the caption element.
...a simple groupbox example the example below shows a simple groupbox: example 1 : source view <groupbox> <caption label="answer"/> <description value="banana"/> <description value="tangerine"/> <description value="phone booth"/> <description value="kiwi"/> </groupbox> this will cause four pieces of text to be displayed surrounded by a box with the label answer.
...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.
...And 2 more matches
More Event Handlers - Archive of obsolete content
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.
...example 2 : source view <hbox id="outerbox"> <button id="okbutton" label="ok"/> </hbox> <script> function buttonpressed(event){ alert('button was pressed!'); } function boxpressed(event){ alert('box was pressed!'); event.stoppropagation(); } var button = document.getelementbyid("okbutton"); button.addeventlistener('command',buttonpressed,true); var outerbox = document.getelementbyid("outerbox"); outerbox.addeventlistener('command',boxpressed,true); </script>...
...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.
...And 2 more matches
Simple Menu Bars - Archive of obsolete content
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> ...
... label the text to appear on the menu, such as file or edit.
...mozilla will look at the label attribute and add an underline character to the character specified here.
...And 2 more matches
Tree View Details - Archive of obsolete content
<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.
... = false; var thislevel = this.getlevel(idx); var deletecount = 0; for (var t = idx + 1; t < this.visibledata.length; t++) { if (this.getlevel(t) > thislevel) deletecount++; else break; } if (deletecount) { this.visibledata.splice(idx + 1, deletecount); this.treebox.rowcountchanged(idx + 1, -deletecount); } } else { item[2] = true; var label = this.visibledata[idx][0]; var toinsert = this.childdata[label]; for (var i = 0; i < toinsert.length; i++) { this.visibledata.splice(idx + i + 1, 0, [toinsert[i], false]); } this.treebox.rowcountchanged(idx + 1, toinsert.length); } this.treebox.invalidaterow(idx); } first we will need to check if the row is a container.
... item[2] = true; var label = this.visibledata[idx][0]; var toinsert = this.childdata[label]; for (var i = 0; i < toinsert.length; i++) { this.visibledata.splice(idx + i + 1, 0, [toinsert[i], false]); } this.treebox.rowcountchanged(idx + 1, toinsert.length); the first line makes the row open in the array so that we will know the next time the toggleopenstate function is called that the row will need to be closed instead.
...And 2 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...
...list'); gems = [ {gem: "ruby", price: "$3,500 - $4,600"}, {gem: "emerald", price: "$700 - 4,250"}, {gem: "blue sapphire", price: "$3,400 - $4,500"}, {gem: "diamond", price: "$5,600 - $16,000"} ]; for (var i = 0; i < gems.length; i++) { var row = document.createelement('listitem'); var cell = document.createelement('listcell'); cell.setattribute('label', gems[i].gem); row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute('label', gems[i].price ); row.appendchild(cell); thelist.appendchild(row); } attributes disabled type: boolean indicates whether the element is disabled or not.
... 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.
...And 2 more matches
menupopup - Archive of obsolete content
<menulist> <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> the following example shows how a menupopup can be used as a context menu for an element.
... when the label is right-clicked, the menu will be displayed.
... <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="right click for popup" context="clipmenu"/> attributes ignorekeys type: boolean if true, keyboard navigation between items in the popup is disabled.
...And 2 more matches
tab - Archive of obsolete content
ArchiveMozillaXULtab
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 characters that appears in the label attribute for the element.
... 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.
...And 2 more matches
Windows and menus in XULRunner - Archive of obsolete content
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.
... 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-...
...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;" oncommand="dofilesave();"/> </toolbar> </toolbox> ...
...And 2 more matches
Example - Learn web development
a payment 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="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> <input type="password" id="pwd" name="password"> </p> </section> <section> <h2>payment information</h2> <p> <label for="card"> <span>card type:</span> </lab...
...el> <select id="card" name="usercard"> <option value="visa">visa</option> <option value="mc">mastercard</option> <option value="amex">american express</option> </select> </p> <p> <label for="number"> <span>card number:</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="tel" id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h1 { marg...
...And 2 more matches
Styling web forms - Learn web development
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.
...emoved for brevity): fieldset { position: relative; } legend { position: absolute; bottom: 0; right: 0; } the <fieldset> needs to be positioned too, so that the <legend> is positioned relative to it (otherwise the <legend> would be positioned relative to the <body>.) the <legend> element is very important for accessibility — it will be spoken by assistive technologies as part of the label of each form element inside the fieldset — but using a technique like the one above is fine.
... <form> <h1>to: mozilla</h1> <div id="from"> <label for="name">from:</label> <input type="text" id="name" name="user_name"> </div> <div id="reply"> <label for="mail">reply:</label> <input type="email" id="mail" name="user_email"> </div> <div id="message"> <label for="msg">your message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your messag...
...And 2 more matches
Focus management with Vue refs - Learn web development
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.
... 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.
...note that you cannot use an arrow function here since we need access to this to access our labelinput ref.
...And 2 more matches
Application Translation with Mercurial
in general, the labels in the applications should have the same style like the operating system, e.g.
... 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.
... now we copy the two missing lines from the english file and insert them in the localized file: <!-- localization note (privatebrowsingpage.howtostart4): please leave &newprivatewindow.label; intact in the translation --> <!entity privatebrowsingpage.howtostart4 "to start private browsing, you can also select &newprivatewindow.label; from the menu."> the first line is a comment providing information on the localization of the text in the following line.
...And 2 more matches
Gecko Roles
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_statictext represents read-only text, such as labels for other controls or instructions in a dialog box.
...And 2 more matches
XUL Accessibility
aggregating the text from element subtree if the child node is hidden then it's ignored excepting the case when the element used as label is hidden itself if the child node is text node then its rendered value is appended if the child node is element then if it implements nsidomxullabeledcontrolelement then the value of label property is appended otherwise if it's a label element then then value attribute is appended otherwise append tooltiptext attribute append the accessible value searching specific element in neighbour of the element search inside the element...
...name the following rules to generate accessible name are applied: check aria-labelledby attribute, name is generated from elements pointed by aria-labelledby attribute <description id="descr1">label1</description> <description id="descr2">label2</description> <textbox aria-labelledby="descr1 descr2" /> if the element implements nsidomxullabeledcontrolelement or nsidomxulselectcontrolitemelement interface then it is used label property if the element doesn't implement nsidomx...
...ulselectcontrolelement then label attribute is used if neighbour of the element has label element pointing to this element by the control attribute, if the label element is found then use value attribute or its content.
...And 2 more matches
Building the WebLock UI
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.
... <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.
...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...
...And 2 more matches
nsIAccessibleRelation
relation_label_for 0x03 this object is label for a target object.
... relation_labelled_by 0x04 this object is labelled by a target object.
... if the accessible has an nsiaccessible.name() , you can get the nsiaccessible that it was labelled by in order to get more formatting information.
...And 2 more matches
AudioTrack - Web APIs
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.
...And 2 more matches
console.count() - Web APIs
WebAPIConsolecount
syntax console.count([label]); parameters label optional a string.
... if supplied, count() outputs the number of times it has been called with that label.
... if omitted, count() behaves as though it was called with the "default" label.
...And 2 more matches
Using files from web applications - Web APIs
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.
... consider this html: <input type="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().
...And 2 more matches
Example and tutorial: Simple synth keyboard - Web APIs
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".
... <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".
... 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.
...And 2 more matches
ARIA: grid role - Accessibility
<table role="grid" aria-labelledby="id-select-your-seat"> <caption id="id-select-your-seat">select your seat</caption> <tbody role="presentation"> <tr role="presentation"> <td></td> <th>row a</th> <th>row b</th> </tr> <tr> <th scope="row">aisle 1</th> <td tabindex="0"> <button id="1a" tabindex="-1">1a</button> </td> <td tabindex="-1"> <button id="1b" tabindex="-1">1b</button> </td> <!-- more columns --> </tr> <tr> <th scope="row">aisle 2</th> <td tabindex="-1"> <button id="2a" tabindex="-1">2a</button> </td> <td tabind...
... examples calendar example html <table role="grid" aria-labelledby="calendarheader" aria-readonly=true> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> <tr role="row"> <td></td> <th role="columnheader" aria-label="sunday">s</th> <th role="columnheader" aria-label="monday">m</th> <th role="columnheader" aria-label="tuesday">t</th> <th role="columnheader" aria-label="wednesday">w</th> <...
...th role="columnheader" aria-label="thursday">t</th> <th role="columnheader" aria-label="friday">f</th> <th role="columnheader" aria-label="saturday">s</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <th scope="row" role="rowheader">week 35</th> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td role="gridcell" tabindex="-1">1</td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 36</th> <td role="gridcell" tabindex="-1"> 2 </td> <td role="gridcell" tabindex="-1"> 3 </td> <td role="gridcell" tabindex="-1"> 4 </td> <td role="gridcell" tabindex="-1"> 5 </td> <td role="gridcell" ...
...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...
...nter 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; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /*****************************************************************...
...***************************************************/ /******************************************************************************/ #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
min() - CSS: Cascading Style Sheets
WebCSSmin
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 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.
...And 2 more matches
Adding captions and subtitles to HTML5 video - Developer guides
we actually have our subtitles in three different languages — english, german, and spanish — 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 t...
...ype of content the files contain label is given a value indicating which language that subtitle set is for — for example english or deutsch — these labels will appear in the user interface to allow the user to easily select which subtitle language they want to see.
...tfragment(); var subtitlesmenu = df.appendchild(document.createelement('ul')); subtitlesmenu.classname = 'subtitles-menu'; subtitlesmenu.appendchild(createmenuitem('subtitles-off', '', 'off')); for (var i = 0; i < video.texttracks.length; i++) { subtitlesmenu.appendchild(createmenuitem('subtitles-' + video.texttracks[i].language, video.texttracks[i].language, video.texttracks[i].label)); } videocontainer.appendchild(subtitlesmenu); } this code creates a documentfragment, which is used to hold an unordered list containing our subtitles menu.
...And 2 more matches
Content categories - Developer guides
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.
... 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).
...elements that belong to this category include: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>.
...And 2 more matches
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
essibility tutorials mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 mdn understanding wcag, guideline 2.4 explanations understanding success 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.
... example <header> <nav aria-labelledby="primary-navigation"> <h2 id="primary-navigation">primary navigation</h2> <!-- navigation items --> </nav> </header> <!-- page content --> <footer> <nav aria-labelledby="footer-navigation"> <h2 id="footer-navigation">footer navigation</h2> <!-- navigation items --> </nav> </footer> in this example, screen reading technology would announce that there are two <nav> sections, one called "primary navigation" and one called "footer navigation".
...And 2 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
a summary or label can be provided using the <summary> element.
... a disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle.
... if the first child of the <details> element is a <summary>, the contents of the <summary> element are used as the label for the disclosure widget.
...And 2 more matches
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
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.
... 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 ru...
... first of all, let's look at the html: <form method="post" enctype="multipart/form-data"> <div> <label for="image_uploads">choose images to upload (png, jpg)</label> <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> </div> <div class="preview"> <p>no files currently selected for upload</p> </div> <div> <button>submit</button> </div> </form> html { font-family: sans-serif; } form { width: 580px; background: #ccc; margin:...
...And 2 more matches
<input type="submit"> - HTML: Hypertext Markup Language
WebHTMLElementinputsubmit
<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.
... <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.
... this label is likely to be something along the lines of "submit" or "submit query." here's an example of a submit button with a default label in your browser: <input type="submit"> additional attributes in addition to the attributes shared by all <input> elements, submit button inputs support the following attributes: attribute description formaction the url to which to submit the form's data; overrides the form's action attribute, if any formenctype a string specifying the encoding type to use for the form data formmethod the http method (get or post) to use when submitting the form.
...And 2 more matches
<menuitem> - HTML: Hypertext Markup Language
WebHTMLElementmenuitem
a command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an indirect command whose behavior is defined by a separate element.
...may not be used within a menu item that also includes the attributes checked, disabled, icon, label, radiogroup or type.
... label the name of the command as shown to the user.
...And 2 more matches
XUL Migration Guide - Archive of obsolete content
difies the browser chrome using window/utils: function removeforwardbutton() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var forward = window.document.getelementbyid('forward-button'); var parent = window.document.getelementbyid('urlbar-container'); parent.removechild(forward); } require("sdk/ui/button/action").actionbutton({ id: "remove-forward-button", label: "remove forward button", icon: "./icon-16.png", onclick: removeforwardbutton }); there are more useful examples of this technique in the jetpack wiki's collection of third party modules.
...window/utils").getmostrecentbrowserwindow(); var tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(255,255,100)','important'); } } require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", onclick: highlightactivetab }); security implications the sdk implements a security model in which an add-on only gets to access the apis it explicitly imports via require().
... 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.
... 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.
Modifying the Page Hosted by a Tab - Archive of obsolete 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.
... 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.
... // index.js var self = require("sdk/self"); var tabs = require("sdk/tabs"); require("sdk/ui/button/action").actionbutton({ id: "load-several", label: "load several scripts", icon: "./icon-16.png", onclick: function () { tabs.activetab.attach({ contentscriptfile: [self.data.url('first.js'), self.data.url('second.js')] }); } }); communicating with the content scripts your add-on script and content scripts can't directly access each other's variables or call each other's functions, but they can se...
...pts // listen for a "drawborder" self.port.on("drawborder", function(color) { document.body.style.border = "5px solid " + color; }); in the add-on script, we'll send the content script a "drawborder" message using the object returned from attach(): var self = require("sdk/self"); var tabs = require("sdk/tabs"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { var worker = tabs.activetab.attach({ contentscriptfile: self.data.url("my-script.js") }); worker.port.emit("drawborder", "red"); } }); the drawborder message isn't a built-in message, it's one that this add-on defines in the port.emit() call.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
<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.
... 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.
... <window id="main-window"> <toolbox id="navigator-toolbox"> <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarname.label;" accesskey="&xulschoolhello.toolbar.accesskey;" customizable="true" mode="icons" context="toolbar-context-menu" defaultset="xulschoolhello-hello-world-button" insertbefore="personaltoolbar" /> </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser w...
XUL user interfaces - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="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" ti...
...meout="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="day" value="saturday" disabled="true"/> </hbox> </row> </rows> </grid> <hbox class="buttons"> <button id="clear" label="clear" accesskey="c" oncommand="cleardate();"/> <button id="today" label="today...
...r: -moz-dialog; font: -moz-dialog; padding: 2em; } .head-1 { font-weight: bold; font-size: 200%; padding-left: 5px; } /* the group box */ .demo-group { padding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { margin-bottom: .5em; } .demo-group .buttons { -moz-box-pack: end; } /* the day-of-week labels */ .day { margin-left: 1em; } .day[disabled] { color: #777; } .day:first-child { margin-left: 4px; } /* the left column labels */ .text-prompt { padding-top: .25em; } /* the date input box */ #date-text { max-width: 8em; } /* the status bar */ statusbar { width: 100%; border: 1px inset -moz-dialog; margin: 4px; padding: 0px 4px; } #status { padding: 4px; ...
...) currentday.setattribute("disabled", "true") if (adate == null) currentday = null else { var d = adate.getday() currentday = daybox.firstchild while (d-- > 0) currentday = currentday.nextsibling currentday.removeattribute("disabled") } datebox.focus(); } function showstatus(adate) { if (adate == null) { status.removeattribute("warning") status.setattribute("label", "") } else if (adate === false || isnan(adate.gettime())) { status.setattribute("warning", "true") status.setattribute("label", "date is not valid") } else { status.removeattribute("warning") status.setattribute("label", adate.tolocaledatestring()) } } to see the result exactly as intended, use the default theme in your browser.
treecol.src - Archive of obsolete content
« xul reference home src type: uri set this attribute to have the treecol element use an image for the header instead of a label.
... you cannot have both an image and a label displayed in the header.
...if this attribute is left out, no image appears and the label is used instead.
...you should still specify a label for use in the column picker if ignoreincolumnpicker is not true and hidecolumnpicker is not true on the tree.
Extensions - Archive of obsolete content
for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menuitem label="web"/> <menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu.
...for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus.
... <popup id="contentareacontextmenu"> <menuitem id="thumbnail-show" label="view thumbnail" oncommand="thumbnails.view();"/> </popup> note that the popup element is used rather than the menupopup element as this is the element that firefox uses.
...for example, the following may be used to insert a command just after the 'select all' command: <popup id="contentareacontextmenu"> <menuitem label="select links" oncommand="thumbnails.selectalllinks();" insertafter="context-selectall"/> </popup> see firefox context menu for a list of the ids of the items found on the firefox context menu.
Special per-platform menu considerations - Archive of obsolete content
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.
... 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, the label and shortcut keys are overridden by platform conventions.
Multiple Rules - Archive of obsolete content
planet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="canal"/> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </rule> <rule> <action> <image uri="?photo" src="?photo"/> </action> </rule> </template> </hbox> this template contains a query with two rules.
...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.
...smatch if a value contains a substringto highlight results that contain a search term here is an example using the 'contains' operator: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?letters" expr="string-length(@name) - 1"/> </query> <rule> <where subject="?name" rel="contains" value=" "/> <action> <label uri="?" value="?name has two names for a total length of ?letters"/> </action> </rule> </template> </vbox> this example contains only one rule with a condition which checks for names that contain a space character, which has the effect of selecting only those people with multiple names.
... <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.
SQLite Templates - Archive of obsolete content
<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 labels have the special value '?name'.
... <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.
...<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.
Simple Query Syntax - Archive of obsolete content
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.
...for example, the label's value attribute has a value of rdf:http://purl.org/dc/elements/1.1/title'.
...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.
...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'.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
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).
... 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.
... let button = doc.createelement("toolbarbutton"); button.setattribute("id", button_id); button.setattribute("label", "replace bookmark"); button.setattribute("class", "toolbarbutton-1 chromeclass-toolbar-additional"); button.setattribute("tooltiptext", "replace an existing bookmark"); button.style.liststyleimage = "url(" + icon + ")"; button.addeventlistener("command", main.action, false); toolbox.palette.appendchild(button); this code is thanks to dgutov and is seen in full context at his repository here at...
... 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.
Keyboard Shortcuts - Archive of obsolete content
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.
... 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.
...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"...
...> <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.
More Tree Features - Archive of obsolete content
example hierarchical tree the following is a simple example: example 1 : source view <tree rows="6"> <treecols> <treecol id="firstname" label="first name" primary="true" flex="3" /> <treecol id="lastname" label="last name" flex="7" /> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="guys" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="bob" /> <treecell label="carpenter" /> </tree...
...row> </treeitem> <treeitem> <treerow> <treecell label="jerry" /> <treecell label="hodge" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> this has created a hierarchical tree.
...you will need to save a number of attributes as indicated in the example below: example 2 : source view <tree enablecolumndrag="true" flex="1"> <treecols> <treecol id="runner" label="runner" flex="2" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="city" label="home city" flex="2" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="starttime" label="start time" flex="1" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="endtime" label="end time" flex="1" pers...
...ist="width ordinal hidden" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joshua granville" /> <treecell label="vancouver" /> <treecell label="7:06:00" /> <treecell label="9:10:26" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="robert valhalla" /> <treecell label="seattle" /> <treecell label="7:08:00" /> <treecell label="9:15:51" /> </treerow> </treeitem> </treechildren> </tree> three attributes of the columns must be persisted, the width attribute to save the column widths, the ordinal attribute which holds the position of the column, and the hidden attribute which holds whether the column is hidden or visible.
RDF Datasources - Archive of obsolete content
to use them, just put the url values above in the label attributes of the buttons or treecells.
...example 1 : source <tree flex="1" datasources="rdf:history" ref="nc:historyroot"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="url" label="url" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#url"/> <treecell label="rdf:http...
...the rdf file is fairly large and can be viewed separately: source rdf example 2 : source view <tree flex="1" width="200" height="200" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals"> <treecols> <treecol id="name" label="name" primary="true" flex="1"/> <treecol id="species" label="species" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#species"/> </treerow> </treeitem> ...
...example 3 : source view <window id="example-window" title="history list" xmlns:animals="http://www.some-fictitious-zoo.com/rdf#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="click here to see the mammals the zoo has" type="menu" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/mammals"> <template> <rule animals:specimens="0"></rule> <rule> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> </menupopup> </rule> </template> </button> </window> in this case only the ...
Using multiple DTDs - Archive of obsolete content
assuming you have an entity called somebutton.label defined in mainwindow.dtd, you can access the entity like this: <button id="somebutton" label="&somebutton.label"> multiple dtds if you want to use multiple dtds 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...
...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.
XUL Questions and Answers - Archive of obsolete content
the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet 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"/> <listitem type="checkbox" value="2" label="vghjkvk" checked="true"/> <listitem type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listbox> </window> list box handlers can only check for listitems not listcells.
... instead of <menulist id="abpopup"> <menupopup id="abpopup-menupopup" ref="moz-abdirectory://" datasources="rdf:addressdirectory" sortactive="true" sortdirection="ascending" sortresource="http://home.netscape.com/nc-rdf#dirtreenamesort"> <template> <rule nc:iswriteable="false"/> <rule nc:ismaillist="false"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> <rule nc:ismaillist="true"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> </template> </menupopup> </menulist> it should be written as follows...
...: <menulist id="abpopup22"> <menupopup id="abpopup-menupopup" ref="moz-abmdbdirectory://abook.mab" datasources="rdf:addressdirectory" sortactive="true" sortdirection="ascending" sortresource="http://home.netscape.com/nc-rdf#dirtreenamesort"> <template> <rule nc:iswriteable="false"/> <rule nc:ismaillist="true"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> </template> </menupopup> </menulist> drawwindow with transparent background possible?
richlistbox - Archive of obsolete content
, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <richlistbox> <richlistitem> <description>a xul description!</description> </richlistitem> <richlistitem> <button label="a xul button"/> </richlistitem> </richlistbox> the richlistbox element contains multiple richlistitem elements, which can contain any content.
... 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.
... appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items.
... insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position.
treecell - Archive of obsolete content
you can set the text for the cell using the label attribute.
... attributes editable, label, mode, properties, ref, src, value attributes editable type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol type="checkbox">.
... label type: string the label that will appear on the element.
...you can have both an image and a label.
Common Firefox theme issues and solutions - Archive of obsolete content
text only toolbar buttons not aligned properly when text only toolbar buttons are selected in customize toolbars, text labels in toolbar buttons may not align properly.
... style inspector's bread crumb buttons are hard to read the text labels of breadcrumbs on the style inspector (tools > web developer > inspect) are too similar to the background colors making them very hard to read.
... please choose text label colors that stand out against the background color better.
... the style rules for these labels can be found near the end of chrome://browser/skin/browser.css.
XForms Repeat Element - Archive of obsolete content
example <model> <instance> <my:lines> <my:line name="a"> <my:price>3.00</my:price> </my:line> <my:line name="b"> <my:price>32.25</my:price> </my:line> </my:lines> </instance> </model> <repeat id="lineset" nodeset="/my:lines/my:line"> <input ref="my:price"> <label>line item</label> </input> <input ref="@name"> <label>name</label> </input> </repeat> <trigger> <label>insert a new item after the current one</label> <action ev:event="domactivate"> <insert nodeset="/my:lines/my:line" at="index('lineset')" position="after"/> <setvalue ref="/my:lines/my:line[index('lineset')]/@name"/> <setvalue ref="/my:lines/my:line[index('linese...
...t')]/price">0.00</setvalue> </action> </trigger> <trigger> <label>remove current item</label> <delete ev:event="domactivate" nodeset="/my:lines/my:line" at="index('lineset')"/> </trigger> attribute based repeat when using xforms within host languages like xhtml, it is often necessary to create repeating structures within constructs such as html:table.
...here comes the output: <br/> <xf:output ref="@id"><xf:label>output: </xf:label></xf:output> <div xf:repeat-nodeset="nest"><xf:output ref="."><xf:label>nested output: </xf:label></xf:output></div> </div> repeat in anonymous content (usage in xbl) you can use repeat elements inside anonymous content to create powerful new widgets.
... <head> <xbl:bindings> <xbl:binding id="grid"> <xbl:content> <xf:repeat xbl:inherits="bind, model, nodeset" anonid="anonidgridrepeat"> <xf:trigger> <xf:label>r</xf:label> <xf:delete ev:event="domactivate" at="index('anonidgridrepeat')" xbl:inherits="model, bind, nodeset"/> </xf:trigger> </xf:repeat> </xbl:content> </xbl:binding> </xbl:bindings> <style> div.grid { -moz-binding: url('#grid'); } </style> <xf:model> <xf:instance> <data xmlns=""> <repeat> <item> <input>input1</input> </...
CSS and JavaScript accessibility best practices - Learn web development
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.
...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.
...we've used <label> elements to make sure the form labels are unambiguously linked to their inputs, so screen readers can read them out alongside: <label for="name">enter your name:</label> <input type="text" name="name" id="name"> we only do the validation when the form is submitted — this is so that we don't update the ui too often and potentially confuse screen reader (and possibly other) users: form.onsubm...
How to build custom form controls - Learn web development
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.
... <fieldset> <legend>pick a fruit</legend> <ul class="styledselect"> <li><input type="radio" name="fruit" value="cherry" id="fruitcherry" checked><label for="fruitcherry">cherry</label></li> <li><input type="radio" name="fruit" value="lemon" id="fruitlemon"><label for="fruitlemon">lemon</label></li> <li><input type="radio" name="fruit" value="banana" id="fruitbanana"><label for="fruitbanana"">banana</label></li> <li><input type="radio" name="fruit" value="strawberry" id="fruitstrawberry"><label for="fruitstrawberry">strawberry</label></li> <li><input type="radio" name="fruit" value="apple" id="fruitapple"><label for="fruitapple">apple</label></li> </ul> </fieldset> we'll do a little styling of the radio button list (not the legend/fieldset) to make i...
...t look somewhat like the earlier example, just to show that it can be done: .styledselect { display: inline-block; padding: 0; } .styledselect li { list-style-type: none; padding: 0; display: flex; } .styledselect [type=radio] { position: absolute; left: -100vw; top: -100vh; } .styledselect label { margin: 0; line-height: 2; padding: 0 0 0 4px; } .styledselect:not(:focus-within) input:not(:checked) + label { height: 0; outline: none; overflow: hidden; } .styledselect:not(:focus-within) input:checked + label { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:not(:focus-within) input:checked + label::after { content : "▼"; background: black; float: right; color: white; padding: 0 4px; margin: 0 ...
...-4px 0 4px; } .styledselect:focus-within { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:focus-within input:checked + label { background-color: #333; color: #fff; width: 100%; } with no javascript, and just a little bit of css, we are able to style the list of radio buttons to display only the checked item.
Arrays - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 150px;"> <ul> </ul> <p></p> </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="height: 410px;width: 95%"> const list = document.queryselector('.output ul'); const totalbox = document.queryselector('.output p'); let total = 0; list.innerhtml = ''; totalbox.textcontent = ''; // number 1 'underpants:6.99' 'socks:5...
...ea code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; 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-color: #f5f9fa; } active learning: top 5 searches a good use for array methods like push() and pop() is when you are maintaining a record of currently active items in a web app.
... playable code 2 <h2>live output</h2> <div class="output" style="min-height: 150px;"> <input type="text"><button>search</button> <ul> </ul> </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="height: 370px; width: 95%"> const list = document.queryselector('.output ul'); const searchinput = document.queryselector('.output input'); const searchbtn = document.queryselector('.output button'); list.innerhtml = ''; let myhistory = []; searchbtn.onclick = ...
...{ // 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...
What is JavaScript? - Learn web development
let's take a simple text label as an example.
...us: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
...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.
...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.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
put the following contents inside it: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let name = '' const addtodo = () => { dispatch('addtodo', name) name = '' } const oncancel = () => name = '' </script> <form on:submit|preventdefault={addtodo} on:keydown={e => e.key === 'escape' && oncancel()}> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg">what needs to be done?</label> </h2> <input bind:value={name} type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled={!name} class="btn btn__primary btn__lg">add</button> </form> here we are binding the <input> to the name variable with bind:value={name} and disabling the add button when it ...
...reference to the name input dom node const addtodo = () => { dispatch('addtodo', name) name = '' nameel.focus() // give focus to the name input } const oncancel = () => { name = '' nameel.focus() // give focus to the name input } </script> <form on:submit|preventdefault={addtodo} on:keydown={e => e.key === 'escape' && oncancel()}> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg">what needs to be done?</label> </h2> <input bind:value={name} bind:this={nameel} type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled={!name} class="btn btn__primary btn__lg">add</button> </form> try the app out — type a new todo name in to the <input> field, press tab to give focus to the...
... in our case, our <input> would end up like so — update the component's first label/input pair (inside the edit template) like so: <label for="todo-{todo.id}" class="todo-label">new name for '{todo.name}'</label> <input bind:value={name} bind:this={nameel} use:selectonfocus type="text" id="todo-{todo.id}" autocomplete="off" class="todo-text" /> let's try it out.
... now we need to find a way to give focus to the <h2> status label after a todo has been removed.
Using Vue computed properties - Learn web development
this can be useful for users, while also serving to label the list for assistive technology.
...we'll also add an id and an aria-labelledby attribute to assign the <h2> contents to be a label for the <ul> element.
... add the described <h2> and update the <ul> inside your app's template as follows: <h2 id="list-summary">{{listsummary}}</h2> <ul aria-labelledby="list-summary" class="stack-large"> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item> </li> </ul> you should now see the list summary in your app, and the total number of items update as you add more todo items!
...update your <to-do-item></to-do-item> call as follows: <to-do-item :label="item.label" :done="item.done" :id="item.id" @checkbox-changed="updatedonestatus(item.id)"> </to-do-item> now if you check a todoitem, you should see the summary update appropriately!
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...
... */ removevalueat: function(index, removefromdb) { this._results.splice(index, 1); if (this._comments) this._comments.splice(index, 1); }, getlabelat: function(index) { return this._results[index]; }, queryinterface: xpcomutils.generateqi([ ci.nsiautocompleteresult ]) }; /** * @constructor * * @implements {nsiautocompletesearch} */ function providerautocompletesearch() { } providerautocompletesearch.prototype = { classid: class_id, classdescription : class_name, contractid : contract_id, /** * searches for a given stri...
...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...
Creating localizable web applications
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.
...good: $tab_labels = array( "popular" => _('popular'), "recent" => _('recent'), "all" => _('all'), "my" => _('my'), "favorites" => _('favorites') ); list($category, $tab, $page) = explode('/', $path); if ($tab == 'popular') { // $tab is always english // ....
... echo $tab_labels($tab); // this will display the translation } indicate the language of the pages you link to indicate the language of the pages you link to if it is different from the user's current language.
...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").
PKCS #11 Module Specs
cryptotokendescription override the default label value for the internal crypto token returned in the ck_token_info structure with an internationalize string (utf8).
... dbtokendescription override the default label value for the internal db token returned in the ck_token_info structure with an internationalize string (utf8).
... fipstokendescription override the default label value for the internal fips token returned in the ck_token_info structure with an internationalize string (utf8).
... tokendescription the label value for this token returned in the ck_token_info structure with an internationalize string (utf8).
XForms Accessibility
name it is formed from value of child xforms label element if the element doesn't have labelledby attribute.
... label specifies the label for the xforms control (see the spec, the docs).
... every form control other than the output element must contain a label element.
... the value of label element is used as name of accessible object.
Accessibility Inspector - Firefox Developer Tools
the name depends on the element; for example, the name of most text elements is simply their textcontent, whereas form elements' names are the contents of their associated <label>.
...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.
...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.
...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.
Console.table() - Web APIs
WebAPIConsoletable
the first column in the table will be labeled (index).
...note that (in firefox) console.table is limited to displaying 1000 rows (first row is the labeled index).
..., "doe"], ["emily", "jones"]] console.table(people); // an array of objects 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]); note that if the array contains objects, then the columns are labeled with the property name.
...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.
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.)...
...</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> </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> </td> <td> <input type="text" id="pub-file-url" name="pub-file-url"/> </td> </tr> </tbody> </table> <div class="button-pane"> <input type="button" id="add-button" value="add publication" /> <input type="reset" id="register-form-reset"/> </div> </form> <form id="delete-form"> <table> <tbody> <tr> <td> <label for="pub-biblioid-to-delete"> bibliographic id:<br/> <span class="note">(isbn, issn, etc.)</span> </label> </td> <td> <input type="text" id="pub-biblioid-to-del...
...ete" name="pub-biblioid-to-delete" /> </td> </tr> <tr> <td> <label for="key-to-delete"> key:<br/> <span class="note">(for example 1, 2, 3, etc.)</span> </label> </td> <td> <input type="text" id="key-to-delete" name="key-to-delete" /> </td> </tr> </tbody> </table> <div class="button-pane"> <input type="button" id="delete-button" value="delete publication" /> <input type="button" id="clear-store-button" value="clear the whole store" class="destructive" /> </div> </form> <form id="search-form"> <div class="button-pane"> ...
MediaDeviceInfo - Web APIs
mediadeviceinfo.labelread only returns a domstring that is a label describing this device (for example "external usb webcam").
... for security reasons, the label field is always blank unless an active media stream exists or the user has granted persistent permission for media device access.
... the set of device labels could otherwise be used as part of a fingerprinting mechanism to identify a user.
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= or if one or more media streams are active, or if persistent...
Using the MediaStream Recording API - Web APIs
checkbox 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.
...first of all, we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it...
...oth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, we use getusermedia().
...we register an event handler for this using mediarecorder.onstop, and finalize our blob there from all the chunks we have received: mediarecorder.onstop = function(e) { console.log("recorder stopped"); const clipname = prompt('enter a name for your sound clip'); const clipcontainer = document.createelement('article'); const cliplabel = document.createelement('p'); const audio = document.createelement('audio'); const deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebu...
Movement, orientation, and motion: A WebXR example - Web APIs
function setupxrbutton() { if (navigator.xr.issessionsupported) { navigator.xr.issessionsupported(session_type) .then((supported) => { xrbutton.disabled = !supported; }); } else { navigator.xr.supportssession(session_type) .then(() => { xrbutton.disabled = false; }) .catch(() => { xrbutton.disabled = true; }); } } the label of the button gets adjusted in the code that handles actuallys ttarting and stopping the webxr session; we'll see that below.
... the webxr session is toggled on and off by the handler for click events on the button, whose label is appropriately set to either "enter webxr" or "exit webxr".
... viewerstartorientation); xrsession.requestreferencespace(refspacetype) .then((refspace) => { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, cubeorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); }); return xrsession; } after storing the newly-created xrsession object into xrsession, the label of the button is set to "exit webxr" to indicate its new function after starting the scene, and a handler is installed for the end event, so we get notified when the xrsession ends.
...in either case, the label of the button is updated to indicate that a click will start a session, and then, if there is a pending request for an animation frame, we cancel it by calling cancelanimationframe once that's done, the value of xrsession is changed to null to indicate that we're done with the session.
Advanced techniques: Creating and sequencing audio - Web APIs
we can allow the user to control these using range inputs on the interface: <label for="attack">attack</label> <input name="attack" id="attack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="release">release</label> <input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /> now we can create some variables over in javascript and have them change when the input values are updated: let attacktime = 0.2; const attackcontrol = d...
...one will change the tone and the other will change how the pulse modulates the first wave: <label for="hz">hz</label> <input name="hz" id="hz" type="range" min="660" max="1320" value="880" step="1" /> <label for="lfo">lfo</label> <input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" /> as before, we'll vary the parameters when the range input values are changed by the user.
... let bandpass = audioctx.createbiquadfilter(); bandpass.type = 'bandpass'; bandpass.frequency.value = 1000; // connect our graph noise.connect(bandpass).connect(audioctx.destination); noise user controls on the ui we'll expose the noise duration and the frequency we want to band, allowing the user to adjust them via range inputs and event handlers just like in previous sections: <label for="duration">duration</label> <input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> <label for="band">band</label> <input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" /> let noiseduration = 1; const durcontrol = document.queryselector('#duration'); durcontrol.addeventlistener('input', function() { noiseduration = number...
...we'll do that in the same sort of way as before: <label for="rate">rate</label> <input name="rate" id="rate" type="range" min="0.1" max="2" value="1" step="0.1" /> let playbackrate = 1; const ratecontrol = document.queryselector('#rate'); ratecontrol.addeventlistener('input', function() { playbackrate = number(this.value); }, false); the final playsample() function we'll then add a line to update the playbackrate property to our playsample() fu...
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> ...
... 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> to test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content: <?php /* register.php */ header("content-type: text/plain"); /* note: yo...
...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> ...
... 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> note: as we said, formdata objects are not stringifiable objects.
ARIA live regions - Accessibility
html <fieldset> <legend>planet information</legend> <label for="planetsselect">planet:</label> <select id="planetsselect" aria-controls="planetinfo"> <option value="">select a planet&hellip;</option> <option value="mercury">mercury</option> <option value="venus">venus</option> <option value="earth">earth</option> <option value="mars">mars</option> </select> <button id="renderplanetinfobutton">go</button> </fieldset> <div role="...
... 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.
... a working example of a simple year control for better understanding: <div id="date-input"> <label>year: <input type="text" id="year" value="1990" onblur="change(event)"/> </label> </div> <div id="date-output" aria-live="polite"> the set year is: <span id="year-output">1990</span> </div> function change(event) { var yearout = document.getelementbyid("year-output"); switch (event.target.id) { case "year": yearout.innerhtml = event.target.value; break; defaul...
Using the aria-describedby attribute - Accessibility
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.
... <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.
... <button aria-label="close" aria-describedby="descriptionclose" onclick="mydialog.close()">x</button> ...
... 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: switch role - Accessibility
<button type="button" role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> description the aria switch role is identical to the checkbox role, except instead of being "checked" or "unchecked", it is either "on" and "off." like the checkbox role, the aria-checked attribute is required.
...the switch has two child elements containing the "off" and "on" labels and is followed by a <label> identifying the switch.
... <button role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> javascript this javascript code defines and applies a function to handle click events on switch widgets.
...dle; text-align: center; font: 12px "open sans", "arial", serif; } button.switch span { padding: 0 4px; pointer-events: none; } [role="switch"][aria-checked="false"] :first-child, [role="switch"][aria-checked="true"] :last-child { background: #262; color: #eef; } [role="switch"][aria-checked="false"] :last-child, [role="switch"][aria-checked="true"] :first-child { color: #bbd; } label.switch { font: 16px "open sans", "arial", sans-serif; line-height: 20px; user-select: none; vertical-align: middle; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; } the most interesting part is probably the use of attribute selectors and the :first-child and :last-child pseudo-classes to do all the heavy lifting of changing the app...
ARIA: tab role - Accessibility
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">tab label</button> description an element with the tab role controls the visibility of an associated element with the tabpanel role.
...here we are enclosing our group of content in a div, with our tablist having an aria-label to label it for assistive technology.
... <div class="tabs"> <div role="tablist" aria-label="sample tabs"> <button role="tab" aria-selected="true" aria-controls="panel-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; } [role="tab"] { position: relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padding: 0 0.5em 0.5em 0.7em; border: 1px solid gre...
ARIA: table role - Accessibility
<div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="row"...
... the table caption can be defined via aria-labelledby or aria-label.
... aria-label attribute the aria-label provides an accessible name for the table.
... examples <div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <di...
ARIA: textbox role - Accessibility
<!-- simple text input field --> <div id="txtboxlabel">enter your five-digit zipcode</div> <div role="textbox" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxlabel"></div> <!-- multi-line text area --> <div id="txtboxmultilinelabel">enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic el...
... <label for="txtbox">enter your five-digit zipcode</label> <input type="text" placeholder="5-digit zipcode" id="txtbox"/> <!-- multi-line text area --> <label for="txtboxmultiline">enter the tags for the article</label> <textarea id="txtboxmultiline" required></textarea> where a text field is read-only, indicated this by setting aria-readonly="true" on the element.
...the hint should be a sample value or a brief description of the expected format.this information should not be used as a substitute for a label: a label is focusable, permanent, indicates what kind of information is expected, and increases the hit area for setting focus on the control, whereas placeholder text is only temporary hint about the expected value, which if implemented incorrectly can decrease accessibility.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce its label and role when focus first lands on a textbox.
An overview of accessible web applications and widgets - Accessibility
example 1: markup for a tabs widget built without aria labeling.
...--> <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.
...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.
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 ...
...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_ protected n/a "activate" n/a input type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if intermediate property of dom element returns true state_system_ 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 n/a n/a n/a n/a option role_syst...
...em_ 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_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a ...
Mobile accessibility checklist - Accessibility
use alt and title where appropriate (see steve faulkner's post about using the html title attribute for a good guide.) if the above attributes are not applicable, use appropriate aria states and properties such as aria-label, aria-labelledby, or aria-describedby.
... all user interface components with visible text (or image of text) as labels must have the same text available in the programmatic name of the component.
... wcag 2.1: label in name.
... all form controls must have labels (<label> elements) for the benefit of screen reader users.
::placeholder - CSS: Cascading Style Sheets
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.
... 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.
HTML attribute: multiple - HTML: Hypertext Markup Language
examples email input <label for="emails">who do you want to email?</label> <input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64"> <datalist id="drawfemails"> <option value="grumpy@woodworkers.com">grumpy</option> <option value="happy@woodworkers.com">happy</option> <option value="sleepy@woodworkers.com">sleepy</option> <option value="bashful@woodworkers.com">bashful</option> ...
... file input when multiple is set on the file input type, the user can select one or more files: <form method="post" enctype="multipart/form-data"> <p> <label for="uploads"> choose the images you want to upload: </label> <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple> </p> <p> <label for="text">pick a text file to upload: </label> <input type="file" id="text" name="text" accept=".txt"> </p> <p> <input type="submit" value="submit"> </p> </form> note the difference in ...
... <form method="get" action="#"> <p> <label for="dwarfs">select the woodsmen you like:</label> <select multiple name="drawfs" id="drawfs"> <option>grumpy@woodworkers.com</option> <option>happy@woodworkers.com</option> <option>sleepy@woodworkers.com</option> <option>bashful@woodworkers.com</option> <option>sneezy@woodworkers.com</option> <option>dopey@woodworkers.com</option> <option>doc@woodworkers.com</option...
...> </select> </p> <p> <label for="favoriteonly">select your favorite:</label> <select name="favoriteonly" id="favoriteonly"> <option>grumpy@woodworkers.com</option> <option>happy@woodworkers.com</option> <option>sleepy@woodworkers.com</option> <option>bashful@woodworkers.com</option> <option>sneezy@woodworkers.com</option> <option>dopey@woodworkers.com</option> <option>doc@woodworkers.com</option> </select> </p> <p> <input type="submit" value="submit"> </p> </form> note the difference in appearance between the two form controls.
HTML attribute reference - HTML: Hypertext Markup Language
enterkeyhint <textarea>, contenteditable the enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards.
... for <label>, <output> describes elements which belongs to this one.
... form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> indicates the form that is the owner of the element.
... label <optgroup>, <option>, <track> specifies a user-readable title of the element.
<input type="reset"> - HTML: Hypertext Markup Language
WebHTMLElementinputreset
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.
... <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.
... 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.
... <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!
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
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.
... <!-- the second value will be selected initially --> <select name="choice"> <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 va...
...lue="albatross">albatross</option> </optgroup> </select> </label> you'll see that: multiple options are selectable because we've included the multiple attribute.
... 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.
FinalizationRegistry.prototype.unregister() - JavaScript
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.
... * * @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.
... */ 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.
panel - Archive of obsolete content
attaching panels to buttons you can attach a panel to a toggle button by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onchange: handlechange }); var mypanel = sdkpanels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handlehide() { button.state('window',...
...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.
...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.
jpm - Archive of obsolete content
on the amo key management page, these values are labeled "jwt_issuer" and "jwt_secret".
... on the amo key management page, this value is labeled "jwt issuer".
... on the amo key management page, this value is labeled "jwt secret".
Boxes - Archive of obsolete content
make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jjj"/> <label value="kkk"/> <label value="lll"/> <label value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="r...
...rr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box.
...ng inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </window> ...
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
<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, 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.
Custom XUL Elements with XBL - Archive of obsolete content
<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 ...
...the value attribute of the xul:label element would be "pete".
...in order to work around this problem, the anonid attribute is used instead: <xul:label anonid="xulshoolhello-name-label" xbl:inherits="value=name" /> and then, in order to get a reference to the node from the js code in your binding, we use the getanonymouselementbyattribute dom method: let namelabel = document.getanonymouselementbyattribute( this, "anonid", "xulshoolhello-name-label"); implementation the implementation section defines most of the scripting side of ...
Creating a dynamic status bar extension - Archive of obsolete content
to the javascript code that will do the real work: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which references the javascript function that will be executed whenever the user clicks on the status bar panel.
...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...
...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.
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": "...
...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 numbersonly(this, event);", "@onpaste": "return false;" } } }] }, "p": { "input": { "@t...
...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
the preference dialog, whose xul file is options.xul, has a corresponding options.dtd file that looks like this: <!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.
...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.
Creating a Firefox sidebar extension - Archive of obsolete content
it creates a page holding one label.
...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="&emptysidebar.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <vbox flex="1"> <label id="atest" value="&emptysidebar.title;" /> </vbox> </page> new extensions can be registered in the menus or popups, firefox uses overlays for extending menus.
...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, ...
Drag and Drop JavaScript Wrapper - Archive of obsolete content
<button label="drag me" ondraggesture="nsdraganddrop.startdrag(event,buttonobserver);" /> the function startdrag will be called when a drag starts on the button.
...the example below shows how to set the data to be dragged from the element's label attribute.
...var textobserver = { ondragstart: function (event) { var txt = event.target.getattribute("label"); transferdata.data = new transferdata(); transferdata.data.adddataforflavour("text/unicode",txt); } } this might be useful when implementing drag and drop for cells in a tree.
Simple Storage - Archive of obsolete content
if there are no notes, we'll show a// disabled "(empty)" menuitem.function updatejetpackmenu() { jetpack.menu.set({ label: "notes", menu: new jetpack.menu(notes.length > 0 ?
... notes : [{ label: "(empty)", disabled: true }]) });}// modify the page's context menu by sneaking in before it's shown.
...:(jetpack.menu.context.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.text) menu.add({ label: "note", command: function () { notes.unshift(jetpack.selection.text); if (notes.length > 20) notes.pop(); updatejetpackmenu(); } });};// initialize the jetpack menu with the current notes.updatejetpackmenu(); see also settings jep 11 ...
Simple Storage - Archive of obsolete content
function updatejetpackmenu() { jetpack.menu.set({ label: "notes", menu: new jetpack.menu(notes.length > 0 ?
... notes : [{ label: "(empty)", disabled: true }]) }); } // modify the page's context menu by sneaking in before it's shown.
...:( jetpack.menu.context.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.text) menu.add({ label: "note", command: function () { notes.unshift(jetpack.selection.text); if (notes.length > 20) notes.pop(); updatejetpackmenu(); } }); }; // initialize the jetpack menu with the current notes.
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...
...eelement('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.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(sta...
...tr = "queued"; style = "color:teal"; break; case 6: statusstr = "blocked"; style = "color:white background-color:red"; break; case 7: statusstr = "scanning"; style = "color:silver"; break; default: statusstr = "unknown"; break; } cell.setattribute("label", statusstr); cell.setattribute("style", style); row.appendchild(cell); loglist.appendchild(row); } } finally { statement.reset(); dbconn = null; } } this code is fairly simple.
Nanojit - Archive of obsolete content
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.
... 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.
... 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.
toolbarbutton.title - Archive of obsolete content
the text that is displayed as a button's label when it's in the customize toolbar palette.
... it overrides the value of label, which is used if title is not set.
... this does not affect the button's label when it is in a toolbar, which remains determined by the label attribute.
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.
...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; ...
... 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
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.
...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.
...<panel id="info-panel" noautohide="true" titlebar="normal" label="image properties" close="true"> the hidepopup method may be used to manually close a popup.
listcell-iconic - Archive of obsolete content
note that both an image and a label are added when this style is set.
... the label will take up extra space even when no label text is set.
... if it is desired to center the image, use css to hide the label.
statusbarpanel-iconic-text - Archive of obsolete content
« xul reference home statusbarpanel-iconic-text use this class to have an image appear on the statusbarpanel as well as a text label.
...specify the text using the label attribute.
... the image will appear before the label.
Building Hierarchical Trees - Archive of obsolete content
here is an example for the streets datasource: <tree flex="1" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" 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> </treechildren> </rule> </template> </tree> the first rule is for the houses as indicated by the rule's condition and the second rule is for the streets.
... <tree datasources="people2.xml" ref="*" querytype="xml" rows="10" flags="dont-build-content"> <treecols> <treecol id="name" primary="true" label="name" flex="1"/> </treecols> <template> <query expr="*"/> <action> <treechildren> <treeitem uri="?"> <treerow> <treecell label="?name"/> </treerow> </treeitem> </treechildren> </action> </template> </tree> « previousnext » ...
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...
...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.
... <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.
RDF Query Syntax - Archive of obsolete content
the predicate attribute specifies the labels of the arrows to follow.
... in the triple used here, the predicate is 'http://www.xulplanet.com/rdf/relateditem', so we know that the builder will look for arrows with that label.
...the query will look for all arrows that start at the node 'http://www.xulplanet.com/rdf/a' with the predicate (or arrow label) 'http://www.xulplanet.com/rdf/relateditem'.
Using Multiple Queries to Generate More Results - Archive of obsolete content
<template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?item"/> </query> <rule> <binding subject="?item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <label uri="?item" value="?title" class="header"/> </action> </rule> </queryset> <queryset> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/people" object="?people"/> <member container="?people" child="?item"/> </query> <rule> <binding subject="?item" predicate="http://purl.org/dc/elements/1.1/title" objec...
...t="?title"/> <action> <label uri="?item" value="?title"/> </action> </rule> </queryset> </template> you can view the example.
... <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <queryset> <query expr="group[@name='male']/*"/> <action> <checkbox uri="?" label="?name"/> </action> </queryset> <queryset> <query expr="group[@name='female']/*"/> <action> <label uri="?" value="?name"/> </action> </queryset> </template> </vbox> « previousnext » ...
Things I've tried to do with XUL - Archive of obsolete content
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.
... 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 // ...
...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 // ...
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 --...
...> <toolbarbutton id="custom-button-1" label="custom" tooltiptext="my custom toolbar button" oncommand="custombutton[1]()" class="toolbarbutton-1 custombutton" /> </overlay> optionally customize the file by changing the label, accesskey and tooltiptext attributes.
...change the label, accesskey and tooltiptext attributes to whatever you want.
Commands - Archive of obsolete content
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.
... 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.
...unction(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox> </window> the controller (listcontroller) implements the four methods described above.
Creating Dialogs - Archive of obsolete content
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="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"/> <radio id="violet" selected="true" label="strawberries because of their colour"/> <radio id="yellow" label="bananas because they are pre-packaged"/> </groupbox> </dialog> the buttons elements can be accessed with the following javascript // the accept button var acceptbutt = document.documentelement.getbutton("accept") more examples more examples in dialogs and prompts (code snippets).
Custom Tree Views - Archive of obsolete content
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.
... getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; function setview(){ document.getelementbyid('my-tree').view = treeview; } </script> <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" label="date" flex="1"/> </treecols> <treechildren/> </tree> </window> in the image, you can see two columns, each with data taken from the getcelltext() function.
...you can use this to get the cell labels and other information.
XPCOM Examples - Archive of obsolete content
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.
... the example below shows how we might do this: <toolbox> <menubar id="windowlist-menubar"> <menu label="window" oncommand="switchfocus(event.target);"> <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> <script> function switchfocus(elem) { var mediator = components.class...
...menus have an appenditem() function which can be used to add an item to the menu, given a label and a value.
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...
notification - Archive of obsolete content
attributes image, label, priority, persistence, type, value properties accessibletype, control, image, label, priority, persistence, type, value methods close examples <notification label="this is a warning"/> attributes image type: uri the uri of the image to appear on the element.
... label type: string the label that will appear on the element.
... label type: string gets and sets the value of the label attribute.
notificationbox - Archive of obsolete content
es(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
... label - label to appear on the notification.
... label - the label to appear on the button popup - the id of a popup for the button.
radiogroup - Archive of obsolete content
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.
...odes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items.
... insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position.
scrollbox - Archive of obsolete content
examples the following shows the xul for a bunch of labels.
... <vbox> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the next bunch of labels is similar, but if the container doesn't give enough room for it, scroll bars will sprout out of nowhere and allow the user to scroll around the big content in the small view space.
... <vbox flex="1" style="overflow:auto"> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the flex="1" above may or may not be needed, or even desired.
Dialogs in XULRunner - Archive of obsolete content
here is an example xul dialog: <?xml version="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" descriptio...
...n="example dialog"/> <groupbox flex="1"> <caption label="select favorite fruit"/> <radiogroup> <radio id="1" label="oranges because they are fruity"/> <radio id="2" selected="true" label="strawberries because of color"/> <radio id="3" label="bananna because it pre packaged"/> </radiogroup> </groupbox> </dialog> xul window elements have a special method to open dialogs, called window.opendialog().
... buttonlabelaccept label for the accept button; similar attributes exist for the other button types.
Theme changes in Firefox 2 - Archive of obsolete content
#sitelabel style information for the site label.
... changes in mozapps extensions/about.css the following styles from firefox 1.5 are no longer used in firefox 2 and should be removed: #contributorsbox #creatorbox #extensioncontributors #extensioncontributors #extensioncreatorlabel the following styles were added: .indent .sectiontitle you may wish to make changes to other styles as well.
... extensions/update.css the following styles are no longer used in firefox 2 and should be removed from your theme: #foundlist #statusbar-updates .updatecategorybox .updatecategorycontent .updatecategoryicon .updatecategorylabel[selected="true"] .updateicon .updateicon[severity="0"] .updateicon[severity="1"] .updateicon[severity="2"] .updateindicator > label .updateindicator[updatecount="0"] .updateitemchecked .updateitemchecked .checkbox-label-box .updateitemfromlabel .updateitemicon .updateitemicon .updateitemname .updateitemnamerow .updateitemurl .warning radio[type="update-type"] radiogroup[type="update-types"] toolbarbutton[type="updates"] toolbarbutton[type="updates"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="0"] > .toolbarbutton-icon tool...
XForms Custom Controls - Archive of obsolete content
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.
...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...
...ce 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> ...
Mozilla XForms User Interface - Archive of obsolete content
label specifies the label for the xforms control (see the spec).
... every form control other than the output element must contain a label element.
... it is valid for a form control to have an empty label element.
Extra lives - Game development
new variables add the following new variables below the existing ones in your code: var lives = 3; var livestext; var lifelosttext; these respectively will store the number of lives, the text label that displays the number of lives that remain, and a text label that will be shown on screen when the player loses one of their lives.
... defining the new text labels defining the texts look like something we already did in the score lesson.
...to make it easier for us to maintain in the future we can create a separate variable that will hold our styling, let's call it textstyle and place it before the text definitions: textstyle = { font: '18px arial', fill: '#0095dd' }; we can now use this variable when stlying our text labels — update your code so that the multiple instances of the text styling are replaced with the variable: scoretext = game.add.text(5, 5, 'points: 0', textstyle); livestext = game.add.text(game.world.width-5, 5, 'lives: '+lives, textstyle); livestext.anchor.set(1,0); lifelosttext = game.add.text(game.world.width*0.5, game.world.height*0.5, 'life lost, click to continue', textstyle); lifelosttext.
Assessment: Accessibility troubleshooting - Learn web development
the forms the <input> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users.
... how can you add a label that is only accessible to screenreaders?
... the two <input> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this?
Accessible multimedia - Learn web development
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.
... let minutes = math.floor(player.currenttime / 60); let seconds = math.floor(player.currenttime - minutes * 60); let minutevalue; let secondvalue; if (minutes<10) { minutevalue = "0" + minutes; } else { minutevalue = minutes; } if (seconds<10) { secondvalue = "0" + seconds; } else { secondvalue = seconds; } mediatime = minutevalue + ":" + secondvalue; timelabel.textcontent = mediatime; }; each time the time updates (once per second), we fire this function.
... it works out the number of minutes and seconds from the given currenttime value (which is in seconds), adds a leading 0 if either the minute or second value is less than 10, and then creates the display readout and adds it to the time label.
The HTML5 input types - Learn web development
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.
...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.
... <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.
Sending form data - Learn web development
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 b...
... <form action="https://www.foo.com" method="post"> <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> when the form is submitted using the post method, you get no data appended to the url, and the http request looks...
... for example: <form method="post" action="https://www.foo.com" enctype="multipart/form-data"> <div> <label for="file">choose a file</label> <input type="file" id="file" name="myfile"> </div> <div> <button>send the file</button> </div> </form> note: servers can be configured with a size limit for files and http requests in order to prevent abuse.
Test your skills: Other controls - Learn web development
associate it semantically with the provided "comment" label.
... associate it semantically with the provided "comment" label.
...however, this time we want to do things differently: create a basic text input that is semantically associated with the provided label.
Example - Learn web development
a simple form html content <form action="/my-handling-form-page" method="post"> <div> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </div> <div> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </div> <div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your message</button> </div> </form> css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top: 1...
...em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5e...
...m; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra magin represent the same space as the space between the labels and their text fields */ margin-left: .5em; } result ...
Video and Audio APIs - Learn web development
you'll see a number of features; the html is dominated by the video player and its controls: <div class="player"> <video controls> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <!-- fallback content here --> </video> <div class="controls"> <button class="play" data-icon="p" aria-label="play pause toggle"></button> <button class="stop" data-icon="s" aria-label="stop"></button> <div class="timer"> <div></div> <span aria-label="timer">00:00</span> </div> <button class="rwd" data-icon="b" aria-label="rewind"></button> <button class="fwd" data-icon="f" aria-label="fast forward"></button> </div> </div> the whole player is wrapped in a <div> elem...
... each <button> has a class name, a data-icon attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an aria-label attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags.
... the contents of aria-label attributes are read out by screenreaders when their users focus on the elements that contain them.
A first splash into JavaScript - Learn web development
we'll tell you if your guess was too high or too low.</p> <div class="form"> <label for="guessfield">enter a guess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> </div> <div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </div> <script> // your javascript goes here let randomnumber = math.floor(math.random() * 10...
... <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).
... 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.
React interactivity: Editing, filtering, conditional rendering - Learn web development
copy this block of code into the todo() function, beneath your usestate() hook but above the return statement: const editingtemplate = ( <form classname="stack-small"> <div classname="form-group"> <label classname="todo-label" htmlfor={props.id}> new name for {props.name} </label> <input id={props.id} classname="todo-text" type="text" /> </div> <div classname="btn-group"> <button type="button" classname="btn todo-cancel"> cancel <span classname="visually-hidden">renaming {props.name}</span> </button> <button type="submit" classname="bt...
... save <span classname="visually-hidden">new name for {props.name}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <input id={props.id} type="checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger" onclick={() => props.deletetask(props.id)} ...
...currently, they repeat the "all" label, and they have no functionality!
Dynamic behavior in Svelte: working with variables and props - Learn web development
replace your existing <ul> block with the following: <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> <div class="btn-group"> <button type="button" cla...
... note: svelte uses the $: javascript label statement syntax to mark reactive statements.
... <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each filtertodos(filter, todos) as todo (todo.id)} ...
Accessibility API cross-reference
in tagged pdf n/a n/a expressed with aria-labelledby if visible on screen or aria-label otherwise <caption> (for tables), <figcaption> (for figures), and <label> with a for attribute (for input elements) a <toc> or <l> may contain a <caption> as its first item <caption> or <lbl> a cell in a table cell n/a table_cell cell <td> td not what you think - this is for the damn paperclip ...
... section (abstract role) <section> <sect> a structure that labels or summarizes the topic of its related section.
...see also div n/a n/a n/a <span> span kind of like a dial, but controls the value in a related field spinbutton n/a n/a spinbutton uneditable text statictext label label see aria-readonly the text nodes of html elements are uneditable by default, apart from <input type=text>, or those with a contenteditable attribute entire status bar.
Accessibility information for UI designers and developers
for example, add text labels or texture in addition to color differences.
... for example, in this chart, it helps to add labels besides the colored chart lines:people who cannot see the difference between the colors, can use the labels instead.
... forms in forms, provide labels for all controls.
IPDL Tutorial
the second is parent, which means that the messages declared under the parent label can only be sent from-child-to-parent.
... virtual void recvbar() = 0; virtual void recvbaz() = 0; public: void sendfoo() { /* boilerplate */ } void sendbaz() { /* boilerplate */ } }; // pdirectionchild.h class pdirectionchild { protected: virtual void recvfoo() = 0; virtual void recvbaz() = 0; public: void sendbar() { /* boilerplate */ } void sendbaz() { /* boilerplate */ } }; you can use the child, parent, and both labels multiple times in a protocol specification.
... they behave like public, protected, and private labels in c++.
CustomizableUI.jsm
customizableui.createwidget({ id: 'id_of_my_widget_within_customizableui_and_dom', defaultarea: customizableui.area_navbar, label: 'my widget', // type: 'button', //we don't need to type this, the default type is button tooltiptext: 'this is my widget created with cui.jsm', oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; ...
... listener, arguments:', arguments); if (awidgetid != 'noida') { return } console.log('my widget destoryed'); customizableui.removelistener(mywidgetlistener); } } customizableui.addlistener(mywidgetlistener); customizableui.createwidget({ id: 'noida', defaultarea: customizableui.area_navbar, label: 'my widget', tooltiptext: 'this is my widget created with cui.jsm' }); it is important we add the listener before creating the element, because otherwise, the icon will not be set as the buttons are added, then we register the listener.
...this is a complete example that can be copied and pasted into scratchpad: //start - use customizableui.jsm to create the widget cu.import('resource:///modules/customizableui.jsm'); customizableui.createwidget({ id: 'id_of_my_widget_within_customizableui_and_dom', defaultarea: customizableui.area_navbar, label: 'my widget', // type: 'button', //we don't need to type this, the default type is button tooltiptext: 'this is my widget created with cui.jsm', oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; ...
Interfacing with the Add-on Repository
lresults) { var num = math.floor(math.random() * addoncount); this.shownotification("would you like to try the " + addons[num].name + " addon?", "install", addons[num].install); }, this routine randomly selects one of the returned add-ons, then calls the previously mentioned shownotification() routine, passing in as parameters a prompt including the name of the returned add-on, a label for the button to show in the notification ("install"), and the addoninstall object that can be used with the add-on manager api to install the add-on.
...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...
...tall object for later use, then creates and displays the pop-up notification box with the text and button label passed into the method.
NSS Key Log Format
secrets follow the format <label> <space> <clientrandom> <space> <secret> where: <label> describes the following secret.
... <secret> depends on the label (see below).
... the following labels are defined, followed by a description of the secret: rsa: 48 bytes for the premaster secret, encoded as 96 hexadecimal characters (removed in nss 3.34) client_random: 48 bytes for the master secret, encoded as 96 hexadecimal characters (for ssl 3.0, tls 1.0, 1.1 and 1.2) client_early_traffic_secret: the hex-encoded early traffic secret for the client side (for tls 1.3) client_handshake_traffic_secret: the hex-encoded handshake traffic secret for the client side (for tls 1.3) server_handshake_traffic_secret: the hex-encoded handshake traffic secret for the server side (for tls 1.3) client_traffic_secret_0: the first hex-encoded application traffic secret for the client side (for tls 1.3) server_traffic_secret_0: the first hex-encoded application traffic secret f...
Bytecode Descriptions
if there's a default: label, it jumps to that point in the body; otherwise it jumps to the next statement.
... format: jof_jump tableswitch operands: (int32_t defaultoffset, int32_t low, int32_t high, uint24_t firstresumeindex) stack: i ⇒ optimized switch-statement dispatch, used when all case labels are small integer constants.
...(it's named after the thing in basic.) we need this because a try block can terminate in several different ways: control can flow off the end, return, throw an exception, break with or without a label, or continue.
Index
MozillaTechXPCOMIndex
used for tree items, list items, tab panel labels, radio buttons, etc.
... 533 nsidomxullabeledcontrolelement interfaces, interfaces:scriptable, xpcom interface reference no summary!
... 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...
...var macmenuitem = services.appshell.hiddendomwindow.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() }) services.appshell.hiddendomwindow.document.getelementbyid('menu_mac_dockmenu').
...two types of elements: menu (if you would like to have sub menu items, make sure to set a label on the "menu" element) menuitem (like in example above) elements can be hidden by adding the hidden attribute to the menu or menuitem and setting it to true .
Building a Thunderbird extension 5: XUL
ed myhelloworld.xul within the content folder you created earlier with the following content: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myfirstext/content/overlay.js"/><!-- a reference to your javascript file --> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="date"/> </statusbar> </overlay> the <statusbar> widget named status-bar specifies the merge point within the application window that we want to attach to.
...in thunderbird it will appear as a label at the right side of thunderbird's statusbar and display "date".
...in the next section you will learn how to use javascript to modify your label so that it shows the current date.
Using popup notifications
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.
...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 ...
...ications.jsm'); var notify = new popupnotifications(gbrowser, document.getelementbyid("notification-popup"), document.getelementbyid("notification-popup-box")); var notification = notify.show( // browser gbrowser.selectedbrowser, // popup id "pdes-popup", // message "hi, there!, i'm gonna show you something today!!", // anchor id null, // main action { label: "click here", accesskey: "d", callback: function() { // you can call your function here } }, // secondary action null, // options { // alternative way to set the popup icon popupiconurl: "chrome://popupnotifications/skin/mozlogo.png" } ); settimeout(function(){ notification.remove(); }, 900); // time in milliseconds to disappear the door-hanger popup.
Working with windows in chrome code
ogressmeter"); if("arguments" in window && window.arguments.length > 0) { maxprogress = window.arguments[0].maxprogress; setprogress(window.arguments[0].progress); setstatus(window.arguments[0].status); } } function setprogress(value) { gprogressmeter.value = 100 * value / maxprogress; } function setstatus(text) { gstatus.value = "status: " + text + "..."; } ]]></script> <label id="status" value="(no status)" /> <hbox> <progressmeter id="progressmeter" mode="determined" /> <button label="cancel" oncommand="close();" /> </hbox> </window> example 2: interacting with the opener sometimes an opened window needs to interact with its opener; for example, it might do so in order to give notice that the user has made changes in the window.
... 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.
... 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.
Browser Console - Firefox Developer Tools
the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled show content messages.
...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.
...on windows, the following code will add a new item to the browser's main menu: var parent = window.document.getelementbyid("appmenuprimarypane"); 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); 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?
Work with animations - Firefox Developer Tools
the timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).
... if the animation used css transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned.
... if the animation used css @keyframes, there is one bar for each animation, labeled with its name.
Responsive Design Mode - Firefox Developer Tools
device selection just above the viewport there is a label "no device selected"; click this to see a list of device names.
...at the end of the drop-down, there is an item labeled edit list.
.../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
each message is labeled "reflow" and shows the time taken to execute the reflow.
... to see only messages of particular categories, click the button labeled with that category (errors, css, and so on).
... filtering by text to see only messages that contain a specific string, type in the text box labeled "filter output".
about:debugging (before Firefox 68) - Firefox Developer Tools
next to each entry is a button labeled "debug".
... debugging workers for a service worker, if it is already running, you'll see two buttons next to it, labeled "debug" and "push".
... if it's not already running, you'll see one button, labeled "start": click this to start the service worker.
Background Tasks API - Web APIs
</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 prog...
...ress 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.
... 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...
CanvasRenderingContext2D.arcTo() - Web APIs
const canvas = 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 d...
... html <div> <label for="radius">radius: </label> <input name="radius" type="range" id="radius" min=0 max=100 value=50> <label for="radius" id="radius-output">50</label> </div> <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const controlout = document.getelementbyid('radius-output'); const control = document.getelementby...
...id('radius'); control.oninput = () => { controlout.textcontent = r = control.value; }; const mouse = { x: 0, y: 0 }; let r = 100; // radius const p0 = { x: 0, y: 50 }; const p1 = { x: 100, y: 100 }; const p2 = { x: 150, y: 50 }; const p3 = { x: 200, y: 100 }; const labelpoint = function (p, offset, i = 0){ const {x, y} = offset; ctx.beginpath(); ctx.arc(p.x, p.y, 2, 0, math.pi * 2); ctx.fill(); ctx.filltext(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y); } const drawpoints = function (points){ for (let i = 0; i < points.length; i++) { var p = points[i]; labelpoint(p, { x: 0, y: -20 } , i) } } // draw arc const drawarc = function ([p0, p1, p2], r) { ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, r); c...
Console.countReset() - Web APIs
syntax console.countreset([label]); parameters label optional a string.
... if supplied, countreset() resets the count for that label to 0.
... if we pass the user variable as the label argument with the string "bob" to the first invocation of count(), and the string "alice" to the second: let user = ""; function greet() { console.count(user); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.countreset("bob"); console.count("alice"); we will see output like this: "bob: 1" "alice: 1" "alice: 2" "bob: 0" "alice: 3" resetting the val...
Console.timeLog() - Web APIs
WebAPIConsoletimeLog
syntax console.timelog(label); parameters label the name of the timer to log to the console.
... return if no label parameter included: default: 1042ms if an existing label is included: timer name: 1242ms exceptions if there is no running timer, timelog() returns the warning: timer “default” doesn’t exist.
... if a label parameter is included, but there is no corresponding timer: timer “timer name” doesn’t exist.
Using the Payment Request API - Web APIs
meters: function buildsupportedpaymentmethoddata() { // example supported payment methods: return [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard'], supportedtypes: ['debit', 'credit'] } }]; } function buildshoppingcartdetails() { // hardcoded for demo purposes: return { id: 'order-123', displayitems: [ { label: 'example item', amount: {currency: 'usd', value: '1.00'} } ], total: { label: 'total', amount: {currency: 'usd', value: '1.00'} } }; } starting the payment process once the paymentrequest object has been created, you call the paymentrequest.show() method on it to initiate the payment request.
...it returns a promise that fulfills with a boolean indicating whether it is or not, for example: // dummy payment request to check whether payment can be made new paymentrequest(buildsupportedpaymentmethoddata(), {total: {label: 'stub', amount: {currency: 'usd', value: '0.01'}}}) .canmakepayment() .then(function(result) { if(result) { // real payment request var request = new paymentrequest(buildsupportedpaymentmethoddata(), checkoutobject); request.show().then(function(paymentresponse) { // here we would process th...
...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.
RTCPeerConnection.createDataChannel() - Web APIs
syntax datachannel = rtcpeerconnection.createdatachannel(label[, options]); parameters label a human-readable name for the channel.
... return value a new rtcdatachannel object with the specified label, configured using the options specified by options if that parameter is included; otherwise, the defaults listed above are established.
... typeerror this can happen in a couple of situations: the label and/or protocol string is too long; these cannot be longer than 65,535 bytes (bytes, rather than characters).
RsaOaepParams - Web APIs
label optional a buffersource — an array of bytes that does not itself need to be encrypted but which should be bound to the ciphertext.
... a digest of the label is part of the input to the encryption operation.
... unless your application calls for a label, you can just omit this argument and it will not affect the security of the encryption operation.
TextDecoder() - Web APIs
if the value for utflabel is unknown, or is one of the two values leading to a 'replacement' decoding algorithm ( "iso-2022-cn" or "iso-2022-cn-ext"), a domexception with the "typeerror" value is thrown.
... syntax decoder = new textdecoder(utflabel, options); parameters utflabeloptional is a domstring, defaulting to "utf-8", containing the label of the encoder.
... each label is associated with a specific encoding type: possible values of utflabel encoding "unicode-1-1-utf-8", "utf-8", "utf8" 'utf-8' "866", "cp866", "csibm866", "ibm866" 'ibm866' "csisolatin2", "iso-8859-2", "iso-ir-101", "iso8859-2", "iso88592", "iso_8859-2", "iso_8859-2:1987", "l2", "latin2" 'iso-8859-2' "csisolatin3", "iso-8859-3", "iso-ir-109", "iso8859-3", "iso88593", "iso_8859-3", "iso_8859-3:1988", "l3", "latin3" 'iso-8859-3' "csisolatin4", "iso-8859-4", "iso-ir-110", "iso8859-4", "iso88594", "iso_8859-4", "iso_8859-4:1988", "l4", "latin4" 'iso-8859-4' "csisolatincyrillic", "cyrillic", "iso-8859-5", "iso-ir-144", "iso88595", "iso_8859-5", "iso_8859-5:1988" 'iso-885...
VideoTrack - Web APIs
label read only a domstring providing a human-readable label for the track.
... for example, a track whose kind is "sign" might have a label of "a sign-language interpretation".
... this string is empty if no label is provided.
Using the alertdialog role - Accessibility
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).
... 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.
... <div role="alertdialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <div role="document" tabindex="0"> <h2 id="dialog1title">your login session is about to expire</h2> <p id="dialog1desc">to extend your session, click the ok button</p> <button>ok</button> </div> </div> working examples: tbd notes aria attributes used alertdialog aria-labelledby aria-describedby related aria techniques using the dialog role using the alert r...
ARIA: row role - Accessibility
<div role="table" aria-label="populations" aria-describedby="country_population_desc"> <div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">f...
... examples <div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <di...
... <table role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <caption id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</caption> <thead role="rowgroup"> <tr role="row"> <th role="columnheader" aria-sort="none">aria role</th> <th role="columnheader" aria-sort="none">semantic element</th> <...
ARIA: rowgroup role - Accessibility
<div role="table" aria-label="populations" aria-describedby="country_population_desc"> <div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">france</span> <span ro...
... examples <div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <di...
... <table role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <caption id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</caption> <thead role="rowgroup"> <tr role="row"> <th role="columnheader" aria-sort="none">aria role</th> <th role="columnheader" aria-sort="none">semantic element</th> <...
ARIA: checkbox role - Accessibility
<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.
... instead use the native html checkbox of <input type="checkbox">, which natively provides all the functionality required: <input type="checkbox" id="chk1-label"> <label for="chk1-label">remember my preferences</label> description the native html checkbox form control can only have two checked states ("checked" or "not checked"), with an indeterminate state settable via javascript.
... html <span role="checkbox" id="chkpref" aria-checked="false" onclick="changecheckbox()" onkeypress="changecheckbox()" tabindex="0" aria-labelledby="chk1-label"></span> <label id="chk1-label" onclick="changecheckbox()" onkeypress="changecheckbox()">remember my preferences</label> css [role="checkbox"] { padding:5px; } [aria-checked="true"]::before { content: "[x]"; } [aria-checked="false"]::before { content: "[ ]"; } javascript function changecheckbox(event) { let item = document.getelementbyid('chkpref'); swit...
Alerts - Accessibility
here is a simple form: <form method="post" action="post.php"> <fieldset> <legend>please enter your contact details</legend> <label for="name">your name (required):</label> <input name="name" id="name" aria-required="true"/> <br /> <label for="email">e-mail address (required):</label> <input name="email" id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label> <input name="website" id="website"/> </fieldset> <label for="message">please enter your messag...
...e (required):</label> <br /> <textarea name="message" id="message" rows="5" cols="80" aria-required="true"></textarea> <br /> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset form"/> </form> checking for validity and notifying the user form validations consists of several steps: checking if the e-mail address or entered name are valid.
...why did you put both “(required)” in the label text and the aria-required attribute on some of the inputs?
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
for example, acrobat uses accessible value for text labels where as most programs use accessible name.
...however, it uses role_statictext for labels.
... solution: use role_statictext for labels specific to dialog and ui controls, and always use role_text for document text even if the text is not editable (in that case use role_text with state_readonly).
:checked - CSS: Cascading Style Sheets
WebCSS:checked
syntax :checked examples basic example html <div> <input type="radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no"> <label for="no">no</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt3">pears</option> </select> css div, select...
... { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
...d>[more text]</td><td>[more text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-...
Cubic Bezier Generator - CSS: Cascading Style Sheets
<html> <canvas id="bezier" width="336" height="336"> </canvas> <form> <label for="x1">x1 = </label><input onchange="updatecanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> <label for="y1">y1 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x1 = ...
... ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i * 10) / 10, -3 * basic_scale_size + cx(0), cy(i) + 4); // limitation the constant 4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.filltext("output (value ratio)", -cy(0), -3 * basic_scale_size + cx(0)); ctx.restore(); // draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "center"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), ...
...basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.filltext(math.round(i * 10) / 10, cx(i), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size } ctx.lineto(lx(i), cy(0)); } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size ctx.stroke(); ctx.closepath(); // draw the bézier curve ctx.beginpath(); ctx.moveto(cx(0), cy(0)); ctx.strokestyle = 'blue'; ctx.beziercurveto(cx(...
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...
....appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; dropdown.prototype.toggle = function toggle(state) { if (typeof(state) === 'boolean') this.state = state === false ?
...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; ...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
normally it would contain a label and a checkbox.
... checkbox-label div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; } <div>lorem</div> firefox checkmenuitem div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; } <div>lorem</div> firefox color-well div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; } <div>lorem</div> safari input type=color continuous-capacity-level-indicator div{ color: black; -moz-appearance: continuous-capacity-level-indicator; -webkit-appearance: continuous-capacity-level-indicator; } <div>lorem</div> safari default-butto...
... radio-label firefox removed in firefox 64.
font-style - CSS: Cascading Style Sheets
html <header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">slant</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine 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; } 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 large sections of text set with a font-style value of italic may be difficult for people with cognitive concerns such as dyslexia to read.
font-weight - CSS: Cascading Style Sheets
html <header> <input type="range" id="weight" name="weight" min="1" max="1000" /> <label for="weight">weight</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling 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/mutator...
...sans/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; } .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 low vision conditions may have difficulty reading text set with a font-weight value of 100 (thin/hairline) or 200 (extra light), especially if the font has a low contrast color ratio.
HTML attribute: accept - HTML: Hypertext Markup Language
<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 multip...
...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.
... 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.
HTML attribute: pattern - HTML: Hypertext Markup Language
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.
... <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { ...
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
WebHTMLElementfieldset
the html <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
... <form action="#"> <fieldset> <legend>simple 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.
... <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.
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
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.
... <div class="toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> <input type="button" value="clear canvas"> </div> <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px;...
<menu> - HTML: Hypertext Markup Language
WebHTMLElementmenu
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.
...--> <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> ...
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
WebHTMLElementsummary
default label text if a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "details") as the label for the disclosure box.
...this makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.
... html in summaries this example adds some semantics to the <summary> element to indicate the label as important: <details open> <summary><strong>overview</strong></summary> <ol> <li>cash on hand: $500.00</li> <li>current invoice: $75.30</li> <li>due date: 5/6/19</li> </ol> </details> specifications specification status comment html living standardthe definition of '<summary>' in that specification.
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
WebHTMLElementtrack
label a user-readable title of the text track which is used by the browser when listing available text tracks.
... a media element cannot have more than one track with the same kind, srclang, and label.
... kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <track kind="subtitles" 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"> <!-- fallback --> ...
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<fieldset> the html <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
... <label> the html <label> element represents a caption for an item in a user interface.
... <nextid> <nextid> is an obsolete html element that served to enable the next web designing tool to generate automatic name labels for its anchors.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
99 <fieldset>: the field set element element, forms, html, html forms, reference, web the html <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
... 146 <label> element, forms, html, html forms, reference, web the html <label> element represents a caption for an item in a user interface.
... 163 <nextid>: the next id element (obsolete) element, html, obsolete, reference, web <nextid> is an obsolete html element that served to enable the next web designing tool to generate automatic name labels for its anchors.
Content-Location - HTTP
<form action="/send-payment" method="post"> <p> <label>who do you want to send the money to?
... <input type="text" name="recipient"> </label> </p> <p> <label>how much?
... <input type="number" name="amount"> </label> </p> <button type="submit">send money</button> </form> when the form is submitted, the site generates a receipt for the transaction.
Control flow and error handling - JavaScript
' + `${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.
... 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.
block - JavaScript
the block is delimited by a pair of braces ("curly brackets") and may optionally be labelled: the source for this interactive example is stored in a github repository.
... syntax block statement { statementlist } labelled block statement labelidentifier: { statementlist } statementlist statements grouped within the block statement.
... labelidentifier an optional label for visual identification or as a target for break.
Statements and declarations - JavaScript
break terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.
... continue 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.
... label provides a statement with an identifier that you can refer to using a break or continue statement.
MathML attribute reference - MathML
columnalign <mtable>, <mtd>, <mtr>, <mlabeledtr> specifies the horizontal alignment of table cells.
... unimplemented minlabelspacing <mtable> a length value specifing the minimum space between a label and the adjacent cell in the row.
... unimplemented shift <msgroup> unimplemented side <mtable> specifies the position where <mlabeledtr> label elements should be placed.
MathML documentation index - MathML
WebMathMLIndex
18 <mlabeledtr> mathml, mathml reference, mathml:element, mathml:tabular math the mathml <mlabeledtr> element is used to represent a label in a row either on the left or on the right side (determined using the side attribute on the <mtable> element).
... child elements of <mlabeledtr> must be <mtd> elements.
... the first child is the label whereas all other children are representing row contents and are treated identically to children of <mtr> elements.
Example - SVG: Scalable Vector Graphics
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> ...
... </div> <form action="" onsubmit="return false;"> <p> <label>number of motes:</label> <input id='num_motes' value='5'/> <br/> <label>max.
... velocity:</label> <input id='max_velocity' value='15'/> <br/> <label>attraction to cursor:</label> <input id='attract_cursor' value='6'/> <br/> <label>repulsion from peers:</label> <input id='repel_peer' value='5'/> <br/> </p> </form> <script type='text/javascript'> <![cdata[ // array of motes var motes; // get the display element.
Content Scripts - Archive of obsolete content
a button to firefox: when the user clicks the button, the add-on attaches a content script to the active tab, sends the content script a message called "my-addon-message", and listens for a response called "my-script-response": //main.js var tabs = require("sdk/tabs"); var buttons = require("sdk/ui/button/action"); var self = require("sdk/self"); buttons.actionbutton({ id: "attach-script", label: "attach the script", icon: "./icon-16.png", onclick: attachscript }); function attachscript() { var worker = tabs.activetab.attach({ contentscriptfile: self.data.url("content-script.js") }); worker.port.on("my-script-response", function(response) { console.log(response); }); worker.port.emit("my-addon-message", "message from the add-on"); } // content-script.js self.por...
...({ include: "*.mozilla.org", contentscript: 'function contextmenualert(href) {' + ' window.alert("the context menu was clicked on url:\\n" + href);' + '};' + 'window.addeventlistener("myaddonid-contextmenu-clicked",' + ' function(event){contextmenualert(event.detail);});' }); let cm = require("sdk/context-menu"); cm.item({ label: "alert url", context: [ cm.urlcontext(["*.mozilla.org"]), cm.selectorcontext("a[href]") ], contentscript: 'self.on("click", function (node, data) {' + ' var event = new customevent("myaddonid-contextmenu-clicked",' + ' {detail:node.href});' + ' window.dispatchevent(event);' ...
Working with Events - Archive of obsolete content
l be called for any event emitted by that object, and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-16.png", onclick: handleclick }); function handleclick(state) { panel.show({ position: button }); } this wildcard feature does not yet work for the tabs or windows modules.
...the listener loads https://developer.mozilla.org/: require("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", fun...
indexed-db - Archive of obsolete content
here's a complete add-on that adds two buttons to the browser: the button labeled "add" adds the title of the current tab to a database, while the button labeled "list" lists all the titles in the database.
...tore.opencursor(keyrange); cursorrequest.onsuccess = function(e) { var result = e.target.result; if(!!result == false) return; items.push(result.value.name); result.continue(); }; cursorrequest.onerror = database.onerror; }; function listitems(itemlist) { console.log(itemlist); } open("1"); var add = require("sdk/ui/button/action").actionbutton({ id: "add", label: "add", icon: "./add.png", onclick: function() { additem(require("sdk/tabs").activetab.title); } }); var list = require("sdk/ui/button/action").actionbutton({ id: "list", label: "list", icon: "./list.png", onclick: function() { getitems(listitems); } }); note that to run this add-on you'll need to provide icons named "add.png" and "list.png" in the add-on's "data" direc...
simple-storage - Archive of obsolete content
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).
...here's an add-on that adds three buttons to write, read, and delete a value: var ss = require("sdk/simple-storage"); require("sdk/ui/button/action").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",...
ui - Archive of obsolete content
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.
...you initialize a toolbar with an array of buttons and frames: var ui = require("sdk/ui"); var { actionbutton } = require("sdk/ui/button/action"); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = ui.actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = ui.actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = ui.actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = ui.frame({ url: "./frame-player.html" }); var toolbar = ui.toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appear...
tabs/utils - Archive of obsolete content
gettabtitle(tab) get the title of the document hosted by the specified tab, or the tab's label if the tab doesn't host a document.
... returns string : settabtitle(tab, title) set the title of the document hosted by the specified tab, or the tab's label if the tab doesn't host a document.
ui/sidebar - Archive of obsolete content
this will be used for the label for your sidebar in the "sidebar" submenu in firefox, and will be shown at the top of your sidebar when it is open.
...this will be used for the label for your sidebar in the "sidebar" submenu in firefox, and will be shown at the top of your sidebar when it is open.
ui/toolbar - Archive of obsolete content
action buttons toggle buttons frames this add-on builds part of the user interface for a music player using action buttons for the controls and a frame to display art and the currently playing song: var { actionbutton } = require('sdk/ui/button/action'); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = new frame({ url: "./frame-player.html" }); var toolbar = toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just ab...
...this add-on creates a toolbar containing one button and a frame: var { actionbutton } = require('sdk/ui/button/action'); var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var button = actionbutton({ id: "my-button", label: "my-button", icon: "./my-button.png" }); var frame = new frame({ url: "./my-frame.html" }); var toolbar = toolbar({ title: "player", items: [button, frame] }); this add-on creates a toolbar with one frame, that's hidden initially, and that logs show and hide events: var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "...
Creating Reusable Modules - Archive of obsolete content
} return path; } require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, onclick: function() { console.log(md5file(promptforfile())); } }); this works , but index.js is now getting longer and its logic is harder to understand.
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } exports.hashfile = md5file; index.js finally, update index.js to import these two new modules and use them: var filepicker = require("./filepicker.js"); var md5 = require("./md5.js"); require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, onclick: function() { console.log(md5.hashfile(filepicker.promptforfile())); } }); distributing modules with jpm, we use npm as the package manager for sdk modules that don't ship inside firefox.
Getting Started (jpm) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute jpm run again.
Getting started (cfx) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute cfx run again.
List Open Tabs - Archive of obsolete content
the following add-on adds an action button that logs the urls of open tabs when the user clicks it: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.url); } note: to get this working, you will need to save an icon for the button to your add-on's "data" directory as "icon-16.png".
...the script adds a red border to the tab's document: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) runscript(tab); } function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Alerts and Notifications - Archive of obsolete content
however it is possible to use only buttons and a label there.
... var message = 'another pop-up blocked'; var box = gbrowser.getnotificationbox(); var notification = box.getnotificationwithvalue('popup-blocked'); if (notification) { notification.label = message; } else { var buttons = [{ label: 'button', accesskey: 'b', popup: 'blockedpopupoptions', callback: null }]; let priority = box.priority_warning_medium; box.appendnotification(message, 'popup-blocked', 'chrome://browser/skin/info.png', priority, buttons); } ...
HTML in XUL for rich tooltips - Archive of obsolete content
al xul overlay could look like, assuming a javascript overlay titled overlay.js: <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip1" label="foo1" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> <menuitem id="htmltip2" label="foo2" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> </popup> <popupset id="mainpopupset"> <tooltip id="myhtmltip"> <html:div id="myhtmltipdiv" type="content"/> </tooltip> </popupset> ...
... <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip3" label="foo3" tooltip="mytip3html" /> </popup> <popupset id="mainpopupset"> <tooltip id="mytip3html"> <html:div type="content"> <html:b>bold foo</html:b> </html:div> </tooltip> </popupset> </overlay> ...
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing 4 shows an example that deletes the second child element of the element with the "toolbar" id, adds a new button element as a substitute, and sets a label attribute.
... listing 4: an example manipulation using the dom var bar = document.getelementbyid('toolbar'); bar.removechild(bar.childnodes[1]); bar.appendchild(document.createelement('button')); bar.lastchild.setattribute('label', 'hello!'); « previousnext » ...
Adding windows and dialogs - Archive of obsolete content
you'll see that you can choose from a wide variety of buttons, associate any action you need to them, override their labels, and even add completely customized extra buttons.
... <checkbox id="xulschoolhello-some-checkbox" label="&xulschoolhello.sometext.label;" checked="false" persist="checked" /> setting the id attribute of the element is mandatory if you want the persist attribute to work.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
onclick: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newitem); }; var jsontemplatebtn = ["xul:toolbarbutton", { id: "mytestbutton", class: "toolbarbutton-1", type: "menu", label: "test button label", tooltiptext: "test button tooltip", removable: true, key: "mytestbutton123" }, [ "m...
...'}], ['html:button', {id:'mybtn'}, 'button text content'] ], ['html:form', {id:'mysecondform'}, ['html:input', {type:'text', value:'my field for second form'}], ['html:div', {}, 'sub div with textcontent and siblings', ['html:br', {}], ['html:input', {type:'checkbox', id:'mycheck'}], ['html:label', {for:'mycheck'}, 'here is text of label, click this text will check the box' ] ] ] ]; document.body.appendchild(jsontodom(json, document, {})); jquery templating for extensions which already use jquery, it is possible to use its builtin dom building functions for templating, though care must be taken when passing non-static strings to me...
User Notifications and Alerts - Archive of obsolete content
notification boxes are very easy to create, and are very customizable: let nb = gbrowser.getnotificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.getstring("xulschoolhello.friendmessage.label"); let that = this; acceptbutton.label = this._bundle.getstring("xulschoolhello.acceptbutton.label"); acceptbutton.accesskey = this._bundle.getstring("xulschoolhello.acceptbutton.accesskey"); acceptbutton.popup = null; acceptbutton.callback = function() { that.acceptrequest(); }; // similarly for decline button.
...on the other hand, alerts are displayed only temporarily using the alerts service is similar to using notification boxes: let alertsservice = cc["@mozilla.org/alerts-service;1"].getservice(ci.nsialertsservice); let title = this._bundle.getstring("xulschoolhello.greeting.title"); let message = this._bundle.getstring("xulschoolhello.greeting.label"); alertsservice.showalertnotification( "chrome://xulschoolhello/skin/hello-notification.png", title, message, true, "", this, "xulschool hello message"); we pass this as an argument, assuming that this is an object that implements nsiobserver.
Tabbed browser - Archive of obsolete content
xul: <menuitem oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstore;1", "nsisessio...
...the attributes to which changes result in this event being sent are: label crop busy image selected function exampletabattrmodified(event) { var tab = event.target; // now you can check what's changed on the tab } // during initialization var container = gbrowser.tabcontainer; container.addeventlistener("tabattrmodified", exampletabattrmodified, false); // when no longer needed container.removeeventlistener("tabattrmodified", exampletabattrmodified, false); ...
Creating a status bar extension - Archive of obsolete content
our overlay file, status-bar-sample-1.xul, looks like this: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay > <overlay id="status-bar-sample-1-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="status-bar-sample-1" label="hello world" tooltiptext="sample status bar item" /> </statusbar> </overlay> the first order of business in the status-bar-sample-1.xul file is to establish that this is in fact a xul file, and to set up a unique id for the overlay.
...we include properties to configure our new status bar panel the way we want, setting its text label to "hello world" and establishing a tool tip with the message "sample status bar item" in it.
Index of archived content - Archive of obsolete content
cles file i/o finding window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers javascript daemons management label and description lookupnamespaceuri lookupprefix miscellaneous modules on page load page loading post data to window preferences progress listeners queryselector rosetta running applications svg animation svg general scr...
...forms community developing mozilla xforms implementation status mozilla xforms specials mozilla xforms user interface xforms alert element xforms group element xforms help element xforms hint element xforms input element xforms label element xforms message element xforms output element xforms range element xforms repeat element xforms secret element xforms select element xforms select1 element xforms submit element xforms switch module xforms textarea element xforms trigger ...
Creating a Microsummary - Archive of obsolete content
in this tutorial we're going to create a microsummary generator for the spread firefox home page that displays the current firefox download count along with the label fx downloads; for example: 174475447 fx downloads.
..."utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> </template> </transform> </template> </generator> adding text to include the label fx downloads in the microsummary, we need to add an xslt <text> element to the xslt <template> element whose content is the text we want to add.
Settings - Archive of obsolete content
here is an example manifest definition: var manifest = { settings: [ { name: "twitter", type: "group", label: "twitter", settings: [ { name: "username", type: "text", label: "username" }, { name: "password", type: "password", label: "password" } ] }, { name: "facebook", type: "group", label: "facebook", settings: [ { name: "username", type: "text", label: "username", default: "jdoe" }, { name: "password", type: "password", label...
...: "secret" } ] }, { name: "music", type: "boolean", label: "music", default: true }, { name: "volume", type: "range", label: "volume", min: 0, max: 10, default: 5 } ] }; // import after defining manifest!
Settings - Archive of obsolete content
here is an example manifest definition: var manifest = { settings: [ { name: "twitter", type: "group", label: "twitter", settings: [ { name: "username", type: "text", label: "username" }, { name: "password", type: "password", label: "password" } ] }, { name: "facebook", type: "group", label: "facebook", settings: [ { name: "username", type: "text", label: "username", default: "jdoe" }, { name: "password", type: "password", label...
...: "secret" } ] }, { name: "music", type: "boolean", label: "music", default: true }, { name: "volume", type: "range", label: "volume", min: 0, max: 10, default: 5 } ] }; // import after defining manifest!
Creating XPI Installer Modules - Archive of obsolete content
one of the buttons, labeled "show aphids", displays an alert dialog by calling a function defined in the javascript file barley.js.
.../skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orient="horizontal" autostretch="never"> <button label="barley corn" /> <button label="show aphids" oncommand="bar();" /> </box> </window> the other files that the window imports are defined in dark blue.
buttons - Archive of obsolete content
you can set its label with the buttonlabelextra1 attribute and its command with the ondialogextra1 attribute.
...you can set its label with the buttonlabelextra2 attribute and its command with the ondialogextra2 attribute.
control - Archive of obsolete content
« xul reference home control type: id this attribute specifies the id of the element with which the label is associated.
... when the user clicks on the label, the associated element is given focus.
keytext - Archive of obsolete content
« xul reference home keytext type: string a label for the keyboard shortcut.
... this text would appear next to a menuitem label if that menuitem is associated with the key element via its key attribute.
oninput - Archive of obsolete content
example <!-- this sets the label's text to the textbox value on each keystroke.
... --> <script language="javascript"> function setlabel(txtbox){ document.getelementbyid('lbl').value = txtbox.value; } </script> <label id="lbl"/> <textbox oninput="setlabel(this);"/> this is similar to the onkeypress event used in html documents.
sizetopopup - Archive of obsolete content
pref the preferred width of the menu label or button will be the size needed for the popup contents.
... always both the preferred and minimum width of the menu label or button will be the same as that necessary for the menupopup.
statustext - Archive of obsolete content
example <!-- sets the status message when mouse is over buttons --> <button label="connect" statustext="connect to remote server" 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 ...
width - Archive of obsolete content
<hbox> <hbox width="40" style="background-color: red;"> <label value="40"/> </hbox> </hbox> however, in the following example, despite that the preferred width of the box is 30 pixels, the displayed size of the box will be larger to accommodate the larger label.
... <vbox width="30" align="start" style="background-color: red;"> <label value="vbox xul width 10px red"/> </vbox> note: when used on treecol objects, the width attribute can be used to allow a tree to be scrolled horizontally if the column widths add up to be wider than the containing object.
Dynamically modifying XUL-based user interface - Archive of obsolete content
function createmenuitem(alabel) { const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var item = document.createelementns(xul_ns, "menuitem"); // create a new xul menuitem item.setattribute("label", alabel); return item; } var popup = document.getelementbyid("mypopup"); // a <menupopup> element var first = createmenuitem("first item"); var last = createmenuitem("last item"); popup.insertbefo...
...for example you could move the item labeled "first item" to the end of popup by adding this statement as a last line to the snippet above: popup.appendchild(first); this statement would remove the node from its current position in the document and re-insert it at the end of the popup.
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.
... example <script language="javascript"> function additemstolist(){ var list = document.getelementbyid('mymenulist'); // add item with just the label list.appenditem('one'); // add item with label and value list.appenditem('two', 999); // select the first item list.selectedindex = 0; } </script> <button label="add items" oncommand="additemstolist()"/> <menulist id="mymenulist"> <menupopup/> </menulist> see also insertitemat() removeitemat() ...
stopEditing - Archive of obsolete content
if the shouldaccept parameter is true, the cell's label is changed to the edited value (the tree view's nsitreeview.setcelltext() method is called to change the cell contents).
... otherwise the cell label is reverted to the value it had prior to editing.
OpenClose - Archive of obsolete content
for instance, a menu's popup will open when the menu label is clicked, and a submenu will open when the mouse is hovered over the parent menu element.
...here is a complete example which uses a button to open a menu: <button label="open menu" oncommand="document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag.
buttons - Archive of obsolete content
you can set its label with the buttonlabelextra1 attribute and its command with the ondialogextra1 attribute.
...you can set its label with the buttonlabelextra2 attribute and its command with the ondialogextra2 attribute.
disabled - Archive of obsolete content
<!-- checkbox enables/disables the button --> <checkbox label="enable button" oncommand="document.getelementbyid('buttremove').disabled = !
... this.checked"/> <button id="buttremove" label="remove all" disabled="true"/> ...
Property - Archive of obsolete content
ndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage ...
... pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbund...
Sorting and filtering a custom tree view - Archive of obsolete content
sort.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)" 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 tree; var filtertext = ""; function init() { tree = document.getelementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or reloaded function loadtable() { //remember scroll positio...
text-link - Archive of obsolete content
« xul reference home text-link labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or enter key press.
... labels will appear like a link (blue and underlined).
Containment Properties - Archive of obsolete content
<vbox datasources="template-guide-ex1.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <rule> <label uri="rdf:*" value="rdf:*"/> </rule> </template> </vbox> instead of iterating over a container, this example iterates over a specific predicate.
...<vbox datasources="template-guide-ex3.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <query> <content uri="?start"/> <member container="?start" child="?child"/> </query> <action> <label uri="?child" value="?child"/> </action> </template> </vbox> try this example.
Introduction - Archive of obsolete content
for example: <listbox datasources="http://www.xulplanet.com/ds/sample.xml" querytype="xml"> <template> <listitem label="?name"/> </template> </listbox> this template uses an xml datasource to generate a listbox.
... although we'll look at the details of this later, the simple result here is that a listitem will be generated for each child node in the xml data, setting the label to the name attribute for each xml node.
Multiple Rule Example - Archive of obsolete content
="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/date" object="?date"/> </conditions> <action> <hbox uri="?photo" class="box-padded"> <vbox> <label value="?title"/> <image src="?photo"/> </vbox> <groupbox> <caption label="photo details"/> <label value="?description"/> <label value="date: ?date"/> </groupbox> </hbox> </action> </rule> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> ...
... <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?phototitle"/> </conditions> <action> <vbox uri="?photo" class="box-padded"> <label value="?phototitle"/> <image src="?photo"/> </vbox> </action> </rule> </template> </vbox> in this example, the first rule matches only those photos with title, description, and date properties.
Namespaces - Archive of obsolete content
naparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> <listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <action> <listitem uri="?" label="?ns:name"/> </action> </template> </listbox> once added to the template element the namespaces can then be referenced inside temple rule elements too, this works both in rdf and xml templates.
... <listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <rule ns:gender="male"> <label uri="?" label="?ns:name"/> </action> </template> </listbox> ...
Simple Example - Archive of obsolete content
the action body might look like the following, which displays the image using its url and title in a label.
... you might note that the image's src attribute uses the member variable ?photo <action> <vbox uri="?photo" align="start"> <image src="?photo"/> <label value="?title"/> </vbox> </action> it shouldn't be too difficult to tell what would appear in the window in this example.
The Joy of XUL - Archive of obsolete content
for this reason, xul is oriented toward application artifacts such as windows, labels, and buttons instead of pages, heading levels, and hypertext links.
... xul provides a clear separation among the client application definition and programmatic logic ("content" consisting of xul, xbl, and javascript), presentation ("skin" consisting of css and images), and language-specific text labels ("locale" consisting of dtds and string bundles in .properties files).
Custom toolbar button - Archive of obsolete content
palette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- thunderbird address book --> <toolbarpalette id="addressbooktoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- sunbird --> <toolbarpalette id="calendartoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- button details --> <toolbarbutton id="custom-button-1" label="custom" tooltiptext="my custom toolbar button" oncommand="custombutton[1]()" class="toolbarbutton-1 chromeclass-toolbar-additional custombutton" /> </overlay> optionally customize the file by changing the label and tooltiptext in the last section.
...change the label and tooltiptext attributes to whatever you want.
Tree Widget Changes - Archive of obsolete content
note that it's the value attribute you use, not the label attribute.
...for instance: var col = tree.columns.getprimarycolumn(); treecell.setcelltext(5, col, "banana"); this will change the label of the cell in row 5 and the primary column to banana.
Adding Properties to XBL-defined Elements - Archive of obsolete content
often, fields would correspond to an attribute placed on the element such as label or disabled, but they do not have to.
...xul: <box id="random-box" class="randomizer"/> <button label="generate" oncommand="document.getelementbyid('random-box').number=math.random();"/> <button label="show" oncommand="alert(document.getelementbyid('random-box').number)"/> xbl: <binding id="randomizer"> <implementation> <field name="number"/> </implementation> </binding> a number field has been defined in the binding, which stores the random number.
Advanced Rules - Archive of obsolete content
you can view the rdf file separately: wheater.rdf example 1 : source <tree id="weathertree" flex="1" datasources="weather.rdf" ref="http://www.xulplanet.com/rdf/weather/cities"> <treecols> <treecol id="city" label="city" primary="true" flex="1"/> <treecol id="pred" label="prediction" flex="1"/> </treecols> <template> <rule> <conditions> <content uri="?list"/> <member container="?list" child="?city"/> <triple subject="?city" predicate="http://www.xulplanet.com/rdf/weather#name" object="?name"/> <triple subject="?city" ...
... predicate="http://www.xulplanet.com/rdf/weather#prediction" object="?pred"/> </conditions> <action> <treechildren> <treeitem uri="?city"> <treerow> <treecell label="?name"/> <treecell label="?pred"/> </treerow> </treeitem> </treechildren> </action> </rule> </template> </tree> two columns appear in this tree, one which displays the value of the name for each row and the other which displays the value of the prediction.
Creating a Wizard - Archive of obsolete content
an example wizard source <?xml version="1.0"?> <?xml-stylesheet href="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 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.
Skinning XUL Files by Hand - Archive of obsolete content
for example, when a button is defined as follows: <button class="plain" label="push me" /> then the following very simple style definition applies to that button.
...a toolbar elements defined as: <toolbar class="nav-bar" id="nav3"> <toolbarbutton label="click me" /> <toolbarbutton label="don't click me" /> ...
Stacks and Decks - Archive of obsolete content
for example, a progress bar might be created using a bar and a label overlaid on top of it.
... example 3 : source view <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> three pages exist here, the default being the third one.
Styling a Tree - Archive of obsolete content
this would be used to implement mozilla mail's labels feature.
... set the property on a row or cell, as in the following example: <treerow properties="makeitblue"> css selectors for the tree the style sheet can take this property and use it to change the appearance of the row for unread messages or labels.
Toolbars - Archive of obsolete content
a simple toolbar inside a toolbox source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> </toolbar> </toolbox> this has created a toolbar containing two buttons, a back button and a forward button.
... <vbox flex="1"> <toolbox> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="open"/> <toolbarbutton id="savesearch" label="save"/> </toolbar> </toolbox> <tabbox> a toolbar with two buttons has been added here.
XUL element attributes - Archive of obsolete content
it causes the child elements to be aligned so that their text labels are lined up.
...the tooltip is displayed in a default tooltip which displays only a label, however the default tooltip may be changed by setting the default attribute on a tooltip element.
XUL Template Primer - Bindings - Archive of obsolete content
</conditions> <bindings> <binding subject="?friend" predicate="http://home.netscape.com/nc-rdf#address" object="?addr"/> <binding subject="?addr" predicate="http://home.netscape.com/nc-rdf#street" object="?street"/> </bindings> <action> <hbox uri="?friend"> <label value="?name"/> <label value="?street"/> </hbox> </action> </rule> </template> </vbox> </window> the xul template primer covers the <conditions> and <action> elements, so we won't discuss those here.
... 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.
XUL Coding Style Guidelines - Archive of obsolete content
for example: <!-- localization note homebtn.label : do not translate the entity value "home".
... --> <!-- entity homebtn.label "home" --> properties files are very similar, but use the pound sign instead of <!--<var>xxxxx</var>-->: # localization note entity name : content we recognize that translation is a subset of localization even though we've consistently referred to our notes as "localization note".
XUL Event Propagation - Archive of obsolete content
ider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> ...
... <menuitem label="reload" /> <menuitem label="view source" /> </menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this file, the lowest-down, or "leaf" elements are the menuitems.
broadcaster - Archive of obsolete content
for instance, if the broadcaster has a label attribute, the observers will use that label.
... if the label changes, the labels of the observers will update automatically.
command - Archive of obsolete content
see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="c...
... label type: string the label that will appear on the element.
description - Archive of obsolete content
is a long section of text that will not word wrap"> </description> this is a long section of dynamically controlled text that will word wrap <description id="desc" style="width: 300px"></description> document.getelementbyid('desc').textcontent = "this is a long section of dynamic message text that will word wrap"; 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.
... related label ...
grid - Archive of obsolete content
ArchiveMozillaXULgrid
the second column is twice as big as the first column --> <groupbox> <caption label="details"/> <grid> <columns> <column flex="1"/> <column flex="2"/> </columns> <rows> <row> <label value="user name"/> <textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuite...
...m label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collap...
key - Archive of obsolete content
ArchiveMozillaXULkey
keytext type: string a label for the keyboard shortcut.
... this text would appear next to a menuitem label if that menuitem is associated with the key element via its key attribute.
listheader - Archive of obsolete content
attributes disabled properties acesssibletype examples <listbox> <listhead> <listheader label="name"/> <listheader label="occupation"/> </listhead> <listitem> <listcell label="george"/> <listcell label="house painter"/> </listitem> <listitem> <listcell label="mary ellen"/> <listcell label="candle maker"/> </listitem> <listitem> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </listbox> attributes disabled type: boolean indicates whether the element is disabled or not.
... label type: string the label that will appear on the element.
menubar - Archive of obsolete content
attributes grippyhidden, statusbar properties accessibletype, statusbar examples <menubar id="sample-menubar"> <menu id="action-menu" label="action"> <menupopup id="action-popup"> <menuitem label="new"/> <menuitem label="save" disabled="true"/> <menuitem label="close"/> <menuseparator/> <menuitem label="quit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menub...
... statusbar type: id if you set this attribute to the id of a statusbar element, the label on the statusbar will update to the statustext of the items on the menu as the user moves the mouse over them.
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items.
... insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position.
toolbar - Archive of obsolete content
ohide, currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptext, height, iconsize, mode, toolbarname properties accessibletype, currentset, firstpermanentchild, lastpermanentchild, toolbarname, toolboxid methods insertitem style classes chromeclass-toolbar examples <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton id="nav-users" accesskey="u" label="users"/> <toolbarbutton id="nav-groups" accesskey="p" label="groups"/> <toolbarbutton id="nav-events" accesskey="e" label="events" disabled="true"/> </toolbar> </toolbox> attributes autohide type: boolean when set to true, the toolbar will be invisible unless the alt key is pressed by the user.
...this would be used to label the grippy so that the user knows which toolbar it represents.
toolbaritem - Archive of obsolete content
examples <toolbaritem> <menulist label="bus"> <menupopup> <menuitem label="car"/> <menuitem label="taxi"/> <menuitem label="bus" selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" c...
...lass="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasour...
treeitem - Archive of obsolete content
attributes container, empty, label, open, uri examples (example needed) attributes container type: boolean set to true if the element is to act as a container which can have child elements.
... 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.
wizard - Archive of obsolete content
?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
...this is overridden by the label attribute on the individual pages.
wizardpage - Archive of obsolete content
attributes description, label, next, pageid properties next, pageid attributes description type: string descriptive text to appear in addition to the dialog title.
... label type: string the label that will appear on the element.
How to enable locale switching in a XULRunner application - Archive of obsolete content
here is a code snippet showing how this is done: the definition of the xul control: <listbox id="locale-listbox"> <!-- generated list items go in here --> </listbox> <button label="&switchlocale.button;" oncommand="changelocale()"/> the javascript code to populate the control: try { // query available and selected locales var chromeregservice = components.classes["@mozilla.org/chrome/chrome-registry;1"].getservice(); var xulchromereg = chromeregservice.queryinterface(components.interfaces.nsixulchromeregistry); var toolkitchromereg = chromeregservice.queryinterface(...
...() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.getelementbyid("locale-listbox"); var selecteditem = null; while(availablelocales.hasmore()) { var locale = availablelocales.getnext(); var listitem = document.createelementns(xul_ns, "listitem"); listitem.setattribute("value", locale); listitem.setattribute("label", locale); if (locale == selectedlocale) { // is this the current locale?
Extentsions FAQ - Archive of obsolete content
the list of "known" properties is: junkscore junkscoreorigin label priority keywords.
...they replace the old labels (although the labels are still recognised).
-ms-accelerator - Archive of obsolete content
formal syntax false | true examples this example uses the -ms-accelerator attribute in a <u> element to specify that the "n" in the <label> element is a keyboard shortcut.
... <!doctype html> <html> <head> <title>accelerator</title> </head> <body> <label for="oname"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </label> <input type="text" id="oname" size="25" accesskey="n" value="your name here" /> </body> </html> specifications not part of any specification.
E4X for templating - Archive of obsolete content
createbundle('chrome://myeext/locale/myext.properties'); if (args){ args = array.prototype.slice.call(arguments, 1); return strs.formatstringfromname(msg,args,args.length); } return strs.getstringfromname(msg); } for example, <toolbarbutton label={$s('mytoolbar.label')}/> conditionals 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 security considerations, such as escaping with the above), e4x content using such functions can also be easily serialized inline (and then perhaps converted to the dom) as needed: var list = <>{_if(elems.length(), function () <> <markup/> <markup/> </>)}</>.toxmlstring(); iterating functions such as the following foreach (which can work with ar...
New in JavaScript 1.2 - Archive of obsolete content
ents new properties function.arity new methods array.prototype.concat() array.prototype.slice() string.prototype.charcodeat() string.prototype.concat() string.fromcharcode() string.prototype.match() string.prototype.replace() string.prototype.search() string.prototype.slice() string.prototype.substr() new operators delete equality operators (== and !=) new statements labeled statements switch do...while import export other new features regular expressions signed scripts changed functionality in javascript 1.2 you can now nest functions within functions.
... the break and continue statements can now be used with the new labeled statement.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
"/jaxer_examples/js/ext-2.1/ext-all.js"/> <link href="/jaxer_examples/css/main.css" type="text/css" rel="stylesheet"/> <script 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({ 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.
Implementation Status - Archive of obsolete content
; 303351; 333464; 333529; 352398; 8.2.1 choices supported 8.2.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.
XForms Alert Element - Archive of obsolete content
examples <xforms:model> <xforms:instance> <data xmlns=""> <x>10</x> </data> </xforms:instance> <xforms:bind id="x" nodeset="x" type="xsd:integer"/> </xforms:model> <style> @namespace 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!
XForms Select Element - Archive of obsolete content
he value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:model> <xf:select ref="/data/values" appearance="full"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </xf:choices> <xf:choices> <xf:label>red colors</xf:label> <xf:item> <xf:label>red</xf:label> <xf:value>r</xf:value> </xf:item> <xf:item> <xf:label>m...
...agenta</xf:label> <xf:value>m</xf:value> </xf:item> </xf:choices> </xforms:select> ...
XForms Select1 Element - Archive of obsolete content
analogue widgets in xhtml or in xul visual grouping by choices element is supported selection="open" attribute isn't supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:model> <xf:select1 ref="/data/values"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </xf:choices> <xf:choices> <xf:label>red colors</xf:label> <xf:item> <xf:label>red</xf:label> <xf:value>r</xf:value> </xf:item> <xf:item> <xf:label>m...
...agenta</xf:label> <xf:value>m</xf:value> </xf:item> </xf:choices> </xf:select> ...
RDF in Mozilla FAQ - Archive of obsolete content
nsisimpleenumerator arclabelsin(atarget).
... nsisimpleenumerator arclabelsout(asource).
Building up a basic demo with PlayCanvas editor - Game development
when hovering over that button with your mouse the label will say 'add entity' — that's exactly what we want to do.
...click diffuse, then select the colored box next to the color label — it will open a color wheel.
Audio for Web games - Game development
to see this in action, let's lay out some separate tracks: <section id="tracks"> <ul> <li data-loading="true"> <a href="leadguitar.mp3" class="track">lead guitar</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" 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...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
the domain name consists of a hierarchial sequence of names (labels) separated by periods (dots) and ending with an extension.
...examples of lossless compression include gzip, brotli, webp, and png, 258 mime type glossary, webmechanics a mime type (now properly called "media type", but also sometimes "content type") is a string sent along with a file indicating the type of the file (describing the content format, for example, a sound file might be labeled audio/ogg, or an image file image/png).
Sending forms through JavaScript - Learn web development
the html is typical: <form id="myform"> <label for="myname">send me your name:</label> <input id="myname" name="name" value="john"> <input type="submit" value="send me!"> </form> but javascript takes over the form: window.addeventlistener( "load", function () { function senddata() { const xhr = new xmlhttprequest(); // bind the formdata object and the form element const fd = new formdata( form ); // define what happe...
... 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>.
Test your skills: Basic controls - Learn web development
you should also associate them with their text labels semantically.
... basic controls 2 the next task requires you to create working sets of checkboxes and radio buttons, from the provided text labels.
Test your skills: Form structure - Learn web development
mark up each text label with an appropriate element so that it is semantically associated with its respective form field.
... add a suitable set of structural elements around the label/field pairs to separate them out.
Creating hyperlinks - Learn web development
keep your link label as short as possible — this is helpful because screen readers need to interpret the entire link text.
...this can cause problems for screen reader users, if there's a list of links out of context that are labeled "click here", "click here", "click here".
Adding vector graphics to the Web - Learn web development
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="width: 95%;min-height: 200px;"> <svg width="100%" height="100%"> <rect width="100%" height="100%" fill="red" /> <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> <polygon points="120,0 240,225 0,225" fill="green"/> <text x="50" y="100" fon...
... </text> </svg> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution" disabled> </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'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml =...
Images in HTML - Learn web development
if you get really stuck, press the show solution button to see an 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%"> <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-labe...
...if you get really stuck, press the show solution button to see an 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: 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 { ...
Basic math in JavaScript — numbers and operators - Learn web development
for example, booleans can be used to: display the correct text label on a button depending on whether a feature is turned on or off display a game over message if a game is over or a victory message if the game has been won display the correct seasonal greeting depending what holiday season it is zoom a map in or out depending on what zoom level is selected we'll look at how to code such logic when we look at conditional statements in a future article.
...if the button is currently saying "start machine" when it is pressed, we change its label to "stop machine", and update the label as appropriate.
Ember interactivity: Events, classes and state - Learn web development
add the new line shown below to your header.hbs file: <input class='new-todo' aria-label='what needs to be done?' placeholder='what needs to be done?' autofocus {{on 'keydown' this.onkeydown}} > this new attribute is inside double curly braces, which tells you it is part of ember's dynamic templating syntax.
... this is because the text label inside each list item is hardcoded to that text, as seen in todo.hbs: <label>buy movie tickets</label> update this line to use the argument @todo — which will represent the todo that we passed in to this component when it was invoked in todo-list.hbs, in the line <todo @todo={{todo}} />: <label>{{@todo.text}}</label> ok, try it again.
React interactivity: Events and state - Learn web development
your form.js file should now read like this: import react, { usestate } from "react"; function form(props) { const [name, setname] = usestate(""); function handlechange(e) { setname(e.target.value); } function handlesubmit(e) { e.preventdefault(); props.addtask(name); setname(""); } return ( <form onsubmit={handlesubmit}> <h2 classname="label-wrapper"> <label htmlfor="new-todo-input" classname="label__lg"> what needs to be done?
... </label> </h2> <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" value={name} onchange={handlechange} /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> ); } export default form; putting it all together: adding a task now that we've practiced with events, callback props, and hooks we're ready to write functionality that will allow a user to add a new task from their browser.
Getting started with Svelte - Learn web development
label, and choosing inspect: when compiling the app, svelte changes our h1 styles definition to h1.svelte-1tky8bj, and then modifies every <h1> element in our component to <h1 class="svelte-1tky8bj">, so that it picks up the styles as required.
... as you can see, the <h1> label is automatically updated.
Handling common HTML and CSS problems - Learn web development
the following example shows date and time inputs: <form> <div> <label for="date">enter a date:</label> <input id="date" type="date"> </div> <div> <label for="time">enter a time:</label> <input id="time" type="time"> </div> </form> the output of this code is as follows: hidden example label { float: left; width: 30%; text-align: right; } input { float: right; width: 65%; } label,...
... input { margin-bottom: 20px; } div { clear: both; margin: 10px; } body { width: 400px; margin: 0 auto; } <form> <div> <label for="date">enter a date:</label> <input id="date" type="date"> </div> <div> <label for="time">enter a time:</label> <input id="time" type="time"> </div> </form> note: you can also see this running live as forms-test.html on github (see the source code also).
Continuous Integration
each taskcluster job is represented by a colored label; green means a job has succeeded, while other colors represent different kinds of problems.
... the label text indicates the job type.
Displaying Places information using views
<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"].
...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 file...
Widget Wrappers
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.
...ll point to the overflow chevron on overflowable toolbars if and only if your widget node is overflowed, to the anchor for the panel menu if your widget is inside the panel menu, and to the node itself in all other cases overflowed boolean indicating whether the node is currently in the overflow panel of the toolbar isgroup false, will be true for the group widget label for api-provided widgets, convenience getter for the label attribute of the dom node tooltiptext for api-provided widgets, convenience getter for the tooltiptext attribute of the dom node disabled for api-provided widgets, convenience getter and setter for the disabled state of this single widget.
Localizing without a specialized tool
you should see something like this: x-testing browser chrome browser aboutcerterror.dtd // add and localize this file aboutdialog.dtd +aboutlink +aboutlink.accesskey +aboutversion +closecmdgnome.accesskey +closecmdgnome.label +copyright +copyright.accesskey +copyrightgnome.accesskey +copyrightinfo1 +copyrightinfo2 +licenselink +licenselinktext aboutprivatebrowsing.dtd // add and localize this file aboutrobots.dtd // add and localize this file ...
...<!entity cmd_enginemanager.label "manage search engines..."> <!entity searchendcap.label "search"> save the file.
gettext
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").
...in the po file, msgctxt looks like this: msgctxt "button label" msgid "log in" msgstr "" msgctxt "dialog title" msgid "log in" msgstr "" you can add context to your strings by passing an additional argument to the gettext function call and then having xgettext extract it as the context.
Mozilla MathML Status
mtable - side, minlabelspacing not implemented.
... mlabeledtr not implemented.
TimerFirings logging
function timers have an informative label.
... the informative labels are only present on function timers that have had their creation site annotated.
Preferences system
available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
... ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
AsyncTestUtils extended framework
the tag key is not the label, but what is actually stored on the imap server.
... for example, all our default tags are actually things like $label1 and $label2, but that is not what we show to the user.
Enc Dec MAC Output Public Key as CSR
key_trailer "-----end wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" #define lab_header "-----begin key label-----" #define lab_trailer "-----end key label-----" #define pubkey_header "-----begin pub key -----" #define pubkey_trailer "-----end pub key -----" #define ns_certreq_header "-----begin new certificate request-----" #define ns_certreq_trailer "-----end new certificate request-----" typedef enum { gen_csr, encrypt, decrypt, unknown } commandtype; ...
...like sample 4, except that it reads in public key from cert request file instead * of looking it up by label name, and writes public key into header instead of a * label name.
nss tech note2
for example, 1024[805ef10]: c_findobjectsinit 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: ptemplate = 0xbffff410 1024[805ef10]: ulcount = 3 1024[805ef10]: cka_label = localhost.nyc.rr.com [20] 1024[805ef10]: cka_token = ck_true [1] 1024[805ef10]: cka_class = cko_certificate [4] 1024[805ef10]: rv = 0x0 1024[805ef10]: c_findobjects 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: phobject = 0x806d810 1024[805ef10]: ulmaxobjectcount = 16 1024[805ef10]: pulobjectcount = 0xbffff38c 1024[805ef10]: *pulobjectcount = 0x1 1024[805ef10]: phobje...
...ct[0] = 0xf6457d04 1024[805ef10]: rv = 0x0 1024[805ef10]: c_findobjectsfinal 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getattributevalue 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: hobject = 0xf6457d04 1024[805ef10]: ptemplate = 0xbffff2d0 1024[805ef10]: ulcount = 2 1024[805ef10]: cka_token = 0 [1] 1024[805ef10]: cka_label = 0 [20] 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getattributevalue 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: hobject = 0xf6457d04 1024[805ef10]: ptemplate = 0xbffff2d0 1024[805ef10]: ulcount = 2 1024[805ef10]: cka_token = ck_true [1] 1024[805ef10]: cka_label = localhost.nyc.rr.com [20] 1024[805ef10]: rv = 0x0 4.
nss tech note5
most of the args are illustrated above secitem label; /* empty, doesn't need to be freed */ label.data = null; label.len = 0; secitem *pubvalue = null; pubvalue = /* ??
..._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);...
FC_GetTokenInfo
on return, the ck_token_info structure that pinfo points to has the following information: label: the label of the token, assigned during token initialization, padded with spaces to 32 bytes and not null-terminated.
... examples note the use of the %.32s format string to print the label and manufacturerid members of the ck_token_info structure.
FC_InitToken
syntax ck_rv fc_inittoken( ck_slot_id slotid, ck_char_ptr ppin, ck_ulong ulpinlen, ck_char_ptr plabel ); parameters fc_inittoken() has the following parameters: slotid the id of the token's slot ppin the password of the security officer (so) ulpinlen the length in bytes of the so password plabel points to the label of the token, which must be padded with spaces to 32 bytes and not be null-terminated description fc_inittoken() initializes a brand new token or re-initializes a token that was initialized before.
...fc_inittoken() ignores the plabel argument.
NSC_InitToken
syntax ck_rv nsc_inittoken( ck_slot_id slotid, ck_char_ptr ppin, ck_ulong ulpinlen, ck_char_ptr plabel ); parameters nsc_inittoken() has the following parameters: slotid the id of the token's slot ppin the password of the security officer (so) ulpinlen the length in bytes of the so password plabel points to the label of the token, which must be padded with spaces to 32 bytes and not be null-terminated description nsc_inittoken() initializes a brand new token or re-initializes a token that was initialized before.
...nsc_inittoken() ignores the plabel argument.
Rhino Debugger
moving up and down the stack the lower-left (dockable) pane in the debugger main window contains a combo-box labeled "context:" which displays the current stack of the executing script.
... viewing variables the lower-left (dockable) pane in the debugger main window contains a tab-pane with two tabs, labeled "this" and "locals".
nsIAccessible
relations many accessibles are linked with each other, for example, if one accessible gives the accessible name for another accessible (for example, html:label and html control) then these accessibles are related, please refer to relations documentation for more information.
...used for tree items, list items, tab panel labels, radio buttons, etc.
nsIDOMXULSelectControlElement
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() nsidomxulselectcontrolitemelement appenditem( in domstring label, 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 ...
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...
... void 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); applyretentio...
nsIMsgFilter
throws an exception if the action is not move to folder attribute acstring targetfolderuri; label // target label.
... throws an exception if the action is not label attribute nsmsglabelvalue label; junkscore attribute long junkscore; strvalue attribute autf8string strvalue; customid // action id if type is custom attribute acstring customid; customaction // custom action associated with customid // (which must be set prior to reading this attribute) readonly attribute nsimsgfiltercustomaction customaction; methods addterm() void nsimsgfilter::addterm ( in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value, in boolean booleanand, in acstring arbitraryheader ) getterm() void nsimsgfilter::getterm ( in long termindex, in nsmsgsearchattribvalue attrib, in n...
nsIMsgFolder
y msgkey); void addmessagedispositionstate(in nsimsgdbhdr amessage,in nsmsgdispositionstate adispositionflag); void markmessagesread(in nsisupportsarray messages, in boolean markread); void markallmessagesread(); void markmessagesflagged(in nsisupportsarray messages, in boolean markflagged); void markthreadread(in nsimsgthread thread); void setlabelformessages(in nsisupportsarray messages, in nsmsglabelvalue label); nsimsgdatabase getmsgdatabase(in nsimsgwindow msgwindow); void setmsgdatabase(in nsimsgdatabase msgdatabase); nsimsgdatabase getdbfolderinfoanddb(out nsidbfolderinfo folderinfo); nsimsgdbhdr getmessageheader(in nsmsgkey msgkey); boolean shouldstoremsgoffline(in nsmsgkey msgkey); ...
...ate adispositionflag); markmessagesread() void markmessagesread(in nsisupportsarray messages, in boolean markread); markallmessagesread() void markallmessagesread(); markmessagesflagged() void markmessagesflagged(in nsisupportsarray messages, in boolean markflagged); markthreadread() void markthreadread(in nsimsgthread thread); setlabelformessages() void setlabelformessages(in nsisupportsarray messages, in nsmsglabelvalue label); getmsgdatabase() nsimsgdatabase getmsgdatabase(in nsimsgwindow msgwindow); setmsgdatabase() void setmsgdatabase(in nsimsgdatabase msgdatabase); getdbfolderinfoanddb() nsimsgdatabase getdbfolderinfoanddb(out nsidbfolderinfo folderinfo); getmessageheader() nsims...
nsIMsgRuleAction
throws an exception if the action is not move to folder attribute acstring targetfolderuri; // target label.
... throws an exception if the action is not label attribute nsmsglabelvalue label; // junkscore throws an exception if the action type is not junkscore attribute long junkscore; attribute autf8string strvalue; // action id if type is custom attribute acstring customid; // custom action associated with customid // (which must be set prior to reading this attribute) readonly attribute nsimsgfiltercustomaction customaction; }; ...
XPCOM Interface Reference
parsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstoragewindownsidomuserdatahandlernsidomwindownsidomwindow2nsidomwindowinternalnsidomwindowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpathresultnsidomxulcontrolelementnsidomxulelementnsidomxullabeledcontrolelementnsidomxulselectcontrolelementnsidomxulselectcontrolitemelementnsidatasignatureverifiernsidebugnsidebug2nsidevicemotionnsidevicemotiondatansidevicemotionlistenernsidialogcreatornsidialogparamblocknsidictionarynsidirindexnsidirindexlistenernsidirindexparsernsidirectoryenumeratornsidirectoryiteratornsidirectoryservicensidirectoryserviceprovidernsidirectoryserviceprovider2nsidiskcaches...
...ixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixulruntimensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpcclientnsixmlrpcfaultnsizipentrynsizipreadernsizipreadercachensizipwriternsmsgfilterfileattribvaluensmsgfolderflagtypensmsgjunkstatusnsmsgkeynsmsglabelvaluensmsgpriorityvaluensmsgruleactiontypensmsgsearchattribnsmsgsearchopnsmsgsearchscopensmsgsearchtermnsmsgsearchtypevaluensmsgsearchvaluensmsgsearchwidgetvaluenspipromptservice see also interfaces grouped by function ...
XUL Overlays
MozillaTechXULOverlays
tor.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes bases and overlays are merged when they share the same id attribute.
...the following snippet shows a dialog with custom ui elements at the top and a reference to the overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%" style="margin-bottom: 1em; width: 100%;"> <html:input type="checkbox" id="dialog.newwindow"/> <html:label for="dialog.newwindow">&openwin.label;</html:label> <spring flex="100%"/> </box> <box id="okcancelbuttons"/> for more detail, see the ok and cancel button definitions being referenced here in the global component file platformdialogoverlay.xul.
Building a Thunderbird extension 6: Adding JavaScript
window.addeventlistener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: " + datestring; } the first part registers a new event listener that will be executed automatically when thunderbird loads.
...finally the label of our panel is set to "date: " and concatenated with the date string that contains the formatted date.
customDBHeaders Preference
the data will come from a custom header labeled x-superfluous.
...perfluousoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type='application/javascript' src='chrome://superfluous/content/superfluous.js'/> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colsuperfluous" persist="hidden ordinal width" currentview="unthreaded" flex="1" label="superfluous" tooltiptext="click to sort by superfluous" /> </treecols> </tree> </overlay> you should insure that whatever id you use for the treecol you're adding matches the reference from your javascript code (i.e.
Preferences System
available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
... ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
Index - Firefox Developer Tools
after firefox 48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": 39 basic operations before firefox 50, the memory tool is not enabled by default.
...then record a profile as usual, and you will see a new tab labeled "allocations" in the toolbar: 84 call tree javascript, performance, memory the call tree is a sampling profiler.
Aggregate view - Firefox Developer Tools
after firefox 48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": the aggregate view looks something like this: it presents a breakdown of the heap's contents, as a table.
... there are three main ways to group the data: type call stack inverted call stack you can switch between them using the dropdown menu labeled "group by:" located at the top of the panel: there's also a box labeled "filter" at the top-right of the pane.
Basic operations - Firefox Developer Tools
to load a snapshot from an existing .fxsnapshot file, click the import button, which looks like a rectangle with an arrow rising from it (before firefox 49, this button was labeled with the text "import..."): you'll be prompted to find a snapshot file on disk.
...to do this, check "record call stacks" (before firefox 49 this was labeled "record allocation stacks"): ...
Allocations - Firefox Developer Tools
then record a profile as usual, and you will see a new tab labeled "allocations" in the toolbar: anatomy of the allocations view the allocations view looks something like this: the allocations view periodically samples allocations that are made over the recording.
... if a gc event was caused by allocation pressure, then the sidebar on the right of the marker in the waterfall view contains a link labeled "show allocation triggers".
Intensive JavaScript - Firefox Developer Tools
a button to run the javascript, labeled "do pointless computations!".
...se; break; } } if (isprime) { primes.push(candidate); } // schedule the next var testfunction = testcandidate.bind(this, index + 1); window.requestanimationframe(testfunction); } var primes = []; var testfunction = testcandidate.bind(this, 0); window.requestanimationframe(testfunction); } let's test this version out: select the radio button labeled "use requestanimationframe" and capture another profile.
Taking screenshots - Firefox Developer Tools
to enable it: visit the settings page find the section labeled "available toolbox buttons" check the box labeled "take a screenshot of the entire page".
...just check the box in settings labeled "screenshot to clipboard": now, whenever you take a screenshot, the screenshot is also copied to the clipboard.
View Source - Firefox Developer Tools
for example view-source:https://www.mozilla.org/#line100 view selection source if you select part of a web page and conext-click, you'll see a context menu item labeled "view selection source", that behaves just like "view page source", except you only see the source for the selection.
... view mathml source if you context-click while the mouse is over some mathml, you'll see a context menu item labeled "view mathml source": click it to see the mathml source.
Web Audio Editor - Firefox Developer Tools
now there should be an extra tab in the toolbox toolbar labeled "web audio".
...if, instead, you've connected a node to an audioparam in another node, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the audioparam: inspecting and modifying audionodes if you click on a node, it's highlighted and you get a node inspector on the right hand side.
AddressErrors - Web APIs
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 ha...
...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.
BroadcastChannel: message event - Web APIs
sender <h1>sender</h1> <label for="message">type a message to broadcast:</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 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received...
Console.timeStamp() - Web APIs
WebAPIConsoletimeStamp
you can optionally supply an argument to label the timestamp, and this label will then be shown alongside the marker.
... syntax console.timestamp(label); parameters label label for the timestamp.
console - Web APIs
WebAPIConsole
console.count() log the number of times this line has been called with the given label.
... console.countreset() resets the value of the counter with the given label.
Element: compositionend event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler 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; di...
...splay: 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.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupda...
Element: compositionstart event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler 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; di...
...splay: 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.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupda...
Element: compositionupdate event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler 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; di...
...splay: 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.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupda...
FileReader: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.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-lo...
...g-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} bytes transferred\n`; if (event.type === "load") { ...
FileReader: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.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; borde...
...r: 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} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function a...
FileReader: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.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; he...
...ight: 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} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; ...
FileReader: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.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-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} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } fu...
FileReader: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.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: 5r...
...em; 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} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } ...
HTMLButtonElement - Web APIs
htmlbuttonelement.labels read only is a nodelist that represents a list of <label> elements that are labels for this button.
... the following attributes have been added: autofocus, formaction, formenctype, formmethod, formnovalidate, formtarget, labels, validity, validationmessage, and willvalidate.
HTMLElement - Web APIs
htmlelement.accesskeylabel read only returns a domstring containing the element's assigned access key.
... recommendation added the following properties: dataset, hidden, tabindex, accesskey, accesskeylabel, draggable, dropzone, contenteditable, iscontenteditable, contextmenu, spellcheck, commandtype, commandlabel, commandicon, commandhidden, commanddisabled, commandchecked, style, and all the onxyz properties.
HTMLFormElement - Web APIs
f.action = "a-different-url.cgi"; f.name = "a-different-name"; } </script> submit a <form> into a new window: <!doctype html> <html> <head> <meta charset="utf-8"> <title>example new-window form submission</title> </head> <body> <form action="test.php" target="_blank"> <p><label>first name: <input type="text" name="firstname"></label></p> <p><label>last name: <input type="text" name="lastname"></label></p> <p><label><input type="password" name="pwd"></label></p> <fieldset> <legend>pet preference</legend> <p><label><input type="radio" name="pet" value="cat"> cat</label></p> <p><label><input type="radio" name="pet" value="dog"> dog</label></p> </fields...
...et> <fieldset> <legend>owned vehicles</legend> <p><label><input type="checkbox" name="vehicle" value="bike">i have a bike</label></p> <p><label><input type="checkbox" name="vehicle" value="car">i have a car</label></p> </fieldset> <p><button>submit</button></p> </form> </body> </html> submitting forms and uploading files using xmlhttprequest if you want to know how to serialize and submit a form using the xmlhttprequest api, please read this paragraph.
HTMLInputElement - Web APIs
htmlinputelement.labels read only nodelist array: returns a list of <label> elements that are labels for this element.
... the following properties have been added: autocomplete, autofocus, dirname, files, formaction, formenctype, formmethod, formnovalidate, formtarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectiondirection, selectionend, selectionstart, step, validationmessage, validity, valueasdate, valueasnumber, width, and willvalidate.
HTMLMediaElement: loadstart event - Web APIs
bubbles no cancelable no interface event event handler property onloadstart examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </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; } vid...
...eo { 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', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'...
HTMLMediaElement: progress event - Web APIs
bubbles no cancelable no interface event event handler property onprogress examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </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('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('sour...
HTMLSelectElement.disabled - Web APIs
syntax edit aselectelement.disabled = abool; example html <label> allow drinks?
... <input id="allow-drinks" type="checkbox"/> </label> <label for="drink-select">drink selection:</label> <select id="drink-select" disabled> <option value="1">water</option> <option value="2">beer</option> <option value="3">pepsi</option> <option value="4">whisky</option> </select> javascript var allowdrinkscheckbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinkscheckbox.addeventlistener("change", function(event) { if (event.target.checked) { drinkselect.disabled = false; } else { drinkselect.disabled = true; } }, false); result specifications specification status comment html living standardthe definition of 'disabled' in that specification.
HTMLSelectElement.selectedOptions - Web APIs
html the html that creates the selection box and the <option> elements representing each of the food choices looks like this: <label for="foods">what do you want to eat?</label><br> <select id="foods" name="foods" size="7" multiple> <option value="1">burrito</option> <option value="2">cheeseburger</option> <option value="3">double bacon burger supreme</option> <option value="4">pepperoni pizza</option> <option value="5">taco</option> </select> <br> <button name="order" id="order"> order now </button> <p id="output"...
...order"); let itemlist = document.getelementbyid("foods"); let outputbox = document.getelementbyid("output"); orderbutton.addeventlistener("click", function() { let collection = itemlist.selectedoptions; let output = ""; for (let i=0; i<collection.length; i++) { if (output === "") { output = "your order for the following items has been placed: "; } output += collection[i].label; if (i === (collection.length - 2) && (collection.length < 3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "you didn't order anything!"; } outputbox.innerhtml = output; }, false); this script sets up a click event l...
HTMLSelectElement - Web APIs
htmlselectelement.labelsread only a nodelist of <label> elements associated with the element.
... it adds the autofocus, form, required, labels, selectedoptions, willvalidate, validity and validationmessage properties.
HTMLTableCellElement - Web APIs
htmltablecellelement.abbr a domstring which can be used on <th> elements (not on <td>), specifying an alternative label for the header cell..
... this alternate label can be used in other contexts, such as when describing the headers that apply to a data cell.
HTMLTextAreaElement - Web APIs
htmltextareaelement.labelsread only nodelist: returns a list of label elements associated with this element.
... the following attributes have been added: autofocus, placeholder, dirname, wrap, maxlength, required, textlength, labels, selectionstart, selectionend, selectiondirection, validity, validationmessage, and willvalidate.
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...
...items marked with "*" are required.</p> <form action="" method="get"> <p> <label for="username" required>your name:</label> <input type="text" id="username"> (*) </p> <p> <label for="email">email:</label> <input type="email" id="useremail"> </p> <input type="submit" value="send" id="sendbutton"> </form> result specifications specification status comment html living standard living standard whatwg html specification ...
Intersection Observer API - Web APIs
threshold example <template id="boxtemplate"> <div class="samplebox"> <div class="label topleft"></div> <div class="label topright"></div> <div class="label bottomleft"></div> <div class="label bottomright"></div> </div> </template> <main> <div class="contents"> <div class="wrapper"> </div> </div> </main> .contents { position: absolute; width: 700px; height: 1725px; } .wrapper { position: relative; top: 600px; } .samplebox { position: relati...
...ve; left: 175px; width: 150px; background-color: rgb(245, 170, 140); border: 2px solid rgb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; position: absolute; margin: 0; background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.7); width: 3em; height: 18px; padding: 2px; text-align: center; } .topleft { left: 2px; top: 2px; } .topright { right: 2px; top: 2px; } .bottomleft { bottom: 2px; left: 2px; } .bottomright { bottom: 2px; right: 2px; } let observers = []; startup = () => { let wrapper = document.queryselector(".wrapper"); // options for the obser...
MediaDevices.enumerateDevices() - Web APIs
it simply outputs a list of the device ids, with their labels if available.
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= or if one or more mediastreams are active or persistent permissions are granted: videoinput: facetime hd camera (built-in) id=cso9c0y...
MediaDevices.ondevicechange - Web APIs
it displays in the browser window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an input or an output device.
... function updatedevicelist() { navigator.mediadevices.enumeratedevices() .then(function(devices) { audiolist.innerhtml = ""; videolist.innerhtml = ""; devices.foreach(function(device) { let elem = document.createelement("li"); let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i); elem.innerhtml = "<strong>" + device.label + "</strong> (" + direction + ")"; if (type === "audio") { audiolist.appendchild(elem); } else if (type === "video") { videolist.appendchild(elem); } }); }); } updatedevicelist() consists entirely of a call to the function enumeratedevices() on the mediadevices object referenced in the navigator.mediadevices property, as well as the code that's run when th...
MediaStream.onaddtrack - Web APIs
example this example adds a listener which, when a new track is added to the stream, appends a new item to a list of tracks; the new item shows the track's kind ("audio" or "video") and label.
... stream.onaddtrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onaddtrack' in that specification.
MediaStreamTrack - Web APIs
mediastreamtrack.label read only returns a domstring containing a user agent-assigned label that identifies the track source, as in "internal microphone".
...when the track is deassociated from its source, the label is not changed.
Using the Media Capabilities API - Web APIs
navigator.mediacapabilities.decodinginfo(videoconfiguration).then( console.log('it worked') ).catch(error => console.log('it failed: ' + error) ); media capabilities live example css li { margin : 1em; } html <form> <p>select your video configuration and find out if this browser supports the codec, and whether decoding will be smooth and power efficient:</p> <ul> <li> <label for="codec">select a codec</label> <select id="codec"> <option>video/webm; codecs=vp8</option> <option>video/webm; codecs=vp9</option> <option>video/mp4; codecs=avc1</option> <option>video/mp4; codecs=avc1.420034</option> <option>video/ogg; codecs=theora</option> <option>invalid</option> </select> </li> <li> <label for="size">select a size</labe...
...l> <select id="size"> <option>7680x4320</option> <option>3840x2160</option> <option>2560x1440</option> <option>1920x1080</option> <option>1280x720</option> <option selected>800x600</option> <option>640x480</option> <option>320x240</option> <option value=" x ">none</option> </select> </li> <li> <label for="framerate">select a framerate</label> <select id="framerate"> <option>60</option> <option>50</option> <option>30</option> <option>24</option> <option selected>15</option> </select> </li> <li> <label for="bitrate">select a bitrate</label> <select id="bitrate"> <option>4000</option> <option>2500</option> <option>800</option> </select> </li> </ul> <...
ParentNode.replaceChildren() - Web APIs
this html might look something like this: <h2>party food option list</h2> <main> <div> <label for="no">no thanks!</label> <select id="no" multiple size="10"> <option>apples</option> <option>oranges</option> <option>grapes</option> <option>bananas</option> <option>kiwi fruits</option> <option>chocolate cookies</option> <option>peanut cookies</option> <option>chocolate bars</option> <option>ham sandwiches</option> <option>chee...
... cream</option> <option>jelly</option> <option>carrot sticks and houmous</option> <option>margherita pizza</option> <option>pepperoni pizza</option> <option>vegan veggie pizza</option> </select> </div> <div class="buttons"> <button id="to-yes">transfer to "yes" --&gt;</button> <button id="to-no">&lt;-- transfer to "no"</button> </div> <div> <label for="yes">yes please!</label> <select id="yes" multiple size="10"> </select> </div> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; } div { margin-right: 20px; } label, button { display: block; } .buttons { display: flex; flex-flow: column;...
PaymentRequest.onshippingoptionchange - Web APIs
var request = new paymentrequest(supportedinstruments, details, options); // when user selects a shipping address request.addeventlistener('shippingaddresschange', e => { e.updatewith(((details, addr) => { var shippingoption = { id: '', label: '', amount: { currency: 'usd', value: '0.00' }, selected: true }; // shipping to us is supported if (addr.country === 'us') { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '0.00'; details.total.amount.value = '55.00'; // shipping to jp is supported } else if (addr.country === 'jp')...
... { shippingoption.id = 'jp'; shippingoption.label = 'international shipping'; shippingoption.amount.value = '10.00'; details.total.amount.value = '65.00'; // shipping to elsewhere is unsupported } else { // empty array indicates rejection of the address details.shippingoptions = []; return promise.resolve(details); console.log(details.error); } // hardcode for simplicity if (details.displayitems.length === 2) { details.displayitems[2] = shippingoption; } else { details.displayitems.push(shippingoption); } details.shippingoptions = [shippingoption]; return promise.resolve(details); })(details, request.shippingaddress)); }); specifications specification status comment paym...
PaymentRequest: shippingoptionchange event - Web APIs
paymentrequest.addeventlistener("shippingoptionchange", event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }, false); after caling a custom function, calculatenewtotal(), to compute the updated total based on the newly-selected shipping option as specified by the shippingoption.
... you can also create an event handler for shippingoptionchange using its corresponding event handler property, onshippingoptionchange: paymentrequest.onshippingoptionchange = event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }; specifications specification status comment payment request apithe definition of 'shippingoptionchange' in that specification.
PaymentRequest.show() - Web APIs
const initialdetails = { total: { label: "total", amount: { value: "0", currency: "aud" }, }, }; const request = new paymentrequest(methods, initialdetails, options); // check if the the user supports the `methods` if (!await request.canmakepayment()) { return; // no, so use a web form instead.
... } // let's update the total as the sheet is shown const updateddetails = { total: { label: "total", amount: { value: "20", currency: "aud" }, }, }; const response = await request.show(updateddetails); // check response, etc...
RTCDataChannel - Web APIs
of data currently queued to be sent over the data channel.bufferedamountlowthreshold the rtcdatachannel property bufferedamountlowthreshold is used to specify the number of bytes of buffered outgoing data that is considered "low." the default value is 0.id read only the read-only rtcdatachannel property id returns an id number (between 0 and 65,534) which uniquely identifies the rtcdatachannel.label read only the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel.
... these labels are not required to be unique.maxpacketlifetime read only the read-only rtcdatachannel property maxpacketlifetime returns the amount of time, in milliseconds, the browser is allowed to take to attempt to transmit a message, as set when the data channel was created, or null.maxretransmits read only the read-only rtcdatachannel property maxretransmits returns the maximum number of times the browser should try to retransmit a message before giving up, as set when the data channel was created, or null, which indicates that there is no maximum.negotiated read only the read-only rtcdatachannel property negotiated indicates whether the rtcdatachannel's connection was negotiated by the web app (true) or by the webrtc layer (false).ordered read only the read-only rtcdatachannel prope...
StorageEstimate.quota - Web APIs
html content <label> you’re currently using about <output id="percent"> </output>% of your available storage.
... </label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status comment storagethe definition of 'quota' in that specification.
StorageEstimate.usage - Web APIs
html content <label> you’re currently using about <output id="percent"> </output>% of your available storage.
... </label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status comment storagethe definition of 'usage' in that specification.
StorageManager.estimate() - Web APIs
html content <label> you’re currently using about <output id="percent"> </output>% of your available storage.
... </label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status comment storagethe definition of 'estimate()' in that specification.
TextEncoder() - Web APIs
syntax encoder = new textencoder(); parameters textencoder() takes no parameters since firefox 48 and chrome 53 note: prior to firefox 48 and chrome 53, an encoding type label was accepted as a paramer to the textencoder object, since then both browers have removed support for any encoder type other than utf-8, to match the spec.
... any type label passed into the textencoder constructor will now be ignored and a utf-8 textencoder will be created.
TrackDefault.TrackDefault() - Web APIs
syntax var trackdefault = new trackdefault(type, language, label, kinds, bytestreamtrackid); parameters type a domstring specifying a media segment data type for the sourcebuffer to contain.
... label a domstring specifying a default label for the sourcebuffer to use when an initialization segment does not contain label information for a new track.
TrackDefault - Web APIs
the trackdefault interface provides a sourcebuffer with kind, label, and language information for tracks that do not contain this information in the initialization segments of a media chunk.
... trackdefault.label read only returns the default label to use when an initialization segment does not contain label information for a new track.
ValidityState.patternMismatch - Web APIs
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.
WebGL model view projection - Web APIs
there is no letter after z, so by convention this fourth dimension is labeled w.
... the results view on jsfiddle relating the coordinate systems at this point it would be beneficial to take a step back and look at and label the various coordinate systems we use.
Using IIR filters - Web APIs
first, the html: <button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button> the filter button's click handler then connects the iirfilter up to the graph, between the source and the detination: filterbutton.addeventlistener('click', function() { if (this.dataset.filteron === 'false') { srcnode.disconnect(audioctx.destination); srcnode.connect(iirfilter).connect(audioctx.destination); ...
...height); // set up some spacing based on size const spacing = width/16; const fontsize = math.floor(spacing/1.5); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = fontsize+'px sans-serif'; canvasctx.fillstyle = 'grey'; canvasctx.filltext('1', spacing-fontsize, spacing+fontsize); canvasctx.filltext('g', spacing-fontsize, (height-spacing+fontsize)/2); canvasctx.filltext('0', spacing-fontsize, height-spacing+fontsize); canvasctx.filltext('hz', width/2, height-spacing+fontsize); canvasctx.filltext('20k', width-spacing, height-spacing+fontsize...
Using the slider role - Accessibility
<label for="fader">volume</label> <input type="range" id="fader" min="1" max="100" value="50" step="1" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" oninput="outputupdate(value)"> <output for="fader" id="volume">50</output> the following code snippet allows you to return the output as it is updated by user input: function outputupdate(vol) { document.queryselector('#vol...
... <label id="day-label">days</label> <div class="day-slider"> <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-label" aria-valuemin="1" aria-valuemax="7" aria-valuenow="2" aria-valuetext="monday"> </div> </div> the code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes: var daynames = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "...
Using ARIA: Roles, states, and properties - Accessibility
ar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes ...
...aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage aria-flowto aria-labelledby aria-owns aria-posinset aria-rowcount aria-rowindex aria-rowspan aria-setsize microsoftedge-specific properties x-ms-aria-flowfrom ...
ARIA: cell role - Accessibility
examples <div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none" aria-rowindex="1">aria role</span> <span role="columnheader" aria-sort="none" aria-rowindex="1">semantic element...
... <table role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <caption id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</caption> <thead role="rowgroup"> <tr role="row"> <th role="columnheader" aria-sort="none" aria-rowindex="1">aria role</th> <th role="columnheader" aria-sort="none" aria-rowindex="...
:active - CSS: Cascading Style Sheets
WebCSS:active
other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>.
...</p> css a:link { color: blue; } /* unvisited links */ a:visited { color: purple; } /* visited links */ a:hover { background: yellow; } /* hovered links */ a:active { color: red; } /* active links */ p:active { background: #eee; } /* active paragraphs */ result active form elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </form> css form :active { color: red; } form button { background: white; } result specifications specification status comment html living standardthe definition of ':active' in that specification.
:indeterminate - CSS: Cascading Style Sheets
lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields.
... html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specifications specification status comment html living standardthe definition of ':indeterminate' in that specification.
:valid - CSS: Cascading Style Sheets
WebCSS:valid
syntax :valid examples indicating valid and invalid form fields in this example, we use structures like this, which include extra <span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } inp...
... note: we've used ::before to add these labels, as we were already using ::after for the "required" labels.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
you could add a label or icon to the left as easily as we popped the button onto the right.
... i have added a label, and other than some styling for background colour i didn’t need to change the layout.
Mozilla CSS extensions - CSS: Cascading Style Sheets
duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-but...
...ton-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdow...
<length> - CSS: Cascading Style Sheets
WebCSSlength
html <div class="outer"> <div class="input-container"> <label>enter width:</label> <input type="text" id="length"> </div> <div class="inner"> </div> </div> <div class="results"> </div> css html { font-family: sans-serif; font-weight: bold; box-sizing: border-box; } .outer { width: 100%; height: 50px; background-color: #eee; position: relative; } .inner { height: 50px; background-color: #999; box-shadow: inset 3px 3px 5px r...
... 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); background-color: orange; display: flex; align-items: center; margin-top: 10px; } .result code { position: absolute; margin-left: 20px; } .results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const resultsdiv = document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem...
Rich-Text Editing in Mozilla - Developer guides
ml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</op...
...laaaaaawabyaaawn4ceozgmeakqubgsuspvbsyfjjvds6njlb0khr4akbcmfscgbqaocwjf5gwquvyksfbwze+awibv0ghfog2ewidchjwriqo9e2fx4xd5r+b0ddaenbxbhbhn2dgwdaqfjjyvhcqyrfgoidgiqjawtcqmriwwmfgicnvcaaamoak+blaortluyt7i5uiuhads=" /> </div> <div id="textbox" contenteditable="true"><p>lorem ipsum</p></div> <p id="editmode"><input type="checkbox" name="switchmode" id="switchbox" onchange="setdocmode(this.checked);" /> <label for="switchbox">show html</label></p> <p><input type="submit" value="send" /></p> </form> </body> </html> note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
Making content editable - Developer guides
ml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</op...
...laaaaaawabyaaawn4ceozgmeakqubgsuspvbsyfjjvds6njlb0khr4akbcmfscgbqaocwjf5gwquvyksfbwze+awibv0ghfog2ewidchjwriqo9e2fx4xd5r+b0ddaenbxbhbhn2dgwdaqfjjyvhcqyrfgoidgiqjawtcqmriwwmfgicnvcaaamoak+blaortluyt7i5uiuhads=" /> </div> <div id="textbox" contenteditable="true"><p>lorem ipsum</p></div> <p id="editmode"><input type="checkbox" name="switchmode" id="switchbox" onchange="setdocmode(this.checked);" /> <label for="switchbox">show html</label></p> <p><input type="submit" value="send" /></p> </form> </body> </html> note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
Constraint validation - Developer guides
as an example, we will add a script checking the constraint validation for this simple form: <form> <label for="zip">zip : </label> <input type="text" id="zip"> <label for="country">country : </label> <select id="country"> <option value="ch">switzerland</option> <option value="fr">france</option> <option value="de">germany</option> <option value="nl">the netherlands</option> </select> <input type="submit" value="validate"> </form> this displays the followin...
... here is the html part: <label for="fs">select a file smaller than 75 kb : </label> <input type="file" id="fs"> this displays: the javascript reads the file selected, uses the file.size() method to get its size, compares it to the (hard coded) limit, and calls the constraint api to inform the browser if there is a violation: function checkfilesize() { var fs = document.getelementbyid("fs"); var files = fs.files; //...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
html the html here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we'll output some text from our javascript code.
... <div id="box"> <label for="colorpicker">border color:</label> <input type="color" value="#8888ff" id="colorpicker"> <p id="output"></p> </div> css the css simply establishes a size for the box and some basic styling for appearances.
disabled - HTML: Hypertext Markup Language
<fieldset> <legend>checkboxes</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="radio" value="disabled" ...
...disabled> disabled </label></p> </fieldset> <p> <label>select an option: <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option> <option disabled>option 2.2</option> <option>option 2.3</option> </optgroup> <optgroup label="group 3" disabled> <option>disabled 3.1</option> <option>disabled 3.2</option> <option>disabled 3.3</option> </optgroup> </select> </label> </p> <fieldset disabled> <legend>disabled fieldset</legend> <p> <label>name: <input type="name" name="radio" value="regular"> regular </label> </p> <p> <label>number: <input type="number"></label> </p> </fieldset> specifications specification status comm...
HTML attribute: readonly - HTML: Hypertext Markup Language
example html <div class="group"> <input type="textbox" value="some value" readonly="readonly"/> <label>textbox</label> </div> <div class="group"> <input type="date" value="2020-01-01" readonly="readonly"/> <label>date</label> </div> <div class="group"> <input type="email" value="some value" readonly="readonly"/> <label>email</label> </div> <div class="group"> <input type="password" value="some value" readonly="readonly"/> <label>password</label> </div> <div class="group"> <textarea r...
...eadonly="readonly">some value</textarea> <label>message</label> </div> result examples <fieldset> <legend>checkboxes buttons</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="radio" value="readonly" readonly> readonly </label></p> <p><label> <input type="radio" name="radio" value="disabled" disabled> disabled </label></p> </fieldset...
HTML attribute: step - HTML: Hypertext Markup Language
WebHTMLAttributesstep
providing instructions within the <label> may be sufficient.
... if providing instructions outside of labels, which allows more flexible positioning and design, consider using aria-labelledby or aria-describedby.
<command>: The HTML Command element - HTML: Hypertext Markup Language
WebHTMLElementcommand
label the name of the command as shown to the user.
... examples <command type="command" label="save" icon="icons/save.png" onclick="save()"> specifications specification status comment html5the definition of '<command>' in that specification.
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
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>titl...
...e</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.
<frame> - HTML: Hypertext Markup Language
WebHTMLElementframe
name this attribute is used for labeling frames.
... without labeling, every link will open in the frame that it’s in – the closest parent frame.
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
the edit form's html might look a little bit like this: <form> <div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post.
... </textarea> </div> <div> <button type="submit">update post</button> </div> <input type="hidden" id="postid" name="postid" value="34657"> </form> let's also add some simple css: html { font-family: sans-serif; } form { width: 500px; } div { display: flex; margin-bottom: 10px; } label { flex: 2; line-height: 2; text-align: right; padding-right: 20px; } input, textarea { flex: 7; font-family: sans-serif; font-size: 1.1rem; padding: 5px; } textarea { height: 60px; } the server would set the value of the hidden input with the id "postid" to the id of the post in its database before sending the form to the user's browser and would use that information when the form is returned to know which database record to update with modified...
<isindex> - HTML: Hypertext Markup Language
WebHTMLElementisindex
example <head> <isindex prompt="search document..." action="/search"> </head> in past browsers, this would generate, at parse time, a dom tree equivalent to the following html: <form action="/search"> <hr> <label> search document...
... <input name="isindex"> </label> <hr> </form> history on june 1992, dan connolly would prefer a different anchor type instead of isindex.
<optgroup> - HTML: Hypertext Markup Language
WebHTMLElementoptgroup
label the name of the group of options, which the browser can use when labeling the options in the user interface.
... examples <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option> <option>option 2.2</option> </optgroup> <optgroup label="group 3" disabled> <option>option 3.1</option> <option>option 3.2</option> <option>option 3.3</option> </optgroup> </select> result specifications specification status comment html living standardthe definition of '<optgroup>' in that specification.
<option>: The HTML Option element - HTML: Hypertext Markup Language
WebHTMLElementoption
label this attribute is text for the label indicating the meaning of the option.
... if the label attribute isn't defined, its value is that of the element text content.
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
WebHTMLElementpre
a combination of the <figure> and <figcaption> elements, supplemented by a combination of an id and the aria role and aria-labelledby attributes allow the preformatted text to be announced as an image, with the figcaption serving as the image's alternate description.
... example <figure role="img" aria-labelledby="cow-caption"> <pre> ___________________________ < i'm an expert in my field.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
WebHTMLElementstrong
another accepted use for <strong> is to denote the labels of paragraphs which represent notes or warnings within the text of a page.
... examples basic example <p>before proceeding, <strong>make sure you put on your safety goggles</strong>.</p> the resulting output: labeling warnings <p><strong>important:</strong> before proceeding, make sure you add plenty of butter.</p> this results in: specifications specification status comment html living standardthe definition of '<strong>' in that specification.
contextmenu - HTML: Hypertext Markup Language
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 specific list element, you can change the size of the text by using the "increase/decrease font" actions from your context menu </li> <menu type="context" id="changefont"> <menuitem label="increase font" onclick="incfont()"></menuitem> <menuitem label="decrease font" onclick="decfont()"></menuitem> </menu> <li contextmenu="changeimage" id="changeimage"> on the image below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" onclick="changeimage()"></me...
<mtable> - MathML
WebMathMLElementmtable
unimplemented minlabelspacing a length value specifing the minimum space between a label and the adjacent cell in the row.
... unimplemented side specifies the position where <mlabeledtr> label elements should be placed.
MathML element reference - MathML
entation elements a to z math <math> (top-level element) a <maction> (binded actions to sub-expressions) <maligngroup> (alignment group) <malignmark> (alignment points) e <menclose> (enclosed contents) <merror> (enclosed syntax error messages) f <mfenced> (parentheses) <mfrac> (fraction) g <mglyph> (displaying non-standard symbols) i <mi> (identifier) l <mlabeledtr> (labeled row in a table or a matrix) <mlongdiv> (long division notation) m <mmultiscripts> (prescripts and tensor indices) n <mn> (number) o <mo> (operator) <mover> (overscript) p <mpadded> (space around content) <mphantom> (invisible content with reserved space) r <mroot> (radical with specified index) <mrow> (grouped sub-expressions) s <ms> (string literal...
...p-level elements <math> token elements <mglyph> <mi> <mn> <mo> <ms> <mspace> <mtext> general layout <menclose> <merror> <mfenced> <mfrac> <mpadded> <mphantom> <mroot> <mrow> <msqrt> <mstyle> script and limit elements <mmultiscripts> <mover> <mprescripts> <msub> <msubsup> <msup> <munder> <munderover> <none> tabular math <maligngroup> <malignmark> <mlabeledtr> <mtable> <mtd> <mtr> elementary math <mlongdiv> <mscarries> <mscarry> <msgroup> <msline> <msrow> <mstack> uncategorized elements <maction> semantic annotations <annotation> <annotation-xml> <semantics> ...
Certificate Transparency - Web security
nodes are labelled with the cryptographic hashes of their child nodes.
...the label of the root node therefore depends on all other nodes in the tree.
Cross-domain Content Scripts - Archive of obsolete content
n which shows the panel when it is clicked // main.js var data = require("sdk/self").data; var forecast_panel = require("sdk/panel").panel({ height: 50, contenturl: data.url("panel.html"), contentscriptfile: data.url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just includes a <div> block for the forecast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url ...
Reddit Example - Archive of obsolete content
this is the complete add-on script: var data = require("sdk/self").data; var button = require("sdk/ui/button/action").actionbutton({ id: "reddit-panel", label: "reddit panel", icon: "./icon-16.png", onclick: function() { reddit_panel.show(); } }); var reddit_panel = require("sdk/panel").panel({ width: 240, height: 320, contenturl: "http://www.reddit.com/.mobile?keep_extension=true", contentscriptfile: [data.url("jquery-2.1.0.min.js"), data.url("panel.js")] }); reddit_panel.port.on("click", function(url) { req...
port - Archive of obsolete content
the button sends the content script a message called "get-first-para" when it is clicked: // main.js pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script listens for "get-first-para".
Communicating using "port" - Archive of obsolete content
the button sends the content script a message called "get-first-para" when it is clicked: pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script "listener.js" listens for "get-first-para".
page-mod - Archive of obsolete content
the following add-on creates a button which, when clicked, highlights all the div elements in the document loaded into the active tab: require("sdk/ui/button/action").actionbutton({ id: "highlight-divs", label: "highlight divs", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'var divs = document.getelementsbytagname("div");' + 'for (var i = 0; i < divs.length; ++i) {' + 'divs[i].setattribute("style", "border: solid red 1px;");' + '}' }); } }); to run this example you'll also have to have an icon f...
passwords - Archive of obsolete content
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 porti...
tabs - Archive of obsolete content
the stylesheet is called "style.css" and is located in the add-on's "data" directory: var tabs = require("sdk/tabs"); var { attach, detach } = require('sdk/content/mod'); var { style } = require('sdk/stylesheet/style'); var { togglebutton } = require("sdk/ui/button/toggle"); var style = style({ uri: './style.css' }); var button = togglebutton({ id: "stylist", label: "stylist", icon: "./icon-16.png", onchange: function(state) { if (state.checked) { attach(style, tabs.activetab); } else { detach(style, tabs.activetab); } } }); private windows if your add-on has not opted into private browsing, then you won't see any tabs that are hosted by private browser windows.
windows - Archive of obsolete content
} }); returns the window that was opened: var windows = require("sdk/windows").browserwindows; var example = windows.open("http://www.example.com"); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { example.close(); } }); this example uses the action button api, which is only available from firefox 29 onwards.
Adding a Button to the Toolbar - Archive of obsolete content
mkdir data and save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png then open the file called "index.js" in the root of your addon directory and add the following code to it: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } now run the add-on with jpm run.
Implementing the widget - Archive of obsolete content
main.js now in the lib directory open main.js and add the following code: var widgets = require('sdk/widget'); var data = require('sdk/self').data; var annotatorison = false; function toggleactivation() { annotatorison = !annotatorison; return annotatorison; } exports.main = function() { var widget = widgets.widget({ id: 'toggle-switch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: data.url('widget/widget.js') }); widget.port.on('left-click', function() { console.log('activate/deactivate'); widget.contenturl = toggleactivation() ?
Storing annotations - Archive of obsolete content
finally we need to connect this to the widget's right-click message: var widget = widgets.widget({ id: 'toggle-switch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: data.url('widget/widget.js') }); widget.port.on('left-click', function() { console.log('activate/deactivate'); widget.contenturl = toggleactivation() ?
Display a Popup - Archive of obsolete content
var text_entry = 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.
Unit Testing - Archive of obsolete content
to show the module in use, edit the "index.js" file as follows: var base64 = require("./base64"); var button = require("sdk/ui/button/action").actionbutton({ id: "base64", label: "base64", icon: "./icon-16.png", onclick: function() { encoded = base64.btoa("hello"); console.log(encoded); decoded = base64.atob(encoded); console.log(decoded); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-ons "data" directory.
Using third-party modules (jpm) - Archive of obsolete content
open "index.js" and replace it with this: var menuitems = require("menuitem"); var menuitem = menuitems.menuitem({ id: "clickme", menuid: "menu_toolspopup", label: "click me!", oncommand: function() { console.log("clicked"); }, insertbefore: "menu_pageinfo" }); now run the add-on: jpm run -b nightly you should see a new menu item in the tools menu labeled "click me!".
Embedding SVG - Archive of obsolete content
3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <vbox> <label value="hello"/> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <label value="world"/> </vbox> </window> ...
Examples and demos from articles - Archive of obsolete content
in this demo there is also an example of a "toggle button" rendered through a <label> element.
QuerySelector - Archive of obsolete content
= function (selector) { // only for html return this.queryselector(selector); }; example: <h1>test!</h1> <script> htmldocument.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.$('h1')); // [object htmlheadingelement] </script> xuldocument.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; example: <label value="test!"/> <script type="text/javascript"><![cdata[ xuldocument.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; alert(document.$('label')); // [object xulelement] ]]></script> document.prototype.$ = function (selector) { // only for plain xml return this.queryselector(selector); }; var foo = document.implementation.createdocument('somens'...
Code snippets - Archive of obsolete content
ervice svg general general information and utilities svg animation animate svg using javascript and smil svg interacting with script using javascript and dom events to create interactive svg embedding svg in html and xul using svg to enhance html or xul based markup xul widgets html in xul for rich tooltips dynamically embed html into a xul element to attain markup in a tooltip label and description special uses and line breaking examples tree setup and manipulation of trees using xul and js scrollbar changing style of scrollbars.
Extension Etiquette - Archive of obsolete content
for a large number of options for your extension, break the options window into multiple pages (tabs) that are well labeled.
How to convert an overlay extension to restartless - Archive of obsolete content
panel({'id': 'thepanel', 'type': 'arrow'}, hbox({'align': 'start'}, vbox( hbox({'class': 'pixel-hbox'}, description({'value': this.stringbundle.getstringfromname('firexpixel.opacity')}), htmlinput({'id': 'opacity-range', 'type': 'range', 'min': '0', 'max': '10'}) ), hbox({'id': 'pixel-coords', 'class': 'pixel-hbox'}, label({'control': 'coord-x', 'value': 'x:'}), textbox({'id': 'coord-x', 'class': 'coord-box', 'placeholder' : '0'}), label({'control': 'coord-y', 'value': 'y:'}), textbox({'id': 'coord-y', 'class': 'coord-box', 'placeholder': '0'}) ...
Interaction between privileged and non-privileged pages - Archive of obsolete content
ull; function onload() { var iframe = document.getelementbyid("contentiframe"); targetdoc = iframe.contentdocument; iframe.contentwindow.addeventlistener("newstuff", receivestufffrompage, false); } function receivestufffrompage(event) { var uc = geteventdata(event); // uc = unchecked data in form of e4x xml var stuff = {}; stuff.id = sanitize.integer(uc.@id); stuff.name = sanitize.label(uc.@name); } function sendsomethingtopage (something) { var somethingxml = <something/>; // |something| object as e4x xml somethingxml.@id = something.id; somethingxml.@weight = something.weight; sendmsg("sendsomething", somethingxml); } /** * send msgs from chrome to the page * @param type {string} the event type.
Connecting to Remote Content - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <xsl:template match="/data"> <xul:vbox> <xsl:for-each select="shops/name"> <xul:hbox> <xul:label value="name:" /> <xul:label> <xsl:value-of select="." /> </xul:label> </xul:hbox> </xsl:for-each> <xul:hbox> <xul:label value="total:" /> <xul:label> <xsl:value-of select="total" /> </xul:label> </xul:hbox> </xul:vbox> </xsl:template> </xsl:stylesheet> next you need to read the xslt stylesheet as a...
Getting Started with Firefox Extensions - Archive of obsolete content
there's a new menu on the main menu, labeled "hello world!".
JavaScript Object Management - Archive of obsolete content