nsISelectionPrivate
dom/base/nsiselectionprivate.idlscriptable internal support for content selection handling.
... method overview void addselectionlistener(in nsiselectionlistener newlistener); void endbatchchanges(); void getcachedframeoffset(in nsiframe aframe, in print32 inoffset, in nspointref apoint); native code only!
... nsienumerator getenumerator(); nsframeselection getframeselection(); native code only!
...And 18 more matches

Element.querySelectorAll() - Web APIs
the element method queryselectorall() returns a static (not live) nodelist representing a list of elements matching the specified group of selectors which are descendants of the element on which the method was called.
... note: this method is implemented based on the parentnode mixin's queryselectorall() method.
... syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to match against.
...And 18 more matches

selection - Archive of obsolete content
get and set text and html selections in the current web page.
... usage registering for selection notifications to be notified when the user makes a selection, register a listener for the "select" event.
... each listener will be called after a selection is made.
...And 16 more matches

Document.querySelectorAll() - Web APIs
the document method queryselectorall() returns a static (not live) nodelist representing a list of the document's elements that match the specified group of selectors.
... note: this method is implemented based on the parentnode mixin's queryselectorall() method.
... syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to match against.
...And 16 more matches

Selection API - Web APIs
the selection api provides functionality for reading and manipulating the range of text selected by the user.
... concepts and usage to retrieve the current text range the user has selected, you can use the window.getselection() or document.getselection() method, storing the return value — a selection object — in a variable for futher use.
... once your selection is in a variable, you perform a variety of operations on it, for example copying the selection to a text string using selection.tostring(), adding a range (as represented by a standard range object) to the selection (or removing one) with selection.addrange()/selection.removerange(), or changing the selection to be the entire contents of a dom node using selection.selectallchildren().
...And 16 more matches

Attribute selectors - Learn web development
in css you can use attribute selectors to target elements with certain attributes.
... this lesson will show you how to use these very useful selectors.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn what attribute selectors are and how to use them.
...And 15 more matches

ParentNode.querySelectorAll() - Web APIs
the parentnode mixin defines the queryselectorall() method as returning a nodelist representing a list of elements matching the specified group of selectors which are descendants of the object on which the method was called.
... if you need only a single result, consider the queryselector() method instead.
... note: this method is implemented as element.queryselectorall(), document.queryselectorall(), and documentfragment.queryselectorall() syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to match against.
...And 15 more matches

CSS selectors - CSS: Cascading Style Sheets
css selectors define the elements to which a set of css rules apply.
... note: there are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.
... basic selectors universal selector selects all elements.
...And 15 more matches

Focus and Selection - Archive of obsolete content
« previousnext » the section will describe how to handle the focus and selection of elements.
...typically, you will use focus and blur events to update parts of the interface as the user selects elements.
... text selection when working with a textbox, you may wish to retrieve not the entire contents of a field but only what the user has selected.
...And 13 more matches

HTMLInputElement.setSelectionRange() - Web APIs
the htmlinputelement.setselectionrange() method sets the start and end positions of the current text selection in an <input> or <textarea> element.
... optionally, in newer browser versions, you can specify the direction in which selection should be considered to have occurred.
... this lets you indicate, for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning.
...And 12 more matches

Document.querySelector() - Web APIs
the document method queryselector() returns the first element within the document that matches the specified selector, or group of selectors.
... syntax element = document.queryselector(selectors); parameters selectors a domstring containing one or more selectors to match.
... this string must be a valid css selector string; if it isn't, a syntax_err exception is thrown.
...And 11 more matches

ParentNode.querySelector() - Web APIs
the parentnode mixin defines the queryselector() method as returning an element representing the first element matching the specified group of selectors which are descendants of the object on which the method was called.
... if you need all the elements matching the selector list, use queryselectorall() instead.
... note: this method is implemented as document.queryselector(), documentfragment.queryselector() and element.queryselector().
...And 11 more matches

Element.querySelector() - Web APIs
the queryselector() method of the element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
... syntax element = baseelement.queryselector(selectors); parameters selectors a group of selectors to match the descendant elements of the element baseelement against; this must be valid css syntax, or a syntaxerror exception will occur.
... the first element found which matches this group of selectors is returned.
...And 10 more matches

Window.getSelection() - Web APIs
the window.getselection() method returns a selection object representing the range of text selected by the user or the current position of the caret.
... syntax selection = window.getselection(); return value a selection object.
... when cast to string, either by appending an empty string ("") or using selection.tostring(), this object returns the text selected.
...And 10 more matches

XForms Select1 Element - Archive of obsolete content
note, some representations of the select1 element do not support visual grouping.
... single-node binding special selection - this attribute, when set to 'open', allows the user to provide free entry to the list.
... incremental - supported, default value is true properties selection - see corresponding attribute incremental - see corresponding attribute type restrictions the select1 element can be bound to a node containing simple content.
...And 9 more matches

DocumentOrShadowRoot.getSelection() - Web APIs
the getselection() property of the documentorshadowroot interface returns a selection object representing the range of text selected by the user, or the current position of the caret.
... syntax var selection = documentorshadowrootinstance.getselection() parameters none.
... returns a selection object.
...And 9 more matches

Selection.setBaseAndExtent() - Web APIs
the setbaseandextent() method of the selection interface sets the selection to be a range including all or parts of two specified dom nodes, and any content located between them.
... syntax sel.setbaseandextent(anchornode,anchoroffset,focusnode,focusoffset) parameters anchornode the node at the start of the selection.
... anchoroffset the number of child nodes from the start of the anchor node that should be excluded from the selection.
...And 8 more matches

user-select - CSS: Cascading Style Sheets
the user-select css property controls whether the user can select text.
... /* keyword values */ user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /* global values */ user-select: inherit; user-select: initial; user-select: unset; /* mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /* webkit-specific values */ -webkit-user-select: none; -webkit-user-select: text; -webkit-user-select: all; /* doesn't work in safari; use only "none" or "text", or else it will allow typing in the <html> container */ /* microsoft-specific values */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element; note: user-select is not an inheri...
... syntax none the text of the element and its sub-elements is not selectable.
...And 8 more matches

Selection - Archive of obsolete content
jetpack's selection api provides a method for detecting the selections made by the user.
... features can get, set, and listen for selection events in html or plain text.
... the namespace for this api is jetpack.selection.
...And 7 more matches

Selection - Archive of obsolete content
jetpack's selection api provides a method for detecting the selections made by the user.
... features can get, set, and listen for selection events in html or plain text.
... the namespace for this api is jetpack.selection.
...And 7 more matches

Selection - Archive of obsolete content
jetpack's selection api provides a method for detecting the selections made by the user.
... features can get, set, and listen for selection events in html or plain text.
... the namespace for this api is jetpack.selection.
...And 7 more matches

XForms Select Element - Archive of obsolete content
introduction allows the user to choose one or more selections from a list of pre-defined items (see the spec).
...note, some representations of the select element do not support visual grouping.
... single-node binding special selection - isn't currently supported.
...And 7 more matches

mozbrowserselectionstatechanged
the mozbrowserselectionstatechanged event is fired when the text selected inside the browser <iframe> content changes.
... details the details property returns an anonymous javascript object with the following properties: rect an object that represents the bounding rectangle of the selection.
... its properties are: width: the width of the selection, in css pixels.
...And 7 more matches

RTCIceTransport.getSelectedCandidatePair() - Web APIs
the rtcicetransport method getselectedcandidatepair() returns an rtcicecandidatepair object containing the current best-choice pair of ice candidates describing the configuration of the endpoints of the transport.
... syntax candidatepair = rtcicetransport.getselectedcandidatepair(); parameters none.
... return value a rtcicecandidatepair object describing the configurations of the currently-selected candidate pair's two endpoints.
...And 7 more matches

Selection.modify() - Web APIs
the selection.modify() method applies a change to the current selection or cursor position, using simple textual commands.
...specify "move" to move the current cursor position or "extend" to extend the current selection.
... direction the direction in which to adjust the current selection.
...And 7 more matches

Selection.rangeCount - Web APIs
the selection.rangecount read-only property returns the number of ranges in the selection.
...after the user clicks on the page, rangecount is 1, even if no selection is visible.
... a user can normally only select one range at a time, so the rangecount will usually be 1.
...And 7 more matches

nsISelection2
content/base/public/nsiselection2.idlscriptable please add a summary to this article.
... 1.0 66 introduced gecko 1.8 obsolete gecko 8.0 inherits from: nsiselection last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) in gecko 8.0 this interface was merged into the nsiselectionprivate interface.
... void scrollintoview(in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent); attributes attribute type description type short returns the type of the selection (see nsiselectioncontroller for available constants).
...And 6 more matches

Locating DOM elements using selectors - Web APIs
the selectors api provides methods that make it quick and easy to retrieve element nodes from the dom by matching against a set of selectors.
... the nodeselector interface this specification adds two new methods to any objects implementing the document, documentfragment, or element interfaces: queryselector() returns the first matching element node within the node's subtree.
... queryselectorall() returns a nodelist containing all matching element nodes within the node's subtree, or an empty nodelist if no matches are found.
...And 6 more matches

HTMLSelectElement.add() - Web APIs
the htmlselectelement.add() method adds an element to the collection of option elements for this select element.
... exceptions a domerror of the type hierarchyrequesterror if the item passed to the method is an ancestor of the htmlselectelement.
... examples creating elements from scratch var sel = document.createelement("select"); var opt1 = document.createelement("option"); var opt2 = document.createelement("option"); opt1.value = "1"; opt1.text = "option: value 1"; opt2.value = "2"; opt2.text = "option: value 2"; sel.add(opt1, null); sel.add(opt2, null); /* produces the following, conceptually: <select> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> */ the before parameter is optional.
...And 6 more matches

Selection.type - Web APIs
the type read-only property of the selection interface returns a domstring describing the type of the current selection.
... syntax value = sel.type value a domstring describing the type of the current selection.
... possible values are: none: no selection has currently been made.
...And 6 more matches

XRSession: selectend event - Web APIs
the webxr event selectend is sent to an xrsession when one of its input sources ends its primary action or when an input source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onselectend for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources.
... examples the following example uses addeventlistener() to establish handlers for the selection events: selectstart, selectend, and select.
...And 6 more matches

XRSession: selectstart event - Web APIs
the webxr event selectstart is sent to an xrsession when the user begins a primary action on one of its input sources.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onselectstart for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources.
... examples the following example uses addeventlistener() to establish handlers for the selection events: selectstart, selectend, and select.
...And 6 more matches

::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
... ::selection { background-color: cyan; } allowable properties only certain css properties can be used with ::selection: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored.
... syntax /* legacy firefox syntax (version 61 and below) */ ::-moz-selection ::selection examples html this text has special styles when you highlight it.
...And 6 more matches

Test your skills: Selectors - Learn web development
the aim of this task is to help you check your understanding of selectors in css.
... selectors one without changing the html, use css to do the following things: make h1 headings blue.
... selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow background.
...And 5 more matches

DocumentFragment.querySelector() - Web APIs
the documentfragment.queryselector() method returns the first element, or null if no matches are found, within the documentfragment (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.
... if the selector matches an id and this id is erroneously used several times in the document, it returns the first matching element.
... if the selectors specified in parameter are invalid a domexception with a syntax_err value is raised.
...And 5 more matches

RTCIceCandidatePairStats.selected - Web APIs
the non-standard, firefox-specific rtcicecandidatepairstats property selected indicates whether or not the candidate pair described by the object is the one currently being used to communicate with the remote peer.
... syntax isselected = icpstats.selected; value a firefox-specific boolean value which is true if the candidate pair described by this object is the one currently in use.
... in any other browser, you can determine the selected candidate pair by looking for a stats object of type transport, which is an rtctransportstats object.
...And 5 more matches

Range.selectNodeContents() - Web APIs
the range.selectnodecontents() method sets the range to contain the contents of a node.
... syntax range.selectnodecontents(referencenode); parameters referencenode the node whose contents will be selected within a range.
... example range = document.createrange(); referencenode = document.getelementsbytagname("div")[0]; range.selectnodecontents(referencenode); live sample this example lets the user select and deselect a paragraph with buttons.
...And 5 more matches

Selection.containsNode() - Web APIs
the selection.containsnode() method indicates whether a specfied node is part of the selection.
... syntax sel.containsnode(node, partialcontainment) parameters node the node that is being looked for in the selection.
... partialcontainment optional when true, containsnode() returns true when a part of the node is part of the selection.
...And 5 more matches

Selector list - CSS: Cascading Style Sheets
the css selector list (,) selects all the matching nodes.
... /* selects all matching elements */ span, div { border: red 2px solid; } to reduce the size of style sheets, one can group selectors in comma-separated lists.
... syntax element, element, element { style properties } examples single line grouping grouping selectors in a single line using a comma-separated lists.
...And 5 more matches

-ms-touch-select - Archive of obsolete content
the -ms-touch-select css property is a microsoft extension that toggles the gripper visual elements that enable touch text selection.
...in addition, selection will start even if an onclick, onmsgesturetap, or onmouseup handler is present.
... none the grippers are always off and default touch selection functionality is not provided.
...And 4 more matches

Select an element - Firefox Developer Tools
the selected element is the element in the page that the inspector is currently focused on.
... the selected element is shown in the html pane and its css is displayed in the css pane.
... the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
...And 4 more matches

HTMLSelectElement.type - Web APIs
the htmlselectelement.type read-only property returns the form control's type.
... syntax var str = selectelt.type; the possible values are: "select-multiple" if multiple values can be selected.
... "select-one" if only one value can be selected.
...And 4 more matches

Selection.toString() - Web APIs
the selection.tostring() method returns a string currently being represented by the selection object, i.e.
... the currently selected text.
... syntax sel.tostring() return value a string representing the selection.
...And 4 more matches

QuerySelector - Archive of obsolete content
along the lines of other frameworks such as jquery or prototype, shortening the "queryselector" name can be convenient: function $ (selector, el) { if (!el) {el = document;} return el.queryselector(selector); } function $$ (selector, el) { if (!el) {el = document;} return el.queryselectorall(selector); // note: the returned object is a nodelist.
... // if you'd like to convert it to a array for convenience, use this instead: // return array.prototype.slice.call(el.queryselectorall(selector)); } alert($('#myid').id); (note that while using the firefox web console, the above functions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to add chromewindow.prototype or window.prototype, accessing this.document.queryselector, or following the jquery style of chaining by returning 'this' within each prototype method of $()): htmldocument.prototype.$ = 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', 'foo', null); // create an xml document <foo xmlns="somens"/> var bar = foo.createelementns('somens', 'bar'); // add <bar xmlns="somens"/> foo.documentelement.appendchild(bar); alert(foo.$('bar').nodename);...
...And 3 more matches

nsISelection3
content/base/public/nsiselection3.idlscriptable please add a summary to this article.
... 1.0 66 introduced gecko 2.0 obsolete gecko 8.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko 8.0 this interface was merged into the nsiselection interface.
... method overview void modify(in domstring alter, in domstring direction, in domstring granularity); methods modify() modifies the selection.
...And 3 more matches

Select and highlight elements - Firefox Developer Tools
the selected element is the element in the page that the inspector is currently focused on.
... the selected element is shown in the html pane and its css is displayed in the css pane.
... the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
...And 3 more matches

HTMLSelectElement.remove() - Web APIs
the htmlselectelement.remove() method removes the element at the specified index from the options collection for this select element.
... example var sel = document.getelementbyid("existinglist"); sel.remove(1); /* takes the existing following select object: <select id="existinglist" name="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> and changes it to: <select id="existinglist" name="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> </select> */ specifications specification status comment html living standardthe definit...
...ion of 'htmlselectelement.remove()' in that specification.
...And 3 more matches

Selection.focusNode - Web APIs
the selection.focusnode read-only property returns the node in which the selection ends.
... a user may make a selection from left to right (in document order) or right to left (reverse of document order).
... the focus is where the user ended the selection.
...And 3 more matches

XRSession: select event - Web APIs
the webxr event select is sent to an xrsession when one of the session's input sources has completed a primary action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onselect for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources.
... examples the following example uses addeventlistener() to set up a handler for the select event.
...And 3 more matches

Attribute selectors - CSS: Cascading Style Sheets
the css attribute selector matches elements based on the presence or value of a given attribute.
...g="en-us en-gb en-au en-nz">hello world!</div> <div lang="pt">olá mundo!</div> <div lang="zh-cn">世界您好！</div> <div lang="zh-tw">世界您好！</div> <div data-lang="zh-tw">世界您好！</div> result html ordered lists the html specification requires the type attribute to be matched case-insensitively due to it primarily being used in the <input> element, trying to use attribute selectors to with the type attribute of an ordered list doesn't work without the case-sensitive modifier.
...*/ ol[type="a"] { list-style-type: lower-alpha; background: red; } ol[type="a" s] { list-style-type: lower-alpha; background: lime; } ol[type="a" s] { list-style-type: upper-alpha; background: lime; } html <ol type="a"> <li>example list</li> </ol> result specifications specification status comment selectors level 4the definition of 'attribute selectors' in that specification.
...And 3 more matches

Class selectors - CSS: Cascading Style Sheets
the css class selector matches elements based on the contents of their class attribute.
...ss="spacious" */ .spacious { margin: 2em; } /* all <li> elements with class="spacious" */ li.spacious { margin: 2em; } /* all <li> elements with a class list that includes both "spacious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> ...
...<p>this is just a regular paragraph.</p> result specifications specification status comment selectors level 4the definition of 'class selectors' in that specification.
...And 3 more matches

ID selectors - CSS: Cascading Style Sheets
the css id selector matches an element based on the value of the element’s id attribute.
... in order for the element to be selected, its id attribute must match exactly the value given in the selector.
... /* the element with id="demo" */ #demo { border: red 2px solid; } syntax #id_value { style properties } note that syntactically (but not specificity-wise), this is equivalent to the following attribute selector: [id=id_value] { style properties } examples css #identified { background-color: skyblue; } html <div id="identified">this div has a special id on it!</div> <div>this is just a regular div.</div> result specifications specification status comment selectors level 4the definition of 'id selectors' in that specification.
...And 3 more matches

Type selectors - CSS: Cascading Style Sheets
the css type selector matches elements by node name.
... in other words, it selects all elements of the given type within a document.
...*/ a { color: red; } syntax element { style properties } examples css span { background-color: skyblue; } html <span>here's a span with some text.</span> <p>here's a p with some text.</p> <span>here's a span with more text.</span> result specifications specification status comment selectors level 4the definition of 'type (tag name) selector' in that specification.
...And 3 more matches

visuallyselected - Archive of obsolete content
« xul reference home visuallyselected type: boolean new in firefox 40.
... indicates that a tab is selected.
... the visuallyselected attribute is set asynchronously, once the browser has switched to the selected tab.
...And 2 more matches

selectedItem - Archive of obsolete content
« xul reference selecteditem type: element holds the currently selected item.
... if no item is currently selected, this value will be null.
... you can select an item by setting this value.
...And 2 more matches

CSSStyleRule.selectorText - Web APIs
the cssrule.selectortext property gets the textual representation of the selector for the rule set.
... syntax string = cssrule.selectortext example // for cssrule: body { background-color: darkblue; } var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].selectortext); // body notes the implementation may have stripped out insignificant whitespace while parsing the selector.
... if set to a selector string which cannot be parsed, a syntaxerror is thrown.
...And 2 more matches

GlobalEventHandlers.onselect - Web APIs
the onselect property of the globaleventhandlers mixin is an eventhandler that processes select events.
... the select event only fires after text inside an <input type="text"> or <textarea> is selected.
... syntax target.onselect = functionref; value functionref is a function name or a function expression.
...And 2 more matches

GlobalEventHandlers.onselectionchange - Web APIs
the onselectionchange property of the globaleventhandlers mixin is an eventhandler that processes selectionchange events.
... the selectionchange event fires when the text selected on a webpage changes.
... syntax object.onselectionchange = functionref; value functionref is a function name or a function expression.
...And 2 more matches

GlobalEventHandlers.onselectstart - Web APIs
the onselectstart property of the globaleventhandlers mixin is an eventhandler that processes selectstart events.
... the selectstart event fires when the user starts to make a new text selection on a webpage.
... syntax object.onselectstart = functionref; value functionref is a function name or a function expression.
...And 2 more matches

HTMLSelectElement.form - Web APIs
the htmlselectelement.form read-only property returns a htmlformelement representing the form that this element is associated with.
... syntax edit aform = aselectelement.form.selectname; example html <form action="http://www.google.com/search" method="get"> <label>google: <input type="search" name="q"></label> <input type="submit" value="search..."> </form> javascript a property available on all form elements, "type" returns the type of the calling form element.
... for select, the two possible values are "select-one" or "select-multiple", depending on the type of selection list.
...And 2 more matches

RTCIceTransport.onselectedcandidatepairchange - Web APIs
the rtcicetransport interface's onselectedcandidatepairchange event handler specifies a function to be called to handle the selectedcandidatepairchange event, which is fired when the ice agent selects a new candidate pair to be used for the connection.
... syntax rtcicetransport.onselectedcandidatepairchange = candidatepairhandler; value this propoerty should be set to reference an event handler function to be called by the ice agent when it discovers a new candidate pair that the rtcicetransport will be using for communication with the remote peer.
... the event handler can determine the current state by calling the transport's getselectedcandidatepair() method, which returns a rtcicecandidatepair whose rtcicecandidatepair.local and rtcicecandidatepair.global properties specify rtcicecandidate objects describing the local and remote candidates that are currently being used.
...And 2 more matches

Selection.anchorNode - Web APIs
the selection.anchornode read-only property returns the node in which the selection begins.
... a user may make a selection from left to right (in document order) or right to left (reverse of document order).
... the anchor is where the user began the selection.
...And 2 more matches

Selection.collapse() - Web APIs
the selection.collapse() method collapses the current selection to a single point.
...this value can also be set to null — if null is specified, the method will behave like selection.removeallranges(), i.e.
... all ranges will be removed from the selection.
...And 2 more matches

Selection.extend() - Web APIs
the selection.extend() method moves the focus of the selection to a specified point.
... the anchor of the selection does not move.
... the selection will be from the anchor to the new focus, regardless of direction.
...And 2 more matches

Selection.isCollapsed - Web APIs
the selection.iscollapsed read-only property returns a boolean which indicates whether or not there is currently any text selected.
... no text is selected when the selection's start and end points are at the same position in the content.
... keep in mind that a collapsed selection may still have one (or more, in gecko) ranges, so selection.rangecount may not be zero.
...And 2 more matches

Selection.removeRange() - Web APIs
the selection.removerange() method removes a range from a selection.
... syntax sel.removerange(range) parameters range a range object that will be removed to the selection.
... return value undefined examples /* programmaticaly, more than one range can be selected.
...And 2 more matches

XRSession.onselect - Web APIs
the onselect property of the xrsession object is the event handler for the select event, which is dispatched when a primary action is completed successfully by the user.
... the select event is sent after tracking of the primary action begins, as announced by the selectstart event, and immediately before the tracking of the primary action ends, which is announced by the selectend event.
... syntax xrsession.onselect = selecthandlerfunction; value an event handler function to be invoked when the xrsession receives a select event.
...And 2 more matches

Universal selectors - CSS: Cascading Style Sheets
the css universal selector (*) matches elements of any type.
... /* selects all elements */ * { color: green; } beginning with css3, the asterisk may be used in combination with namespaces: ns|* - matches all elements in namespace ns *|* - matches all elements |* - matches all elements without any declared namespace syntax * { style properties } the asterisk is optional with simple selectors.
...</p> result specifications specification status comment selectors level 4the definition of 'universal selector' in that specification.
...And 2 more matches

tree.onselect - Archive of obsolete content
« xul reference home onselect type: script code this event is sent to a tree when a row is selected, or whenever the selection changes.
... the user can select multiple rows by holding down shift or control and clicking on a row.
... the onselect event will be sent for each item added to or removed from the selection.
... see the tree selection page on the tutorial for more information.

selectItemRange - Archive of obsolete content
« xul reference home selectitemrange( startitem, enditem ) return type: no return value selects the items between the two items given as arguments, including the start and end items.
... all other items are deselected.
... this method does nothing for single-selection list boxes.
... a select event is sent after the selection is made.

selectedIndex - Archive of obsolete content
« xul reference selectedindex type: integer returns the index of the currently selected item.
... you may select an item by assigning its index to this property.
... by assigning -1 to this property, all items will be deselected.
... returns -1 if no items are selected ...

selectionEnd - Archive of obsolete content
« xul reference selectionend type: integer get or set the end of the selected portion of the field's text.
... use in conjuction with the selectionstart property.
... the value specifies the index of the character after the selection.
... if this value is equal to the value of the selectionstart property, no text is selected, but the value indicates the position of the caret (cursor) within the textbox.

DocumentFragment.querySelectorAll() - Web APIs
the documentfragment.queryselectorall() method returns a nodelist of elements within the documentfragment (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.
... if the selectors specified in parameter are invalid a domexception with a syntax_err value is raised.
... syntax elementlist = documentfragment.queryselectorall(selectors); parameters selectors is a domstring containing one or more css selectors separated by commas.
... examples this example returns a list of all div elements within the documentfragment with a class of either "note" or "alert": var matches = documentfrag.queryselectorall("div.note, div.alert"); specifications specification status comment selectors api level 1the definition of 'documentfragment.queryselectorall' in that specification.

Element: select event - Web APIs
the select event fires when some text has been selected.
... bubbles yes cancelable no interface uievent if generated from a user interface, event otherwise event handler property onselect the event is not available for all elements in all languages.
... for example, in html, select events can be dispatched only on form <input type="text"> and <textarea> elements.
... examples selection logger <input value="try selecting some text in this element."> <p id="log"></p> function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const input = document.queryselector('input'); input.addeventlistener('select', logselection); onselect equivalent you can also set up the event handler using the onselect property: input.onselect = logselection; specifications specification status ui eventsthe definition of 'select' in that specification.

HTMLInputElement.select() - Web APIs
the htmlinputelement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.
... syntax element.select(); example click the button in this example to select all the text in the <input> element.
... html <input type="text" id="text-box" size="20" value="hello world!"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.select(); } result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus().
... in browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value length: <input onclick="this.select();" value="sample text" /> <!-- equivalent to --> <input onclick="this.setselectionrange(0, this.value.length);" value="sample text" /> specifications specification status comment html living standardthe definition of 'select' in that specification.

HTMLSelectElement.disabled - Web APIs
the htmlselectelement.disabled is a boolean that reflects the disabled html attribute, which indicates whether the control is disabled.
... 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.
... living standard html5the definition of 'htmlselectelement' in that specification.

HTMLSelectElement.item() - Web APIs
the htmlselectelement.item() method returns the element corresponding to the htmloptionelement whose position in the options list corresponds to the index given in the parameter, or null if there are none.
... in javascript, using the array bracket syntax with an unsigned long, like selectelt[index] is equivalent to selectelt.nameditem(index).
... examples html <form> <select id="myformcontrol" type="textarea"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript // returns the htmloptionelement representing #o2 elem1 = document.forms[0]['myformcontrol'][1]; specifications specification status comment html living standardthe definition of 'htmlselectelement.item()' in that specification.
... html5the definition of 'htmlselectelement.item()' in that specification.

HTMLSelectElement.namedItem() - Web APIs
the htmlselectelement.nameditem() method returns the htmloptionelement corresponding to the htmloptionelement whose name or id match the specified name, or null if no option matches.
... in javascript, using the array bracket syntax with a string, like selectelt["value"] is equivalent to selectelt.nameditem("value").
... example html <form> <select id="myformcontrol"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript elem1 = document.forms[0]['myformcontrol']['o1']; // returns the htmloptionelement representing #o1 specifications specification status comment html living standardthe definition of 'htmlselectelement.nameditem()' in that specification.
... html5the definition of 'htmlselectelement.nameditem()' in that specification.

HTMLSelectElement.setCustomValidity() - Web APIs
the htmlselectelement.setcustomvalidity() method sets the custom validity message for the selection element to the specified message.
... syntax selectelt.setcustomvalidity(string); parameters string is the domstring containing the error message.
... specifications specification status comment html living standardthe definition of 'htmlselectelement.setcustomvalidity()' in that specification.
... html5the definition of 'htmlselectelement.setcustomvalidity()' in that specification.

PublicKeyCredentialCreationOptions.authenticatorSelection - Web APIs
authenticatorselection, an optional property of the publickeycredentialcreationoptions dictionary, is an object giving criteria to filter out the authenticators to be used for the creation operation.
... syntax authenticatorselection = publickeycredentialcreationoptions.authenticatorselection value an object with the following properties: authenticatorattachmentoptional a string which is either "platform" or "cross-platform".
... examples var publickey = { authenticatorselection:{ authenticatorattachment: "cross-platform", requireresidentkey: true, userverification: "required" }, challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", ...
...unction (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorselection' in that specification.

RTCIceTransport: selectedcandidatepairchange event - Web APIs
a selectedcandidatepairchange event is sent to an rtcicetransport when the ice agent selects a new pair of candidates that describe the endpoints of a viable connection.
... bubbles no cancelable no interface event event handler property onselectedcandidatepairchange examples this example creates an event handler for selectedcandidatepairchange that updates a display providing the user information about the progress of the ice negotiation for an rtcpeerconnection called pc.
... let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem = document.getelementbyid("local-protocol"); let remoteprotoelem = document.getelementbyid("remote-protocol"); icetransport.addeventlistener("selectedcandidatepairchange", ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); }, false) this can also be done by setting the onselectedcandidatepairchange event handler property directly.
... let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem = document.getelementbyid("local-protocol"); let remoteprotoelem = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'selectedcandidatepairchange' in that specification.

Range.selectNode() - Web APIs
the range.selectnode() method sets the range to contain the node and its contents.
... syntax range.selectnode(referencenode); parameters referencenode the node to select within a range.
... example let range = document.createrange(); let referencenode = document.getelementsbytagname('div').item(0); range.selectnode(referencenode); specifications specification status comment domthe definition of 'range.selectnode()' in that specification.
... document object model (dom) level 2 traversal and range specificationthe definition of 'range.selectnode()' in that specification.

Selection.addRange() - Web APIs
the selection.addrange() method adds a range to a selection.
... syntax selection.addrange(range); parameters range a range object that will be added to the selection.
... example currently only firefox supports multiple selection ranges, other browsers will not add new ranges to the selection if it already contains one.
... html <p>i <strong>insist</strong> that you <strong>try</strong> selecting the <strong>strong words</strong>.</p> <button>select strong words</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', function () { let selection = window.getselection(); let strongs = document.getelementsbytagname('strong'); if (selection.rangecount > 0) { selection.removeallranges(); } for (let i = 0; i < strongs.length; i++) { let range = document.createrange(); range.selectnode(strongs[i]); selection.addrange(range); } }); result specifications specification status comment selection apithe definition of 'selection.addrange()' in that specification.

Selection.deleteFromDocument() - Web APIs
the deletefromdocument() method of the selection interface deletes the selected text from the document's dom.
... example this example lets you delete selected text by clicking a button.
... upon clicking the button, the window.getselection() method gets the selected text, and the deletefromdocument() method removes it.
...once you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', deleteselection); function deleteselection() { let selection = window.getselection(); selection.deletefromdocument(); } result specifications specification status comment selection apithe definition of 'selection.deletefromdocument()' in that specification.

USBDevice.selectAlternateInterface() - Web APIs
the selectalternateinterface() method of the usbdevice interface returns a promise that resolves when the specified alternative endpoint is selected.
... syntax var promise = usbdevice.selectalternateinterface(interfacenumber, alternatesetting) parameters interfacenumber the index of one of the interfaces supported by the device.
... alternatesetting the configuration of the selected interface.
... specifications specification status comment webusbthe definition of 'selectalternateinterface()' in that specification.

XRSession.onselectend - Web APIs
the onselectend attribute of the xrsession object is the event handler for the selectend event, which is dispatched when user finishes making some sort of selection by releasing a trigger, touchpad, or button, finishes speaking a command, or makes a hand gesture.
... note: not to be confused with xrsession.onselectstart and xrsession.onselect.
... syntax xrsession.onselectend = function(event) { ...
... } example xrsession.onselectend = function(event) { console.log("the user has completed a primary action.") } specifications specification status comment webxr device apithe definition of 'xrsession.onselectend' in that specification.

XRSession.onselectstart - Web APIs
the onselectstart attribute of the xrsession object is the event handler for the selectstart event, which is dispatched when user starts making some sort of selection by pressing a trigger, touchpad, or button, speaking a command, or making a hand gesture.
... note: not to be confused with xrsession.onselect and xrsession.onselectend.
... syntax xrsession.onselectstart = function(event) { ...
... } example xrsession.onselectstart = function(event) { console.log("the user has started a primary action, but might not have completed it.") } specifications specification status comment webxr device apithe definition of 'xrsession.onselectstart' in that specification.

Privacy and the :visited selector - CSS: Cascading Style Sheets
before about 2010, the css :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited.
... little white lies to preserve users' privacy, firefox and other browsers will lie to web applications under certain circumstances: the window.getcomputedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page.
... if you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
... colors that are otherwise transparent will fail to appear if styled in a :visited selector.

Intl.PluralRules.select() - JavaScript
the intl.pluralrules.prototype.select method returns a string indicating which plural rule to use for locale-aware formatting.
... syntax pluralcategory = pluralrule.select(number) parameters number the number to get a plural rule for.
... description this function selects a pluralization category according to the locale and formatting options of a pluralrules object.
... examples using select() new intl.pluralrules('ar-eg').select(0); // → 'zero' new intl.pluralrules('ar-eg').select(1); // → 'one' new intl.pluralrules('ar-eg').select(2); // → 'two' new intl.pluralrules('ar-eg').select(6); // → 'few' new intl.pluralrules('ar-eg').select(18); // → 'many' specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.pluralrules.select()' in that specification.

xChannelSelector - SVG: Scalable Vector Graphics
the xchannelselector attribute indicates which color channel from in2 to use to displace the pixels in in along the x-axis.
...is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</t...
... specifications specification status comment filter effects module level 1the definition of 'xchannelselector' in that specification.
... working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'xchannelselector' in that specification.

yChannelSelector - SVG: Scalable Vector Graphics
the ychannelselector attribute indicates which color channel from in2 to use to displace the pixels in in along the y-axis.
...is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</t...
... specifications specification status comment filter effects module level 1the definition of 'ychannelselector' in that specification.
... working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'ychannelselector' in that specification.

disableautoselect - Archive of obsolete content
« xul reference home disableautoselect type: boolean if this attribute is true or omitted, the selected item on the menu will update to match what the user entered in the textbox.
... if the text does not match any of the items in the list, the menu selection is cleared.
... if this attribute is false, the selection is never updated to match the text box.

prefpane.selected - Archive of obsolete content
« xul reference home selected type: boolean this attribute will be set to true for the currently selected prefpane.
... to change the selected pane, use the prefwindow's showpane method.
... see also selected ...

selected - Archive of obsolete content
« xul reference home selected type: boolean indicates whether the element is selected or not.
...to change the selection, set either the selectedindex or selecteditem property of the containing element.
... see also visuallyselected ...

getSelectedItem - Archive of obsolete content
« xul reference home getselecteditem( index ) return type: element when multiple items are selected, you can retrieve each selected item using this method.
... the argument index specifies the index in the list of the selected items, not the row number of the item.
... the item index is zero-based, thus this example will return the first selected item: getselecteditem(0).

toggleItemSelection - Archive of obsolete content
« xul reference home toggleitemselection( item ) return type: no return value if the specified item is selected, it is deselected.
... if it is not selected, it is selected.
... other items in the list box that are selected are not affected, and retain their selected state.

selectedPanel - Archive of obsolete content
« xul reference selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element.
... assigning a value to this property will modify the selected panel.
... a select event will be sent when the selected panel is changed.

selectionStart - Archive of obsolete content
« xul reference selectionstart type: integer get or set the beginning of the selected portion of the field's text.
... use in conjuction with the selectionend property.
... the value specifies the index of the first selected character.

ExtendSelection
« nsiaccessible page summary this method extends the current selection from its current accessible anchor node to this accessible.
... void extendselection(); exceptions thrown ns_error_not_implemented always.
... see also nsiaccessible.setselected() nsiaccessible.takeselection() ...

SetSelected
« nsiaccessible page summary this method adds or remove this accessible to the current selection.
... void setselected( in boolean aisselected ); parameters aisselected[out] the current selection exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree.
... see also nsiaccessible.takeselection() nsiaccessible.extendselection() ...

TakeSelection
« nsiaccessible page summary this method selects this accessible node only.
... void takeselection(); exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree.
... see also nsiaccessible.setselected() nsiaccessible.extendselection() ...

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

nsIDOMXULSelectControlItemElement
dom/interfaces/xul/nsidomxulselectcntrlitemel.idlscriptable please add a summary to this article.
... inherits from: nsidomxulelement last changed in gecko 1.7 attributes attribute type description accesskey domstring command domstring control nsidomxulselectcontrolelement read only.
... crop domstring disabled boolean image domstring label domstring selected boolean read only.

nsISelectionImageService
layout/base/nsiselectionimageservice.idlnot scriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.7 method overview void getimage(in short selectionvalue, out imgicontainer container); void reset(); methods getimage() retrieve the image for alpha blending.
... void getimage( in short selectionvalue, out imgicontainer container ); parameters selectionvalue container reset() the current image is marked as invalid.

Document.selectedStyleSheetSet - Web APIs
the selectedstylesheetset property indicates the name of the style sheet set that's currently in use.
... syntax currentstylesheetset = document.selectedstylesheetset; document.selectedstylesheet = newstylesheetset; on return, currentstylesheetset indicates the name of the style sheet set currently in use.
... example console.log('current style sheet set: ' + document.selectedstylesheetset); document.selectedstylesheetset = 'some other style sheet'; ...

Document: selectstart event - Web APIs
the selectstart event of the selection api is fired when a user starts a new selection.
... if the event is canceled, the selection is not changed.
... bubbles yes cancelable yes interface event event handler property onselectstart examples // addeventlistener version document.addeventlistener('selectstart', () => { console.log('selection started'); }); // onselectstart version document.onselectstart = () => { console.log('selection changed.'); }; specifications specification status comment selection apithe definition of 'selectstart' in that specification.

HTMLContentElement.select - Web APIs
the htmlcontentelement.select property reflects the select attribute.
... it is a domstring containing a space-separated list of css selectors that select the content to insert in place of the <content> element.
... syntax object.select = "cssselector cssselector ..."; example // select <h1> elements and elements with class="error" mycontentobject.select = "h1 .error"; specifications this feature is no longer defined by any standards.

HTMLSelectElement.autofocus - Web APIs
the htmlselectelement.autofocus property is a boolean that reflects the autofocus html attribute, which indicates whether the associated <select> element will get input focus when the page loads, unless the user overrides it.
... setting this property doesn't set the focus to the associated <select> element: it merely tells the browser to focus to it when the element is inserted in the document.
... syntaxedit abool = aselectelement.autofocus; // get the value of autofocus aselectelement.autofocus = abool; // set the value of autofocus example html <select id="myselect" autofocus> <option>option 1</option> <option>option 2</option> </select> javascript // check if the autofocus attribute on the <select> var hasautofocus = document.getelementbyid('myselect').autofocus; specifications specification status comment html living standardthe definition of 'autofocus' in that specification.

HTMLSelectElement.checkValidity() - Web APIs
the htmlselectelement.checkvalidity() method checks whether the element has any constraints and whether it satisfies them.
... syntax var result = selectelt.checkvalidity(); specifications specification status comment html living standardthe definition of 'htmlselectelement.checkvalidity()' in that specification.
... html5the definition of 'htmlselectelement.checkvalidity()' 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.

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

Selection.anchorOffset - Web APIs
the selection.anchoroffset read-only property returns the number of characters that the selection's anchor is offset within the selection.anchornode.
...if the selection begins with the first character in the selection.anchornode, 0 is returned.
... syntax number = sel.anchoroffset specifications specification status comment selection apithe definition of 'selection.anchoroffset' in that specification.

Selection.collapseToEnd() - Web APIs
the selection.collapsetoend() method collapses the selection to the end of the last range in the selection.
... if the content of the selection is focused and editable, the caret will blink there.
... specifications specification status comment selection apithe definition of 'selection.collapsetoend()' in that specification.

Selection.collapseToStart() - Web APIs
the selection.collapsetostart() method collapses the selection to the start of the first range in the selection.
... if the content of the selection is focused and editable, the caret will blink there.
... specifications specification status comment selection apithe definition of 'selection.collapsetostart()' in that specification.

Selection.focusOffset - Web APIs
the selection.focusoffset read-only property returns the number of characters that the selection's focus is offset within the selection.focusnode.
...if the selection ends with the first character in the selection.focusnode, 0 is returned.
... syntax offset = sel.focusoffset specifications specification status comment selection apithe definition of 'selection.focusoffset' in that specification.

Selection.getRangeAt() - Web APIs
the selection.getrangeat() method returns a range object representing one of the ranges currently selected.
...a negative number or a number greater than or equal to selection.rangecount will result in an error.
... example let ranges = []; sel = window.getselection(); for(let i = 0; i < sel.rangecount; i++) { ranges[i] = sel.getrangeat(i); } /* each item in the ranges array is now * a range object representing one of the * ranges in the current selection */ specifications specification status comment selection apithe definition of 'selection: getrangeat()' in that specification.

Selection.removeAllRanges() - Web APIs
the selection.removeallranges() method removes all ranges from the selection, leaving the anchornode and focusnode properties equal to null and leaving nothing selected.
... specifications specification status comment selection apithe definition of 'selection.removeallranges()' in that specification.
... see also selection, the interface it belongs to.

USBDevice.selectConfiguration() - Web APIs
the selectconfiguration() method of the usbdevice interface returns a promise that resolves when the specified configuration is selected.
... syntax var promise = usbdevice.selectconfiguration(configurationvalue) parameters configurationvalue the number of a device-specific configuration.
... specifications specification status comment webusbthe definition of 'selectconfiguration' in that specification.

VideoTrack.selected - Web APIs
the videotrack property selected controls whether or not a particular video track is active.
... syntax isvideoselected = videotrack.selected; videotrack.selected = true | false; value the selected property is a boolean whose value is true if the track is active.
... specifications specification status comment html living standardthe definition of 'videotrack: selected' in that specification.

VideoTrackList.selectedIndex - Web APIs
the read-only videotracklist property selectedindex returns the index of the currently selected track, if any, or -1 otherwise.
... syntax var index = videotracklist.selectedindex; value a number indicating the index of the currently selected track, if any, or -1 otherwise.
... specifications specification status comment html living standardthe definition of 'videotracklist: selectedindex' in that specification.

Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
for example, the url http://developer.mozilla.org/en/docs/using_the_:target_selector#example contains the fragment identifier #example.
...thus, to add a border to the #example fragment, we would write: #example:target { border: 1px solid black; } targeting all elements if the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy: :target { color: red; } example in the following example, there are five links that point to elements in the same document.
... selecting the "first" link, for example, will cause <h1 id="one"> to become the target element.

afterselected - Archive of obsolete content
« xul reference home afterselected type: boolean this is set to true if the tab is immediately after the currently selected tab.
...this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.

beforeselected - Archive of obsolete content
« xul reference home beforeselected type: boolean this is set to true if the tab is immediately before the currently selected tab.
...this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.

suppressonselect - Archive of obsolete content
« xul reference home suppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods.
... if set to true, the select event is never fired.

tab.selected - Archive of obsolete content
« xul reference home selected type: boolean this attribute is set to true if the tab is selected by default.
... see also selected ...

tabs.onselect - Archive of obsolete content
« xul reference home onselect type: script code this event is sent to the tabs element when this tab is changed.
... see also onselect ...

advanceSelectedTab - Archive of obsolete content
« xul reference home advanceselectedtab( dir, wrap ) return type: no return value if the argument dir is set to 1, the currently selected tab changes to the next tab.
... if the argument dir is set to -1, the currently selected tab changes to the previous tab.

clearSelection - Archive of obsolete content
« xul reference home clearselection() return type: no return value deselects all of the items.
... a select event is sent before the items are deselected.

invertSelection - Archive of obsolete content
« xul reference home invertselection() return type: no return value reverses the selected state of all items.
... selected items become deselected, and deselected items become selected.

menulist.select - Archive of obsolete content
« xul reference home select() return type: no return value select all the text in the menulist's textbox.
... see also select ...

selectAll - Archive of obsolete content
« xul reference home selectall() return type: no return value selects all of the items.
... a select event is sent after the selection is made.

selectItem - Archive of obsolete content
« xul reference home selectitem( item ) return type: no return value deselects all of the currently selected items and selects the given item.
... a select event is sent after the selection is made.

setSelectionRange - Archive of obsolete content
« xul reference home setselectionrange( start, end ) return type: no return value sets the selected portion of the textbox, where the start argument is the index of the first character to select and the end argument is the index of the character after the selection.
... set both arguments to the same value to move the cursor to the corresponding position without selecting text.

timedSelect - Archive of obsolete content
« xul reference home timedselect( item, timeout ) return type: no return value selects the item specified by the argument item after the number of milliseconds given by the timeout argument.
... all other items are deselected.

deck.selectedPanel - Archive of obsolete content
selectedpanel type: element holds a reference to the currently selected panel within a deck element.
... assigning a value to this property will modify the selected panel.

selectedTab - Archive of obsolete content
« xul reference selectedtab type: tab element a reference to the currently selected tab, which will always be one of the tab elements in the tabs element.
... assign a value to this property to modify the currently selected tab.

Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
a css selector is the part of a css rule that describes what elements in a document the rule will match.
... consider this css: p { color: green; } div.warning { width: 100%; border: 2px solid yellow; color: white; background-color: darkred; padding: 0.8em 0.8em 0.6em; } #customized { font: 16px lucida grande, arial, helvetica, sans-serif; } the selectors here are "p" (which applies the color green to the text inside any <p> element), "div.warning" (which makes any <div> element with the class "warning" look like a warning box), and "#customized", which sets the base font of the element with the id "customized" to 16-pixel tall lucida grande or one of a few fallback fonts.

Document: selectionchange event - Web APIs
the selectionchange event of the selection api is fired when the current text selection on a document is changed.
... bubbles no cancelable no interface event event handler property onselectionchange examples // addeventlistener version document.addeventlistener('selectionchange', () => { console.log(document.getselection()); }); // onselectionchange version document.onselectionchange = () => { console.log(document.getselection()); }; specifications specification status comment selection apithe definition of 'selectionchange' in that specification.

Comparison of CSS Selectors and XPath - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes this article seeks to document the difference between css selectors and xpath for web developers to be able to better choose the right tool for the right job.
... xpath feature css equivalent ancestor, parent or preceding-sibling axis :has() selector attribute axis attribute selectors child axis child combinator descendant axis descendant combinator following-sibling axis general sibling combinator or adjacent sibling combinator self axis :scope or :host selector ...

completeselectedindex - Archive of obsolete content
« xul reference home completeselectedindex type: boolean if true, the text in the text field will be autocompleted as the user selects from the popup list.

lastSelected - Archive of obsolete content
« xul reference home lastselected type: string set this to the id of the last selected pane.

onselect - Archive of obsolete content
see tabs.onselect tree.onselect ...

selectedIndex - Archive of obsolete content
« xul reference home selectedindex type: integer gets and sets the index of the currently selected panel.

addItemToSelection - Archive of obsolete content
« xul reference home additemtoselection( item ) return type: no return value selects the given item, without deselecting any other items that are already selected.

ensureSelectedElementIsVisible - Archive of obsolete content
« xul reference home ensureselectedelementisvisible() return type: no return value if the currently selected element in the list box is not currently visible to the user, the list box view is scrolled so that it is.

removeItemFromSelection - Archive of obsolete content
« xul reference home removeitemfromselection( item ) return type: no return value deselects the specified item without deselecting other items.

select - Archive of obsolete content
« xul reference home select() return type: no return value selects all the text in the textbox.

selectTabAtIndex - Archive of obsolete content
« xul reference home selecttabatindex( index, event ) return type: no return value selects the tab at the given index.

clickSelectsAll - Archive of obsolete content
« xul reference clickselectsall type: boolean if set to true, the contents of the textbox are selected when focused; otherwise, the cursor is left unchanged.

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

lastSelected - Archive of obsolete content
« xul reference lastselected type: string set this to the id of the last selected pane.

selected - Archive of obsolete content
« xul reference selected type: boolean this property's value is true if this element is selected, or false if it is not.

selectedBrowser - Archive of obsolete content
« xul reference selectedbrowser type: browser element this read-only property returns the currently displayed browser element.

selectedCount - Archive of obsolete content
« xul reference selectedcount type: integer returns the number of items that are currently selected.

selectedItems - Archive of obsolete content
« xul reference selecteditems type: array of listitems returns an array of the selected items in the list.

suppressOnSelect - Archive of obsolete content
« xul reference suppressonselect type: boolean gets and sets the value of the suppressonselect attribute.

ui.textSelectBackground
ui.textselectbackground saves the color in which the background of a text selection in the user interface or in content will be styled.

ui.textSelectForeground
ui.textselectforeground saves the color in which the text of a text selection in the user interface or the content will be styled.

Inspect and select colors - Firefox Developer Tools
the color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page: clicking the color sample while holding down the shift key changes the color format: ...

Index - Web APIs
136 audiocontextlatencycategory api, audio, audio context, audiocontextlatencycategory, enum, interface, media, reference, type, web audio, web audio api, latency the audiocontextlatencycategory type is an enumerated set of strings which are used to select one of a number of default values for acceptable maximum latency of an audio context.
... 388 css.escape() api, css, cssom, method, reference, static, escape() the css.escape() static method returns a cssomstring containing the escaped string passed as parameter, mostly for use as part of a css selector.
... 450 csspseudoelement.type api, csspseudoelement, experimental, property, reference, type the type read-only property of the csspseudoelement interface returns the type of the pseudo-element as a string, represented in the form of a css selector.
...And 162 more matches

Index - Archive of obsolete content
56 selection add-on sdk get and set text and html selections in the current web page.
... 205 queryselector dom no summary!
... 385 creating a mozilla extension add-ons, extensions a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection).
...And 103 more matches

How to build custom form controls - Learn web development
for example, if you need to perform advanced styling on some controls such as the <select> element or if you want to provide custom behaviors, you may consider building your own controls.
...to that end, we will work with an example: rebuilding the <select> element.
... in our example, we will rebuild the <select> element.
...And 65 more matches

Index - Archive of obsolete content
i selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-platform development.
... 12 afterselected xul attributes, xul reference no summary!
... 28 beforeselected xul attributes, xul reference no summary!
...And 63 more matches

Editor Embedding Guide - Archive of obsolete content
get the current command state of a given command -- getcommandstate: commandmanager->getcommandstate(acommand,acommandparams) index of commands and parameters cmd_bold toggles bold style on selection.
... getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters example normal bold cmd_italics toggles italics style on selection.
... getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters example normal italics cmd_underline toggles underline on selection.
...And 60 more matches

nsIHTMLEditor
o 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); void getalignment(out boolean amixed, out...
...ring avalue, out boolean afirst, out boolean aany, out boolean aall); nsisupportsarray getlinkedobjects(); void getlistitemstate(out boolean amixed, out boolean ali, out boolean adt, out boolean add); void getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inser...
...thtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alisttype, in boolean entirelist, in astring abullettype); boolean nodeisblock(in nsidomnode node); void pastenoformatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultp...
...And 56 more matches

richlistbox - Archive of obsolete content
note: in versions of firefox prior to firefox 3, rich list boxes support only single selection.
... firefox 3 introduced multiple selection to rich list boxes.
... attributes disabled, disablekeynavigation, preference, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, currentitem, disabled, disablekeynavigation, itemcount, scrollboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <richlistbox> <richlistitem> <description>a xul description!</descriptio...
...And 49 more matches

listbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of items where one or more of the items may be selected.
... attributes disabled, disablekeynavigation, preference, rows, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, currentitem, disabled, disablekeynavigation, itemcount, listboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematinde...
...x, 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.getelementbyid('thelist'); gems = [ {gem: "ruby", price: "$3,500 - $4,600"}, {gem: "emerald", price: "$700 - 4,...
...And 48 more matches

ARIA: listbox role - Accessibility
the listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.
... description the listbox role is used to identify an element that creates a list from which a user may select one or more static items, similar to the html <select> element.
... unlike <select>, a listbox can contain images.
...And 46 more matches

Midas
in addition to the built-in commands, advanced editing can be done by manipulating the selection and range objects.
... document.querycommandindeterm determines whether the current selection is in an indetermined state.
... document.querycommandstate determines whether the given command has been executed on the current selection.
...And 44 more matches

IAccessibleTable
index ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult columnextentat([in] long row, [in] long column, [out] long ncolumnsspanned ); [propget] hresult columnheader([out] iaccessibletable accessibletable, [out] long startingrowindex ); [propget] hresult columnindex([in] long cellindex, [out] long columnindex ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult isselected([in] long row, [in] long column, [out] boolean isselected ); [propget] hresult modelchange([out] ia2tablemodelchange modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [pr...
...opget] hresult nselectedchildren([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowcolumnextentsatindex([in] long index, [out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] hresult rowdescription([in] long row, [out] bstr description ); [propget] hresult rowextentat([in] long row, [in] long column, [out] long nrowsspanned ); [propget] hresult rowheader([out] iaccessibletable accessibletable, [out] long startingcolumnindex ); [propget] hresult rowindex([in] long cellindex, [out] long rowindex ); hresult selectcolumn([in] long column ); [propget] hresult selectedchildren([in] long maxchildren, [out, si...
...ze_is(,maxchildren), length_is(, nchildren)] long children, [out] long nchildren ); [propget] hresult selectedcolumns([in] long maxcolumns, [out, size_is(,maxcolumns), length_is(, ncolumns)] long columns, [out] long ncolumns ); [propget] hresult selectedrows([in] long maxrows, [out, size_is(,maxrows), length_is(, nrows)] long rows, [out] long nrows ); hresult selectrow([in] long row ); [propget] hresult summary([out] iunknown accessible ); hresult unselectcolumn([in] long column ); hresult unselectrow([in] long row ); methods accessibleat() returns the accessible object at the specified row and column in the table.
...And 36 more matches

IAccessibleTable2
method overview [propget] hresult caption([out] iunknown accessible ); [propget] hresult cellat([in] long row, [in] long column, [out] iunknown cell ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult modelchange([out] ia2tablemodelchange modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedcells([out] long cellcount ); [propget] hresult nselectedcolumns([...
...out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowdescription([in] long row, [out] bstr description ); hresult selectcolumn([in] long column ); [propget] hresult selectedcells([out, size_is(, nselectedcells,)] iunknown cells, [out] long nselectedcells ); [propget] hresult selectedcolumns([out, size_is(, ncolumns)] long selectedcolumns, [out] long ncolumns ); [propget] hresult selectedrows([out, size_is(, nrows)] long selectedrows, [out] long nrows ); hresult selectrow([in] long row ); [propget] hresult summary([out] iunknown accessible ); hresult unselectcolumn([in] long column ); hresult unselectrow([in] long row ); methods caption() returns the caption for the table.
...iscolumnselected() returns a boolean value indicating whether the specified column is completely selected.
...And 36 more matches

IME handling guide
preedit string), suggests a list of what the user attempts to input, commits composition string as a selected item off the list and commits composition string without any conversion.
... if one or more clauses were not converted as expected, the user can choose one of the clauses with arrow keys and look for the expected result form the list in the drop down menu (in the following screenshot, the clause with the thicker underline is called "selected clause").
... each clause is represented with selection in the editor.
...And 35 more matches

Document.execCommand() - Web APIs
most commands affect the document's selection (bold, italics, etc.), while others insert new elements (adding a link), or affect an entire line (indenting).
... bold toggles bold on/off for the selection or at the insertion point.
...(not supported by internet explorer.) copy copies the current selection to the clipboard.
...And 34 more matches

Inputs and input sources - Web APIs
actions include both selection actions, such as clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wearing haptic gloves.
...these devices include but aren't limited to: screen taps (particularly but not necessarily only on phones or tablets) can be used to simultaneously perform both targeting and selection.
... motion-sensing controllers, which use accelerometers, magnetometers, and other sensors for motion tracking and targeting and may additionally include any number of buttons, joysticks, thumbpads, touchpads, force sensors, and so on to provide additional input sources for both targeting and selection.
...And 31 more matches

Eclipse CDT
installing eclipse regarding llvm4eclipsecdt, do not install or select this toolchain for mozilla development.
...in principle, you can set the index to rebuild automatically by opening the workspace preferences, selecting "c/c++ > indexer", and reenabling "automatically update the index".
...to rebuild for changes in an individual directory (for example, to take account of some changes that you yourself made) select "index > freshen all files" on that directory.
...And 30 more matches

nsIAccessibleTable
t(in long cellindex); note: renamed from getcolumnatindex in gecko 1.9.2 void getrowandcolumnindicesat(in long cellindex, out long rowindex, out long columnindex); astring getrowdescription(in long rowindex); long getrowextentat(in long row, in long column); long getrowindexat(in long cellindex); note: renamed from getrowatindex in gecko 1.9.2 void getselectedcellindices(out unsigned long cellsarraysize, [retval, array, size_is(cellsarraysize)] out long cellsarray); note: renamed from getselectedcells in gecko 1.9.2 void getselectedcolumnindices(out unsigned long columnsarraysize, [retval, array, size_is(columnsarraysize)] out long columnsarray); note: renamed from getselectedcolumns in gecko 1.9.2 void getselectedrowindices(out uns...
...igned long rowsarraysize, [retval, array, size_is(rowsarraysize)] out long rowsarray); note: renamed from getselectedrows in gecko 1.9.2 boolean iscellselected(in long rowindex, in long columnindex); boolean iscolumnselected(in long columnindex); boolean isprobablyforlayout(); boolean isrowselected(in long rowindex); void selectcolumn(in long columnindex); void selectrow(in long rowindex); void unselectcolumn(in long columnindex); void unselectrow(in long rowindex); attributes attribute type description caption nsiaccessible the caption accessible for the table.
...obsolete since gecko 1.9.2 selectedcellcount unsigned long the total number of selected cells.
...And 30 more matches

Cascade and inheritance - Learn web development
the h1 ends up being colored blue — these rules have an identical selector and therefore carry the same specificity, so the last one in the source order wins.
... specificity specificity is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element.
... it is basically a measure of how specific a selector's selection will be: an element selector is less specific — it will select all elements of that type that appear on a page — so will get a lower score.
...And 29 more matches

Eclipse CDT Manual Setup
below.) initial workspace preferences when you open eclipse, it will ask you to "select a workspace" (a directory where eclipse will store files that it generates during indexing, and so on.) it's recommended that you have a separate workspace containing only a single project for each mozilla source tree [rational], and that you choose a directory outside the mozilla source.
...after selecting an appropriate directory, click ok, then close the "welcome" tab when the main eclipse window opens.
... select "general > content types", expand "text > c source file > c++ source file", click "add" and add "*.mm".
...And 29 more matches

context-menu - Archive of obsolete content
make sure that no text is selected.
...it does not occur when the user invokes the context menu on a link, image, or other non-text node, or while a selection exists.
... selectioncontext() this context occurs when the menu is invoked on a page in which the user has made a selection.
...And 28 more matches

Key Values - Web APIs
learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character.
...removes the currently selected input.
... appcommand_copy gdk_key_copy (0x1008ff57) qt::key_copy (0x010000cf) "crsel" [3] the cursor select key, crsel.
...And 26 more matches

<input type="file"> - HTML: Hypertext Markup Language
value a domstring representing the path to the selected file.
... events change and input supported common attributes required additional attributes accept, capture, files, multiple idl attributes files and value dom interface htmlinputelement properties properties that apply only to elements of type file methods select() value a file input's value attribute contains a domstring that represents the path to the selected file(s).
... if the user selected multiple files, the value represents the first file in the list of files they selected.
...And 25 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'); select.addeventliste...
...ner('change', setweather); function setweather() { const choice = select.value; if (choice === 'sunny') { para.textcontent = 'it is nice and sunny outside today.
...best to stay in with a cup of hot chocolate, or go build a snowman.'; } else if (choice === 'overcast') { para.textcontent = 'it isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; } else { para.textcontent = ''; } } here we've got an html <select> element allowing us to make different weather choices, and a simple paragraph.
...And 23 more matches

nsIDOMWindowUtils
uerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long alength, in long ax, in long ay); obsolete since gecko 31.0 nsiquerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long alength, in long ax, in long ay, [optional] in unsigned long aadditionalflags); boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long alength, in boolean areverse); obsolete since gecko 31.0 boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long alength, [optional] in unsigned long aadditionalflags); void sendsimplegestureevent(in astring atype, in float ax, in float ay, in unsigned long adirection, in double adelta, in long amodifiers);...
... obsolete since gecko 38.0 composition_attr_selectedrawtext 0x03 obsolete since gecko 38.0 composition_attr_convertedtext 0x04 obsolete since gecko 38.0 composition_attr_selectedconvertedtext 0x05 obsolete since gecko 38.0 query_content_flag_use_native_line_break 0x0000 one of values of aadditionalflags of sendquerycontentevent().
... query_content_flag_selection_spellcheck 0x0002 one of values of aadditionalflags of sendquerycontentevent().
...And 23 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected.
... <input type="email" name="email"/> html5 file a control that lets the user select a file.
... use the accept attribute to define the types of files that the control can select.
...And 23 more matches

Manipulating Lists - Archive of obsolete content
in fact, these methods are part of the nsidomxulselectcontrolelement interface so any xul elements which implement this interface have these methods.
... list selection the nsidomxulselectcontrolelement interface provides two additonal properties, selectedindex and selecteditem.
... the former returns the index of the selected item while the latter returns the selected element.
...And 22 more matches

nsIClipboardCommands
inherits from: nsisupports last changed in gecko 1.7 method overview boolean cancopyimagecontents(); boolean cancopyimagelocation(); boolean cancopylinklocation(); boolean cancopyselection(); boolean cancutselection(); boolean canpaste(); void copyimagecontents(); void copyimagelocation(); void copylinklocation(); void copyselection(); void cutselection(); void paste(); void selectall(); void selectnone(); methods cancopyimagecontents() returns whether we can copy an image's contents.
...return value true if an image is selected, false otherwise.
...return value true if an image is selected, false otherwise.
...And 22 more matches

nsIMsgDBView
amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); void sort(in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder); void docommand(in nsmsgviewcommandtypevalue command); void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selectable_p, out nsmsgviewcommandcheckstatevalue selected_p); void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsgkey resultid, out nsmsgviewindex resultindex, out nsmsgviewindex threadindex, in boolean wrap); boolean navigatestatus(in nsmsgnavigationtypevalue motion); nsmsgkey getkeyat(in nsmsgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex in...
...dex); nsimsgfolder getfolderforviewindex(in nsmsgviewindex index); acstring geturiforviewindex(in nsmsgviewindex index); nsimsgdbview clonedbview(in nsimessenger amessengerinstance, in nsimsgwindow amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); void geturisforselection([array, size_is(count)] out string uris, out unsigned long count); void getindicesforselection([array, size_is(count)] out nsmsgviewindex indices, out unsigned long count); void loadmessagebymsgkey(in nsmsgkey amsgkey); void loadmessagebyviewindex(in nsmsgviewindex aindex); void loadmessagebyurl(in string aurl); void reloadmessage(); void reloadmessagewithallparts(); void selectmsgbykey(in nsmsgkey key); void se...
...lectfoldermsgbykey(in nsimsgfolder afolder, in nsmsgkey akey); void ondeletecompleted(in boolean succeeded); nsmsgviewindex findindexfromkey(in nsmsgkey amsgkey, in boolean aexpand); void expandandselectthreadbyindex(in nsmsgviewindex aindex, in boolean aaugment); void addcolumnhandler(in astring acolumn, in nsimsgcustomcolumnhandler ahandler); void removecolumnhandler(in astring acolumn); nsimsgcustomcolumnhandler getcolumnhandler(in astring acolumn); attributes attribute type description viewtype nsmsgviewtypevalue readonly: type of view.
...And 22 more matches

nsMsgViewCommandType
last changed in gecko 1.9 (firefox 3) constants name value description markmessagesread 0 marks the selected messages as read.
... markmessagesunread 1 mark the selected messages as unread togglemessageread 2 toggle the read flag of the selected messages flagmessages 3 flag the selected messages.
... unflagmessages 4 unflag the selected messages.
...And 22 more matches

Specificity - CSS: Cascading Style Sheets
specificity is based on the matching rules which are composed of different sorts of css selectors.
... specificity is a weight that is applied to a given css declaration, determined by the number of each selector type in the matching selector.
... selector types the following list of selector types increases by specificity: type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
...And 22 more matches

Introduction to events - Learn web development
for example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.
...for example: the user selects a certain element or hovers the cursor over a certain element.
...in the following example, we have a single <button>, which when pressed, makes the background change to a random color: <button>change color</button> button { margin: 10px }; the javascript looks like so: const btn = document.queryselector('button'); function random(number) { return math.floor(math.random() * (number+1)); } btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } in this code, we store a reference to the button inside a constant called btn, using the document.queryselector() function.
...And 21 more matches

Document - Web APIs
has the value null until the style sheet is changed by setting the value of selectedstylesheetset.
... document.selectedstylesheetset returns which style sheet set is currently in use.
... document.onselectionchange is an eventhandler representing the code to be called when the selectionchange event is raised.
...And 21 more matches

:is() (:matches(), :any()) - CSS: Cascading Style Sheets
the :is() css pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
... this is useful for writing large selectors in a more compact form.
...:any() works in exactly the same way as :matches()/:is(), except that it requires vendor prefixes and doesn't support complex selectors.
...And 21 more matches

menulist - Archive of obsolete content
the user may select one of the elements displayed in the menulist.
... the currently selected choice is displayed on the menulist element.
...the command event may be used to execute code when the menulist selection changes.
...And 20 more matches

<input type="radio"> - HTML: Hypertext Markup Language
only one radio button in a given group can be selected at the same time.
... radio buttons are typically rendered as small circles, which are filled or highlighted when selected.
... note: checkboxes are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off.
...And 20 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
e properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange,...
...if false, the default, the value will not be filled in until the user selects an item.
...if false, the default, the value will not be filled in until the user selects an item.
...And 19 more matches

UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :checked to target a checkbox only when it is selected.
... the original pseudo-classes available to us (as of css 2.1) that are relevant to forms are: :hover: selects an element only when it is being hovered over by a mouse pointer.
... :focus: selects an element only when it is focused (i.e.
...And 19 more matches

source-editor.jsm
operations number getcharcount(); string getindentationstring(); string getlinedelimiter(); number getlinecount(); number getlineend(number alineindex, boolean aincludedelimiter); number getlinestart(number alineindex); string getmode(); string gettext([optional] number astart, [optional] number aend); string getselectedtext(); void setmode(string amode); void settext(string atext, [optional] number astart, [optional] number aend); selection operations void dropselection(); number getcaretoffset(); object getcaretposition(); object getselection(); void setcaretoffset(number aoffset); void setcaretposition(number aline, [optional] nu...
...mber acolumn, [optional] number aalign); void setselection(number astart, number aend); breakpoint management void addbreakpoint(number alineindex, [optional] string acondition); array getbreakpoints(); boolean removebreakpoint(number alineindex); properties attribute type description dirty boolean set this value to false whenever you save the text; the editor will update it to true when the content is changed.
... sourceeditor.events.selection "selection" fired when the current selection in the editor changes.
...And 19 more matches

Event reference
clipboard events event name fired when cut the selection has been cut and copied to the clipboard copy the selection has been copied to the clipboard paste the item from the clipboard has been pasted keyboard events event name fired when keydown any key is pressed keypress any key (except shift, fn, or capslock) is in a pressed position (fired continuously).
... select some text is being selected.
... drag & drop events event name fired when drag an element or text selection is being dragged (fired continuously every 350ms).
...And 19 more matches

Combinators - Learn web development
previous overview: building blocks next the final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the different combinator selectors that can be used in css.
... descendant combinator the descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector.
...And 18 more matches

Index - Learn web development
css is what you use to selectively style html elements.
... for example, this css selects paragraph text, setting the color to red: 38 dealing with files beginner, codingscripting, files, guide, html, l10n:priority, theory, website when you are working on a website locally on your computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server.
...for example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.
...And 18 more matches

Handling common accessibility problems - Learn web development
you could do this manually by just removing the css from your code, but the easiest way is to use browser features, for example: firefox: select view > page style > no style from the main menu.
... safari: select develop > disable styles from the main menu (to enable the develop menu, choose safari > preferences > advanced > show develop menu in menu bar).
...click the gear icon that will appear, then select css > disable all styles.
...And 18 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, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...if set to false or omitted, the value must be selected from the list.
...And 17 more matches

Mobile accessibility - Learn web development
for example: single-tapping an app will select it, and the device will read out what the app is.
... double-tapping anywhere will open the app/select the option.
... once you've selected the option you want, double-click to choose that option.
...And 17 more matches

Pseudo-classes and pseudo-elements - Learn web development
previous overview: building blocks next the next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements.
...once again the relevant mdn page for each selector is helpful in explaining browser support.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the pseudo-class and pseudo-element selectors.
...And 17 more matches

Index
scripts typically select this with the "language" attribute.
... 256 extendselection this method extends the current selection from its current accessible anchor node to this accessible.
... 285 setselected this method adds or remove this accessible to the current selection.
...And 17 more matches

Border-image generator - CSS: Cascading Style Sheets
tle"> border-image-outset </div> </div> <!-- other-settings --> <div id="aditional-properties" class="category"> <div class="title"> aditional-properties </div> <div class="property"> <div class="name"> repeat-x </div> <div class="ui-dropdown border-repeat" data-topic="image-repeat-x" data-selected="2"> <div data-value="0">repeat</div> <div data-value="0">stretch</div> <div data-value="0">round</div> </div> </div> <div class="property"> <div class="name"> repeat-y </div> <div class="ui-dropdown border-repeat" data-topic="image-...
...repeat-y" data-selected="2"> <div data-value="1">repeat</div> <div data-value="1">stretch</div> <div data-value="1">round</div> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="font-size" data-info="em size" data-unit="px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> </div> <div class="property"> ...
... (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-trans...
...And 17 more matches

Box-shadow generator - CSS: Cascading Style Sheets
="wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="colorpicker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_selector"> </div> </div> <div class="info"> <div class="input" data-topic="hue" data-title='h:' data-action="hsv"></div> <div class="input" data-topic="saturation" data-title='s:' data-action="hsv"></div> <div class="input" data-topic="value" data-title='v:' data-action="hsv"></div> ...
... </div> <div class="alpha"> <div id="alpha" data-topic="alpha"> <div id="alpha_selector"> </div> </div> </div> <div class="info"> <div class="input" data-topic="r" data-title='r:' data-action="rgb"></div> <div class="input" data-topic="g" data-title='g:' data-action="rgb"></div> <div class="input" data-topic="b" data-title='b:' data-action="rgb"></div> </div> <div class="preview block"> <div id="output_color"> </div> </div> <div class="block info"> <div cla...
...r haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercas...
...And 17 more matches

HTML attribute: multiple - HTML: Hypertext Markup Language
valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the form control.
...in firefox, the file input reads "no files selected" when the attribute is present and "no file selected" when not, when no files are selected.
... most browsers displaying a scrolling list box for a <select> control with the multiple attribute set versus a single line dropdown when the attribute is ommitted.
...And 17 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
methods select(), stepdown(), stepup() value a domstring representing the value of the date entered into the input.
... you can also get and set the date value in javascript using the htmlinputelement.value property, for example: var datecontrol = document.queryselector('input[type="datetime-local"]'); datecontrol.value = '2017-06-01t08:30'; there are several methods provided by javascript's date that can be used to convert numeric date information into a properly-formatted string, or you can do it manually.
...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 17 more matches

tree - Archive of obsolete content
attributes disablekeynavigation, disabled, editable, enablecolumndrag, flags, hidecolumnpicker, onselect, 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" la...
...this is done incrementally, so typing more letters with select more specific items.
... onselect type: script code this event is sent to a tree when a row is selected, or whenever the selection changes.
...And 16 more matches

How CSS is structured - Learn web development
selectors a selector targets html to apply styles to content.
... we have already discovered a variety of selectors in the getting started with css tutorial.
... if css is not applying to content as-expected, your selector may not match the way you think it should match.
...And 16 more matches

CSS basics - Learn web development
css is what you use to selectively style html elements.
... for example, this css selects paragraph text, setting the color to red: p { color: red; } let's try it out!
...(the term ruleset is often referred to as just rule.) note the names of the individual parts: selector this is the html element name at the start of the ruleset.
...And 16 more matches

DevTools API - Firefox Developer Tools
the toolpanel is built only when the tool is selected (not when the toolbox is opened).
... hostoptions {object} - an options object passed to the selected host.
... return value: a promise that is fulfilled with the toolbox instance once it has been initialized and the selected tool is loaded.
...And 16 more matches

Using files from web applications - Web APIs
using the file api, which was added to the dom in html5, it's now possible for web content to ask the user to select local files and then read the contents of those files.
... this selection can be done by either using an html <input type="file"> element or by drag and drop.
... accessing selected file(s) consider this html: <input type="file" id="input" multiple> the file api makes it possible to access a filelist containing file objects representing the files selected by the user.
...And 16 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
utton"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> <div class="property"> <div class="name"> axis unit </div> <div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> <div data-value='px'> pixels (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-slider" data-topic="axis-rotation" data-info="rotation" ...
...iv> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: u...
...r .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-picker .input[data-topic="alpha"] { margin-top: 10px; width: 93px; } .ui-color-picker ...
...And 16 more matches

Open and Save Dialogs - Archive of obsolete content
« previousnext » a common type of dialog is one where the user can select a file to open or save.
... file pickers a file picker is a dialog that allows the user to select a file.
... it is most commonly used for the open and save menu commands, but you can use it any place in which the user needs to select a file.
...And 15 more matches

Index - Firefox Developer Tools
9 introduction to dom inspector dom_inspector the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamonkey, or by selecting the dom inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application.
... 16 dom property viewer dom, tools, web development the dom property viewer lets you inspect the properties of the dom as an expandable tree structure, starting from the window object of the current page or the selected iframe.
... 31 eyedropper firefox, tools, web development:tools the eyedropper tool enables you to select colors in the current page.
...And 15 more matches

Examine and edit HTML - Firefox Developer Tools
this shows the complete hierarchy through the document for the branch containing the selected element: hovering over a breadcrumb highlights that element in the page.
...there are three types of searches that are performed automatically depending on what you enter, a full text search, a css selector search, and an xpath search.
...that allows you to find css selectors and xpath expressions occurring within the text.
...And 15 more matches

TextRange - Web APIs
for example, when you hold down the mouse to select the content on the page, you create a typical textrange.
... it is implemented in ie, then a textrange object can be created by element.createtextrange() or document.selection.createrange().
...alternative selection and range interfaces can be used.
...And 15 more matches

:not() - CSS: Cascading Style Sheets
the :not() css pseudo-class represents elements that do not match a list of selectors.
... since it prevents specific items from being selected, it is known as the negation pseudo-class.
... /* selects any element that is not a paragraph */ :not(p) { color: blue; } the :not() pseudo-class has a number of quirks, tricks, and unexpected results that you should be aware of before using it.
...And 15 more matches

jspage - Archive of obsolete content
case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:return c;}return b;}var browser=$merge({engine:{name:"unknown",version:0},platform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?950:925)); },trident:function(){return(!window.activexobject)?false:((window.xmlhttprequest)?((document.queryselectorall)?6:5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.features.xpath)?((browser.features.query)?525:420):419); },gecko:f...
...(){return this;}});native.implement([element,document],{getelement:function(a,b){return document.id(this.getelements(a,true)[0]||null,b); },getelements:function(a,d){a=a.split(",");var c=[];var b=(a.length>1);a.each(function(e){var f=this.getelementsbytagname(e.trim());(b)?c.extend(f):c=f; },this);return new elements(c,{ddup:b,cash:!d});}});(function(){var h={},f={};var i={input:"checked",option:"selected",textarea:(browser.engine.webkit&&browser.engine.version<420)?"innerhtml":"value"}; var c=function(l){return(f[l]||(f[l]={}));};var g=function(n,l){if(!n){return;}var m=n.uid;if(browser.engine.trident){if(n.clearattributes){var q=l&&n.clonenode(false); n.clearattributes();if(q){n.mergeattributes(q);}}else{if(n.removeevents){n.removeevents();}}if((/object/i).test(n.tagname)){for(var o in n){if(t...
...!p){return document.id(o,r); }q.push(o);}o=o[l];}return(p)?new elements(q,{ddup:false,cash:!r}):null;};var e={html:"innerhtml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:function(m,l){if(!l.parentnode){return;}var n=...
...And 14 more matches

Other form controls - Learn web development
drop-down controls drop-down controls are a simple way to let users select from many different options without taking up much space in the user interface.
... html has two forms of drop down content: the select box, and the autocomplete box.
... in both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.
...And 14 more matches

CSS property compatibility table for form controls - Learn web development
border and background background no no border-radius no no box-shadow no no select boxes (single line) see the <select>, <optgroup> and <option> elements.
... property n t note css box model width partial[1] partial[1] this property is okay on the <select> element, but it cannot be the case on the <option> or <optgroup> elements.
... the property is well applied on the <select> element, but is inconsistently handled on <option> and <optgroup> elements.
...And 14 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
to do so, we'll utilize some techniques for accessing dom nodes and executing methods like focus() and select().
... we'd also like to add some usability features, like disabling the save button when required fields are empty, giving focus to certain html elements or auto-selecting contents when a text input receives focus.
... to implement all these features we'll need programmatic access to dom nodes to run functions like focus() and select().
...And 14 more matches

Handling common HTML and CSS problems - Learn web development
if you have a widget, make sure it has a distinct class, and then start the selectors that select elements inside the widget with this class, so conflicts are less likely.
...for cross browser forms, it is probably better to rely on simple form elements, or selectively use advanced form elements only in supporting browsers, or using a library that provides decent cross browser form widgets, such as jquery ui or bootstrap datepicker.
... ie conditional comments ie conditional comments are a modified proprietary html comment syntax, which can be used to selectively apply html code to different versions of ie.
...And 14 more matches

Accessible Toolkit Checklist
get_accstate: a 32 bit field representing possible on/off states, such as focused, focusable, selected, selectable, visible, protected (for passwords), checked, etc.
... get_accselection: which children of this item are selected?
...dialogs) support mnemonics in dialogs created via method calls layout engine - drawing underline under correct letter events - making keystrokes do the right thing msaa support, via iaccessible's get_acckeyboardshortcut support for ms windows settings when high contrast checkbox is set (in accessibility control panel, spi_gethighcontrast), or when user selects a "native" skin option in your software, then get all look and feel from current os skin.
...And 14 more matches

Rhino Debugger
opening scripts you may select the file->open menu item on the menu bar to load javascript scripts contained in files.
... this action will display a file-selection dialog box prompting you for the location of a script to load.
... the selected file will be compiled and displayed in a new window.
...And 14 more matches

IAccessibleText
method overview hresult addselection([in] long startoffset, [in] long endoffset ); [propget] hresult attributes([in] long offset, [out] long startoffset, [out] long endoffset, [out] bstr textattributes ); [propget] hresult caretoffset([out] long offset ); [propget] hresult characterextents([in] long offset, [in] enum ia2coordinatetype coordtype, [out] long x, [out] long y, [out] long width, [out] long height ); [propget] ...
...hresult ncharacters([out] long ncharacters ); [propget] hresult newtext([out] ia2textsegment newtext ); [propget] hresult nselections([out] long nselections ); [propget] hresult offsetatpoint([in] long x, [in] long y, [in] enum ia2coordinatetype coordtype, [out] long offset ); [propget] hresult oldtext([out] ia2textsegment oldtext ); hresult removeselection([in] long selectionindex ); hresult scrollsubstringto([in] long startindex, [in] long endindex, [in] enum ia2scrolltype scrolltype ); hresult scrollsubstringtopoint([in] long startindex, [in] long endindex, [in] enum ia2coordinatetype coordinatetype, [in] long x, [in] long y ); [propget] hresult selection([in] long selectionindex, [out] long startoffset, [out] long endoffset ); hresult setcaretoffset([in] long offset ); hr...
...esult setselection([in] long selectionindex, [in] long startoffset, [in] long endoffset ); [propget] hresult text([in] long startoffset, [in] long endoffset, [out] bstr text ); [propget] hresult textafteroffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); [propget] hresult textatoffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); [propget] hresult textbeforeoffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); methods addselection() adds a text() selection().
...And 14 more matches

Examine and edit CSS - Firefox Developer Tools
examine css rules the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific: the four buttons on the right top of the rules view allow you to change the display of certain css and rules view features.
...in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.
... highlight matched elements: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector.
...And 14 more matches

CSS reference - CSS: Cascading Style Sheets
you can also browse key css concepts and a list of selectors organized by type.
... basic rule syntax style rule syntax style-rule ::= selectors-list { properties-list } ...
... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] see the index of selectors, pseudo-classes, and pseudo-elements below.
...And 14 more matches

Tabbed browser - Archive of obsolete content
cent browser window using this code: var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var mainwindow = wm.getmostrecentwindow("navigator:browser"); mainwindow.gbrowser.addtab(...); opening a url in a new tab // add tab gbrowser.addtab("http://www.google.com/"); // add tab, then make active gbrowser.selectedtab = gbrowser.addtab("http://www.google.com/"); manipulating content of a new tab if you want to work on the content of the newly opened tab, you'll need to wait until the content has finished loading.
... openuilinkin( url, where, allowthirdpartyfixup, postdata, referrerurl ) where: "current" current tab (if there aren't any browser windows, then in a new window instead) "tab" new tab (if there aren't any browser windows, then in a new window instead) "tabshifted" same as "tab" but in background if default is to select new tabs, and vice versa "window" new window "save" save to disk (with no filename hint!) openuilink( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held.
...select this tab.
...And 13 more matches

radiogroup - Archive of obsolete content
only one radio button inside the group can be selected at a time.
... 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 ...
... focuseditem type: radio element holds the currently focused item in the radiogroup, which may or may not be the same as the selected item.
...And 13 more matches

nsIPromptService
boolean promptusernameandpassword(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring ausername, inout wstring apassword, in wstring acheckmsg, inout boolean acheckstate); boolean promptpassword(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring apassword, in wstring acheckmsg, inout boolean acheckstate); boolean select(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in pruint32 acount, [array, size_is(acount)] in wstring aselectlist, out long aoutselection); constants the following flags are combined to form the abuttonflags parameter passed to confirmex.
... constant value description button_title_ok 1 these flags are used to select standard labels from the user's current locale.
... button default flags these flags are used to select which button is the default.
...And 13 more matches

HTMLInputElement - Web APIs
allowdirs boolean: part of the non-standard directory upload api; indicates whether or not to allow directories and files both to be selected in the file list.
... files returns/accepts a filelist object, which contains a list of file objects representing the files selected for upload.
... webkitentries array of filesystementry objects: describes the currently selected files or directories.
...And 13 more matches

HTMLTextAreaElement - Web APIs
selectiondirection string: returns / sets the direction in which selection occurred.
... this is "forward" if selection was performed in the start-to-end direction of the current locale, or "backward" for the opposite direction.
... selectionend unsigned long: returns / sets the index of the end of selected text.
...And 13 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 tabinde...
... aria-multiselectable if aria-multiselectable is set to true, multiple items in the grid can be selected.
... if cells, rows, or columns can be selected, the following key combination are commonly used: key combination action ctrl + space select the column that contains the focus.
...And 13 more matches

Border-radius generator - CSS: Cascading Style Sheets
s-lock"> <div class="info"> rounded corner </div> <div class="ui-checkbox" data-topic='top-left'></div> <div class="ui-checkbox" data-topic='top-right'></div> <div class="ui-checkbox" data-topic='bottom-right'></div> <div class="ui-checkbox" data-topic='bottom-left'></div> </div> <div id="unit-selection"> <div class="info"> select border units </div> </div> </div> </div> </div> css content /* grid of ten * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62...
... /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; ...
...round-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { 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-r...
...And 13 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
then we'll wrap things up with a brief discussion of how to use color wisely: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.
... then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance.
... letting the user pick a color there are many situations in which your website may need to let the user select a color.
...And 13 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.
... figure 7: menu items with icons executing commands when selecting menu items much like dynamic html, event handlers are used to execute a command when a menu item is selected.
... xul can also use these event handlers, but xul also offers the oncommand special event handler to deal with actions that often have specific meanings, such as selection by a left-click (or right-click on systems set up as left-handed) on the mouse or selection by the enter key.
...And 12 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
this is because the a:hover css selector in internet explorer matches <a href="">...</a> but not <a name="">...</a>, which sets anchors in html.
...rich text editing commands command name description argument bold toggles the selection's bold attribute.
... --- createlink generates an html link from the selected text.
...And 12 more matches

tab - Archive of obsolete content
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.
... afterselected type: boolean this is set to true if the tab is immediately after the currently selected tab.
...this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.
...And 12 more matches

tabs - Archive of obsolete content
activating them will not change the selectedindex.
... attributes closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltiptextnew, value, properties accessibletype, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem, getindexofitem, getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends.
... onselect type: script code this event is sent to the tabs element when this tab is changed.
...And 12 more matches

Getting started with CSS - Learn web development
we do this by targeting an element selector — this is a selector that directly matches an html element name.
... to target all paragraphs in the document you would use the selector p.
... to turn all paragraphs green you would use: p { color: green; } you can target multiple selectors at once, by separating the selectors with a comma.
...And 12 more matches

nsIPlacesView
for example, the representation of selection differs between trees, menus, and other such lists.
... controllers should not be concerned with these details; controller code should not be required to decode the meaning of a selection depending on what kind of view produced the selection.
... rather, each view is responsible for translating its own selection format into one the controller can understand.
...And 12 more matches

:nth-child() - CSS: Cascading Style Sheets
/* selects the second <li> element in a list */ li:nth-child(2) { color: lime; } /* selects every fourth element among any group of siblings */ :nth-child(4n) { color: lime; } syntax the nth-child pseudo-class is specified with a single argument that describes a pattern for matching element indices in a list of siblings.
... formal syntax :nth-child( <nth> [ of <complex-selector-list> ]?
... )where <nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>?
...And 12 more matches

<input type="date"> - HTML: Hypertext Markup Language
among browsers with custom interfaces for selecting dates are chrome and opera, whose data control looks like so: the edge date control looks like: and the firefox date control looks like this: value a domstring representing a date in yyyy-mm-dd format, or empty events change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasda...
... methods select(), stepdown(), stepup() value a domstring representing the date entered in the input.
...for example: var datecontrol = document.queryselector('input[type="date"]'); datecontrol.value = '2017-06-01'; console.log(datecontrol.value); // prints "2017-06-01" console.log(datecontrol.valueasnumber); // prints 1496275200000, a unix timestamp this code finds the first <input> element whose type is date, and sets its value to 2017-06-01 (june 1st, 2017).
...And 12 more matches

<input type="month"> - HTML: Hypertext Markup Language
clicking the down arrow on the right hand side brings up a date picker that lets you select the month and year.
... idl attributes value methods select(), stepdown(), stepup().
... 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...
...And 12 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, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> <lab...
... clickselectsall type: boolean if set to true, the contents of the textbox are selected when focused; otherwise, the cursor is left unchanged.
... selectionend type: integer get or set the end of the selected portion of the field's text.
...And 11 more matches

Debugging on Mac OS X
select the "cross-platform" tab then under the "other" template group select the "empty" project type.
...create/select a temporary directory to contain the project and then click create.
...now, right click on the root item, select 'add files to "<project-name>"', select all the files and directories in your source directory, untick "copy items if needed", then click add.
...And 11 more matches

nsIEditor
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) method overview [noscript] void init(in nsidomdocument doc, in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags); void setattributeorequivalent(in nsidomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframes); ...
... selected content removal void deleteselection(in short action, in short stripwrappers); document info and file methods void resetmodificationcount(); long getmodificationcount(); void incrementmodificationcount(in long amodcount); void incrementmodificationcount(in long amodcount); transaction methods void dotransaction(in nsitransaction txn); void enableundo(in boolean enable); void undo(in unsigned long count); void canundo(out boolean isenabled, out boolean canundo); void redo(in unsigned long count); void canredo(out boolean isenabled, out boolean canredo); void begintransaction(); void endtransaction(); void beginplaceholdertransaction(in ns...
...iatom name); void endplaceholdertransaction(); boolean shouldtxnsetselection(); void setshouldtxnsetselection(in boolean should); inline spellchecking methods nsiinlinespellchecker getinlinespellchecker(in boolean autocreate); void syncrealtimespell(); void setspellcheckuseroverride(in boolean enable); clipboard methods void cut(); boolean cancut(); void copy(); boolean cancopy(); void paste(in long aselectiontype); boolean canpaste(in long aselectiontype); selection methods void selectall(); void beginningofdocument(); void endofdocument(); drag/drop methods boolean candrag(in nsidomevent aevent); void dodrag...
...And 11 more matches

All keyboard shortcuts - Firefox Developer Tools
f1 f1 f1 toggle toolbox between the last 2 docking modes ctrl + shift + d cmd + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox.
... to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting.
... if you do this, the selected bindings will be used for all the developer tools that use the source editor.
...And 11 more matches

Tips - Firefox Developer Tools
(there are more than the default tools!) page inspector in the markup view: press h with a node selected to hide/show it.
... press backspace or del with a node selected to delete it.
... click on the last breadcrumb button to scroll the selection into view in the inspector.
...And 11 more matches

ARIA Test Cases - Accessibility
if the currently selected option is changed the new option should be spoken whether the list is open or closed.
...but when dropping down the lists of states in either example, after the second or so list item, jaws turns off forms mode, and the user has to turn off v cursor to be able to make selections or tab to anything useful.
... once marked for drag and drop, screen reader should announce that this item has been picked up, to distinguish it from others that may be draggable, but are currently not selected for the operation.
...And 11 more matches

:nth-last-child() - CSS: Cascading Style Sheets
/* selects every fourth element among any group of siblings, counting backwards from the last one */ :nth-last-child(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-child, except it counts items backwards from the end, not forwards from the beginning.
... formal syntax :nth-last-child( <nth> [ of <complex-selector-list> ]?
... )where <nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>?
...And 11 more matches

:where() - CSS: Cascading Style Sheets
the :where() css pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
... the difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.
... to make selecting the links inside them simpler, but still distinct, we could use :is() or :where(), in the following manner: html { font-family: sans-serif; font-size: 150%; } :is(section.is-styling, aside.is-styling, footer.is-styling) a { color: red; } :where(section.where-styling, aside.where-styling, footer.where-styling) a { color: orange; } however, what if we later want to override the color...
...And 11 more matches

Creating annotations - Archive of obsolete content
selector page-mod selector content scripts the content script for the selector page-mod uses jquery to examine and manipulate the dom.
... the selector page mod can be switched on and off using a message from the main add-on code.
...initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event.
...And 10 more matches

XBL Example - Archive of obsolete content
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 selectedindex is inherited by the deck, so we may set the initial page in the xul.
...when getting this custom property, it will need to retrieve the value of the selectedindex attribute of the deck, which holds the number of the currently displayed page.
...And 10 more matches

datepicker - Archive of obsolete content
grid - a datepicker with a calendar grid for selecting a date.
... there are several ways to set the selected day.
... to change the selected date, the value property may be used to set a new value in the form yyyy-mm-dd.
...And 10 more matches

Advanced form styling - Learn web development
these include: elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>.
... take the following example, which shows a number of the "ugly" form features in action: this example has the following css applied to it: body { font-family: 'josefin sans', sans-serif; margin: 20px auto; max-width: 400px; } form > div { margin-bottom: 20px; } select { -webkit-appearance: none; appearance: none; } .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } button, label, input, select, progress, meter { display: block; font-family: inherit; font-size: 100%; padding: 0; margin: 0; box-sizing: border-box; width: 100%; padding: 5...
...px; height: 30px; } input[type="text"], input[type="datetime-local"], input[type="color"], select { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } label { margin-bottom: 5px; } button { width: 60%; margin: 0 auto; } note: if you want to test these examples across a number of browsers simultaneously, you can find it live here (also see here for the source code).
...And 10 more matches

Looping code - Learn web development
le> html { width: 100%; height: inherit; background: #ddd; } canvas { display: block; } body { margin: 0; } button { position: absolute; top: 5px; left: 5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); let width = document.documentelement.clientwidth; let height = document.documentelement.clientheight; canvas.width = width; canvas.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect...
... const cats = ['bill', 'jeff', 'pete', 'biggles', 'jasmin']; let info = 'my cats are called '; const para = document.queryselector('p'); for (let i = 0; i < cats.length; i++) { info += cats[i] + ', '; } para.textcontent = info; this gives us the following output: hidden code 2 <!doctype html> <html> <head> <meta charset="utf-8"> <title>basic for loop example</title> <style> </style> </head> <body> <p></p> <script> const cats = ['bill', 'jeff', 'pete', 'biggles', 'jasmin']; le...
...t info = 'my cats are called '; const para = document.queryselector('p'); for (let i = 0; i < cats.length; i++) { info += cats[i] + ', '; } para.textcontent = info; </script> </body> </html> note: you can find this example code on github too (also see it running live).
...And 10 more matches

Manipulating documents - Learn web development
descendant selector, child selector).
... to manipulate an element inside the dom, you first need to select it and store a reference to it inside a variable.
... inside your script element, add the following line: const link = document.queryselector('a'); now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like htmlanchorelement in the case of <a> element, its more general parent interface htmlelement, and node — which represents all nodes in a dom).
...And 10 more matches

Profiling with the Firefox Profiler
once a range is selected, a magnifying glass appears which zooms into that range.
... clicking on a tracing marker will create a selection corresponding with its duration allowing for easy zooming in on interesting time ranges.
... as you zoom in on ranges, breadcrumbs are created allowing you to easily navigate back to previously-selected ranges or the entire profile (denoted as "full range").
...And 10 more matches

nsIAccessibleRole
role_menubar 2 represents the menu bar (positioned beneath the title bar of a window) from which menus are selected by the user.
... role_menupopup 11 represents a menu, which presents a list of options from which the user can make a selection to perform an action.
... role_menuitem 12 represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option.
...And 10 more matches

Introduction to DOM Inspector - Firefox Developer Tools
the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamonkey, or by selecting the dom inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application.
...if the dom inspector doesn't automatically load a document or loads a document other than the one you'd like to inspect, you can select the desired document a few different ways.
...instead, ensure that the document loads via normal means and use the inspect chrome document menupopup to select it for inspection.
...And 10 more matches

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.
... the common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs.
... when working with elements with the tab role, when they are selected or active, they should have their aria-selected attribute set to true, otherwise it should be set to false.
...And 10 more matches

@supports - CSS: Cascading Style Sheets
selector() tests if the browser supports the tested selector syntax.
... the following example returns true if the browser supports the child combinator: @supports selector(a > b) {} the not operator the not operator can precede any expression to create a new expression, resulting in the negation of the original one.
... formal syntax @supports <supports-condition> { <group-rule-body> }where <supports-condition> = not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*where <supports-in-parens> = ( <supports-condition> ) | <supports-feature> | <general-enclosed>where <supports-feature> = <supports-decl> | <supports-selector-fn><general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )where <supports-decl> = ( <declaration> )<supports-selector-fn> = selector( <complex-selector> )where <complex-selector> = <compound-selector> [ <combinator>?
...And 10 more matches

List Controls - Archive of obsolete content
the user may select an item from the list.
...they work similar to the html select element, which performs both functions, but the xul elements have additional features.
...when the user selects an item in the list, the entire row is selected.
...And 9 more matches

Debugging CSS - Learn web development
perhaps you believe that a certain selector should match an element, but nothing happens, or a box is a different size than you expected.
... inspecting the applied css select an element on your page, either by right/ctrl-clicking on it and selecting inspect, or selecting it from the html tree on the left of the devtools display.
... try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it.
...And 9 more matches

What are browser developer tools? - Learn web development
in safari, the controls are not so clearly presented, but you should see the html if you haven't selected something else to appear in the window.
...copy the currently selected html.
... some browsers also have copy css path and copy xpath available, to allow you to copy the css selector or xpath expression that would select the current html element.
...And 9 more matches

Migrating from Firebug - Firefox Developer Tools
edit css both tools allow to view and edit the css rules related to the element selected within the node view in a similar way.
...the devtools additionally provide an option to copy the selector of a rule and copy disabled property declarations as commented out.
... they are missing the option to copy the whole style declaration, though this can be achieved by selecting them within the panel and copying the selection by pressing ctrl+c or via the context menu.
...And 9 more matches

Responsive Design Mode - Firefox Developer Tools
toggling responsive design mode there are three ways to toggle responsive design mode: from the firefox menu: select responsive design mode from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
... note: the device you select when in responsive design mode and the orientation (portrait or landscape) is saved between sessions.
... information for the selected device is centered over the display.
...And 9 more matches

The JavaScript input interpreter - Firefox Developer Tools
you can also select a range of lines in the editing pane, and run just the code on those lines.
...a file dialog box opens so you can select the file to open.
...select the menuitem to change the state.
...And 9 more matches

Color picker tool - CSS: Cascading Style Sheets
</div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: u...
...r .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-picker .input[data-topic="alpha"] { margin-top: 10px; width: 93px; } .ui-color-picker ...
...dth: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; background-color: #eee; left: -12px; top: -1px; z-index: 1; transition: all 0.5s; } .ui-color-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-trans...
...And 9 more matches

Using CSS transitions - CSS: Cascading Style Sheets
d-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: ...
...ground-color font-size left top -webkit-transform transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 1s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: ...
...ground-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 2s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: ...
...And 9 more matches

<input type="time"> - HTML: Hypertext Markup Language
appearance chrome and opera in chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component.
... methods select(), stepdown(), and stepup().
...et 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 format that includes leading zeros: hh:mm, regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent).
...And 9 more matches

<input type="week"> - HTML: Hypertext Markup Language
in chrome/opera the week control provides slots to fill in week and year values, a pop-up calendar interface to select them more visually, and an "x" button to clear the control's value.
... methods select(), stepdown(), and stepup() value a domstring representing the value of the week/year entered into the input.
... you can also get and set the value in javascript using the input element's value property, for example: var weekcontrol = document.queryselector('input[type="week"]'); weekcontrol.value = '2017-w45'; additional attributes in addition to the attributes common to <input> elements, week inputs offer the following attributes: attribute description max the latest year and week to accept as valid input min the earliest year and week to accept as valid input readonly a boolean which, if pr...
...And 9 more matches

Menus - Archive of obsolete content
the user may select a command to invoke it, or may cancel the operation by pressing escape or clicking outside the menu.
...clicking the button will display the menu, allowing a command to be selected.
... menulist a menulist is used when you wish the user to select from a list of items.
...And 8 more matches

Commands - Archive of obsolete content
in addition, the menu commands would need to be enabled and disabled depending on whether the focused element had selected text or not, and for paste operations, whether there is something suitable on the clipboard to paste.
...the textbox controller handles clipboard operations, selection, undo and redo as well as some editing operations.
...when the user selects delete from the menu, the listbox deletes the selected row.
...And 8 more matches

XUL controls - Archive of obsolete content
checkbox reference <colorpicker> a control that may be used to select a color.
... <datepicker value="2007/03/26"/> datepicker reference <datepicker type="grid"> a datepicker which displays a calendar grid for selecting a date.
... <description> select a time for the event to start </description> more information about the description element.
...And 8 more matches

colorpicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a palette of colors from which a user may select by clicking on one of the grid cells.
... color type: color string the currently selected color.
... this is modified when the user selects a color.
...And 8 more matches

Scratchpad - Archive of obsolete content
usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f4, or go to the web developer menu (which is a submenu in the tools menu on macos and linux), then select scratchpad click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "scratchpad".
...↑ and ↓ cycle through the suggestions and enter or tab select the highlighted choice.
... executing once you've written your code, select the code you want to run.
...And 8 more matches

JavaScript basics - Learn web development
add this code to the main.js file: const myheading = document.queryselector('h1'); myheading.textcontent = 'hello world!'; make sure the html and javascript files are saved.
...you did this by using a function called queryselector() to grab a reference to your heading, and then store it in a variable called myheading.
... this is similar to what we did using css selectors.
...And 8 more matches

A first splash into JavaScript - Learn web development
er guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100.
...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() * 100) + 1; const guesses = document.queryselector('.guesses'); const lastresult = document.queryselector('.lastresult'); const loworhi = document.queryselector('.loworhi'); const guesssubmit = document.queryselector('.guesssubmit'); const guessfield = document.queryselector('.guessfield'); let guesscount = 1; let resetbutton; function checkguess() { let userguess = number(guessfield.value); if (guesscou...
...ss); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const resetparas = document.queryselectorall('.resultparas p'); for(let i = 0 ; i < resetparas.length ; i++) { resetparas[i].textcontent = ''; } resetbutton.parentnode.removechild(resetbutton); guessfield.disabled = false; guesssubmit.disabled = false; guessfield.value = ''; guessfield.focus(); lastresult.style.backgroundcolor = 'white'; randomnumber = math.floor(math.rando...
...And 8 more matches

Getting started with Vue - Learn web development
this allows you to select a different routing/state management library if they better fit your application.
... use the arrow keys and enter to select the "manually select features" option.
...make sure that "babel" and "linter / formatter" are selected.
...And 8 more matches

Gecko Roles
role_menubar represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on mac os x) from which menus are selected by the user.
... role_menupopup represents a menu, which presents a list of options from which the user can make a selection to perform an action.
... role_menuitem represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option.
...And 8 more matches

nsIAccessibleEvent
event_selection 0x8006 0x0012 0x000f the selection within a container object has changed.
... event_selection_add 0x8007 0x0013 0x0010 an item within a container object has been added to the selection.
... event_selection_remove 0x8008 0x0014 0x0011 an item within a container object has been removed from the selection.
...And 8 more matches

Using Objective-C from js-ctypes
$ clang -framework appkit test.m && ./a.out class, message, and selector our task at hand is to convert objective-c syntax to c syntax.
... register the alloc selector for the message.
... send a message to the class, with the selector.
...And 8 more matches

HTMLInputElement.setRangeText() - Web APIs
syntax element.setrangetext(replacement); element.setrangetext(replacement, start, end [, selectmode]); parameters replacement the string to insert.
...defaults to the current selectionstart value (the start of the user's current selection).
...defaults to the current selectionend value (the end of the user's current selection).
...And 8 more matches

Using the Screen Capture API - Web APIs
example of a window allowing the user to select a display surface to capture you can then use the captured stream, capturestream, for anything that accepts a stream as input.
... visible vs logical display surfaces for the purposes of the screen capture api, a display surface is any content object that can be selected by the api for sharing purposes.
... none of the constraints are applied in any way until after the content to capture has been selected.
...And 8 more matches

Example and tutorial: Simple synth keyboard - Web APIs
for now, we will have two controls: one to set the master volume and another to select what periodic waveform to use when generating notes.
... the waveform picker on the right side of the settings bar, we place a label and a <select> element named "waveform" whose options correspond to the available waveforms.
... <div class="right"> <span>current waveform: </span> <select name="waveform"> <option value="sine">sine</option> <option value="square" selected>square</option> <option value="sawtooth">sawtooth</option> <option value="triangle">triangle</option> <option value="custom">custom</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; po...
...And 8 more matches

:has() - CSS: Cascading Style Sheets
the :has() css pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.
... /* selects any <a>, as long as it has an <img> element directly inside it */ /* note that this is not supported in any browser yet */ let test = document.queryselector('a:has(> img)'); syntax :has( <relative-selector-list> )where <relative-selector-list> = <relative-selector>#where <relative-selector> = <combinator>?
... <complex-selector>where <combinator> = '>' | '+' | '~' | [ '|' ]<complex-selector> = <compound-selector> [ <combinator>?
...And 8 more matches

:host() - CSS: Cascading Style Sheets
the :host() css pseudo-class function selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host.
... the most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument.
... you can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor.
...And 8 more matches

Input Controls - Archive of obsolete content
the textbox is fully functional and you can type into it and select text.
... note that the control attribute has been used so that the textbox is selected when the label is clicked.
...radio buttons can be used for a similar purpose when there are a set of them and only one can be selected at once.
...And 7 more matches

tabbox - Archive of obsolete content
attributes eventnode, handlectrlpageupdown, handlectrltab properties accessibletype, eventnode, handlectrlpageupdown, handlectrltab, selectedindex, selectedpanel, selectedtab, tabs, tabpanels examples <tabbox id="mytablist" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <ta...
... selectedindex type: integer returns the index of the currently selected item.
... you may select an item by assigning its index to this property.
...And 7 more matches

CSS FAQ - Learn web development
classes allow you to style multiple elements, therefore they can lead to shorter stylesheets, rather than having to write out the same styling information in multiple rules that use id selectors.
... class selectors have lower specificity than id selectors, so are easier to override if needed.
... note: see selectors for more information.
...And 7 more matches

HTML text fundamentals - Learn web development
ue="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; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === ...
...addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time...
...ue="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; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === ...
...And 7 more matches

Mozilla’s UAAG evaluation report
most browsers do not allow the user to select text with the keyboard alone.
...ccess"); or turn it off everywhere: user_pref("capability.policy.default.windowinternal.open", "noaccess"); override popping up new windows on target=anything: user_pref("browser.target_new_blocked", true); override popup windows at beginning of new page load (blocks most popup advertisements): user_pref("dom.disable_open_during_load", true); 5.4 selection and focus in viewport.
... (p2) c when focus and/or selection changes they are in the viewport 5.5 confirm form submission.
...And 7 more matches

The Firefox codebase: CSS Guidelines
only use generic selectors such as :last-child, when it is what you mean semantically.
... do this: border-color: red; not this: border: red; put multiple selectors on different lines do this: h1, h2, h3 { font-family: sans-serif; text-align: center; } not this: h1, h2, h3 { font-family: sans-serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common.
... other tips assume ="true" in attribute selectors.
...And 7 more matches

Displaying Places information using views
like all places views, the built-in tree view implements this interface, which provides broad methods such as getting the view's nsinavhistoryresult instance and examining the view's selection.
... selectitems() selects the first node in the tree that matches each given item id.
... it will open any parent nodes that it needs to in order to show the selected items.
...And 7 more matches

nsIEditorMailSupport
inherits from: nsisupports last changed in gecko 1.7 method overview nsisupportsarray getembeddedobjects(); nsidomnode insertascitedquotation(in astring aquotedtext, in astring acitation, in boolean ainserthtml); nsidomnode insertasquotation(in astring aquotedtext); void inserttextwithquotations(in domstring astringtoinsert); void pasteascitedquotation(in astring acitation, in long aselectiontype); void pasteasquotation(in long aselectiontype); void rewrap(in boolean arespectnewlines); void stripcites(); methods getembeddedobjects() get a list of img and object tags in the current document.
...insertascitedquotation() insert a string as quoted text (whose representation is dependent on the editor type), replacing the selected text (if any), including, if possible, a "cite" attribute.
...insertasquotation() insert a string as quoted text (whose representation is dependent on the editor type), replacing the selected text (if any).
...And 7 more matches

nsITreeView
astring getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(in long index); boolean iscontainerempty(in long index); boolean iscontaineropen(in long index); boolean iseditable(in long row, in nsitreecolumn col); boolean isselectable(in long row, in nsitreecolumn col); boolean isseparator(in long index); boolean issorted(); void performaction(in wstring action); void performactiononcell(in wstring action, in long row, in nsitreecolumn col); void performactiononrow(in wstring action, in long row); void selectionchanged(); void setcelltext(in long row, in nsitr...
... selection nsitreeselection the selection for this view.
... cyclecell() called on the view when a cell in a non-selectable cycling column (for example, unread/flag/and so on.) is clicked.
...And 7 more matches

Folders and message lists
getting the currently-selected message the folderdisplaywidget has several ways of getting the currently-selected message(s), depending on what exactly you're trying to do: gfolderdisplay.selectedcount: returns the number of messages currently selected.
... gfolderdisplay.selectedmessage: returns the first currently-selected message.
... when using this, be sure that there's only one selected message (or that you only care about the first one).
...And 7 more matches

Call Tree - Firefox Developer Tools
the screenshot below shows the output of a program that compares three sorting algorithms - bubble sort, selection sort, and quicksort.
... total time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording.
... total cost is that number as a percentage of the total number of samples in the selected portion of the recording.
...And 7 more matches

Web Console Helpers - Firefox Developer Tools
$(selector, element) looks up a css selector string selector , returning the first node descended from element that matches.
...equivalent to document.queryselector() or calls the $ function in the page, if it exists.
... see the queryselector code snippet.
...And 7 more matches

HTML attribute reference - HTML: Hypertext Markup Language
autocapitalize global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the browser.
... autofocus <button>, <input>, <keygen>, <select>, <textarea> the element should be automatically focused after the page loaded.
...allowed values are ltr (left-to-right) or rtl (right-to-left) dirname <input>, <textarea> disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> indicates whether the user can interact with the element.
...And 7 more matches

<input type="tel"> - HTML: Hypertext Markup Language
value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string ("").
...the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
... providing default options as always, you can provide a default value for an tel input box by setting its value attribute: <input id="telno" name="telno" type="tel" value="333-4444-4444"> offering suggested values taking it a step farther, you can provide a list of default phone number values from which the user can select.
...And 7 more matches

Add a Context Menu Item - Archive of obsolete content
the item is displayed whenever something in the page is selected.
... 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 right-click.
... you should see the new item appear: click it, and the selection is logged to the console (or the shell, if you're running an instance of firefox from the command line): info: elephantine lizard details all this add-on does is to construct a context menu item.
...And 6 more matches

Appendix F: Monitoring DOM changes - Archive of obsolete content
because it is based on css, it can be keyed to match new elements of any arbitrary css selector.
...it is worth noting, however, that while the animation-based implementation will fire any time an element which previously did not match the given selector is changed so that it does (when a class is added, for instance), the fallback will only match nodes when they are inserted into the dom tree.
... /** * watches for nodes matching the given css selector to become * available.
...And 6 more matches

Search Extension Tutorial (Draft) - Archive of obsolete content
var firstrun = false; // decide whether to select the search engine.
... var selectsearch = false; function startup(data, reason) { firstrun = reason == addon_install; // re-select the search engine if this is the first run // or we're being re-enabled.
... selectsearch = firstrun || reason == addon_enable; // only add the engine if it doesn't already exist.
...And 6 more matches

Style System Overview - Archive of obsolete content
a rule is a selector and a declaration block.
... p { color: green; font-size: 12em; } selector { property: value; property: value; } css style rules what do style rules mean?
... selector matches elements in the document.
...And 6 more matches

Proxy UI - Archive of obsolete content
camino configured in os (networking preferences) (recently added - some support for reading os and account settings.)ui elements preferences panel overview the ui is based on selecting a proxy mode, then filling out any additional needed information in "related" ui.
...the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy mode, then "related proxy mode" ui when needed.
... for the purposes of this document, "proxy mode" means both: whatever was selected in the ui (as opposed to the value of the network.proxy.type.
...And 6 more matches

Venkman Introduction - Archive of obsolete content
there are two ways to start the debugger: from firefox, you can start it by selecting javascript debugger from the tools menu (tools->web development menu in mozilla 1.x and netscape).
...the source code view is empty until you select a script, and the interactive session view starts up with basic startup information.
...while in pretty print mode, the contents of the source view will contain the decompiled source text for the selected function.
...And 6 more matches

deck - Archive of obsolete content
the selectedindex attribute determines which child is displayed.
... attributes selectedindex properties selectedindex, selectedpanel examples <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> attributes selectedindex type: integer gets and sets the index of the currently selected panel.
...qualsize, 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 selectedindex type: integer returns the index of the currently selected item.
...And 6 more matches

listitem - Archive of obsolete content
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 typ...
...to change the currently selected item in a listbox, use the listbox property selecteditem.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...And 6 more matches

radio - Archive of obsolete content
only one radio button within the same radiogroup may be selected at a time.
... the user can switch which radio button is turned on by selecting it with the mouse or keyboard.
... 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.
...And 6 more matches

timepicker - Archive of obsolete content
a fourth textbox appears for 12 hour clocks which allows selection of am or pm.
... datevalue type: date the date that is currently entered or selected in the datepicker as a date object.
... hour type: integer the currently selected hour from 0 to 23.
...And 6 more matches

XForms Switch Module - Archive of obsolete content
the toggle element is an action that when triggered will make a case selected and visible and thereby hiding all other case elements contained by the same switch.
...form controls, groups, switches, repeats and host language elements) within a non-selected case are not rendered.
... correspondingly, content elements in a case that becomes selected are visible.
...And 6 more matches

WAI-ARIA basics - Learn web development
wai-aria doesn't affect webpage structure, the dom, etc., although the attributes can be useful for selecting elements by css.
...generally, you are able to use the tab key to move between controls, the enter/return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <select> box).
... this example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents.
...And 6 more matches

Example 1 - Learn web development
basic state html <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ---------...
...--- */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; ...
... padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul cla...
...And 6 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 i want for christmas', 'get well soon']; for (let i = 0; i < greetings.length; i++) { let input = greetings[i]; // your conditional test needs to go inside the parentheses ...
...utionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');' + '\nlist.innerhtml = \'\';' + '\nlet greetings = [\'happy birthday!\',' + '\n \'merry christmas my love\',' + '\n \'a happy christmas to all the family\',' + '\n \'you\\\'re all i want for christmas\',' + '\n \'get well soon\'];' + '\n' + '\nfor (let i = 0; i < greetings.length; i++) {' + '\n let input = greetin...
...ventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every ...
...And 6 more matches

Accessibility API cross-reference
note a selectable item in a select list.
... <p> <p> shows percentage completion for task progressbar progress_bar n/a progressbar page showing properties of something propertypage n/a n/a n/a your average, run-of-the-mill button pushbutton push_button push_button button <button> only one radio button in a group is selectable.
... sectionhead (abstract role) a form widget that allows the user to make selections from a set of choices.
...And 6 more matches

Gecko info for Windows accessibility vendors
iaccessible methods that we support: get_accparent get_accchildcount get_accchild get_accname get_accvalue get_accdescription get_accrole get_accstate get_accfocus get_accdefaultaction acclocation accselect acchittest accdodefaultaction accnavigate get_acckeyboardshortcut msaa support: iaccessible events and unique id's what msaa events do we support?
... event_selection is fired on children of single selection containers along with the event_focus as selection/focus move together in that case.
... event_selectionwithin is fired on multi selection containers when the current selection changes within.
...And 6 more matches

Multiple Firefox profiles
this will present the profile manager window in which you can make your selection.
...to select storage location, click choose folder....
... if you choose your folder location for the profile, select a new or empty folder.
...And 6 more matches

Basics
</p> <div> <math display="block"> <mtable> <mtr> <mtd> <mtable align="axis" columnalign="left left left"> <mtr> <mtd> <maction id="a11" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>0</mn> </msup> <mn>1</mn> </maction> </mtd> <mtd> <maction id="a12" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>1</mn> </msup> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> </maction> </mtd> <mtd> <maction ...
...id="a13" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>2</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <mi>y</mi> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </maction> </mtd> </mtr> <mtr> <mtd> <maction id="a21" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>1</mn> </msup> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> </maction> </mtd> <mtd> <maction id="a22" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mr...
...ow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>2</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <mi>y</mi> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </maction> </mtd> <mtd> <maction id="a23" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>3</mn> </msup> <mrow> <msup> <mi>x</mi> <mn>3</mn> </msup> <mo>+</mo> <mrow> <mn>3</mn> <mo>&invisibletimes;</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>&invisibletimes;</mo> <mi>y</mi> </mrow> <mo>+</mo> <mrow> <mn>3</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>3</mn> </msup> </mrow> </maction> </mtd> </mtr> <mtr> <mtd>...
...And 6 more matches

sslerr.html
possible causes include: (a) both ssl2 and ssl3 are disabled, (b) all the individual ssl cipher suites are disabled, or (c) the socket is configured to handshake as a server, but the certificate associated with that socket is inappropriate for the key exchange algorithm selected.
...tes are present and enabled in this program." possible causes: (a) all cipher suites have been configured to be disabled, (b) the only cipher suites that are configured to be enabled are those that are disallowed by cipher export policy, (c) the socket is configured to handshake as a server, but the certificate associated with that socket is inappropriate for the key exchange algorithm selected.
...may indicate a server configuration error, such as having a certificate that is inappropriate for the key exchange algorithm selected.
...And 6 more matches

Gecko events
is supported: no event_selection the selection within a container object has changed.
... is supported: yes event_selection_add an item within a container object has been added to the selection.
... is supported: yes event_selection_remove an item within a container object has been removed from the selection.
...And 6 more matches

nsIAccessibleText
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void addselection(in long startoffset, in long endoffset); nsiaccessible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); void getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coord...
...type); void getselectionbounds(in long selectionnum, out long startoffset, out long endoffset); astring gettext(in long startoffset, in long endoffset); astring gettextafteroffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); astring gettextatoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); nsipersistentproperties gettextattributes(in boolean includedefattrs, in long offset, out long rangestartoffset, out long rangeendoffset); astring gettextbeforeoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); void removeselection(in long selectionnum); void scrollsubstringto(in long startindex, in long endindex, in unsign...
...ed long scrolltype); void scrollsubstringtopoint(in long startindex, in long endindex, in unsigned long coordinatetype, in long x, in long y); void setselectionbounds(in long selectionnum, in long startoffset, in long endoffset); attributes attribute type description caretoffset long the current current caret offset.
...And 6 more matches

nsIAutoCompleteInput
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview acstring getsearchat(in unsigned long index); void onsearchbegin(); void onsearchcomplete(); boolean ontextentered(); boolean ontextreverted(); void selecttextrange(in long startindex, in long endindex); attributes attribute type description completedefaultindex boolean if a search result has its defaultindex set, this will optionally try to complete the text in the textbox to the entire text of the result at the default index as the user types.
... completeselectedindex boolean if true, the text in the text field will be autocompleted as the user selects from the popup list.
... selectionend long the ending index of the current selection in the text field.
...And 6 more matches

nsIFilePicker
widget/nsifilepicker.idlscriptable the file picker component is used to display standard user interface for selecting files and directories, as well as for selecting destinations for, and naming, new files.
... file nsilocalfile the currently selected file or directory.
... files nsisimpleenumerator an enumerator of the currently selected files.
...And 6 more matches

nsITextInputProcessor
the following example sets "foo-bar-buzz", "bar" is selected clause to convert, and caret position is the end of the selected clause: // first, sets composition string.
...tip.appendclausetopendingcomposition("foo-".length, tip.attr_converted_clause); tip.appendclausetopendingcomposition("bar".length, tip.attr_selected_clause); tip.appendclausetopendingcomposition("-buzz".length, tip.attr_converted_clause); // then, sets the caret if you need tip.setcaretinpendingcomposition("foo-bar".length); // finally, flush the pending composition on the focused editor if (!tip.flushpendingcomposition()) { return; // composition is not started } if there is no composition, flushpendingcomposition() starts composition with dispatching compositionstart event automatically.
...var bkeyevent = new keyboardevent("", { key: "b", code: "keyb", keycode: keyboardevent.dom_vk_b }); tip.flushpendingcomposition(bkeyevent); // releasing shift key tip.keyup(shiftkeyevent); tip.setpendingcompositionstring("ab"); tip.appendclausetopendingcomposition("ab".length, tip.attr_selected_clause); tip.setcaretposition("ab".length); // this means that the composition string is converted by a keypress of "convert" key.
...And 6 more matches

Accessibility Inspector - Firefox Developer Tools
select the accessibility tab in the developer tools toolbox.
... on the right-hand side, you can see further information about the currently selected item.
...you can click on the "target" icon that comes after it to select the node in the page inspector.
...And 6 more matches

Element - Web APIs
element.closest() returns the element which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
... element.matches() returns a boolean indicating whether or not the element would be selected by the specified selector string.
... element.pseudo() returns a csspseudoelement representing the child pseudo-element matched by the specified pseudo-element selector.
...And 6 more matches

Option() - Web APIs
syntax var optionelementreference = new option(text, value, defaultselected, selected); parameters text optional a domstring representing the content of the element, i.e.
...for the associated <select> element's value when the form is submitted to the server.
... defaultselected optional a boolean that sets the selected attribute value, i.e.
...And 6 more matches

Drag Operations - Web APIs
these include text selections, images, and links.
...for other elements, they must be part of a selection for a default drag to occur.
... to see this in effect, select an area of a webpage, and then click and hold the mouse and drag the selection.
...And 6 more matches

XRSession - Web APIs
select an event of type xrinputsourceevent which is sent to the session when one of the session's input sources has successfully completed a primary action.
...the select event is sent after the selectstart event is sent and immediately before the selectend event is sent.
... if select is not sent, then the select action was aborted before being completed.
...And 6 more matches

<input type="color"> - HTML: Hypertext Markup Language
value a 7-character domstring specifying a <color> in lower-case hexadecimal notation events change and input supported common attributes autocomplete and list idl attributes list and value methods select() value the value of an <input> element of type color is always a domstring which contains a 7-character string specifying an rgb color in hexadecimal format.
... here's an example that watches changes over time to the color value: colorpicker.addeventlistener("input", updatefirst, false); colorpicker.addeventlistener("change", watchcolorpicker, false); function watchcolorpicker(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.target.value; }); } selecting the value if the <input> element's implementation of the color type on the user's browser doesn't support a color well, but is instead a text field for entering the color string directly, you can use the select() method to select the text currently in the edit field.
... if the browser instead uses a color well, select() does nothing.
...And 6 more matches

HTML documentation index - HTML: Hypertext Markup Language
classes allow css and javascript to select and access specific elements via the class selectors or functions like the dom method document.getelementsbyclassname.
...part names allows css to select and style specific elements in a shadow tree via the ::part pseudo-element.
...valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the form control.
...And 6 more matches

PI Parameters - XSLT: Extensible Stylesheet Language Transformations
<?xslt-param name="color" value="blue"?> <?xslt-param name="size" select="2"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> note that these pis have no effect when transformation is done using the xsltprocessor object in javascript.
... select an xpath expression for the parameter.
... if both value and select are present or if neither value nor select are present the pi is ignored.
...And 6 more matches

Menu - Archive of obsolete content
individual menus are drawn from the set using on(): on(selector) returns a new contextmenuset whose context menus are those that arise from nodes that match the given css selector(s).
... the selector must be a true css selector, not a jquery or other type of pseudo-selector.
... note: selectors don't automatically include the children of nodes they match.
...And 5 more matches

Modifying a XUL Interface - Archive of obsolete content
note: if you're creating the checkbox dynamically and it's not yet added to the dom, you must use setattribute("checked", "false") instead, because the xbl isn't initiated yet.) example 6 : source view <button label="change" oncommand="this.nextsibling.checked = !this.nextsibling.checked;"/> <checkbox label="check for messages"/> radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked.
...the radiogroup's selectedindex property may be used to do this.
... the selectedindex property may be used to retrieve the index of the selected radio button in the group and well as change it.
...And 5 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"/...
...a workaround is to set the autocheck attribute to false, then programmatically set the checked attribute when the user selects the item, and set it to false instead of removing the attribute (i.e.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...And 5 more matches

tabbrowser - Archive of obsolete content
attributes autocompleteenabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, goh...
...ome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, reloadwithflags, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
... selectedbrowser type: browser element this read-only property returns the currently displayed browser element.
...And 5 more matches

tabpanels - Archive of obsolete content
attributes selectedindex properties selectedindex, selectedpanel examples (example needed) attributes selectedindex type: integer gets and sets the index of the currently selected panel.
... selectedindex type: integer returns the index of the currently selected item.
... you may select an item by assigning its index to this property.
...And 5 more matches

Building a Theme - Archive of obsolete content
when writing a theme, the easiest way to determine what css selectors you need to write is to use the dom inspector which you should have installed in the setup step.
... pick the first document with a web page title, like "firefox start page" and select it.
...select the node finding tool (the arrow-plus-box in the top-left corner of the dom inspector), and click on any unused space on a toolbar.
...And 5 more matches

Example 4 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /...
...* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit...
...-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-t...
...And 5 more matches

Example 5 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" role="listbox"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { posi...
...tion : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4...
...em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { ...
...And 5 more matches

Implementing feature detection - Learn web development
-printshiv.min.js and html5shiv.min.js files into your example directory, and link to one of the files by putting the following under your <title> element: <script src="html5shiv.min.js"></script> have a look at your example css files — you'll see that basic-styling.css handles all the styling that we want to give to every browser, whereas the other two css files contain the css we want to selectively apply to browser depending on their support levels.
... give it the following contents: const conditional = document.queryselector('.conditional'); const testelem = document.createelement('div'); if (testelem.style.flex !== undefined && testelem.style.flexflow !== undefined) { conditional.setattribute('href', 'flex-layout.css'); } else { conditional.setattribute('href', 'float-layout.css'); } here we are grabbing a reference to the second <link> element, and creating a <div> element as part of our test.
...this works in a similar manner to media queries (see also responsive design problems) — except that instead of selectively applying css depending on a media feature like a resolution, screen width or aspect ratio, it selectively applies css depending on whether a css feature is supported.
...And 5 more matches

Debugging on Windows
in the visual studio, select debug > attach to process.
...you can then select the process from dialog opened from "attach to process".
... changing/setting the executable to debug vc++ 6.0: to change or set the executable to debug, go to project > settings..., debug tab and select general from the drop down list.
...And 5 more matches

Sqlite.jsm
however, it can have drastic implications for select statements.
... if your select statement could return lots of data, this buffering of returned rows could result in excessive memory usage.
... therefore, it's recommended to use onrow with select statements.
...And 5 more matches

nsIAccessibleProvider
xformsselect 0x00002009 used for select and select1 that are implemented using host document's native widget.
... for example, a select1 in a xhtml document may be represented by the native html control html:select.
... xformsselectfull 0x00002011 used for xforms full select/select1 elements that may be represented by group of checkboxes and radiogroup.
...And 5 more matches

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related css properties and see how the flex items are affected by your changes.
...if you expand the section without selecting a flexbox container, it will only display the message, "select a flex container or item to continue".
... once you select an element whose display is defined as flex, the panel will include a number of options for viewing details about the flex container and flex items within it.
...And 5 more matches

Page inspector keyboard shortcuts - Firefox Developer Tools
command windows macos linux select the element under the mouse and cancel picker mode click click click select the element under the mouse and stay in picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane.
... command windows macos linux delete the selected node delete delete delete undo delete of a node ctrl + z cmd + z ctrl + z redo delete of a node ctrl + shift + z / ctrl + y cmd + shift + z / cmd + y ctrl + shift + z / ctrl + y move to next node (expanded nodes only) down arrow down arrow down arrow move to previous node up arrow up arrow up arrow move to first node in the tree.
... end end end expand currently selected node right arrow right arrow right arrow collapse currently selected node left arrow left arrow left arrow (when a node is selected) move inside the node so you can start stepping through attributes.
...And 5 more matches

UI Tour - Firefox Developer Tools
it covers the three top-level components of the inspector's ui: the "select element" button the html pane the css pane this guide is intentionally kept as short as possible.
... select element button the inspector gives you detailed information about the currently selected element.
... the select element button is one way you can select an element for inspection: note that it's actually part of the main toolbox toolbar, so it's immediately accessible from any tool, not just the inspector.
...And 5 more matches

Console messages - Firefox Developer Tools
this is not shown by default: you can opt to see timestamps by selecting show timestamps in the console settings menu (gear icon in the console toolbar).
... copy message copies the selected message to the clipboard.
... select all selects all messages available in the message display pane.
...And 5 more matches

DocumentOrShadowRoot.activeElement - Web APIs
often activeelement will return a htmlinputelement or htmltextareaelement object if it has the text selection at the time.
... if so, you can get more detail by using the object's selectionstart and selectionend properties.
... other times the focused element might be a <select> element (menu) or an <input> element, of type "button", "checkbox", or "radio".
...And 5 more matches

SubtleCrypto.exportKey() - Web APIs
*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
... */ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
...*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
...And 5 more matches

SubtleCrypto.verify() - Web APIs
*/ function getmessageencoding() { const messagebox = document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature.
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ function getmessageencoding() { const messagebox = document.queryselector(".rsa-pss #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature.
...And 5 more matches

Using the Web Speech API - Web APIs
var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); var hints = document.queryselector('.hints'); var colorhtml= ''; colors.foreach(function(v, i, a){ console.log(v, i); colorhtml += '<span style="background-color:' + v + ';"> ' + v + ' </span>'; }); hints.innerhtml = 'tap/click then say a color to change the background color of the app.
...the <select> element is initially empty, but is populated with <option>s via javascript (see later on.) <h1>speech synthesiser</h1> <p>enter some text in the input below and press return to hear it.
..." class="txt"> <div> <label for="rate">rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"> <div class="rate-value">1</div> <div class="clearfix"></div> </div> <div> <label for="pitch">pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch"> <div class="pitch-value">1</div> <div class="clearfix"></div> </div> <select> </select> </form> javascript let's investigate the javascript that powers this app.
...And 5 more matches

:host-context() - CSS: Cascading Style Sheets
the :host-context() css pseudo-class function selects the shadow host of the shadow dom containing the css it is used inside (so you can select a custom element from inside its shadow dom) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the dom hierarchy.
... one typical use of this is with a descendant selector expression — for example h1 — to select only instances of the custom element that are inside an <h1>.
... /* selects a shadow root host, only if it is a descendant of the selector argument given */ :host-context(h1) { font-weight: bold; } :host-context(main article) { font-weight: bold; } /* changes paragraph text color from black to white when a .dark-theme class is applied to the document body */ p { color: #000; } :host-context(body.dark-theme) p { color: #fff; } syntax :host-context( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
...And 5 more matches

Child combinator - CSS: Cascading Style Sheets
the child combinator (>) is placed between two css selectors.
... it matches only those elements matched by the second selector that are the direct children of elements matched by the first.
... /* list items that are children of the "my-things" list */ ul.my-things > li { margin: 2em; } elements matched by the second selector must be the immediate children of the elements matched by the first selector.
...And 5 more matches

Content categories - Developer guides
t>, <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 5 more matches

Constraint validation - Developer guides
max range, number a valid number the value must be less than or equal to the value rangeoverflow constraint violation date, month, week a valid date datetime, datetime-local, time a valid date and time required text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the <select> and <textarea> elements none as it is a boolean attribute: its presence means true, its absence means false there must be a value (if set).
...the constraint validation is done in the following ways: by a call to the checkvalidity() or reportvalidity() method of a form-associated dom interface, (htmlinputelement, htmlselectelement, htmlbuttonelement, htmloutputelement or htmltextareaelement), which evaluates the constraints only on this element, allowing a script to get this information.
... 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 following form: first, we write a function checking the constraint itself: function checkzip() { // for each country...
...And 5 more matches

HTML attribute: accept - HTML: Hypertext Markup Language
tion/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the accept attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types.
... it is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.
... examples when set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type.
...And 5 more matches

<colgroup> - HTML: Hypertext Markup Language
note: do not try to set the text-align property on a selector giving a <colgroup> element.
... if the table doesn't use a colspan attribute, use one td:nth-child(an+b) css selector per column, where a is the total number of the columns in the table and b is the ordinal position of this column in the table.
... only after this selector the text-align property can be used.
...And 5 more matches

Miscellaneous - Archive of obsolete content
se and key events https://developer.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.getselection().tostring(); or: content.getselection(); // |window| object is implied; i.e., window.content.getselection() or: getbrowserselection(); // |window| object is implied; i.e., window.getbrowserselection() this final option massages the selection to remove leading and trailing w...
...note that it returns the empty string (""), not false, when nothing is selected.
... getbrowserselection() is not implemented on some platforms, such as thunderbird and songbird.
...And 4 more matches

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
starting up select “javascript debugger” from the tools menu.
...then select tools:quicknote:float to display it in its own window.
... using venkman read in source code activate venkman, and then select open windows:quicknote.xul:files on the top-left of the screen.
...And 4 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
some of these preferences do not exist—to create them, right-click, select “new>boolean”, and type in the name and set the value accordingly.
... open the dom inspector by selecting the tools > dom inspector menu item.
... click the spots numbered 1 and 2 in figure 5, in that order; the menu element (3) will then be selected.
...And 4 more matches

CSS3 - Archive of obsolete content
some modules, like selectors 4 or css borders and backgrounds level 4 already have an editor's draft, though they haven't yet reached the first published working draft status.
... selectors level 3 recommendation since september 29th, 2011 adds: substring matching attribute selectors, e[attribute^="value"], e[attribute$="value"], e[attribute*="value"] .
... the next iteration of the selectors specification is already in progress, though it still hasn't reached the first public working draft stage.
...And 4 more matches

Creating a Microsummary - Archive of obsolete content
irefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> </template> </transform> </template> </generator> including the download count to include the download count in the output of the xslt transform sheet, we need to add an xslt <value-of> element to the template whose select attribute contains an xpath expression that points to the node containing the count.
... install the extension (restarting firefox to complete installation) then go to the spread firefox home page, find the firefox download count (a large number at the bottom of the right-hand column), context click on the number, and select view xpath from the context menu.
... add a <value-of> element to the xslt <template> element whose select attribute contains that xpath expression: <?xml version="1.0" encoding="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 x...
...And 4 more matches

Content states and the style system - Archive of obsolete content
this is done by walking the list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector.
...for each selector in this list we check whether it might have stopped matching the node or started matching it.
... the way we determine whether the selector might have stopped or started matching the node is by just checking whether it matches with the caveat that all the state-dependent pseudo-classes corresponding to the states that changed must be treated as matching (whether they actually do and whether they're negated or not).
...And 4 more matches

Keyboard Shortcuts - Archive of obsolete content
in the example below, the file menu can be selected by pressing alt + f together (or some other key combination for a specific platform).
... once the file menu is open, the close menu item can be selected by pressing c.
...when the key is pressed in this case, the button is selected.
...And 4 more matches

Using Remote XUL - Archive of obsolete content
the categorized links are analogous to menu items organized into menus, where clicking the link/selecting the menu item performs some function, so we'll use xul menu elements to implement them in our document.
... source | rendered step 4: menu items menus aren't terribly useful unless they contain selectable items.
...the menuitem element represents a selectable item within the popup.
...And 4 more matches

How to enable locale switching in a XULRunner application - Archive of obsolete content
include a xul control for the locale selection the next step is to add a xul control to your application which lists the available locales in the package and makes it possible for the user to select one of them.
...the dynamic list population requires an xpcom to query the currently selected locale as well as all locales available in the application package.
... 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(components.interfaces.nsitoolkitchromeregistry); var selectedlocale = xulchromereg.getselectedlocale("localeswitchdemo"); var availablelocales = toolkitchromereg.getlocalesforpackage("localeswitchdemo"); // rend...
...And 4 more matches

Theme changes in Firefox 2 - Archive of obsolete content
#search-container[chromedir="rtl"] .search-go-button #search-container[chromedir="rtl"] .searchbar-engine-button .search-go-button .search-go-button:hover .search-go-button:hover:active .search-go-button[disabled="true"] .searchbar-engine-button .searchbar-engine-button:hover .searchbar-engine-button[addengines="true"] .searchbar-engine-button[open="true"] .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text .searchbar-left you may of course wish to make changes to other styles as well.
...eme: #browserstartuphomepage #browserstartuphomepage #panedownloads description #panegeneral description radio[pane=panedownloads] radio[pane=panedownloads]:active the following styles need to be added to your theme to make it compatible with firefox 2: #panecontent description #panemain description #panesecurity description radio[pane=paneadvanced]:hover radio[pane=paneadvanced][selected="true"] radio[pane=panecontent]:hover radio[pane=panecontent][selected="true"] radio[pane=panefeeds] radio[pane=panefeeds]:active radio[pane=panefeeds]:hover radio[pane=panefeeds][selected="true"] radio[pane=panegeneral]:hover radio[pane=panegeneral][selected="true"] radio[pane=panemain] radio[pane=panemain]:active radio[pane=panemain]:hover radio[pane=panemain][selected="true"] ra...
...dio[pane=paneprivacy]:hover radio[pane=paneprivacy][selected="true"] radio[pane=panesecurity] radio[pane=panesecurity]:active radio[pane=panesecurity]:hover radio[pane=panesecurity][selected="true"] radio[pane=panetabs]:hover radio[pane=panetabs][selected="true"] you may of course wish to change other styles as well.
...And 4 more matches

HTML: A good basis for accessibility - Learn web development
his: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter.
... there are other issues too beyond accessibility — it is harder to style the content using css, or manipulate it with javascript, for example, because there are no elements to use as selectors.
...other form elements have different controls, for example, the <select> element can have its options displayed and cycled between using the up and down arrow keys.
...And 4 more matches

HTML: A good basis for accessibility - Learn web development
his: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter.
... there are other issues too beyond accessibility — it is harder to style the content using css, or manipulate it with javascript, for example, because there are no elements to use as selectors.
...other form elements have different controls, for example, the <select> element can have its options displayed and cycled between using the up and down arrow keys.
...And 4 more matches

Advanced text formatting - Learn web development
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.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value ...
...ventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every ...
... 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.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value ...
...And 4 more matches

What is JavaScript? - Learn web development
cing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 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)!
...for example, let's return to the block of javascript we saw in our first example: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updatename() code block (lines 5–8) is run.
...r <script> element to make the page do something more interesting — add the following code just below the "// javascript goes here" line: document.addeventlistener("domcontentloaded", function() { function createparagraph() { let para = document.createelement('p'); para.textcontent = 'you clicked the button!'; document.body.appendchild(para); } const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addeventlistener('click', createparagraph); } }); save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
...And 4 more matches

Profile Manager
an individual profile can be linked to a specific installation of firefox, so that version of firefox will be launched when that profile is selected.
... a dialog will appear that allows you to specify the profile's name, and optionally the profile's path, and the version of firefox (or other application) that will be used with this profile: launching firefox with a profile to launch firefox with a specific profile, select the profile in the main window, and hit the "start firefox" button: firefox will be launched with that profile, and profile manager will terminate.
... to backup a profile: select the profile you want to backup, and choose "backup to->backup folder" from the toolbar's backup menu.
...And 4 more matches

Setting up CDT to work on SpiderMonkey
select "new > makefile project with existing code" from the "file" menu.
... give the project a name that you like ("spidermonkey" has a nice ring to it) and use the "browser…" button to select your checkout's js/src folder for the "existing code location".
... step 3 - index all the code to let cdt know about the build, it has to invoke make itself (or, as is done in the guide for the whole mozilla codebase on mdn, read a log of the build), which can be setup with these simple steps: open the project's properties by selecting its root and clicking "properties" in the "file" menu and select "c/c++ build".
...And 4 more matches

Gecko states
state_selected the object is selected, i.e.
... indicates this object is the child of an object that allows its children to be selected and that this child is one of those children that has been selected.
... applied to: role_menuitem, role_cell, role_outlineitem, xxx: continue events: event_state_change Сoncomitant state: state_selectable state_focused the object is focused applied to: events: concomitant state: state_focusable state_pressed the object is pressed.
...And 4 more matches

Setting up the Gecko SDK
creating a new project after launching visual c++, select new from the file menu.
... then, from the new dialog, select "win32 dynamic-link library".
...express edition is free.) new dialog select ok.
...And 4 more matches

nsICompositionStringSynthesizer
to create an instance for this: var domwindowutils = window.windowutils; var compositionstringsynthesizer = domwindowutils.createcompositionstringsynthesizer(); for example, when you create a composition whose composing string is "foo-bar-buzz" and "bar" is selected to convert, then, first, you need to start composition: domwindowutils.sendcompositionevent("compositionstart", "", ""); next, dispatch composition string with crause information and caret information (optional): // set new composition string with .setstring().
...compositionstringsynthesizer.appendclause("foo-".length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.appendclause("bar".length, compositionstringsynthesizer.attr_selectedconvertedtext); compositionstringsynthesizer.appendclause("-buzz".length, compositionstringsynthesizer.attr_convertedtext); // set caret position in the composition string.
...for example, if the "bar" is converted to "bar": compositionstringsynthesizer.setstring("foo-bar-buzz"); compositionstringsynthesizer.appendclause("foo-".length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.appendclause("bar".length, compositionstringsynthesizer.attr_selectedconvertedtext); compositionstringsynthesizer.appendclause("-buzz".length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.setcaret("foo-bar".length, 0); compositionstringsynthesizer.dispatchevent(); finally, when you commits composition with the last composition string "foo-bar-buzz": // deprecated in 36, first, dispatch commit string without clause information c...
...And 4 more matches

nsIEditorSpellCheck
y(); void getdictionarylist([array, size_is(count)] out wstring dictionarylist, out pruint32 count); wstring getnextmisspelledword(); void getpersonaldictionary(); wstring getpersonaldictionaryword(); wstring getsuggestedword(); void ignorewordalloccurrences(in wstring word); void initspellchecker(in nsieditor editor, in boolean enableselectionchecking); void removewordfromdictionary(in wstring word); void replaceword(in wstring misspelledword, in wstring replaceword, in boolean alloccurrences); void savedefaultdictionary(); obsolete since gecko 9.0 void setcurrentdictionary(in astring dictionary); void setfilter(in nsitextservicesfilter filter); void uninitspellchecker(); ...
...void initspellchecker( in nsieditor editor, in boolean enableselectionchecking ); parameters editor the nsieditor on which to enable spell checking.
... enableselectionchecking if true, the spell checker is initialized only for checking the current selection; otherwise, it's initialized for checking the entire document.
...And 4 more matches

Work with animations - Firefox Developer Tools
right-click in the box and select "inspect element" make sure the selected element is the <div class="channel"> switch over to the "animations" tab play the animation let's take a closer look at the contents of the animation inspector here: it shows a synchronized timeline for every animation applied to the selected element or its children.
... the animation's fill the playback rate of the animation information about the animated element to the left of each bar is a selector for the element that the animation applies to.
... if you hover over this selector, the element is highlighted in the page.
...And 4 more matches

Flame Chart - Firefox Developer Tools
here's a screenshot showing the flame chart for a section of a profile: first of all, you'll see that, in the recording overview pane, we've selected a small slice of the recording to view in the flame chart.
...there are two main controls you can use to navigate the flame chart: zoom: increase/decrease the selected portion of the complete profile that's displayed in the flame chart 1) mouse wheel up/down in the flame chart.
... pan: move the selected portion of the complete profile left and right 1) click and drag the selected portion in the recording overview pane.
...And 4 more matches

Toolbox - Firefox Developer Tools
there are a few different ways to open the toolbox: select "toggle tools" from the web developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x.
...this lets you select a page element for inspection.
... see "selecting elements".
...And 4 more matches

CSSStyleSheet.insertRule() - Web APIs
what the inserted rule must contain depends on its type: for rule-sets, both a selector and a style declaration.
...tant rules ], ['.myclass', ['background-color', 'yellow'] ] ]); */ function addstylesheetrules (rules) { var styleel = document.createelement('style'); // append <style> element to <head> document.head.appendchild(styleel); // grab style element's sheet var stylesheet = styleel.sheet; for (var i = 0; i < rules.length; i++) { var j = 1, rule = rules[i], selector = rule[0], propstr = ''; // if the second argument of a rule is an array of arrays, correct our variables.
...' !important' : '') + ';\n'; } // insert css rule stylesheet.insertrule(selector + '{' + propstr + '}', stylesheet.cssrules.length); } } polyfill the below polyfill will correct the input of the arguments of insertrule() to standardize them in internet explorer 5–8.
...And 4 more matches

DragEvent - Web APIs
event types drag this event is fired when an element or text selection is being dragged.
... dragenter this event is fired when a dragged element or text selection enters a valid drop target.
... dragexit this event is fired when an element is no longer the drag operation's immediate selection target.
...And 4 more matches

Element.closest() - Web APIs
the closest() method traverses the element and its parents (heading toward the document root) until it finds a node that matches the provided selector string.
... syntax var closestelement = targetelement.closest(selectors); parameters selectors is a domstring containing a selector list.
... ex: p:hover, .toto + q return value closestelement is the element which is the closest ancestor of the selected element.
...And 4 more matches

GlobalEventHandlers - Web APIs
globaleventhandlers.onselect is an eventhandler representing the code to be called when the select event is raised.
... globaleventhandlers.onselectstart is an eventhandler representing the code to be called when the selectionchange event is raised, i.e.
... when the user starts to make a new text selection on a web page.
...And 4 more matches

HTMLOptionElement - Web APIs
htmloptionelement.defaultselected is a boolean that contains the initial value of the selected html attribute, indicating whether the option is selected by default or not.
... htmloptionelement.disabled is a boolean representing the value of the disabled html attribute, which indicates that the option is unavailable to be selected.
... htmloptionelement.form read only is a htmlformelement representing the same value as the form of the corresponding <select> element, if the option is a descendant of a <select> element, or null if none is found.
...And 4 more matches

Timing element visibility with the Intersection Observer API - Web APIs
although many aspects of this example will not match real world usage (in particular, the articles all have the same text and aren't loaded from a database, and there are just a handful of simple text-only ads that are selected from an array), this should provide enough understanding of the api to quickly learn how to apply the intersection observer api to your own site.
... setting up to set things up, we run the startup() function below when the page loads: window.addeventlistener("load", startup, false); function startup() { contentbox = document.queryselector("main"); document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.75] }; adobserver = new intersectionobserver(intersectioncallback, observeroptions); buildcontents(); refreshintervalid = window.setinterval(handlerefreshinterval, 1000); } first, a refer...
...this is handled by passing the ad's element into the drawadtimer() function: function drawadtimer(adbox) { let timerbox = adbox.queryselector(".timer"); let totalseconds = adbox.dataset.totalviewtime / 1000; let sec = math.floor(totalseconds % 60); let min = math.floor(totalseconds / 60); timerbox.innertext = min + ":" + sec.tostring().padstart(2, "0"); } this code finds the ad's timer using its id, "timer", and computes the number of seconds elapsed by dividing the ad's totalviewtime by 1000.
...And 4 more matches

Intersection Observer API - Web APIs
creating an intersection observer create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other: let options = { root: document.queryselector('#scrollarea'), rootmargin: '0px', threshold: 1.0 } let observer = new intersectionobserver(callback, options); a threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.
... targeting an element to be observed once you have created the observer, you need to give it a target element to watch: let target = document.queryselector('#listitem'); observer.observe(target); // the callback we setup for the observer will be executed now for the first time // it waits until we assign a target to our observer (even if the target is currently not visible) whenever the target meets a threshold specified for the intersectionobserver, the callback is invoked.
... 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 observers let observeroptions = { root: null, rootmargin: "0px", threshold: [] }; // an array of threshold sets for each of the boxes.
...And 4 more matches

RTCIceTransport - Web APIs
the value of state can be used to determine whether the ice agent has made an initial connection using a viable candidate pair ("connected"), made its final selection of candidate pairs ("completed"), or in an error state ("failed"), among other states.
... getselectedcandidatepair() returns a rtcicecandidatepair object that identifies the two candidates—one for each end of the connection—that have been selected so far.
... it's possible that a better pair will be found and selected later; if you need to keep up with this, watch for the selectedcandidatepairchange event.
...And 4 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
>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 = document.queryselector('#attack'); attackcontrol.addeventlistener('input', function() { attacktime = number(this.value); }, false); let releasetime = 0.5; const releasecontrol = document.queryselector('#release'); releasecontrol.addeventlistener('input', function() { releasetime = number(this.value); }, false); the final playsweep() function now we can expand our playsweep() function.
... let pulsehz = 880; const hzcontrol = document.queryselector('#hz'); hzcontrol.addeventlistener('input', function() { pulsehz = number(this.value); }, false); let lfohz = 30; const lfocontrol = document.queryselector('#lfo'); lfocontrol.addeventlistener('input', function() { lfohz = number(this.value); }, false); the final playpulse() function here's the entire playpulse() function: let pulsetime = 1; function playpulse() { let osc = audi...
...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(this.value); }, false); let bandhz = 1000; const bandcontrol = document.queryselector('#band'); bandcontrol.addeventlistener('input', function() { bandhz = number(this.value); }, false); the final playnoise() function here's the entire playnoise() function: function playnoise() { const buffers...
...And 4 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
[important] get_accstate: a 32 bit field representing possible on/off states, such as focused, focusable, selected, selectable, visible, protected (for passwords), checked, etc.
...[important] get_accselection: which children of this item are selected?
... accselect: select the item associated with this iaccessible.
...And 4 more matches

Alternative style sheets - CSS: Cascading Style Sheets
firefox lets the user select the stylesheet using the view > page style submenu.
...et" type="text/css"> <link href="default.css" rel="stylesheet" type="text/css" title="default style"> <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="fancy"> <link href="basic.css" rel="alternate stylesheet" type="text/css" title="basic"> in this example, the styles "default style", "fancy", and "basic" will be listed in the page style submenu, with "default style" pre-selected.
... when the user selects a different style, the page will immediately be re-rendered using that style sheet.
...And 4 more matches

Descendant combinator - CSS: Cascading Style Sheets
the descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector.
... selectors that utilize a descendant combinator are called descendant selectors.
... /* list items that are descendants of the "my-things" list */ ul.my-things li { margin: 2em; } the descendant combinator is technically one or more css white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator.
...And 4 more matches

<color> - CSS: Cascading Style Sheets
activetext text of active links buttonface background of push buttons buttontext text of push buttons canvas background of application content or documents canvastext text in application content or documents field background of input fields fieldtext text in input fields graytext text that is disabled highlight background of items that are selected in a control highlighttext text of items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions of the css color module.
... -moz-cellhighlight background color for selected item in a tree widget.
... -moz-cellhighlighttext text color for a selected item in a tree.
...And 4 more matches

<col> - HTML: Hypertext Markup Language
note: to achieve the same effect as the left, center, right or justify values: do not try to set the text-align property on a selector giving a <col> element.
... if the table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector.
... if the table does use a colspan attribute, the effect can be achieved by combining adequate css attribute selectors like [colspan=n], though this is not trivial.
...And 4 more matches

<input type="checkbox"> - HTML: Hypertext Markup Language
a checkbox allows you to select single values for submission in a form (or not).
... note: radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off.
... where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
...And 4 more matches

Assertions - JavaScript
for selecting appropriate fruits we can use the filter method with an arrow function.
... let fruits = ["apple", "watermelon", "orange", "avocado", "strawberry"]; // select fruits started with 'a' by /^a/ regex.
... let fruits = ["apple", "watermelon", "orange", "avocado", "strawberry"]; // selecting fruits that dose not start by 'a' by a /^[^a]/ regex.
...And 4 more matches

tabs/utils - Archive of obsolete content
globals functions activatetab(tab, window) set the specified tab as the active, or selected, tab.
... getactivetab(window) given a browser window, get the active, or selected, tab.
... returns tab : the currently selected tab.
...And 3 more matches

Creating Reusable Modules - Archive of obsolete content
here we'll write an add-on that lets the user select a file on disk and calculates its hash.
... file picker to let the user select a file we'll use nsifilepicker.
... the documentation for that interface includes an example which we can adapt like this: var {cc, ci} = require("chrome"); function promptforfile() { const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); var window = require("sdk/window/utils").getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
...And 3 more matches

Index of archived content - Archive of obsolete content
vel apis addon-page base64 clipboard context-menu hotkeys indexed-db l10n notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs simple-storage system tabs timers ui url widget windows low-level apis /loader chrome console/plain-text console/tr...
... 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 scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:...
... api accounts.jsm browserapp addtab closetab deck getbrowserfordocument getbrowserforwindow gettabforbrowser gettabforid gettabforwindow loaduri quit selecttab tabs helperapps.jsm home.jsm banner panels homeprovider.jsm homestorage nativewindow ...
...And 3 more matches

PopupKeys - Archive of obsolete content
cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu.
...home/end move the highlight to the beginning or the end of the menu, selecting the first or last item.
...if a menuitem is selected, this will close the menu and fire the menuitem's command event.
...And 3 more matches

SQLite Templates - Archive of obsolete content
the query for an sqlite datasource is just an sql select statement, as text inside the query element.
... <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'.
... <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.
...And 3 more matches

Skinning XUL Files by Hand - Archive of obsolete content
in the very near future, it will be possible to skin xul files dynamically and completely -- by pressing a button, selecting a skin from a menu, or by accepting a skin from over the web.
... note that for any one class of element, there may be several pseudo-classes andattribute selector styles defined.
...in the first definition, the selector "toolbar.nav-bar" is used to define style information for all xul toolbars of the class "nav-bar." unlike an id -- which is also often used as a selector but must be unique -- a class attribute can be used on multiple xul elements you want to pick up the specified style information.
...And 3 more matches

Styling a Tree - Archive of obsolete content
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.
...the following is the syntax that needs to be used: treechildren::-moz-tree-row(makeitblue) { background-color: blue; } this style which has a complex selector is used to style the background color of rows that have the 'makeitblue' property.
...this selector matches some tree rows inside the treechildren element as pseudo-elements.
...And 3 more matches

Trees - Archive of obsolete content
this element also serves as the item which can be selected by the user.
... the treeitem tag would go around the entire row so that it is selectable as a whole.
... the user can select the treeitems by clicking on them with the mouse, or by highlighting them with the keyboard.
...And 3 more matches

menu - Archive of obsolete content
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"/> </menupo...
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...a dommenuitemactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive event will be sent to the item when the selection moves away.
...And 3 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 ke...
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... selected type: boolean indicates whether the element is selected or not.
...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="extensions.myextension.one" t...
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... selected type: boolean this attribute will be set to true for the currently selected prefpane.
...And 3 more matches

CSS - Archive of obsolete content
ng the zoom behavior that occurs when a user hits the zoom limit during page manipulation.-ms-content-zoom-limitthe -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.-ms-content-zoom-limit-maxthe -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor.-ms-content-zoom-limit-minthe -ms-content-zoom-limit-min css property is a microsoft extension that specifies the minimum zoom factor.-ms-content-zoom-snapthe -ms-content-zoom-snap css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-snap-type and -ms-content-zoom-snap-points properties.-ms-content-zoom-snap-pointsthe -ms-c...
...r of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-track-colorthe -ms-scrollbar-track-color css property is a microsoft extension that specifies the color of the track element of a scrollbar.-ms-text-autospacethe -ms-text-autospace css property is a microsoft extension that specifies the autospacing and narrow space width adjustment of text.-ms-touch-selectthe -ms-touch-select css property is a microsoft extension that toggles the gripper visual elements that enable touch text selection.-ms-wrap-flowthe -ms-wrap-flow css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements.-ms-wrap-marginthe -ms-wrap-margin css property is a microsoft extension that specifies a margin that offsets the inne...
...this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge.::-ms-expandthe ::-ms-expand css pseudo-element is a microsoft extension that represents the button of a <select> menu control that opens or closes the drop-down menu.
...And 3 more matches

Mozilla XForms User Interface - Archive of obsolete content
upload provides a means for the user to select a file (see the spec).
... submit invokes the submission of the selected instance data to its target destination, which could be local or remote (see the spec).
... select list control.
...And 3 more matches

Building up a basic demo with PlayCanvas editor - Game development
click diffuse, then select the colored box next to the color label — it will open a color wheel.
... now we can apply the colored material to the shape by clicking and dragging its icon from the bottom part of the screen (the little dot on the left hand side of the material's name — it can be a bit fiddly to select; just persevere) onto the box on the scene.
...click on the root folder in the hierarchy panel (to make sure that the new shape appears in the root, and not as a child of the box) then click on the big add entity (plus) button and select cylinder from the dropdown list — it will add a new cylinder shape to the scene.
...And 3 more matches

Organizing your CSS - Learn web development
avoid overly-specific selectors if you create very specific selectors you will often find that you need to duplicate chunks of your css to apply the same rules to another element.
... for example, you might have something like the below selector, which applies the rule to a <p> with a class of box inside an <article> with a class of main.
... article.main p.box { border: 1px solid #ccc; } if you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset.
...And 3 more matches

Styling tables - Learn web development
this is why we've selected the four different headings with the thead th:nth-child(n) (:nth-child) selector ("select the nth child that is a <th> element in a sequence, inside a <thead> element") and given them set percentage widths.
...add the following css to the bottom of your style.css file: /* zebra striping */ tbody tr:nth-child(odd) { background-color: #ff33cc; } tbody tr:nth-child(even) { background-color: #e495e4; } tbody tr { background-image: url(noise.png); } table { background-color: #ff33cc; } earlier on you saw the :nth-child selector being used to select specific child elements.
... it can also be given a formula as a parameter, so it will select a sequence of elements.
...And 3 more matches

How CSS works - Learn web development
the browser parses the fetched css, and sorts the different rules by their selector types into different "buckets", e.g.
...based on the selectors it finds, it works out which rules should be applied to which nodes in the dom, and attaches style to them as required (this intermediate step is called a render tree).
...when you start working with browser devtools you will be navigating the dom as you select items in order to see which rules apply.
...And 3 more matches

Styling links - Learn web development
the third rule uses the a selector to get rid of the default text underline and focus outline (which varies across browsers anyway), and adds a tiny amount of padding to each link — all of this will become clear later on.
... next, we use the a:link and a:visited selectors to set a couple of color variations on unvisited and visited links, so they are distinct.
...{ } a:active { }</textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(st...
...And 3 more matches

Example 3 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit" tabindex="-1"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" tabindex="0"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* ------...
...--------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ backgrou...
...nd : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; ...
...And 3 more matches

Sending forms through JavaScript - Learn web development
let's look at an example: <button>click me!</button> and now the javascript: const btn = document.queryselector('button'); function senddata( data ) { console.log( 'sending data' ); const xhr = new xmlhttprequest(); let urlencodeddata = "", urlencodeddatapairs = [], name; // turn the data object into an array of url-encoded key/value pairs.
...now for the javascript: const btn = document.queryselector('button'); function senddata( data ) { const xhr = new xmlhttprequest(), fd = new formdata(); // push our data into our formdata object for( name in data ) { fd.append( name, data[ name ] ); } // define what happens on successful data submission xhr.addeventlistener( 'load', function( event ) { alert( 'yeah!
... dom : document.getelementbyid( "thefile" ), binary : null }; // use the filereader api to access file content const reader = new filereader(); // because filereader is asynchronous, store its // result when it finishes to read the file reader.addeventlistener( "load", function () { file.binary = reader.result; } ); // at page load, if a file is already selected, read it.
...And 3 more matches

Styling web forms - Learn web development
these include: <input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>.
... the real problem with all these controls is that they have a very complex structure, and beyond some basic styling (such as changing the width or margin of the control) you generally don't have the ability to style the controls' internal components (such as the date picker calendar, or the button on the <select> that causes the options list to display) making up those widgets.
... as well as the basic css tools covered above, we've also been provided with several selectors — ui pseudo-classes — that enable styling based on the current state of the ui.
...And 3 more matches

Getting started with HTML - Learn web development
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.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === ...
...addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time...
...ue="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; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === ...
...And 3 more matches

From object to iframe — other embedding technologies - Learn web development
below the video, you'll find a share button — select this to display the sharing options.
... select the embed button and you'll be given some <iframe> code — copy this.
... select the share or embed map option.
...And 3 more matches

Video and audio content - Learn web development
things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs.
...see choosing the right container in media container formats (file types) for help selecting the container file format best suited for your needs; similarly, see choosing a video codec in web video codec guide and choosing an audio codec in web audio codec guide for help selecting the first media codecs to use for your content and your target audience.
... refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right mime types to specify for each.
...And 3 more matches

Fetching data from the server - Learn web development
in this example, we will load a different verse of the poem (which you may well recognize) via xhr when it's selected in the drop-down menu.
...this stores a reference to the <select> and <pre> elements in constants and defines an onchange event handler function so that when the select's value is changed, its value is passed to an invoked function updatedisplay() as a parameter.
... const versechoose = document.queryselector('select'); const poemdisplay = document.queryselector('pre'); versechoose.onchange = function() { const verse = versechoose.value; updatedisplay(verse); }; let's define our updatedisplay() function.
...And 3 more matches

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.99' 't-shirt:14.99' 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 let ...
...utionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');\nconst totalbox = document.queryselector(\'.output p\');\nlet total = 0;\nlist.innerhtml = \'\';\ntotalbox.textcontent = \'\';\n\nlet products = [\'underpants:6.99\',\n \'socks:5.99\',\n \'t-shirt:14.99\',\n \'trousers:31.99\',\n \'shoes:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subarray = products[i].split(\':\');\n let name = subarray[0];\n let pric...
...entlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every ...
...And 3 more matches

mozbrowsercaretstatechanged
the mozbrowsercaretstatechanged event is fired when the user selects content in a page loaded in a browser <iframe>.
... details the details property returns an anonymous javascript object with the following properties: rect an object that defines information about the bounding rectangle of the current selection.
...its properties are canselectall: a boolean indicating whether the selectall command is available (true) or not (false.) cancut: a boolean indicating whether the cut command is available (true) or not (false.) cancopy: a boolean indicating whether the copy command is available (true) or not (false.) canpaste: a boolean indicating whether the paste command is available (true) or not (false.) reason a domstring that...
...And 3 more matches

IAccessibleTableCell
.2 inherits from: iunknown last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview [propget] hresult columnextent([out] long ncolumnsspanned ); [propget] hresult columnheadercells([out, size_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); [propget] hresult columnindex([out] long columnindex ); [propget] hresult isselected([out] boolean isselected ); [propget] hresult rowcolumnextents([out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] hresult rowextent([out] long nrowsspanned ); [propget] hresult rowheadercells([out, size_is(, nrowheadercells,)] iunknown cellaccessibles, [out] long nrowheadercells ); [propget] hresult rowindex([out] lo...
...isselected() returns a boolean value indicating whether this cell is selected.
... [propget] hresult isselected( [out] boolean isselected ); parameters isselected returns true if the specified cell is selected and false otherwise.
...And 3 more matches

inIDOMUtils
y, size_is(acount)] out wstring aprops); nsisupportsarray getcssstylerules(in nsidomelement aelement, [optional] in domstring apseudo); nsidomnode getparentfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long getruleline(in nsidomcssstylerule arule); unsigned long getrulecolumn(in nsidomcssstylerule arule); unsigned long getselectorcount(in nsidomcssstylerule arule); astring getselectortext(in nsidomcssstylerule arule, in unsigned long aselectorindex); unsigned long long getspecificity(in nsidomcssstylerule arule, in unsigned long aselectorindex); nsidomfontfacelist getusedfontfaces(in nsidomrange arange); bool haspseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); ...
... boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ainput); void removepseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); astring rgbtocolorname(in octet ar, in octet ag, in octet ab); bool selectormatcheselement(in nsidomelement aelement, in nsidomcssstylerule arule, in unsigned long aselectorindex, [optional] in domstring apseudo); void setcontentstate(in nsidomelement aelement, in unsigned long long astate); constants constant value description exclude_shorthands (1<<0) include_aliases (1<<1) content state flags the conte...
... selectormatcheselement() checks if a given selector from a style rule matches an element.
...And 3 more matches

nsIClipboard
ichclipboard); obsolete since gecko 1.8 void getdata(in nsitransferable atransferable, in long awhichclipboard); boolean hasdatamatchingflavors([array, size_is(alength)] in string aflavorlist, in unsigned long alength, in long awhichclipboard); void setdata(in nsitransferable atransferable, in nsiclipboardowner anowner, in long awhichclipboard); boolean supportsselectionclipboard(); boolean supportsfindclipboard(); constants most clipboard operations in firefox use kglobalclipboard, which is the one also used by the typical control-c/control-v keyboard shortcuts.
... the kselectionclipboard is peculiar to the x windows system, where it refers to the primary selection, which is the one that simple mouse selection and middle-click paste operations are using.
... constant value description kselectionclipboard 0 clipboard for selection.
...And 3 more matches

nsIMsgDBViewCommandUpdater
the nsimsgdbviewcommandupdater interface controls changes that occur as the selection changes.
...dupdater (for the standalone message window) nsmsgdbviewcommandupdater (for the threadpane message window) nsmsgsearchcommandupdater (for search dialogs) method overview void updatecommandstatus(); void displaymessagechanged(in nsimsgfolder afolder, in astring asubject, in acstring akeywords); void updatenextmessageafterdelete(); methods updatecommandstatus() called when the number of selected items changes.
... void displaymessagechanged(in nsimsgfolder afolder, in astring asubject, in acstring akeywords ); parameters afolder the folder containing selected message.
...And 3 more matches

Storage
teger)"); similarly, the c++ looks like this: rv = mdbconn->executesimplesql(ns_literal_cstring("create temp table table_name (column_name integer)")); ns_ensure_success(rv, rv); results to be returned however, if you need to get results back, you should create the statement with the mozistorageconnection.createstatement() api like this in javascript: var statement = dbconn.createstatement("select * from table_name where column_name = :parameter"); this example uses a named placeholder called "parameter" to be bound later (described in binding parameters).
... similarly, the c++ looks like this: nscomptr<mozistoragestatement> statement; rv = dbconn->createstatement(ns_literal_cstring("select * from table_name where column_name = ?1"), getter_addrefs(statement)); ns_ensure_success(rv, rv); this example uses the numbered placeholder indexed by zero for a parameter to be bound later (described in binding parameters).
...in javascript, there is a useful helper object (mozistoragestatementparams) available () that makes binding parameters much easier: var statement = dbconn.createstatement("select * from table_name where id = :row_id"); statement.params.row_id = 1234; use :boundparametername the same way for numeric and non-numeric columns.
...And 3 more matches

UI Tour - Firefox Developer Tools
pane the contents of the third pane depend on the current state of the debugger and may include the following sections: toolbar watch expressions breakpoints call stack scopes xhr breakpoints event listener breakpoints dom mutation breakpoints source list pane the source list pane lists all the javascript source files loaded into the page, and enables you to select one to debug.
...the name of the selected directory is shown at the top of the source list pane; clicking this name reverts the pane to showing all source items.
... ignore (since firefox 76) ignore files in this directory causes all files within the selected directory to be skipped by the debugger.
...And 3 more matches

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
visit the url about:config, and set the devtools.chrome.enabled preference to true: setting the 'devtools.chrome.enabled' preference open a developer scratchpad (menu button > developer > scratchpad), and select "browser" from the "environment" menu.
... (this menu will not be present unless you have changed the preference as explained above.) selecting the 'browser' context in the scratchpad enter the following code in the scratchpad: // this simply defines the 'debugger' constructor in this // scratchpad; it doesn't actually start debugging anything.
... var dbg; // start measuring the selected tab's main window's memory // consumption.
...And 3 more matches

Edit fonts - Firefox Developer Tools
select the fonts tab; the last of the tabs shown in the right-hand side of the css pane.
...you can select values using the slider or enter a numeric value directly into the text box.
...you can select values using the slider or enter a numeric value directly into the text box.
...And 3 more matches

Using the CSS Typed Object Model - Web APIs
// get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const defaultcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of defaultcomputedstyles) { // properties const cssproperty ...
...update the javascript on line 2 to select the <p> rather than the <a>.
...d an inhertable property: p { font-weight: bold; } a { --color: red; color: var(--color); } instead of getting all the properties, we create an array of properties of interest and use the stylepropertymapreadonly.get() method to get each of their values: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--color']; // iterate through our properties of interest for ( let i ...
...And 3 more matches

Element.matches() - Web APIs
the matches() method checks to see if the element would be selected by the provided selectorstring -- in other words -- checks if the element "is" the selector.
... syntax var result = element.matches(selectorstring); parameters selectorstring is a string representing the selector to test.
... exceptions syntax_err the specified selector string is invalid.
...And 3 more matches

HTMLInputElement.webkitdirectory - Web APIs
the htmlinputelement.webkitdirectory is a property that reflects the webkitdirectory html attribute and indicates that the <input> element should let the user select directories instead of files.
... when a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items.
... the selected file system entries can be obtained using the webkitentries property.
...And 3 more matches

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>cheese sandwiches</option> <option>fala...
...fel sandwiches</option> <option>ice 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; justify-content: center; } select { width: 200px; } what we want to do is transfer any selected options in the "no" list over to the "yes" list when the "yes" button is pressed, and transfer any selected options in the "yes" list over to the "no" list when the "no" button is pressed.
...And 3 more matches

Using the slider role - Accessibility
the slider role is used for markup that allows a user to select a value from within a given range.
...arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows): key(s) action right and up arrows increase the selected value left and down arrows decrease the selected value page up and page down optionally increase and decrease the value by a set amount (e.g.
... examples example 1: simple numerical range in the example below, a simple slider is used to select a value between 1 and 100.
...And 3 more matches

An overview of accessible web applications and widgets - Accessibility
states describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected, or hidden.
...tate of a checkbox or radio button aria-disabled: indicates that an element is visible, but not editable or otherwise operable aria-grabbed: indicates the 'grabbed' state of an object in a drag-and-drop operation (for a full list of aria states, consult the aria list of states and properties.) developers should use aria states to indicate the state of ui widget elements and use css attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
...attribute-based selector for indicating state div.tooltip[aria-hidden="true"] { display: none; } the javascript to update the aria-hidden property has the form shown in example 2c.
...And 3 more matches

-moz-user-focus - CSS: Cascading Style Sheets
select-after ?
... select-before ?
... select-menu ?
...And 3 more matches

::slotted() - CSS: Cascading Style Sheets
note also that this selector won't select a text node placed into a slot; it only targets actual elements.
... /* selects any element placed inside a slot */ ::slotted(*) { font-weight: bold; } /* selects any <span> placed inside a slot */ ::slotted(span) { font-weight: bold; } syntax ::slotted( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
... <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>?
...And 3 more matches

:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
... /* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.
... 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...
...And 3 more matches

:scope - CSS: Cascading Style Sheets
the :scope css pseudo-class represents elements that are a reference point for selectors to match against.
... /* selects a scoped element */ :scope { background-color: lime; } currently, when used in a stylesheet, :scope is the same as :root, since there is not at this time a way to explicitly establish a scoped element.
... when used from a dom api such as queryselector(), queryselectorall(), matches(), or element.closest(), :scope matches the element on which the method was called.
...And 3 more matches

:visited - CSS: Cascading Style Sheets
for privacy reasons, the styles that can be modified using this selector are very limited.
... /* selects any <a> that has been visited */ a:visited { color: green; } styles defined by the :visited pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :active) that has at least equal specificity.
... note: for more information on these limitations and the reasons behind them, see privacy and the :visited selector.
...And 3 more matches

Pseudo-classes - CSS: Cascading Style Sheets
a css pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
... syntax selector:pseudo-class { property: value; } like regular classes, you can chain together as many pseudo-classes as you want in a selector.
... html living standard living standard defines when particular selectors match html elements.
...And 3 more matches

Syntax - CSS: Cascading Style Sheets
each (valid) declaration block is preceded by one or more comma-separated selectors, which are conditions selecting some elements of the page.
... a selector group and an associated declarations block, together, are called a ruleset, or often simply a rule.
... as an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the css standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm.
...And 3 more matches

font-style - CSS: Cascading Style Sheets
values normal selects a font that is classified as normal within a font-family.
... italic selects a font that is classified as italic.
... oblique selects a font that is classified as oblique.
...And 3 more matches