Search completed in 1.21 seconds.
913 results for "selected":
Your results are loading. Please wait...
HTMLSelectElement.selectedOptions - Web APIs
the read-only htmlselectelement property selectedoptions contains a list of the <option> elements contained within the <select> element that are currently selected.
... the list of selected options is an htmlcollection object with one entry per currently selected option.
... an option is considered selected if it has an htmloptionelement.selected attribute.
...And 8 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
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
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
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
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.
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).
selectedIndex - Archive of obsolete content
« xul reference selectedindex type: integer returns the index of the currently selected item.
...by assigning -1 to this property, all items will be deselected.
... returns -1 if no items are selected ...
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.
...the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
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.
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'; ...
HTMLSelectElement.selectedIndex - Web APIs
the htmlselectelement.selectedindex is a long that reflects the index of the first or last selected <option> element, depending on the value of multiple.
... the value -1 indicates that no element is selected.
... syntax var index = selectelem.selectedindex; selectelem.selectedindex = index; example html <p id="p">selectedindex: 0</p> <select id="select"> <option selected>option a</option> <option>option b</option> <option>option c</option> <option>option d</option> <option>option e</option> </select> javascript var selectelem = document.getelementbyid('select') var pelem = document.getelementbyid('p') // when a new <option> is selected selectelem.addeventlistener('change', function() { var index = selectelem.selectedindex; // add that data to the <p> pelem.innerhtml = 'selectedindex: ' + index; }) specifications specification status comment html living standardthe definition of 'htmlselectelement' 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.
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.
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 ...
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.
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.
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.
selectedIndex - Archive of obsolete content
« xul reference home selectedindex type: integer gets and sets the index of the currently selected panel.
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.
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.
SetSelected
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.
Index - Web APIs
WebAPIIndex
this property's value changes whenever the document.selectedstylesheetset property is changed.
... 963 document.selectedstylesheetset api, cssom, dom, property, reference, stylesheets the selectedstylesheetset property indicates the name of the style sheet set that's currently in use.
... 1042 documentorshadowroot.getselection() api, documentorshadowroot, doument, method, reference, shadowroot, getselection, getselection(), shadow dom 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.
...And 57 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 ); [prop...
...get] 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, size_i...
...s(,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([ou...
...t] 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
Index - Archive of obsolete content
when a slidebar feature is selected its contents will be revealed from behind the current webpage.
...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.
... 759 afterselected xul attributes, xul reference no summary!
...And 31 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
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 27 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, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, sc...
...rolltoindex, 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,250"}, {gem: "blue sapphire", price: "$3,400 - $4,500"}, {gem: "diamond", price: "$5,600 - $16,000"} ]; for (var i = 0; i...
...And 26 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 unsig...
...ned 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 26 more matches
richlistbox - Archive of obsolete content
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, sc...
... single only one row may be selected at a time.
... (default in listbox and richlistbox.) multiple multiple rows may be selected at once.
...And 24 more matches
ARIA: listbox role - Accessibility
it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free.
... when a list is tabbed to, the first item in the list will be selected if nothing else already is.
...all selected options have aria-selected set to true.
...And 23 more matches
Tree Selection - Archive of obsolete content
« previousnext » the section will describe how to get and set the selected items in a tree.
... getting the selected tree items each item in a tree (that corresponds to treeitem element, if using content tree view) may be selected individually.
...the tree provides a number of functions which can be used to determine whether an item is selected.
...And 20 more matches
Manipulating Lists - Archive of obsolete content
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.
... for instance the selecteditem of a menulist will be the menuitem that is selected.
...And 18 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 17 more matches
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
value a domstring representing the path to the selected file.
...mon 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 16 more matches
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
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.
...where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
...And 11 more matches
nsIMsgDBView
dupdater); 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 index); nsimsgfolder getfolderforviewindex(in...
... keyforfirstselectedmessage nsmsgkey readonly: the key of the first message in the current selection.
... viewindexforfirstselectedmsg nsmsgviewindex readonly: the index of the first selected message.
...And 10 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.
... tabbrowser.selectedtab = tabbrowser.tabcontainer.childnodes[index]; // focus *this* browser-window browserwin.focus(); found = true; break; } } } // our url isn't open.
... tabbrowser.selectedtab = currenttab; // focus *this* browser window in case another one is currently focused tabbrowser.ownerdocument.defaultview.focus(); found = true; } } if (!found) { // our tab isn't open.
...And 9 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 9 more matches
How to build custom form controls - Learn web development
the value does not change when: the user hits the up arrow key when the first option is selected.
... the user hits the down arrow key when the last option is selected.
... finally, let's define how the control's options will behave: when the control is opened, the selected option is highlighted when the mouse is over an option, the option is highlighted and the previously highlighted option is returned to its normal state for the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing.
...And 9 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.
... :checked, :indeterminate, and :default: respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g.
... an <input type="checkbox"> with the checked attribute set, or an <option> element with the selected attribute set).
...And 9 more matches
nsIAccessibleSelectable
inherits from: nsisupports last changed in gecko 1.7 method overview void addchildtoselection(in long index); void clearselection(); nsiarray getselectedchildren(); boolean ischildselected(in long index); nsiaccessible refselection(in long index); void removechildfromselection(in long index); boolean selectallselection(); attributes attribute type description selectioncount long the number of accessible children currently selected.
...if the specified object is already selected, then it does nothing.
... clearselection() clears the selection in the object so that no children in the object are selected.
...And 9 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 9 more matches
Using files from web applications - Web APIs
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.
... accessing the first selected file using a classical dom selector: const selectedfile = document.getelementbyid('input').files[0]; accessing selected file(s) on a change event it is also possible (but not mandatory) to access the filelist through the change event.
... you need to use eventtarget.addeventlistener() to add the change event listener, like this: const inputelement = document.getelementbyid("input"); inputelement.addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ } getting information about selected file(s) the filelist object provided by the dom lists all of the files selected by the user, each specified as a file object.
...And 9 more matches
datepicker - Archive of obsolete content
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.
... properties date type: integer the currently selected date of the month from 1 to 31.
...And 8 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 no...
... 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 8 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 8 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
each <option> element should have a value attribute containing the data value to submit to the server when that option is selected.
...you can include a selected attribute on an <option> element to make it selected by default when the page first loads.
... the <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once.
...And 8 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.
... checkbox adding type="checkbox" to a menuitem element will check that when it is selected, and uncheck it if it is selected again.
...And 7 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 ...
...if set to false or omitted, the value must be selected from the list.
... completeselectedindex type: boolean if true, the text in the text field will be autocompleted as the user selects from the popup list.
...And 7 more matches
menulist - Archive of obsolete content
the currently selected choice is displayed on the menulist element.
... attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, select examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attri...
...for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } 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.
...And 7 more matches
tab - Archive of obsolete content
ArchiveMozillaXULtab
attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... 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 7 more matches
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
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.
... selectedindex type: integer gets and sets the index of the currently selected panel.
...And 7 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").
... selection types of each clause of composition string or caret nsiselectioncontroller mozilla::selectiontype mozilla::textrangetype caret selection_normal enormal ecaret raw text typed by the user selection_ime_raw_input eimerawclause erawclause selected clause of raw text typed by the user selection_ime_selectedrawtext eimeselectedrawclause eselectedrawclause converted clause by ime selection_ime_convertedtext eimeconvertedclause econvertedclause selected clause by the user or ime and also converted by ime selection_ime_selectedconvertedtext eimeselectedclause eselectedclause note that typicall...
...And 7 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] numb...
... dropselection() deselects the currently selected text.
...if not specified, the currently selected text in the editor is used as the search string.
...And 7 more matches
nsIHTMLEditor
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 inserth...
... ali true if "li" list items are selected.
... adt true if "dt" list items are selected.
...And 7 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.
... this also gets the target icon: , giving you a convenient way to highlight the currently selected element in the page.
... displaying pseudo-elements the rule view displays the following pseudo-elements, if they are applied to the selected element: ::after ::backdrop ::before ::first-letter ::first-line ::selection :-moz-color-swatch :-moz-number-spin-box :-moz-number-spin-down :-moz-number-spin-up :-moz-number-text :-moz-number-wrapper :-moz-placeholder :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz-range-track :-moz-selection if the selected element has pseudo-elements applied to it, they are d...
...And 7 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.
... (copy) image data-url copy image as a data:// url, if the selected element is an image.
... show dom properties open the split console and enter the console command "inspect($0)" to inspect the currently selected element.
...And 7 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
if set to false or omitted, the value must be selected from the list.
...a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
... ontextcommand obsolete since gecko 1.9.1 type: script code note: applies to: thunderbird, seamonkeythis event handler is called when a result is selected for the textbox.
...And 6 more matches
Open and Save Dialogs - Archive of obsolete content
when the dialog is closed, you can use the interface functions to get the file that was selected.
...if you do not set this, a suitable default will be selected for you.
...typically, the first one added is selected by default.
...And 6 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
onselect type: script code this event is sent to a tree when a row is selected, or whenever the selection changes.
... single only one row may be selected at a time.
... (default in listbox and richlistbox.) multiple multiple rows may be selected at once.
...And 6 more matches
Midas
otherwise, all selected characters will become bold.
... delete this command will delete all text and objects that are selected.
... if no text is selected it deletes one character to the right.
...And 6 more matches
Index - Firefox Developer Tools
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.
...underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: 34 index tools found 158 pages: 35 json viewer firefox includes a json viewer.
... 68 select an element guide, inspector, tools the selected element is the element in the page that the inspector is currently focused on.
...And 6 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.
...if you do this, the selected bindings will be used for all the developer tools that use the source editor.
... 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 f...
...And 6 more matches
Menus - Archive of obsolete content
clicking the button will display the menu, allowing a command to be selected.
...for this type of menu, one of the items within it is selected.
... when another item is selected, the label of the item is set as the label of the menulist.
...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
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> <tabp...
... selectedindex type: integer returns the index of the currently selected item.
...by assigning -1 to this property, all items will be deselected.
...And 5 more matches
Introduction to events - Learn web development
this would work, however: myelement.addeventlistener('click', functiona); myelement.addeventlistener('click', functionb); both functions would now run when the element is selected.
...you might, for example, have a set of 16 tiles that disappear when selected.
...we then select all of them using document.queryselectorall(), then loop through each one, adding an onclick handler to each that makes it so that a random color is applied to each one when selected: const divs = document.queryselectorall('div'); for (let i = 0; i < divs.length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundcolor = bgchange(); } } the output is as follows (try clicking around on it — have fun): most event handlers you'll encounter have a standard set of properties and functions (methods) available on the event object; see the event object re...
...And 5 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?
...er shows dark border when multiline text field is focused) in autocomplete text fields, make sure the autocomplete popup doesn't receive actual or msaa focus unless an up/down arrow is pressed, and don't use the default system highlight color in the list itself unless it really has focus in autocomplete text fields, make sure that the delete or backspace key removes all auto completed selected text.
...And 5 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 5 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 5 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 5 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 5 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.
... 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.
... markup used: role="grid", "gridcell", "rowheader", "columnheader" aria-selected, aria-readonly notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca...
...And 5 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
<input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected.
... <input type="password" name="password"/> radio a radio button, allowing a single value to be selected out of multiple choices with the same name value.
...if present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons.
...And 5 more matches
Input Controls - Archive of obsolete content
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.
... <checkbox id="case-sensitive" checked="true" label="case sensitive"/> <radio id="orange" label="orange"/> <radio id="violet" selected="true" label="violet"/> <radio id="yellow" label="yellow"/> the first line creates a simple checkbox.
...And 4 more matches
deck - Archive of obsolete content
ArchiveMozillaXULdeck
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 4 more matches
textbox - Archive of obsolete content
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.
...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.
...And 4 more matches
timepicker - Archive of obsolete content
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.
... set this property to change the selected hour.
...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"] radi...
...o[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
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 4 more matches
Handling common accessibility problems - Learn web development
using native keyboard accessibility certain html features can be selected using only the keyboard — this is default behavior, available since the early days of the web.
... when vo is on, the display will look mostly the same, but you'll see a black box at the bottom left of the screen that contains information on what vo currently has selected.
...this includes items selected in the rotor (see below).
...And 4 more matches
Profiling with the Firefox Profiler
once a range is selected, a magnifying glass appears which zooms into that range.
...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").
... tip: while zooming out to a previously-selected range deletes the narrower range, the browser back button can be used to restore the narrower range.
...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 com...
...And 4 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.
... defaultselected optional a boolean that sets the selected attribute value, i.e.
... so that this <option> will be the default value selected in the <select> element when the page is first loaded.
...And 4 more matches
HTMLSelectElement - Web APIs
htmlselectelement.multiple a boolean reflecting the multiple html attribute, which indicates whether multiple items can be selected.
... htmlselectelement.selectedindex a long reflecting the index of the first selected <option> element.
... the value -1 indicates no element is selected.
...And 4 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-re...
...peat-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"> ...
...*******************************************************/ /* * border image picker */ #gallery { box-shadow: 0 0 3px 0 #bababa; } #image-gallery { width: 600px; height: 100px; margin: 0 auto; transition: margin 0.4s; } #image-gallery .image { height: 80px; float: left; margin: 10px; opacity: 0.5; background-color: #fff; box-shadow: 0px 0px 3px 1px #bababa; } #image-gallery .image[selected="true"] { box-shadow: 0px 0px 3px 1px #3bba52; opacity: 1; } #image-gallery .image:hover { cursor: pointer; box-shadow: 0px 0px 3px 1px #30ace5; opacity: 1; } #image-gallery[data-collapsed='true'] { margin-top: -100px; } /* load menu */ #load-actions { margin: 10px 0; } #toggle-gallery { width: 30px; height: 25px; margin: 10px; color: #fff; background-image: url('https://mdn.moz...
...And 4 more matches
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
universal selector *, ns|*, *|*, |* type selector elementname class selector .classname id selector #idname attribute selector [attr=value] grouping selectors selector list a, b specifies that both a and b elements are selected.
... combinators combinators are selectors that establish a relationship between two or more simple selectors, such as "a is a child of b" or "a is adjacent to b." adjacent sibling combinator a + b specifies that the elements selected by both a and b have the same parent and that the element selected by b immediately follows the element selected by a horizontally.
... general sibling combinator a ~ b specifies that the elements selected by both a and b share the same parent and that the element selected by a comes before—but not necessarily immediately before—the element selected by b.
...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
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
--- createlink generates an html link from the selected text.
... --- fontname changes the font used in the selected text.
... the font name to use (arial, for example) fontsize changes the font size used in the selected text.
...And 3 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.
...when the user selects delete from the menu, the listbox deletes the selected row.
...="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox> </window> the control...
...And 3 more matches
colorpicker - Archive of obsolete content
color type: color string the currently selected color.
...you can assign a string of the form #rrggbb to this property to change the selected color.
...a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
...And 3 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 type:...
...to change the currently selected item in a listbox, use the listbox property selecteditem.
... selected type: boolean indicates whether the element is selected or not.
...And 3 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.
...by assigning -1 to this property, all items will be deselected.
...And 3 more matches
WAI-ARIA basics - Learn web development
we've updated the structure of the tabbed interface like so: <ul role="tablist"> <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">tab 1</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">tab 2</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">tab 3</li> </ul> <div class="panels"> <article class="active-panel" role="tabpanel" aria-hidden="false"> ...
... aria-selected — defines which tab is currently selected.
... as different tabs are selected by the user, the value of this attribute on the different tabs is updated via javascript.
...And 3 more matches
Making decisions in your code — conditionals - Learn web development
when this function is run, we first set a variable called choice to the current value selected in the <select> element.
...in this case, it serves to empty the text out of the paragraph if nothing is selected, for example, if a user decides to re-select the "--make a choice--" placeholder option shown at the beginning.
... an onchange event handler to detect when the value selected in the <select> menu is changed.
...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] long...
...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
nsIClipboardCommands
return value true if an image is selected, false otherwise.
...return value true if an image is selected, false otherwise.
...return value true if a link is selected, false otherwise.
...And 3 more matches
nsIEditorMailSupport
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).
...void inserttextwithquotations( in domstring astringtoinsert ); parameters astringtoinsert the string to be inserted pasteascitedquotation() paste a string as quoted text, whose representation is dependent on the editor type, replacing the selected text (if any) void pasteascitedquotation( in astring acitation, in long aselectiontype ); parameters acitation the "mid" url of the source message.
...And 3 more matches
nsIPlacesView
] getdragableselection(); nsinavhistoryresultnode[][] getremovableselectionranges(); nsinavhistoryresult getresult(); nsinavhistorycontainerresultnode getresultnode(); nsinavhistoryresultnode[] getselectionnodes(); void selectall(); attributes attribute type description hasselection boolean whether or not there are selected items.
... selectednode nsinavhistoryresultnode the selected node in the view.
... if there are multiple selected nodes, this is null.
...And 3 more matches
nsITreeSelection
layout/xul/base/src/tree/public/nsitreeselection.idlscriptable this interface is used by the tree widget to get information about what is selected.
...ts last changed in gecko 1.9 (firefox 3) method overview void adjustselection(in long index, in long count); void clearrange(in long startindex, in long endindex); void clearselection(); void getrangeat(in long i, out long min, out long max); long getrangecount(); void invalidateselection(); void invertselection(); boolean isselected(in long index); void rangedselect(in long startindex, in long endindex, in boolean augment); void select(in long index); void selectall(); void timedselect(in long index, in long delay); void toggleselect(in long index); attributes attribute type description count long the number of rows currently selected in this tr...
...this is not a reliable method of determining the selected row, as the selection may include multiple rows, or the focused row may not even be selected.
...And 3 more matches
Page inspector keyboard shortcuts - Firefox Developer Tools
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 f...
... 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.
... enter return enter step forward through the attributes of a node tab tab tab step backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute enter return enter hide/show the selected node h h h focus on the search box in the html pane ctrl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +enter f2 / cmd + return f2 / ctrl + enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s find the next match in the markup, when searching is active enter return enter ...
...And 3 more matches
Responsive Design Mode - Firefox Developer Tools
information for the selected device is centered over the display.
... from left to right, the display includes: name of the selected device - a drop-down list that includes whatever devices you have selected from the device settings screen.
... device selection just above the viewport there is a label "no device selected"; click this to see a list of device names.
...And 3 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.selected is a boolean that indicates whether the option is currently selected.
...And 3 more matches
RTCIceTransport - Web APIs
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.
... if no candidate pair has been selected yet, the return value is null.
...And 3 more matches
Using the Screen Capture API - Web APIs
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.
...the source of this audio might be the selected window, the entire computer's audio system, or the user's microphone (or a combination of all of the above).
...And 3 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.
... selection api interfaces selection represents the range of text selected by the user or the current position of the caret.
...And 3 more matches
Add a Context Menu Item - Archive of obsolete content
the item is displayed whenever something in the page is selected.
...the context-menu module provides a number of simple built-in contexts, including this selectioncontext(), which means: display the item when something on the page is selected.
...in this case the script listens for the user to click on the item, then sends a message to the add-on containing the selected text.
...And 2 more matches
jspage - Archive of obsolete content
(){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(typ...
...!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=l.
...en(l,m).erase(this); },getchildren:function(l,m){return j(this,"nextsibling","firstchild",l,true,m);},getwindow:function(){return this.ownerdocument.window;},getdocument:function(){return this.ownerdocument; },getelementbyid:function(o,n){var m=this.ownerdocument.getelementbyid(o);if(!m){return null;}for(var l=m.parentnode;l!=this;l=l.parentnode){if(!l){return null; }}return document.id(m,n);},getselected:function(){return new elements($a(this.options).filter(function(l){return l.selected;}));},getcomputedstyle:function(m){if(this.currentstyle){return this.currentstyle[m.camelcase()]; }var l=this.getdocument().defaultview.getcomputedstyle(this,null);return(l)?l.getpropertyvalue([m.hyphenate()]):null;},toquerystring:function(){var l=[]; this.getelements("input, select, textarea",true).each(function...
...And 2 more matches
Proxy UI - Archive of obsolete content
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.
...for example, firefox 3: [ ] no proxy [ ] auto-detect proxy settings for this network [ ] manual proxy configuration: [ ] automatic proxy configuration url: behavior default value: "no proxy" is selected all other "type" radio buttons are enabled, but not selected.
... enabling and disabling related fields when a radio button is selected, the related ui elements are enabled (and editable).
...And 2 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.
...if a menuitem is selected, this will close the menu and fire the menuitem's command event.
... if a menu is selected, the menu will open.
...And 2 more matches
Creating a Skin - Archive of obsolete content
we will make the selected tab bold and change the rounding on the tabs.
... tab:first-child { -moz-border-radius: 4px 0px 0px 0px; } tab:last-child { -moz-border-radius: 0px 4px 0px 0px; } tab[selected="true"] { color: #000066; font-weight: bold; text-decoration: underline; } two rules change the normal tab appearance, the first sets the rounding on the first tab and the second sets the rounding on the last tab.
... the last rule only applies to tabs that have their selected attribute set to true.
...And 2 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 2 more matches
List Controls - Archive of obsolete content
when the user selects an item in the list, the entire row is selected.
... you cannot have a single cell selected.
...its syntax is best described with the example below: example 5 : source view <menulist label="bus"> <menupopup> <menuitem label="car" /> <menuitem label="taxi" /> <menuitem label="bus" selected="true" /> <menuitem label="train" /> </menupopup> </menulist> this menulist will contain four choices, one for each menuitem element.
...And 2 more matches
radio - Archive of obsolete content
ArchiveMozillaXULradio
only one radio button within the same radiogroup may be selected at a time.
... 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...
... selected type: boolean indicates whether the element is selected or not.
...And 2 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, gohom...
... selectedbrowser type: browser element this read-only property returns the currently displayed browser element.
... selectedtab type: tab element a reference to the currently selected tab, which will always be one of the tab elements in the tabs element.
...And 2 more matches
How to enable locale switching in a XULRunner application - Archive of obsolete content
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"); // render...
... locale menulist by iterating through the query result from getlocalesforpackage() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.getelementbyid("locale-listbox"); var selecteditem = null; while(availablelocales.hasmore()) { var locale = availablelocales.getnext(); var listitem = document.createelementns(xul_ns, "listitem"); listitem.setattribute("value", locale); listitem.setattribute("label", locale); if (locale == selectedlocale) { // is this the current locale?
...And 2 more matches
Scratchpad - Archive of obsolete content
the code is executed in the scope of the currently selected tab.
... run when you choose the run option, the selected code is executed.
... for example, if you enter the code: window then choose inspect, the object inspector is shown that looks something like this: display the display option executes the selected code, then inserts the result directly into your scratchpad editor window as a comment, so you can use it as a repl.
...And 2 more matches
Mobile accessibility - Learn web development
once you've selected the option you want, double-click to choose that option.
... once voiceover is enabled, ios's basic control gestures will be a bit different: a single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
... to activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
...And 2 more matches
Firefox UI considerations for web developers
how an icon is selected the new tab page chooses icons to use for top sites by trying a series of methods until it obtains an icon to use: a global "top sites" list is checked.
... if tippy top doesn't include the site, firefox looks in its places data store for icons specified in the page's <head> element; if an svg icon is available, that icon is selected.
...otherwise, the smallest image larger than 96 pixels wide is selected.
...And 2 more matches
Index
MozillaTechXPCOMIndex
285 setselected this method adds or remove this accessible to the current selection.
...if the specified object is already selected, then it does nothing.
... 482 nsidomfilelist dom, files, firefox 3, interfaces, xpcom, xpcom api reference, drag and drop the nsidomfilelist interface contains a list of nsidomfile objects describing the files selected by the user for a "file" input field on a web form.
...And 2 more matches
nsIFilePicker
file nsilocalfile the currently selected file or directory.
... files nsisimpleenumerator an enumerator of the currently selected files.
... fileurl nsiuri the uri of the currently selected file or directory.
...And 2 more matches
nsIPromptService
aoutselection contains the index of the selected item in the list when this method returns true.
... if you call this method from javascript, this argument is wrapped in an object with an attribute named 'value' which holds the selected index.
... var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var items = ["hello", "welcome", "howdy", "hi", ":)"]; // list items var selected = {}; var result = prompts.select(null, "title", "what greeting do you want?", items.length, items, selected); // result is true if ok was pressed, false if cancel.
...And 2 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.
... only show applied styles the style side panel in firebug has an option to display only the properties of a css rule that are applied to the selected element and hide all overwritten styles.
...furthermore it has a source and a live edit mode, which allow to edit the selected style sheet like within a text editor.
...And 2 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.
... press s with a node selected to see it in the page (same as right-click a node and click "scroll into view").
...And 2 more matches
FileList - Web APIs
WebAPIFileList
an object of this type is returned by the files property of the html <input> element; this lets you access the list of files selected with the <input type="file"> element.
... note: prior to gecko 1.9.2, the input element only supported a single file being selected at a time, meaning that the filelist would contain only one file.
... example this example iterates over all the files selected by the user using an input element: // fileinput is an html input element: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; var file; // loop through files for (var i = 0; i < files.length; i++) { // get item file = files.item(i); //or file = fi...
...And 2 more matches
Alternative style sheets - CSS: Cascading Style Sheets
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.
... no matter what style is selected, the rules from the reset.css stylesheet will always be applied.
... preferred (no rel="alternate", with title="..." specified): applied by default, but disabled if an alternate stylesheet is selected.
...And 2 more matches
Event reference
select some text is being selected.
... select uievent dom l3 some text is being selected.
... mozbrowsercaretstatechanged firefox os browser api-specific sent when the text selected inside the browser <iframe> content changes.
...And 2 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
we respond by setting the contents of the <p> element with the id "output" to a string describing the finally selected color.
...it can also take averages of the colors of pixels in various sized areas or even a selected area of the page.
... having selected our base color, we need to build out our palette.
...And 2 more matches
context-menu - Archive of obsolete content
make sure that no text is selected.
...for instance, if your item performs a search with the user's selected text, it would be nice to display the text in the item to provide feedback to the user.
... you can also get the selected text using the high level selection api.
... var selection = require("sdk/selection"); and within the contentscript, reference the selected text as selection.text private windows if your add-on has not opted into private browsing, then any menus or menu items that you add will not appear in context menus belonging to private browser windows.
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 whi...
...note that it returns the empty string (""), not false, when nothing is selected.
...if you wish to block selected scripts based on their uri, implement nsicontentpolicy.
... var ci = components.interfaces; var cc = components.classes; //assume you can not get the main window object directly, if you can, just use it var wm = cc["@mozilla.org/appshell/window-mediator;1"].getservice(ci.nsiwindowmediator); var mainwindow = wm.getmostrecentwindow("navigator:browser"); //get sessionhistory from the current selected tab var history = mainwindow.gbrowser.selectedbrowser.webnavigation.sessionhistory; and then get the page you want, and it's postdata.
Adding sidebars - Archive of obsolete content
--> </tabpanel> </tabpanels> </tabbox> the first tab is selected by default, but you can change the default selection by setting the selected attribute to true in the « xul reference « element.
...it only displays one of its child nodes at a time, depending on its selectedindex value.
... <deck selectedindex="2"> <hbox> <!-- content for the first child.
...the alternative is to use a deck with the two labels, and change the selected index depending on the purpose of the window.
Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed color ...
...eight helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab ...
...ardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew ...
...top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...
Focus and Selection - Archive of obsolete content
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.
...it takes two parameters, the first is the starting character and the second is the character after the last one that you want to have selected.
...if there were only six characters entered into the field, only the fifth and sixth characters would be selected.
...if both are set to the same value no text is selected, and the cursor is moved to that position.
The Chrome URL - Archive of obsolete content
for content, a file with the same name of the package and a xul extension is selected.
... in the above example, the file browser.xul is selected.
... for messenger, messenger.xul would be selected.
...for a skin, the file <package name>.css is selected; for a locale, the file <package name>.dtd is selected.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
column see grid columns see grid command see keyboard shortcut tutorial commandset see keyboard shortcut tutorial deck only the currently selected deck layer can be focused.
...menubar <menubar hidden="false"> <menu label="file" accesskey="f"> <menupopup> <menuitem label="new" accesskey="n" key="file-new-key"/> </menupopup> </menu> </menubar> menulist <label value="<!--label text-->" control="comboid" /> <menulist id="comboid"> <menupopup> <menuitem label="<!--option1-->" /> <menuitem label="<!--option2-->" selected="true" /> <menuitem label="<!--option3-->" /> </menupopup> </menulist> menupopup see menulist and menubar popup see popupset popupset be careful regarding keyboard access of popups.
... progressmeter <progressmeter mode="determined" value="10" /> as progress advances, jaws indicates percentage to the user radio see radiogroup radiogroup <label value='<!--radio group-->' control='radioid' /> <radiogroup id='radioid'> <radio selected="true" label='<!--option1-->' /> <radio label='<!--option2-->' /> </radiogroup> row see grid rows see grid stack all elements can be focused, even if not visible due to being hidden under something else statusbar <statusbar> <statusbarpanel label="<!--status bar-->" flex="1"/> </statusbar> read using jaws wit...
... </tabpanel> </tabpanels> focusing the tabbox will visually set focus to the selected tab, then you can select different tabs by using the left and right arrow keys.
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"/> ...
... 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.
... selected type: boolean this property's value is true if this element is selected, or false if it is not.
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 key ...
... 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.
... selected type: boolean this property's value is true if this element is selected, or false if it is not.
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" typ...
... 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.
... selected type: boolean this property's value is true if this element is selected, or false if it is not.
prefwindow - Archive of obsolete content
you can also set the lastselected attribute on the prefwindow tag to the id of the pane to start with.
... attributes buttonalign, buttondir, buttonorient, buttonpack, buttons, defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/...
... lastselected type: string set this to the id of the last selected pane.
...it's declared as a <field>, so you can set the value, however i don't believe it's valid to do that.) lastselected type: string set this to the id of the last selected pane.
richlistitem - Archive of obsolete content
attributes disabled, searchlabel, selected, tabindex, value properties accessible, control, disabled, label, selected, tabindex, value examples (example needed) attributes disabled type: boolean indicates whether the element is disabled or not.
... 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.
... selected type: boolean this property's value is true if this element is selected, or false if it is not.
calICalendarView - Archive of obsolete content
y attribute calidatetime startdate; readonly attribute calidatetime enddate; readonly attribute boolean supportsdisjointdates; readonly attribute boolean hasdisjointdates; void setdatelist(in unsigned long acount, [array,size_is(acount)] in calidatetime adates); void getdatelist(out unsigned long acount, [array,size_is(acount),retval] out calidatetime adates); attribute caliitembase selecteditem; attribute calidatetime selectedday; attributes displaycalendar the displaycalendar is an implementation of the calicalendar interface.
... selecteditem returns a caliitembase corresponding to the currently active item in the view.
...note: this will likely change to selecteditems and return an array of caliitembases in order to support selecting multiple items at once.
... selectedday the currently selected day in the display.
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.
... exploring the css editor by default, the css editor displays the css rules applied to the currently selected element: these features are especially handy: the rules applied to the current element are shown in order of most-to-least-specific.
... you'll notice a number of clickable tabs at the top of the css viewer: computed: this shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
Other form controls - Learn web development
<select id="simple" name="simple"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </select> if required, the default value for the select box can be set using the selected attribute on the desired <option> element — this option is then preselected when the page loads.
... the <option> elements can be nested inside <optgroup> elements to create visually associated groups of values: <select id="groups" name="groups"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="vegetables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> on the <optgroup> element, the value of the label attribute is displayed before the values of the nested options.
... if an <option> element has an explicit value attribute set on it, that value is sent when the form is submitted with that option selected.
... <select id="multi" name="multi" multiple size="2"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="vegetables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> note: in the case of multiple choice select boxes, you'll notice that the select box no longer displays the values as drop-down content — instead, all values are displayed at once in a li...
Displaying Places information using views
it will open any parent nodes that it needs to in order to show the selected items.
... selectnode() causes a particular node to be selected in the tree, resulting in all containers above the node in the hierarchy to be opened so that the node is visible.
... selectplaceuri() causes a particular node represented by the specified placeuri to be selected in the tree.
...it allows you to do things like getting the nsinavhistoryresult instance that a view displays and examining its selected nodes.
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: events: concomitant state: state_focused state_selectable the object can be selected.
... applied to: events: concomitant state: state_selected state_linked indicates that the object is formatted as a hyperlink.
nsIAccessibleEvent
event_menu_start 0x0018 0x0015 a menu item on the menu bar has been selected.
... event_hyperlink_selected_link_changed 0x0053 0x004f the hyperlink selected state changed from selected to unselected or from unselected to selected.
... event_hypertext_link_selected 0x0055 0x0051 one of the links associated with the hypertext object has been selected.
...103 event_atk_text_caret_move 0x0104 event_atk_visible_data_change 0x0105 event_atk_table_model_change 0x0110 event_atk_table_row_insert 0x0111 event_atk_table_row_delete 0x0112 event_atk_table_row_reorder 0x0113 event_atk_table_column_insert 0x0114 event_atk_table_column_delete 0x0115 event_atk_table_column_reorder 0x0116 event_atk_link_selected 0x0117 event_atk_window_activate 0x0118 event_atk_window_create 0x0119 event_atk_window_deactivate 0x0120 event_atk_window_destroy 0x0121 event_atk_window_maximize 0x0122 event_atk_window_minimize 0x0123 event_atk_window_resize 0x0124 event_atk_window_restore 0x0125 event_dom_create 0x0001 an object has been created.
nsIAccessibleHyperLink
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview nsiaccessible getanchor(in long index); note: renamed from getobject in gecko 1.9 nsiuri geturi(in long index); boolean isselected(); obsolete since gecko 1.9 boolean isvalid(); obsolete since gecko 1.9 attributes attribute type description anchorcount long the number of anchors within this hyperlink.
... selected boolean determines whether the element currently has the focus, for example after returning from the destination page.
... isselected() obsolete since gecko 1.9 (firefox 3) note: has been replaced by the selected attribute.
... boolean isselected(); parameters none.
nsIDOMWindowUtils
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_ime_selectedrawtext 0x0010 one of values of aadditionalflags of sendquerycontentevent().
... query_content_flag_selection_ime_selectedconvertedtext 0x0040 one of values of aadditionalflags of sendquerycontentevent().
... query_selected_text 3200 query_selected_text queries the first selection range's information.
nsIMsgDBViewCommandUpdater
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.
... asubject the subject of the selected message.
... akeywords keywords associated with the selected message.
Address Book examples
in the following examples: selectedab is the uri of an address book to default the dialog to saving the card in.
... new contact dialog window.opendialog("chrome://messenger/content/addressbook/abnewcarddialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {selectedab:selectedab}); edit contact dialog window.opendialog("chrome://messenger/content/addressbook/abeditcarddialog.xul", "", "chrome,resizable=no,modal,titlebar,centerscreen", {aburi:aburi, card:card}); new list dialog window.opendialog("chrome://messenger/content/addressbook/abmaillistdialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", ...
... {selectedab:selectedab}); edit list dialog window.opendialog("chrome://messenger/content/addressbook/abeditlistdialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen", {abcard:abcard, listuri:listuri}); new address book dialog unlike the edit address book dialog, the new address book dialog does not currently have the facility to get the chrome uri based on the address book type.
... window.opendialog(addressbook.propertieschromeuri, "editdirectory", "chrome,modal=yes,resizable=no", {selecteddirectory: addressbook}); how do i set up my own address book?
Using popup notifications
then you can create the popup notification at the appropriate time like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions p...
... style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image: url("chrome://popupnotifications/skin/mozlogo.png"); } with this css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, [ { label: "first secondary option", accesskey: "1", callback: function...
...() { alert("first secondary option selected."); } }, { label: "second secondary option", accesskey: "2", callback: function() { alert("second secondary option selected."); } } ] ); when this notification is presented, and the user clicks on the menu button in the panel, the display looks like this: when the user chooses one of your secondary actions from the drop-down menu, the corresponding callback is invoked.
... components.utils.import('resource://gre/modules/popupnotifications.jsm'); var notify = new popupnotifications(gbrowser, document.getelementbyid("notification-popup"), document.getelementbyid("notification-popup-box")); var notification = notify.show( // browser gbrowser.selectedbrowser, // popup id "pdes-popup", // message "hi, there!, i'm gonna show you something today!!", // anchor id null, // main action { label: "click here", accesskey: "d", callback: function() { // you can call your function here } }, // secondary action null, // options { // alternative way to set the popup icon popupiconurl: "chrome://popupnotifications/skin/mozlogo.png"...
Accessibility Inspector - Firefox Developer Tools
on the right-hand side, you can see further information about the currently selected item.
... print accessibility tree to json you can print the contents of the accessibility tree to json by right-clicking on an entry in the accessibility tab and selecting print to json: when you do, you will get a new tab with the selected accessibility tree loaded into the json viewer: once opened, you can save or copy the data as necessary.
...the available menu items include: none — don't show the possible list of issues all issues — check for all types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the type of issues you selected.
...in the right side of the panel, the checks subpanel lists the specific issue with the selected node.
UI Tour - Firefox Developer Tools
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.
... ignore files outside this directory causes all files other than those within the selected directory to be skipped by the debugger.
... note: if you click step over (f10) after changing the selected line in the source pane, the debugger executes until reaching the line following the newly-selected line (disregarding whatever line the debugger originally stopped at).
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
var dbg; // start measuring the selected tab's main window's memory // consumption.
... var w = gbrowser.selectedbrowser.contentwindow; console.log("tracking allocations in page: " + w.location.href); // make that window a debuggee of our debugger.
...ce = ' ' + site.source + ':' + site.line + ':' + site.column; } else { name = '(root)'; place = ''; } console.log(indent + totals.get(site) + ': ' + name + place); for (let [child, grandchildren] of children) walk(child, grandchildren, indent + ' '); } walk(null, rootchildren, ''); } })(); in the scratchpad, ensure that no text is selected, and press the "run" button.
... (if you get an error complaining that components.utils is not defined, be sure you've selected browser from the scratchpad's environment menu, as described in step 2.) save the following html text to a file, and visit the file in your browser.
UI Tour - Firefox Developer Tools
select element button the inspector gives you detailed information about the currently selected element.
... rules view the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific.
... computed view the computed view shows you the complete computed css for the selected element (the computed values are the same as what getcomputedstyle would return.): compatibility view starting with firefox developer edition version 77, the compatibility view shows css compability issues, if any, for properties applied to the selected element, and for the current page as a whole.
... animations view the animations view gives you details of any animations applied to the selected element, and a controller to pause them: see work with animations for more details.
Console messages - Firefox Developer Tools
copy message copies the selected message to the clipboard.
... for responses that contain objects or variables, the following context menu options are available: reveal in inspector shows the selected dom node in the inspector pane.
... store as global variable creates a global variable (with a name like temp0, temp1, etc.) whose value is the selected object.
... copy object copies the selected object to the clipboard.
Document - Web APIs
WebAPIDocument
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.
...when the text selected on a web page changes.
... documentorshadowroot.getselection() returns a selection object representing the range of text selected by the user, or the current position of the caret.
HTMLInputElement.webkitEntries - Web APIs
the read-only webkitentries property of the htmlinputelement interface contains an array of file system entries (as objects based on filesystementry) representing files and/or directories selected by the user using an <input> element of type file, but only if that selection was made using drag-and-drop: selecting a file in the dialog will leave the property empty (bug 1326031).
... syntax var entries = htmlinputelement.webkitentries; value an array of objects based on filesystementry, each representing one file which is selected in the <input> element.
... example this example shows how to create a file selection <input> element and process the selected files.
... html <input id="files" type="file" multiple> javascript document.getelementbyid("files").addeventlistener("change", function(event) { event.target.webkitentries.foreach(function(entry) { /* do stuff with the entry */ }); }); each time a change event occurs, this code iterates over the selected files, obtaining their filesystementry-based objects and acting on them.
HTMLInputElement.webkitdirectory - Web APIs
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.
... understanding the results after the user makes a selection, each file object in files has its file.webkitrelativepath property set to the relative path within the selected directory at which the file is located.
...when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed.
HTMLTextAreaElement - Web APIs
selectionend unsigned long: returns / sets the index of the end of selected text.
... if no text is selected, contains the index of the character that follows the input cursor.
... selectionstart unsigned long: returns / sets the index of the beginning of selected text.
... if no text is selected, contains the index of the character that follows the input cursor.
Key Values - Web APIs
removes the currently selected input.
...accepts the currently selected option or input method sequence conversion.
... vk_prev_day "info" toggles the display of information about the currently selected content, program, or media.
... vk_live "lock" locks or unlocks the currently selected content or pgoram.
ParentNode.replaceChildren() - Web APIs
v> </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.
... to do this, we give each of the buttons a click event handler, which collects together the selected options you want to transfer in one constant, and the existing options in the list you are transferring to in another constant.
... const noselect = document.getelementbyid('no'); const yesselect = document.getelementbyid('yes'); const nobtn = document.getelementbyid('to-no'); const yesbtn = document.getelementbyid('to-yes'); yesbtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#no option:checked'); const existingyesoptions = document.queryselectorall('#yes option'); yesselect.replacechildren(...selectedtransferoptions, ...existingyesoptions); }); nobtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#yes option:checked'); const existingnooptions = document.queryselectorall...
...('#no option'); noselect.replacechildren(...selectedtransferoptions, ...existingnooptions); }); the end result looks like this: specification specification status comment domthe definition of 'parentnode.replacechildren()' in that specification.
PaymentRequest.shippingOption - Web APIs
the shippingoption read-only attribute of the paymentrequest interface returns either the id of a selected shipping option, null (if no shipping option was set to be selected) or a shipping option selected by the user.
... it is initially null by when no "selected" shipping options are provided.
...if requestshipping was false (or missing), shippingoption returns null, even the developer provides a selected a shipping option.
... syntax // returns the id of the selected paymentshippingoption var shippingoption = request.shippingoption; example in the example below, the paymentrequest.onshippingoptionchange and the paymentrequest.onshippingaoptionchange events are dispatched.
RTCIceCandidatePairStats - Web APIs
non-standard properties selected optional a firefox-specific boolean value which is true if the candidate pair described by this object is the one currently in use.
... the spec-compliant way to determine the selected candidate pair is to look for a stats object of type transport, which is an rtctransportstats object.
... that object's selectedcandidatepairid property indicates whether or not the specified transport is the one being used.
... usage notes the currently-active ice candidate pair—if any—can be obtained by calling the rtcicetransport method getselectedcandidatepair(), which returns an rtcicecandidatepair object, or null if there isn't a pair selected.
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.
Selection - Web APIs
WebAPISelection
a selection object represents the range of text selected by the user or the current position of the caret.
... selection.getrangeat() returns a range object representing one of the ranges currently selected.
...the currently selected text.
... multiple ranges in a selection a selection object represents the ranges that the user has selected.
TextRange - Web APIs
WebAPITextRange
the example gets the textrange through document.selection, and sets the specified element to be selected.
... var range = document.selection.createrange(); var element = document.getelementbyid("test"); range.movetoelementtext(element); range.select(); // selected "sometexttobeselected" <!doctype html> <html> <head> <title>textrange example</title> </head> <body> <p id="test">sometexttobeselected</p> </body> </html> notes use textrange to operate the selection valid only under ie9.
...this object is used to process the selected ranges in the document, and is mainly implemented by using the textrange interface.
... according to the standard, a window / document may have multiple non adjacent selection, but only firefox can select multiple ranges through ctrl; generally, only one selected textrange is allowed in ie.
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.
... when cast to string, either by appending an empty string ("") or using selection.tostring(), this object returns the text selected.
...to use a selection object as a string, call its tostring() method directly: var selectedtext = selobj.tostring(); selobj is a selection object.
... selectedtext is a string (selected text).
ARIA live regions - Accessibility
when a planet is selected from the dropdown, a region on the page is updated with information about the selected planet.
...ls="planetinfo"> <option value="">select a planet&hellip;</option> <option value="mercury">mercury</option> <option value="venus">venus</option> <option value="earth">earth</option> <option value="mars">mars</option> </select> <button id="renderplanetinfobutton">go</button> </fieldset> <div role="region" id="planetinfo" aria-live="polite"> <h2 id="planettitle">no planet selected</h2> <p id="planetdescription">select a planet to view its description</p> </div> <p><small>information courtesy <a href="https://en.wikipedia.org/wiki/solar_system#inner_solar_system">wikipedia</a></small></p> javascript const planets_info = { mercury: { title: 'mercury', description: 'mercury is the smallest and innermost planet in the solar system.
...net".' } }; function renderplanetinfo(planet) { const planettitle = document.queryselector('#planettitle'); const planetdescription = document.queryselector('#planetdescription'); if (planet in planets_info) { planettitle.textcontent = planets_info[planet].title; planetdescription.textcontent = planets_info[planet].description; } else { planettitle.textcontent = 'no planet selected'; planetdescription.textcontent = 'select a planet to view its description'; } } const renderplanetinfobutton = document.queryselector('#renderplanetinfobutton'); renderplanetinfobutton.addeventlistener('click', event => { const planetsselect = document.queryselector('#planetsselect'); const selectedplanet = planetsselect.options[planetsselect.selectedindex].value; renderplanetinfo...
...(selectedplanet); }); as the user selects a new planet, the information in the live region will be announced.
ARIA: row role - Accessibility
a row can contain a number of attributes clarifying the row's role, including aria-colindex, aria-level, aria-rowindex, and aria-selected.
... aria-selected state only relevant if the row is in an interactive container, such as a grid or treegrid, but not relevant if the row is in a table.
... the aria-selected attribute can take one of three values, or be omitted: aria-selected="true: row is currently selected aria-selected="false": row is not currently selected.
... aria-selected="undefined" or the attribute is missing: the row is not selectable.
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?
...there's a very good chance they won't ask for more than the states marked [important]: state_unavailable [important] state_selected [important] state_focused [important] state_pressed state_checked [important] state_mixed state_readonly [important] state_hottracked state_default [important] state_expanded [important] state_collapsed [important] state_busy [important] state_floating state_marqueed state_animated state_invisible state_offscreen [important] state_siz...
...problems can easily happen merely by having two listboxes visible at the same time, because selected listbox items use the system highlight color, even when the listbox itself is not focused.
HTML attribute: multiple - HTML: Hypertext Markup Language
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.
... when the form is submitted,had we used method="get" each selected file's name would have been added to url parameters as?uploads=img1.jpg&uploads=img2.svg.
...the selection of non-contiguous is not as well supported: items should be able to be selected and deselected by pressing space , but support varies between browsers.
...if you do change the appearance of a select, and even if you don't, make sure to inform the user that more than one option can be selected by another method.
<input type="date"> - HTML: Hypertext Markup Language
WebHTMLElementinputdate
in the following example, we set a minimum date of 2017-04-01 and a maximum date of 2017-04-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="2017-04-01" max="2017-04-30"> </label> </form> the result is that only days in april 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside april 2017 can't be selected in tte picker widget.
...te" id="bday" name="bday"> <span class="validity"></span> </div> <p class="fallbacklabel">enter your birthday:</p> <div class="fallbackdatepicker"> <span> <label for="day">day:</label> <select id="day" name="day"> </select> </span> <span> <label for="month">month:</label> <select id="month" name="month"> <option selected>january</option> <option>february</option> <option>march</option> <option>april</option> <option>may</option> <option>june</option> <option>july</option> <option>august</option> <option>september</option> <option>october</option> <option>november</option> <option>december</option> ...
... </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> </select> </span> </div> </form> the months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.) span { padding-left: 5px; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; } javascript the other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="date">.
...february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } } } function populateyears() { // get this year as a number var date = new date(); var year = date.getfullyea...
<input type="datetime-local"> - HTML: Hypertext Markup Language
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.
..."> <span class="validity"></span> </div> <p class="fallbacklabel">choose a date and time for your party:</p> <div class="fallbackdatetimepicker"> <div> <span> <label for="day">day:</label> <select id="day" name="day"> </select> </span> <span> <label for="month">month:</label> <select id="month" name="month"> <option selected>january</option> <option>february</option> <option>march</option> <option>april</option> <option>may</option> <option>june</option> <option>july</option> <option>august</option> <option>september</option> <option>october</option> <option>november</option> <option>december</option> ...
...el for="hour">hour:</label> <select id="hour" name="hour"> </select> </span> <span> <label for="minute">minute:</label> <select id="minute" name="minute"> </select> </span> </div> </div> </form> the months are hard-coded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year respectively (see the code comments below for detailed explanations of how these functions work.) we also decided to dynamically generate the hours and minutes, as there are so many of them!
...february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } } } function populateyears() { // get this year as a number var date = new date(); var year = date.getfullyea...
<input type="range"> - HTML: Hypertext Markup Language
WebHTMLElementinputrange
value a domstring containing the string representation of the selected numeric value; use valueasnumber to get the value as a number.
... value the value attribute contains a domstring which contains a string representation of the selected number.
...the range input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is.
...the value of step to 0.01: <input type="range" min="5" max="10" step="0.01"> if you want to accept any value regardless of how many decimal places it extends to, you can specify a value of any for the step attribute: <input type="range" min="0" max="3.14" step="any"> this example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.
Tree - Archive of obsolete content
treeview.rowcount; i++) { if (treeview.iscontainer(i) && !treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } to collapse all tree nodes just change the condition: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree item from the focused row a...
...ssuming <tree id="my-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var treeitem = view.getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree).
...use the following javascript: function ontreeclicked(event){ var tree = document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and child element at the point var row = { }, col = { }, child = { }; tbo.getcellat(event.clientx, event.clienty, row, col, child); var celltext = tree.view.getcelltext(row.value, col.value); alert(celltext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tree.view.selection.getrangecount(), selectedindices = []; for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t, start, end); for (var v = start.value; v <= end.value; v++) selectedindices.push(v); } other resources xul: tree documentation xul tutorial: tree selection ...
Session store API - Archive of obsolete content
var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; var datatoattach = "i want to attach this"; ss.settabvalue(currenttab, "key-name-here", datatoattach); this code sets the value of the key "key-name-here" to datatoattach.
... fetching a saved value you can fetch a value associated with a tab at any time (whether the tab is in the process of being restored or not), using code similar to the following: var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; var retrieveddata = ss.gettabvalue(currenttab, "key-name-here"); after this code executes, the variable retrieveddata contains the value saved for the key "key-name-here".
... deleting a value associated with a tab to delete a value from a tab, you can use code similar to the following: var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; ss.deletetabvalue(currenttab, "key-name-here"); remarks the window value save and restore functions work exactly like the tab-based functions by similar names.
seltype - Archive of obsolete content
single only one row may be selected at a time.
... (default in listbox and richlistbox.) multiple multiple rows may be selected at once.
... (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.
XUL Events - Archive of obsolete content
attribute: onmouseup select this event is sent to a listbox or tree when an item is selected.
... radiostatechange this event is sent when a radio button is selected, either by the user or a script.
... normally, you would use the command event to listen to radio button selection changes, however, the command event is only sent when the user changes the selected radio button, while the radiostatechange event is also sent when a script modifies the selection.
checkAdjacentElement - Archive of obsolete content
« xul reference home checkadjacentelement( dir ) return type: no return value deselects the currently selected radio button in the group and selects the one adjacent to it.
... if the argument dir is true, the next radio button is selected.
... if it is false, the previous radio button is selected.
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.
Extensions - Archive of obsolete content
an extension may modify the context menu to show additional items that either appear always, or appear only when certain content is selected.
... istextselected true if text is selected.
... (note: was removed from thunderbird 3 - see bug 463003 for a replacement) iscontentselected true if anything, text or otherwise, is selected.
PopupEvents - Archive of obsolete content
this may happen because the user selected an item from the menu, or it may be because the popup was closed by clicking elsewhere.
...the popuphiding event is fired regardless of how the popup was hidden, whether because the user selected an item from a menu, or if the user clicked outside the popup, or if the user pressed escape to cancel the menu.
...in this situation the command event has already been sent to the selected menuitem and the operation already carried out.
Stacks and Decks - Archive of obsolete content
the displayed page of the deck can be changed by setting an selectedindex attribute on the deck element.
... example 3 : source view <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> three pages exist here, the default being the third one.
... you can switch pages by using a script to modify the selectedindex attribute.
Styling a Tree - Archive of obsolete content
you can use these extra properties to set the appearance of containers or selected rows.
... selected this property is set for rows or cells that are currently selected.
... example style sheet treechildren::-moz-tree-row(selected) { background-color: #ffffaa; } treechildren::-moz-tree-row(odd) { background-color: #eeeeee; } treechildren::-moz-tree-row(odd, selected) { background-color: #ffffaa; } treechildren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } note that you can also style e.g.
Tabboxes - Archive of obsolete content
the currently selected tab element is given an additional selected attribute which is set to true.
... this alters the appearance of the currently selected tab to make it look selected.
... <vbox flex="1"> <tabbox selectedindex="1"> <tabs> <tab label="search"/> <tab label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search.
Using the standard theme - Archive of obsolete content
applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme.
...stom.css" type="text/css"?> <tt>@import</tt> chains first, import the global skin in your custom style sheet using the css <tt>@import</tt> rule: @import url("chrome://global/skin/"); you then have to associate your xul file with your custom style sheet only: <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="text/css"?> applying different custom style sheets depending on the selected theme mozilla is able to automatically pick your custom style sheet depending on the theme currently chosen by the user.
... that is, depending on the theme currently selected by the user, you can provide different custom style sheets for your extensions.
XUL controls - Archive of obsolete content
menulist reference related elements: menupopup menuitem <menulist editable="true"> an editable menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be entered.
... progressmeter reference <radio> a radio button is used when only one of a set of options may be selected at a time.
... radio reference related elements: radiogroup <richlistbox> the richlistbox displays a list of items where one or more may selected.
wizard - Archive of obsolete content
the wizard will rendered in a manner suitable for the user's selected theme and platform.
... pageindex type: integer this property returns the index of the currently selected page.
... you can change the selected page by modifying this property.
CSS - Archive of obsolete content
ArchiveWebCSS
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-con...
...typically it is a triangle that points downward.::-ms-fillthe ::-ms-fill css pseudo-element is a microsoft extension that represents a progress bar displayed by <progress>.::-ms-fill-lowerthe ::-ms-fill-lower css pseudo-element represents the lower portion of the track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
... a slider control is one possible representation of <input type="range">.::-ms-fill-upperthe ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
Correctly Using Titles With External Stylesheets - Archive of obsolete content
in a document that refers to alternate stylesheets, the preferred stylesheet will be used so long as none of the alternate stylesheets are selected by the user.
...if any alternate stylesheet is selected, then the preferred stylesheet is dropped in favor of the user-selected alternate stylesheet.
... this is different than persistent stylesheets, which are always applied to a document, whether an alternate stylesheet has been selected or not.
CSS selectors - Learn web development
it is a pattern of elements and other terms that tell the browser which html elements should be selected to have the css property values inside the rule applied to them.
... the element or elements which are selected by the selector are referred to as the subject of the selector.
...for example, ::first-line always selects the first line of text inside an element (a <p> in the below case), acting as if a <span> was wrapped around the first formatted line and then selected.
Fundamental text and font styling - Learn web development
but it was a rare occasion such as this that he did.</p> you can find the finished example on github (see also the source code.) color the color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property).
...but it was a rare occasion such as this that he did.</p> font families to set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements.
...if it is, it applies that font to the selected elements.
Example 5 - Learn web development
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 { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------...
...ption'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // ...
...window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); sele...
Sending forms through JavaScript - Learn web development
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.
... file.dom.addeventlistener( "change", function () { if( reader.readystate === filereader.loading ) { reader.abort(); } reader.readasbinarystring( file.dom.files[0] ); } ); // senddata is our main function function senddata() { // if there is a selected file, wait it is read // if there is not, delay the execution of the function if( !file.binary && file.dom.files.length > 0 ) { settimeout( senddata, 10 ); return; } // to construct our multipart form data request, // we need an xmlhttprequest instance const xhr = new xmlhttprequest(); // we need a separator to define each part of the request const bo...
... let data = ""; // so, if the user has selected a file if ( file.dom.files[0] ) { // start a new part in our body's request data += "--" + boundary + "\r\n"; // describe it as form data data += 'content-disposition: form-data; ' // define the name of the form data + 'name="' + file.dom.name + '"; ' // provide the real name of the file + 'filename="' + file.dom.files[0].name + '"\r\n'; // and the mime type of the file data += 'content-type: ' + file.dom.files[0].type + '\r\n'; // there's a blank line between the metadata and the data data += '\r\n'; // append the binary data to our body's request data += file...
Gecko info for Windows accessibility vendors
sets state_selected in spreadsheets when a cell has selection.
... n/a role_list xul: <listbox> html: <select size=""> where size > 1 -- state_readonly is off html: <ol> or <ul> -- state_readonly is on dhtml: role="wairole:list" role_listitem html: <li>, <option> or <optgroup> dhtml: role="wairole:listitem" xul: <listitem> sets state_selected if the current listitem is selected.
... sets state_selected if the current tree item is selected.
PopupNotifications.jsm
if null, the currently selected <xul:browser>'s notifications will be searched.
...this must not be null; you can, however, simply specify gbrowser.selectedbrowser to associate it with the current tab.
... callback a javascript function to be invoked when the action is selected by the user.
browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base.
... type:boolean default value:true exists by default: no application support:firefox 11.0 status: active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker.
... false the last used directory for any download (stored in browser.download.lastdir) will be the preselected directory in the file picker.
Preference reference
changes require an application restart.browser.download.lastdir.savepersitebrowser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base.
...ing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe prefer...
...ence browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
Gecko events
is supported: no event_menu_start a menu item on the menu bar has been selected.
...event_hyperlink_selected_link_changed the hyperlink selected state changed from selected to unselected or from unselected to selected.
...event_hypertext_link_selected one of the links associated with the hypertext object has been selected.
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_statusbar represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object.
...static text cannot be modified or selected.
Places utilities for JavaScript
if set, the folder picker would be hidden unless ashowpicker is set to true, in which case the dialog only uses the folder identifier from the insertion point as the initially selected item in the folder picker.
...if set, the folder picker would be hidden unless ashowpicker is set to true, in which case the dialog only uses the folder identifier from the insertion point as the initially selected item in the folder picker.
...if set, the folder picker would be hidden unless ashowpicker is set to true, in which case the dialog only uses the folder identifier from the insertion point as the initially selected item in the folder picker.
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_statusbar 23 represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object.
...static text cannot be modified or selected.
nsIAccessibleTableCell
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview boolean isselected(); attributes attribute type description columnextent long return the number of columns occupied by this cell.
... methods isselected() boolean isselected(); parameters none.
... return value a boolean value indicating whether this cell is selected.
nsIEditorSpellCheck
saves the currently selected dictionary as the default.
...since spelling dictionaries can now be selected per-site, this method is no longer needed.
...it will also save the current selected language as the default for future use.
nsIMsgDBHdr
for instance, msghdrforcurrentmessage() will return the currently selected message's header.
...for the currently selected message, thunderbird provides a utility function: setmsghdrpropertyandreload(aproperty, avalue); which duplicates this functionality without requiring you to grab the current header.
...thunderbird provides a utility function which performs this for the currently selected message: markcurrentmessageasread().
nsIUpdate
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface that describes an object representing an available update to the current application - this update may have several available patches from which one must be selected to download and install, for example we might select a binary difference patch first and attempt to apply that, then if the application process fails fall back to downloading a complete file-replace patch.
... selectedpatch nsiupdatepatch the currently selected patch for this update.
... state astring the state of the selected patch: "downloading" the update is being downloaded.
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 click on the item, the display shifts to show details about that element: this view shows information about the calculations for the size of the selected flex item: a diagram visualizing the sizing of the flex item content size - the size of the component without any restraints imposed on it by its parent flexibility - how much a flex item grew or shrunk based on its flex-grow value when there is extra free space or its flex-shrink value when there is not enough space minimum size (only appears when an item is clamped to its minimum size) - ...
...the minimum content size of a flex item when there is no more free space in the flex container final size - the size of the flex item after all sizing constraints imposed on it have been applied (based on the values of flex-grow, flex-shrink and flex-basis) at the top of the section is a drop-down list of all the items in the selected flexbox container: you can use this drop-down to select any of the other flex items in the flex container.
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.
...click the element to select it: starting in firefox 52, if you shift + click the element, then it is selected but the picker stays active.
Call Tree - Firefox Developer Tools
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.
... self cost is calculated from self time as a percentage of the total number of samples in the selected portion of the recording.
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.
UI Tour - Firefox Developer Tools
at any given time, one recording is selected, and that recording is displayed in the rest of the tool.
...select a slice, and the main view will be updated to contain just the part selected.
... in the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail: details pane the details pane shows whichever tool is currently selected.
Style Editor - Firefox Developer Tools
from firefox 40 onwards, the style sheet pane also includes a context menu that lets you open the selected style sheet in a new tab.
...this is where the source for the selected style sheet is available for you to read and edit.
...if you do this, the selected bindings will be used for all the developer tools that use the source editor.
Web Console remoting - Firefox Developer Tools
protocol packets look as follows: { "to": "root", "type": "listtabs" } { "from": "root", "consoleactor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ...
... javascript evaluation the evaluatejs request and response packets the web console client provides the evaluatejs(requestid, string, onresponse) method which sends the following packet: { "to": "conn0.console9", "type": "evaluatejs", "text": "document", "bindobjectactor": null, "frameactor": null, "url": null, "selectednodeactor": null, } the bindobjectactor property is an optional objectactor id that points to a debugger.object.
... the selectednodeactor property is an optional nodeactor id, which is used to indicate which node is currently selected in the inspector, if any.
DisplayMediaStreamConstraints.video - Web APIs
displaysurface a constraindomstring which specifies the types of display surface that may be selected by the user.
... browser the stream contains the contents of a single browser tab selected by the user.
... window the stream contains a single window selected by the user for sharing.
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.
...to use a selection object as a string, call its tostring() method directly: var selectedtext = selobj.tostring(); selobj is a selection object.
... selectedtext is a string (selected text).
File.webkitRelativePath - Web APIs
the file.webkitrelativepath is a read-only property that contains a usvstring which specifies the file's path relative to the directory selected by the user in an <input> element with its webkitdirectory attribute set.
... syntax relativepath = file.webkitrelativepath value a usvstring containing the path of the file relative to the ancestor directory the user selected.
...when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed.
File and Directory Entries API - Web APIs
only for accessing files which are selected by the user in a file <input> element (see htmlinputelement as well) or when a file or directory is provided to the web site or app using drag and drop.
... the htmlinputelement.webkitentries property lets you access the filesystemfileentry objects for the currently selected files, but only if they are dragged-and-dropped onto the file chooser (bug 1326031).
... if htmlinputelement.webkitdirectory is true, the <input> element is instead a directory picker, and you get filesystemdirectoryentry objects for each selected directory.
HTMLInputElement.setSelectionRange() - Web APIs
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.
... selectionstart the 0-based index of the first selected character.
... selectionend the 0-based index of the character after the last selected character.
HTMLSelectElement.type - Web APIs
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.
... example switch (select.type) { case 'select-multiple': // multiple values may be selected break; case 'select-one': // only one value may be selected break; default: // non-standard value (or this isn't a select element) } specifications specification status comment html living standardthe definition of 'htmlselectelement' in that specification.
Drag Operations - Web APIs
if this attribute were omitted or set to "false", the element would not be dragged, and instead the text would be selected.
... note: when an element is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse.
...for example, when dragging the selected text within a textbox, the data associated with the drag data item is the text itself.
MediaTrackConstraints - Web APIs
displaysurface a constraindomstring which specifies the types of display surface that may be selected by the user.
... browser the stream contains the contents of a single browser tab selected by the user.
... window the stream contains a single window selected by the user for sharing.
MediaTrackSettings.displaySurface - Web APIs
the windows are aggragated into a single video track, with any empty space filled with a backdrop; that backdrop is selected by the user agent.
... browser the stream's video track presents the entire contents of a single browser tab which the user selected during the getdisplaymedia() call.
... window the stream's video track presents the contents of a single window selected by the user.
PaymentMethodChangeEvent.methodName - Web APIs
the read-only methodname property of the paymentmethodchangeevent interface is a string which uniquely identifies the payment handler currently selected by the user.
... syntax var methodname = paymentmethodchangeevent.methodname; value a domstring which uniquely identifies the currently-selected payment handler.
... example this example uses the paymentmethodchange event to watch for changes to the payment method selected for apple pay, in order to compute a discount if the user chooses to use a visa card as their payment method.
PaymentRequest: shippingoptionchange event - Web APIs
the string identifying the currently-selected shipping option can be found in the shippingoption property.
...the code recalculates the total charge for the payment based on the selected shipping option.
... paymentrequest.addeventlistener("shippingoptionchange", event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }, false); after caling a custom function, calculatenewtotal(), to compute the updated total based on the newly-selected shipping option as specified by the shippingoption.
PaymentResponse.shippingOption - Web APIs
the shippingoption read-only property of the paymentrequest interface returns the id attribute of the shipping option selected by the user.
...}).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); function updatedetails(details, shippingoption, resolve, reject) { var selectedshippingoption; var othershippingoption; if (shippingoption === 'standard') { selectedshippingoption = details.shippingoptions[0]; othershippingoption = details.shippingoptions[1]; details.total.amount.value = '55.00'; } else if (shippingoption === 'express') { selectedshippingoption = details.shippingoptions[1]; othershippingoption = details.shippingoptions[0]; detai...
...ls.total.amount.value = '67.00'; } else { reject('unknown shipping option \'' + shippingoption + '\''); return; } selectedshippingoption.selected = true; othershippingoption.selected = false; details.displayitems.splice(2, 1, selectedshippingoption); resolve(details); } specifications specification status comment payment request api candidate recommendation initial definition.
RTCIceCandidatePair - Web APIs
it is used as the return value from rtcicetransport.getselectedcandidatepair() to identify the currently-selected candidate pair identified by the ice agent.
... example in this example, an event handler for selectedcandidatepairchange is set up to update an on-screen display showing the protocol used by the currently selected candidate pair.
... var icetransport = pc.getsenders()[0].transport.icetransport; var localproto = document.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidatepair' in that specification.
RTCIceTransport.state - Web APIs
"connected" a viable candidate pair has been found and selected, and the rtcicetransport has connected the two peers together using that pair.
... the transport may revert from the "connected" state to the "checking" state if either peer decides to cancel consent to use the selected candidate pair, and may revert to "disconnected" if there are no candidates left to check but one or both clients are still gathering candidates.
...in addition, all candidate pairs have been considered and a pair has been selected for use.
RTCIceTransportState - Web APIs
"connected" a viable candidate pair has been found and selected, and the rtcicetransport has connected the two peers together using that pair.
... the transport may revert from the "connected" state to the "checking" state if either peer decides to cancel consent to use the selected candidate pair, and may revert to "disconnected" if there are no candidates left to check but one or both clients are still gathering candidates.
...in addition, all candidate pairs have been considered and a pair has been selected for use.
Range.extractContents() - Web APIs
html id attributes are also cloned, which can lead to an invalid document if a partially-selected node is extracted and appended to the document.
... partially selected nodes are cloned to include the parent tags necessary to make the document fragment valid.
... html <p id="list1">123456</p> <button id="swap">swap selected item(s)</button> <p id="list2">abcdef</p> css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.getelementbyid('swap'); button.addeventlistener(...
Selection.type - Web APIs
WebAPISelectiontype
the caret is placed on some text, but no range has been selected).
... range: a range has been selected.
...console.log(selection.type) will return caret or range depending on whether the caret is placed at a single point in the text, or a range has been selected.
USBDevice - Web APIs
WebAPIUSBDevice
properties usbdevice.configuration read only a usbconfiguration object for the currently selected interface for a paired usb device.
... usbdevice.selectalternateinterface() returns a promise that resolves when the specified alternative endpoint is selected.
... usbdevice.selectconfiguration() returns a promise that resolves when the specified configuration is selected.
VideoTrack - Web APIs
the most common use for accessing a videotrack object is to toggle its selected property in order to make it the active video track for its <video> element.
... properties selected a boolean value which controls whether or not the video track is active.
... for (var i = 0; i < tracks.length; i++) { if (tracks[i].language === userlanguage) { tracks[i].selected = true; break; } }); the language is in standard (rfc 5646) format.
VideoTrackList: change event - Web APIs
the change event is fired when a video track is made active or inactive, for example by changing the track's selected property.
... bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); ...
...}; // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); specifications specification status html living standardthe definition of 'change' in that specification.
Example and tutorial: Simple synth keyboard - Web APIs
<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 { curso...
... function playtone(freq) { let osc = audiocontext.createoscillator(); osc.connect(mastergainnode); let type = wavepicker.options[wavepicker.selectedindex].value; if (type == "custom") { osc.setperiodicwave(customwaveform); } else { osc.type = type; } osc.frequency.value = freq; osc.start(); return osc; } playtone() begins by creating a new oscillatornode by calling the audiocontext.createoscillator() method.
...if any other waveform type is selected in the wave picker, we simply set the oscillator's type to the value of the picker; that value will be one of sine, square, triangle, and sawtooth.
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" ...
...bscribe, setpickermode : setpickermode }; })(); /** * ui-dropdown select */ var dropdownmanager = (function dropdownmanager() { 'use strict'; var subscribers = {}; var dropdowns = []; var active = null; var visbility = ["hidden", "visible"]; var dropdown = function dropdown(node) { var topic = node.getattribute('data-topic'); var label = node.getattribute('data-label'); var selected = node.getattribute('data-selected') | 0; var select = document.createelement('div'); var list = document.createelement('div'); var uval = 0; var option = null; var option_value = null; list.classname = 'ui-dropdown-list'; select.classname = 'ui-dropdown-select'; while (node.firstelementchild !== null) { option = node.firstelementchild; option_value = option.getattribute(...
...; node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; dropdown.prototype.toggle = function toggle(state) { if (typeof(state) === 'boolean') this.state = state === false ?
<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.
cursor - CSS: Cascading Style Sheets
WebCSScursor
selection cell the table cell or set of cells can be selected.
... text the text can be selected.
... vertical-text the vertical text can be selected.
place-content - CSS: Cascading Style Sheets
examples placing content in a flex container html <div id="container"> <div class="small">lorem</div> <div class="small">lorem<br/>ipsum</div> <div class="large">lorem</div> <div class="large">lorem<br/>impsum</div> <div class="large"></div> <div class="large"></div> </div> <code>writing-mode:</code><select id="writingmode"> <option value="horizontal-tb" selected>horizontal-tb</option> <option value="vertical-rl">vertical-rl</option> <option value="vertical-lr">vertical-lr</option> <option value="sideways-rl">sideways-rl</option> <option value="sideways-lr">sideways-lr</option> </select><code>;</code><br/> <code>direction:</code><select id="direction"> <option value="ltr" selected>ltr</option> <option value="rtl">rtl</option> </select><code>;<...
...<code>place-content:</code><select id="aligncontentalignment"> <option value="normal">normal</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="baseline">baseline</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly" selected>space-evenly</option> <option value="stretch">stretch</option> <option value="center">center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select> <select id="justifycontentalignmen...
...t"> <option value="normal">normal</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> <option value="center" selected>center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="left">left</option> <option value="right">right</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select><code>;</code> var update = function () { document.getelementbyid("container").style.placecontent = document.getelementbyid("aligncontentalignment").value + " " + document.g...
user-select - CSS: Cascading Style Sheets
ore and ::after pseudo elements, the used value is none if the element is an editable element, the used value is contain otherwise, if the used value of user-select on the parent of this element is all, the used value is all otherwise, if the used value of user-select on the parent of this element is none, the used value is none otherwise, the used value is text text the text can be selected by the user.
... all the content of the element shall be selected atomically: if a selection would contain part of the element, then the selection must contain the entire element including all its descendants.
... if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
Rich-Text Editing in Mozilla - Developer guides
dding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 &lt;h1&gt;</option> <option value="h2">title 2 &lt;h2&gt;</option> <option value="h3">title 3 &lt;h3&gt;</option> <option value="h4">title 4 &lt;h4&gt;</option> <option value="h5">title 5 &lt;h5&gt;</option> <option value="h6">subtitle &lt;h6&gt;</option> <option value="p">paragraph &lt;p&gt;<...
.../option> <option value="pre">preformatted &lt;pre&gt;</option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.select...
...edindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5x...
Making content editable - Developer guides
dding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 &lt;h1&gt;</option> <option value="h2">title 2 &lt;h2&gt;</option> <option value="h3">title 3 &lt;h3&gt;</option> <option value="h4">title 4 &lt;h4&gt;</option> <option value="h5">title 5 &lt;h5&gt;</option> <option value="h6">subtitle &lt;h6&gt;</option> <option value="p">paragraph &lt;p&gt;<...
.../option> <option value="pre">preformatted &lt;pre&gt;</option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.select...
...edindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5x...
<option>: The HTML Option element - HTML: Hypertext Markup Language
WebHTMLElementoption
selected if present, this boolean attribute indicates that the option is initially selected.
... if the <option> element is the descendant of a <select> element whose multiple attribute is not set, only one single <option> of this <select> element may have the selected attribute.
... value the content of this attribute represents the value to be submitted with the form, should this option be selected.
Digest - HTTP
WebHTTPHeadersDigest
in rfc 7231 terms this is the selected representation of a resource.
... the selected representation depends on the content-type and content-encoding header values: so a single resource may have multiple different digest values.
... examples digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe=,unixsum=30637 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
Protocol upgrade mechanism - HTTP
these should be selected from the iana websocket extension name registry.
...the first one that is supported by the server will be selected and returned by the server in a sec-websocket-protocol header included in the response.
...the subprotocols may be selected from the iana websocket subprotocol name registry or may be a custom name jointly understood by the client and the server.
Loops and iteration - JavaScript
example in the example below, the function contains a for statement that counts the number of selected options in a scrolling list (a <select> element that allows multiple selections).
... <form name="selectform"> <p> <label for="musictypes">choose some music types, then click the button below:</label> <select id="musictypes" name="musictypes" multiple="multiple"> <option selected="selected">r&b</option> <option>jazz</option> <option>blues</option> <option>new age</option> <option>classical</option> <option>opera</option> </select> </p> <p><input id="btn" type="button" value="how many are selected?" /></p> </form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.length; i++...
...) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.addeventlistener('click', function() { alert('number of options selected: ' + howmany(document.selectform.musictypes)); }); </script> do...while statement the do...while statement repeats until a specified condition evaluates to false.
simple-prefs - Archive of obsolete content
{ "type": "color", "name": "highlightcolor", "value": "#6a5acd", "title": "highlight color" } file displayed as a "browse" button that opens a file picker and stores the full path and name of the file selected.
... { "type": "file", "name": "myfile", "title": "select a file" } directory displayed as a "browse" button that opens a directory picker and stores the full path and name of the directory selected.
dev/panel - Archive of obsolete content
to use volcan.js, you can just include it from your panel's html like this: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id = "content"></div> </body> <script src="./my-panel.js"></script> </html> here's a script that uses volcan.js to get the selected tab and display its url: // my-panel.js var content = document.getelementbyid("content"); window.addeventlistener("message", function(event) { var debuggee = event.ports[0]; volcan.connect(debuggee).
... then(writetablist); }); function listtabs(root) { return root.listtabs(); } function writetablist(tablist) { content.textcontent = tablist.tabs[tablist.selected].url; } we don't have detailed documentation for volcan.js, but it's coming soon.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
click the spots numbered 1 and 2 in figure 5, in that order; the menu element (3) will then be selected.
...lines 1–3 define the icon image to use with full-sized icons, and lines 4–6 define the icon image to use when small toolbar icons have been selected.
Creating reusable content with CSS and XBL - Archive of obsolete content
you can use css to provide content for selected elements, but the content is limited to text and images, and its positioning is limited to before or after the selected element.
...you can use xbl to link selected elements to their own: stylesheets content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse.
slideBar - Archive of obsolete content
when a slidebar feature is selected its contents will be revealed from behind the current webpage.
... iconhref oficon to show in the slidebaruri htmlhtml content for the featurehtml/xml urlurl to load content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.
Tamarin build documentation - Archive of obsolete content
note that, whereas before when you selected the aggregate target you got a 'shell' 32-bit executable and a 'shell64' 64-bit executable in the same folder, now because of the fix to bug 478714 you will get an 'avm' executable in two separate folders, /debug and /debug64 respectively.
...what we want is to have the indexer track the currently selected build config (so the correct conditional compiles are highlighted in the editor).
Venkman Introduction - Archive of obsolete content
while in pretty print mode, the contents of the source view will contain the decompiled source text for the selected function.
...this will cause the source of function to be displayed in the source code view, the local variables view will change to display variables local to the selected stack frame, and script evaluated in the interactive session view will be relative to the selected frame.
Install Wizards (aka: Stub Installers) - Archive of obsolete content
subsequently, when users click the "install" button the install wizard downloads and installs only the selected software packages.
...(the stub installer accomplishes this by downloading the xpinstall engine along with the selected software packages.
confirm - Archive of obsolete content
this string is typically in the form of a prompt for the user (e.g., "are you sure you want to delete the selected file(s)?").
...alue: false }; var button = confirm("are you sure you want to install foobar 0.1?", "confirm", std_yes_no_buttons, null, null, null, "install fluxcompensator 0.4 as well", check); returns the return value is an integer indicating which button the user selected: value button 0 'cancel' or button 1.
color - Archive of obsolete content
« xul reference home color type: color string the currently selected color.
...you can assign a string of the form #rrggbb to this property to change the selected color.
unread - Archive of obsolete content
« xul reference home unread type: boolean this attribute is set to true if the tab is unread; that is, either it has not yet been selected during the current session, or has changed since the last time it was selected.
... see also selected ...
Introduction to XUL - Archive of obsolete content
the menu bar has a menu, file, with a single menu item that dumps "hello world!" to the debug console when selected.
...this handler fires when the menu is selected by the user, and it dumps the text "hello world!" to the debug console.
insertItemAt - Archive of obsolete content
note: you cannot insert an item to an index that does not exist, eg: trying to insert an item at the end with element.getrowcount() + 1 example <!-- this example inserts at the selected item or appends, then selects the newly created item --> <script language="javascript"> function insertitemtolist(){ var mylistbox = document.getelementbyid('mylistbox'); // create a date to get some labels and values var somedate = new date(); if(mylistbox.selectedindex == -1){ // no item was selected in list so append to the end mylistbox.appenditem( somedate.
...tolocaletimestring(), somedate.gettime() ); var newindex = mylistbox.getrowcount() -1 }else{ // item was selected so insert at the selected item var newindex = mylistbox.selectedindex; mylistbox.insertitemat(newindex, somedate.tolocaletimestring(), somedate.gettime()); } // select the newly created item mylistbox.selectedindex = newindex; } </script> <button label="insert item at selected" oncommand="insertitemtolist()"/> <listbox id="mylistbox"> <listitem label="foo"/> </listbox> see also appenditem() removeitemat() ...
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.
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstvis...
...iblerow getindexofitem getitematindex getnextitem getnotificationbox getnotificationwithvalue getnumberofvisiblerows getpagebyid getpreviousitem getresultat getresultcount getresultvalueat getrowcount getsearchat getselecteditem getsession getsessionbyname getsessionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement r...
MenuButtons - Archive of obsolete content
presumably, when one is selected, the application view would be changed accordingly.
... <button type="menu" label="view"> <menupopup> <menuitem label="icons" type="radio" name="view"/> <menuitem label="list" type="radio" name="view"/> <menuitem label="details" type="radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected.
color - Archive of obsolete content
ArchiveMozillaXULPropertycolor
« xul reference color type: color string the currently selected color.
...you can assign a string of the form #rrggbb to this property to change the selected color.
date - Archive of obsolete content
ArchiveMozillaXULPropertydate
« xul reference date type: integer the currently selected date of the month from 1 to 31.
... set this property to change the selected date.
datepicker.value - Archive of obsolete content
« xul reference value type: string the currently selected date in the form yyyy-mm-dd.
...set this property to change the selected date.
hour - Archive of obsolete content
ArchiveMozillaXULPropertyhour
« xul reference hour type: integer the currently selected hour from 0 to 23.
... set this property to change the selected hour.
minute - Archive of obsolete content
« xul reference minute type: integer the currently selected minute from 0 to 59.
... set this property to change the selected minute.
month - Archive of obsolete content
ArchiveMozillaXULPropertymonth
« xul reference month type: integer the currently selected month from 0 to 11.
... set this property to change the selected month.
pageIndex - Archive of obsolete content
« xul reference pageindex type: integer this property returns the index of the currently selected page.
... you can change the selected page by modifying this property.
second - Archive of obsolete content
« xul reference second type: integer the currently selected second from 0 to 59.
... set this property to change the selected second.
selectionEnd - Archive of obsolete content
« xul reference selectionend type: integer get or set the end of the selected portion of the field's text.
...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.
selectionStart - Archive of obsolete content
« xul reference selectionstart type: integer get or set the beginning of the selected portion of the field's text.
...the value specifies the index of the first selected character.
year - Archive of obsolete content
ArchiveMozillaXULPropertyyear
« xul reference year type: integer the currently selected year from 1 to 9999.
... set this property to change the selected year.
Property - Archive of obsolete content
rmanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pag...
...ceholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs ...
More Menu Features - Archive of obsolete content
an example might be a font menu where only one font can be selected at a time.
... when another item is selected, the previously selected item is unchecked.
Updating Commands - Archive of obsolete content
select: occurs when the selected text changes.
...<commandset id="globaleditmenuitems" commandupdater="true" events="focus" oncommandupdate="goupdateglobaleditmenuitems()"/> <commandset id="selecteditmenuitems" commandupdater="true" events="select" oncommandupdate="goupdateselecteditmenuitems()"/> <commandset id="undoeditmenuitems" commandupdater="true" events="undo" oncommandupdate="goupdateundoeditmenuitems()"/> <commandset id="clipboardeditmenuitems" commandupdater="true" events="clipboard" ...
XUL Changes for Firefox 1.5 - Archive of obsolete content
the <richlistbox> supports much of the same api as the <listbox> and single items, created with the <richlistitem> element may be selected.
... <tabbox> the <tabbox> element now supports a selectedindex attribute to specify the tab to be selected by default.
XUL Event Propagation - Archive of obsolete content
in the example above, when the menuitem raises the "command" event, indicating that it has been selected, the menupopup, the menu itself, the parent box, or the root window element itself can all take advantage of this.
...for example, if an event handler at the menu is handling an event raised by one of the menu items, then the menu should be able to identify the raising element and take the appropriate action, as in the following example, where a javascript function determines which menuitem was selected and responds appropriately: <script> function docmd(el) { v = el.getattribute("value"); if (v == "new") alert("new clicked"); else if (v == "open") alert("open clicked"); else alert("close clicked"); } </script> ...
commandset - Archive of obsolete content
for example, since the cut command is only valid when something is selected, a command updater might be used when the select event occurs.
... select: occurs when the selected text changed.
iframe - Archive of obsolete content
enulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myframe" flex="1"/> <script> function donav(obj) { var url = obj.selecteditem.value; // note the firstchild is the menupopup element document.getelementbyid('myframe').setattribute('src', url); } </script> attributes showcaret type: boolean whether or not to cause a typing caret to be visible in the content area.
...this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment.
menu - Archive of obsolete content
ArchiveMozillaXULmenu
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopu...
... selected type: boolean this property's value is true if this element is selected, or false if it is not.
Mozilla XForms User Interface - Archive of obsolete content
submit invokes the submission of the selected instance data to its target destination, which could be local or remote (see the spec).
...combined together, these outputs would echo the value of every node in the selected nodeset.
Building up a basic demo with PlayCanvas editor - Game development
make sure the new material in the assets panel is selected, to bring up the entity inspector.
...here, follow these steps: be sure you have the box selected on the scene.
Cascade and inheritance - Learn web development
inherit sets the property value applied to a selected element to be the same as that of its parent element.
... initial sets the property value applied to a selected element to the initial value of that property.
Debugging CSS - Learn web development
with box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border.
... the layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out.
Combinators - Learn web development
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.
...to select all <img> elements that come anywhere after <p> elements, we'd do this: p ~ img in the example below we are selecting all <p> elements that come after the <h1>, and even though there is a <div> in the document as well, the <p> that comes after it is selected.
Pseudo-classes and pseudo-elements - Learn web development
:checked matches a radio button or checkbox in the selected state.
... ::selection matches the portion of the document that has been selected.
Example 4 - Learn web development
tion) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.clas...
...stener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, ...
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.
...the value of the <select> element at any time is the same as the text inside the selected <option> (unless you specify a different value in a value attribute) — so for example "verse 1".
React interactivity: Editing, filtering, conditional rendering - Learn web development
when you press a filter button, you should see its text take on a new outline — this tells you it has been selected.
...a task should only render if it is included in the results of applying the selected filter.
Componentizing our Svelte app - Learn web development
you'll notice that when you click on the filter buttons, they are selected and the style updates appropriately.
...whenever the user clicks on any filter button, the child will call the onclick handler, passing the selected filter as a parameter, back up to its parent.
Getting started with Vue - Learn web development
make sure that "babel" and "linter / formatter" are selected.
...once they are selected, press enter to proceed.
Mozilla's Section 508 Compliance
(g) applications shall not override user selected contrast and color selections and other individual display attributes.
...when the windows "high contrast theme" is used classic, and thus the system look and feel, is automatically selected.
Mozilla’s UAAG evaluation report
it does, however, support the look and feel of widgets on various operating systems, when the classic theme is selected (on by default).
...(p1) vg provides a focus outline box highlights follow graphical rendering conventions for windows does not highlight selected images we do not have the ability to show a border around the text selection we have the following focus appearance prefs that are not exposed in the ui, but can be manually inserted in the user's prefs.js file: setboolpref("browser.display.use_focus_colors", usefocuscolors); /* true or false */ setcharpref("browser.display.focus_background_color", colorstring); /* for example #ff...
Debugging on Mac OS X
these directions were written using xcode 6.3.1 complete all the steps above under "creating the project" from the "product" menu, ensure the scheme you created is selected under "scheme", then choose "scheme > edit scheme" in the resulting popup, click "duplicate scheme" give the resulting scheme a more descriptive name than "copy of scheme" select "run" on the left-hand side of the settings window, then select the "info" tab.
... now you're ready to start debugging: from the "product" menu, ensure the scheme you created above is selected under "scheme" click the "run" button.
Eclipse CDT Manual Setup
if you will not be using eclipse for debugging, select "c/c++ build > settings" on the left, select the "binary parsers" tab, and make sure that all the parsers are deselected.
...make sure that "cdt gcc build output parser" is selected, and that "cdt managed build settings entries" is not selected.
Multiple Firefox profiles
options work offline choosing this option loads the selected profile, and starts firefox offline.
...select this option to allow firefox to load the selected profile, without prompting at startup.
Frame script loading and lifetime
this line of code loads a frame script into the currently selected tab.
... the script just writes "foo" to the command line: // chrome script var mm = gbrowser.selectedbrowser.messagemanager; mm.loadframescript('data:,dump("foo\\n")', true); loadframescript() takes two mandatory parameters: a url that points to the frame script you want to load a boolean flag, allowdelayedload note: if the message manager is a global frame message manager or a window message manager, loadframescript() may load the script multiple times, once in each applicable frame.
mozbrowsercontextmenu
contextmenuitemselected an anonymous function that fires when a menu item is selected.
...this is passed to the contextmenuitemselected() function, to indicate which item has been selected.
Browser API
mozbrowsercaretstatechanged sent when the text selected inside the browser <iframe> content changes.
... mozbrowserselectionstatechanged sent when the text selected inside the browser <iframe> content changes.
How to implement a custom autocomplete search component
* * @return {number} the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure) * result_nomatch (no matches found) * result_success (matches found) */ get searchresult() { return this._searchresult; }, /** * @return {number} the index of the default item that should be entered if * none is selected */ get defaultindex() { return this._defaultindex; }, /** * @return {string} description of the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * @return {number} the number of matches */ get matchcount() { return this._results.length; }, /** * @return {string} the value of the result at the given index...
...rchstring; }, /** * the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure) * result_nomatch (no matches found) * result_success (matches found) */ get searchresult() { return this._searchresult; }, /** * index of the default item that should be entered if none is selected */ get defaultindex() { return this._defaultindex; }, /** * a string describing the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * the number of matches */ get matchcount() { return this._results.length; }, /** * get the value of the result at the given index */ getvalueat: function(index) { ...
CustomizableUI.jsm
ithin_customizableui_and_dom', defaultarea: customizableui.area_navbar, label: 'my widget', // type: 'button', //we don't need to type this, the default type is button tooltiptext: 'this is my widget created with cui.jsm', oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the html window of the currently selected tab thiswindowsselectedtabswindow.alert('alert from html window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); giving the button an icon non-style sheet method the style sheet method (below) is one way to add an icon.
...ithin_customizableui_and_dom', defaultarea: customizableui.area_navbar, label: 'my widget', // type: 'button', //we don't need to type this, the default type is button tooltiptext: 'this is my widget created with cui.jsm', oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the html window of the currently selected tab thiswindowsselectedtabswindow.alert('alert from html window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); //end - use customizableui.jsm to create the widget //start - use style sheet service to style our widget to give i...
NSS 3.37 release notes
this alternative implementation is selected at build time by defining the seed_only_dev_urandom symbol.
... (the classic implementation for rng seeding on the linux/unix platform, which may use additional sources for the default seeding, is still available and will be used if seed_only_dev_urandom is undefined.) with nss 3.37, this alternative implementation for linux/unix can be selected in "make" builds by defining the environment variable nss_seed_only_dev_urandom.
Rhino Debugger
the selected file will be compiled and displayed in a new window.
... if the selected line contains executable code a red dot will appear next to the line number and a breakpoint will be set at that location.
Hacking Tips
using ionmonkey spew (js shell) ionmonkey spew is extremely verbose (not as much as the infer spew), but you can filter it to focus on the list of compiled scripts or channels, ionmonkey spew channels can be selected with the ionflags environment variable, and compilation spew can be filtered with ionfilter.
...it is a watchpoint on // the whole word, which will trigger whenever the word changes and the // selected bit is set after the change.
Building the WebLock UI
grouping radio elements together creates the toggling ui by requiring that one or another of the elements be selected, but not both.
... the xul that defines the radiogroup in the web lock manager dialog is this: <radiogroup> <radio label="lock"/> <radio label="unlock" selected="true"/> </radiogroup> since the weblock component always starts up in the unlocked position, you can add the selected="true" attribute and value on the unlock radio button and reset it dynamically as the user takes action.
Components.utils.Sandbox
example of obtaining content principal from the window: var principal = gbrowser.selectedtab.linkedbrowser.contentprincipal; var sandbox = components.utils.sandbox(principal); expanded principal an expanded principal is specified as an array of the principals it subsumes.
...for example the content principal above can be made expanded/extended like so: var principal = [gbrowser.selectedtab.linkedbrowser.contentprincipal]; // this is now an expanded (aka extended) principal var sandbox = components.utils.sandbox(principal); null principal you can create a null principal using code like: cc["@mozilla.org/nullprincipal;1"].createinstance(ci.nsiprincipal); from firefox 37 onwards, you can also specify the null principal by simply passing null as the principal argument.
Observer Notifications
profile-do-change this is fired after the profile has been selected.
... lightweight-theme-styling-update json sent when the current theme being used is changed; this is sent even when the user is previewing a theme, not just when the theme is actually selected.
IAccessibleText
startoffset 0 based offset of first selected character.
... endoffset 0 based offset of one past the last selected character.
nsIAccessible
to select an accessible you can use nsiaccessible.setselected(), nsiaccessible.takeselection() and nsiaccessible.extendselection().
... setselected this method adds or remove this accessible to the current selection.
nsIAccessibleHyperText
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview nsiaccessiblehyperlink getlink(in long linkindex); long getlinkindex(in long charindex); long getselectedlinkindex(); obsolete since gecko 1.9 attributes attribute type description linkcount long the number of links contained within this hypertext object.
... getselectedlinkindex() obsolete since gecko 1.9 (firefox 3) long getselectedlinkindex(); parameters none.
nsIAccessibleStates
state_selected 0x00000002 the object is selected, that is it 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.
... state_selectable 0x00200000 the object can be selected.
nsIAuthPrompt
one of the save_password_* constants pwd the password entered by the user if ok was selected.
... pwd the password entered by the user if ok was selected.
nsIProtocolProxyFilter
netwerk/base/public/nsiprotocolproxyfilter.idlscriptable this interface is used to apply filters to the proxies selected for a given uri.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) this interface is used to apply filters to the proxies selected for a given uri.
nsIUpdatePatch
selected boolean true if this patch is currently selected as the patch to be downloaded and installed for this update transaction.
... false if another update is selected.
nsIZipWriter
it will then recursively go through all contents in the folder selected and add them into this zip file.
...'resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.modegetfolder); fp.appendfilters(ci.nsifilepicker.filterall | ci.nsifilepicker.filtertext); var rv = fp.show(); if (rv == ci.nsifilepicker.returnok) { var dir = fp.file; //dir must exist, as the user selected it.
Add to iPhoto
since a lot of this stuff is repetitive, we'll only look at selected parts of the code to get an idea how things work.
... dest.createunique(dest.normal_file_type, 0600); var wbp = components.classes['@mozilla.org/embedding/browser/nswebbrowserpersist;1'] .createinstance(components.interfaces.nsiwebbrowserpersist); var ios = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri(src, document.characterset, gbrowser.selectedbrowser.contentdocument.documenturiobject); wbp.persistflags &= ~components.interfaces.nsiwebbrowserpersist.persist_flags_no_conversion; // don't save gzipped wbp.saveuri(uri, null, null, null, null, dest); return dest.path; } this is pretty straightforward, typical mozilla code.
3D view - Firefox Developer Tools
conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3d view.
... function keyboard mouse zoom in/out + / - scroll wheel up/down rotate left/right a / d mouse left/right rotate up/down w / s mouse up/down pan left/right ← / → mouse left/right pan up/down ↑ / ↓ mouse up/down reset zoom level 0 resets the zoom level to the default focus on selected node f makes sure the currently selected node is visible reset view r resets zoom, rotation, and panning to the default hide current node x makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you have broken htm...
Introduction to DOM Inspector - Firefox Developer Tools
you can traverse the structure and go from the topmost parts parts of the dom tree to lower level nodes, such as the "search-go-button" icon that lets users perform a query using the selected search engine.
... now, once you have selected a node like the "search-go-button" node, you can select any one of several viewers to display information about that node in the object pane of the dom inspector application window, all of which are available from the menupopup accessed from the upper left corner of the the object pane.
Break on DOM mutation - Firefox Developer Tools
click on the icon following the node name to go back to the page inspector with the node selected.
...in the following example, the selected node (the unordered list) is modified by adding a new child node.
Eyedropper - Firefox Developer Tools
underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: you can use it in one of two ways: to select a color from the page and copy it to the clipboard to change a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse a...
... now, when you click the eyedropper, the color in the rules view is set to the color you selected.
Edit Shape Paths in CSS - Firefox Developer Tools
once you have selected your element, you should see the shape icon alongside any valid value, e.g.
... understanding the lines drawn by the editor once you have selected a shape on your page, the shape path editor will draw lines to help you understand the path that is being created.
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.
Use the Inspector from the Web Console - Firefox Developer Tools
the element that's currently selected in the page inspector can be referenced in the web console using the variable $0.
...if you hover over this target, the element is highlighted in the page, and if you click the target, the element is selected in the inspector: ...
Animation inspector example: CSS transitions - Firefox Developer Tools
: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "select...
...ed"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.addeventlistener("click", toggleselection); ...
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.
...in this case, the message is "animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time." edit @keyframes any @keyframes rules associated with the currently selected element are displayed in the rules view and are editable: edit timing functions when you create a css animation you can specify a timing function: this determines the rate at which the animation progresses.
Shader Editor - Firefox Developer Tools
you'll now see a window divided into three panes: a list of all the glsl programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right: managing programs the left hand pane lists all programs currently in use by a webgl context.
... editing shaders the middle and right hand panes show the vertex and fragment shaders for the currently selected program.
IndexedDB - Firefox Developer Tools
when an indexeddb database is selected in the storage tree, details about all the object stores are listed in the table.
... when an object store is selected in the storage tree, all the items in that object store are listed in the table.
Storage Inspector - Firefox Developer Tools
table widget the table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed.
...if a cookie is selected, it will list all the details about that cookie.
Toolbox - Firefox Developer Tools
main pane the content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.
... 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.
CompositionEvent.data - Web APIs
syntax mydata = compositionevent.data value a domstring representing the event data: for compositionstart events, this is the currently selected text that will be replaced by the string being composed.
... this value doesn't change even if content changes the selection range; rather, it indicates the string that was selected when composition started.
Document.lastStyleSheetSet - Web APIs
this property's value changes whenever the document.selectedstylesheetset property is changed.
...if the current style sheet set has not been changed by setting document.selectedstylesheetset, the returned value is null.
Introduction to the DOM - Web APIs
<html> <head> <title>dom tests</title> <script> function setbodyattr(attr, value) { if (document.body) document.body[attr] = value; else throw new error("no support"); } </script> </head> <body> <div style="margin: .5in; height: 400px;"> <p><b><tt>text</tt></b></p> <form> <select onchange="setbodyattr('text', this.options[this.selectedindex].value);"> <option value="black">black</option> <option value="red">red</option> </select> <p><b><tt>bgcolor</tt></b></p> <select onchange="setbodyattr('bgcolor', this.options[this.selectedindex].value);"> <option value="white">white</option> <option value="lightgrey">gray</option> </select> <p><b><tt>link</tt></b></p> ...
... <select onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> <option value="green">green</option> </select> <small> <a href="http://some.website.tld/page.html" id="sample"> (sample link) </a> </small><br /> <input type="button" value="version" onclick="ver()" /> </form> </div> </body> </html> to test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other html elements.
Element: select event - Web APIs
the select event fires when some text has been selected.
... 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.
Element - Web APIs
WebAPIElement
element.matches() returns a boolean indicating whether or not the element would be selected by the specified selector string.
... select fired when some text has been selected.
FileReader: error event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onerror examples const fileinput = document.queryselector('input[type="file"]'); const reader = new filereader(); function handleselected(e) { const selectedfile = fileinput.files[0]; if (selectedfile) { reader.addeventlistener('error', () => { console.error(`error occurred reading file: ${selectedfile.name}`); }); reader.addeventlistener('load', () => { console.error(`file: ${selectedfile.name} read successfully`); }); reader.readasdataurl(selectedfile); } ...
...} fileinput.addeventlistener('change', handleselected); specifications specification status file api working draft ...
GlobalEventHandlers.onselect - Web APIs
the select event only fires after text inside an <input type="text"> or <textarea> is selected.
... html <textarea>try selecting some text in this element.</textarea> <p id="log"></p> javascript 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 textarea = document.queryselector('textarea'); textarea.onselect = logselection; result specification specification status comment html living standardthe definition of 'onselect' in that specification.
HTMLImageElement.srcset - Web APIs
it uses the image's currentsrc property to fetch and display the url selected by the browser from the srcset.
... let box = document.queryselector(".box"); let image = box.queryselector("img"); let newelem = document.createelement("p"); newelem.innerhtml = `image: <code>${image.currentsrc}</code>`; box.appendchild(newelem); result in the displayed output below, the selected url will correspond with whether your display results in selecting the 1x or the 2x version of the image.
IDBObjectStore - Web APIs
idbobjectstore.delete() returns an idbrequest object, and, in a separate thread, deletes the store object selected by the specified key.
... idbobjectstore.get() returns an idbrequest object, and, in a separate thread, returns the store object store selected by the specified key.
Using IndexedDB - Web APIs
d(s) missing"); return; } var year = $('#pub-year').val(); if (year != '') { // better use number.isinteger if the engine has ecmascript 6 if (isnan(year)) { displayactionfailure("invalid year"); return; } year = number(year); } else { year = null; } var file_input = $('#pub-file'); var selected_file = file_input.get(0).files[0]; console.log("selected_file:", selected_file); // keeping a reference on how to reset the file input in the ui once we // have its value, but instead of doing that we rather use a "reset" type // input in the html form.
... //file_input.val(null); var file_url = $('#pub-file-url').val(); if (selected_file) { addpublication(biblioid, title, year, selected_file); } else if (file_url) { addpublicationfromurl(biblioid, title, year, file_url); } else { addpublication(biblioid, title, year); } }); $('#delete-button').click(function(evt) { console.log("delete ..."); var biblioid = $('#pub-biblioid-to-delete').val(); var key = $('#key-to-delete').val(); if (biblioid != '') { deletepublicationfrombib(biblioid); } else if (key != '') { // better use number.isinteger if the engine has ecmascript 6 if (key == '' || isnan(key)) { displayactionfailure("invalid key"); return; } ...
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.
... a random ad is selected by computing math.floor(math.random() * ads.length); the result is a value between 0 and one less than the number of ads.
Locks.name - Web APIs
WebAPILockname
the name read-only property of the lock interface returns the name passed to lockmanager.request selected when the lock was requested.
...the name is selected by the developer to represent an abstract resource for which use is being coordinated across multiple tabs, workers, or other code within the origin.
MediaDevices.getDisplayMedia() - Web APIs
return value a promise that resolves to a mediastream containing a video track whose contents come from a user-selected screen area, as well as an optional audio track.
... notreadableerror the user selected a screen, window, tab, or other source of screen data, but a hardware or operating system level error or lockout occurred, preventing the sharing of the selected source.
MediaSource.activeSourceBuffers - Web APIs
the activesourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.
... (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.activesourcebuffers); // will contain the source buffer that was added above, // as it is selected for playing in the video player video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaTrackConstraints.logicalSurface - Web APIs
usage notes you can check the setting selected by the user agent after the display media has been created by getdisplaymedia() by calling getsettings() on the display media's video mediastreamtrack, then checking the value of the returned mediatracksettings object's logicalsurface object.
... for example, if your app needs to know if the selected display surface is a logical one: let islogicalsurface = displaystream.getvideotracks()[0].getsettings().logicalsurface; following this code, islogicalsurface is true if the display surface contained in the stream is a logical surface; that is, one which may not be entirely onscreen, or may even be entirely offscreen.
MediaTrackSettings - Web APIs
browser the stream contains the contents of a single browser tab selected by the user.
... window the stream contains a single window selected by the user for sharing.
PaymentRequest.PaymentRequest() - Web APIs
for example, the basic card payment method is selected by specifying the string basic-card here.
... 'diners', 'discover', 'mir', 'unionpay'] } }]; var details = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
PaymentResponse - Web APIs
paymentresponse.methodname read only secure context returns the payment method identifier for the payment method that the user selected, for example, visa, mastercard, paypal, etc..
... paymentresponse.shippingoption read only secure context returns the id attribute of the shipping option selected by the user.
RTCIceCandidate.usernameFragment - Web APIs
randomization at least 24 bits of the text in the ufrag are required to be randomly selected by the ice layer at the beginning of the ice session.
...for example, a browser might choose to always use a 24-character ufrag in which bit 4 of each character is randomly selected between 0 and 1.
RTCIceCandidateInit.usernameFragment - Web APIs
randomization at least 24 bits of the text in the ufrag are required to be randomly selected by the ice layer at the beginning of the ice session.
...for example, a browser might choose to always use a 24-character ufrag in which bit 4 of each character is randomly selected between 0 and 1.
RTCIceCandidatePair.local - Web APIs
the rtcicecandidatepair is returned by the rtcicetransport method getselectedcandidatepair().
... var candidatepair = pc.getsenders()[0].transport.transport.getselectedcandidatepair(); var localcandidate = candidatepair.local; the rtcicetransport is found by getting the list of rtcrtpsender objects for the rtcpeerconnection pc.
RTCIceCandidatePair.remote - Web APIs
the rtcicecandidatepair is returned by the rtcicetransport method getselectedcandidatepair().
... var candidatepair = pc.getsenders()[0].transport.transport.getselectedcandidatepair(); var remotecandidate = candidatepair.remote; the rtcicetransport is found by getting the list of rtcrtpsender objects for the rtcpeerconnection pc.
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.
Selection.toString() - Web APIs
the currently selected text.
... description this method returns the currently selected text.
SpeechSynthesis - Web APIs
inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
...ute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe defi...
USBDevice.selectAlternateInterface() - Web APIs
the selectalternateinterface() method of the usbdevice interface returns a promise that resolves when the specified alternative endpoint is selected.
... alternatesetting the configuration of the selected interface.
VideoTrackList.onchange - Web APIs
to determine the new state of media's tracks, you'll have to look at their videotrack.selected flags.
... var tracklist = document.queryselector("video").videotracks; tracklist.onchange = function(event) { tracklist.foreach(function(track) { updatetrackselectedbutton(track.id, track.selected); }); }; the updatetrackselectedbutton(), in this example, should be a function that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's selected flag to determine which state the control should be in now.
VideoTrackList - Web APIs
selectedindex read only the index of the currently selected track, if any, or −1 otherwise.
... onchange an event handler to be called when the change event occurs — that is, when the value of the selected property for a track has changed, due to the track being made active or inactive.
Signaling and video calling - Web APIs
this is done in hopes of identifying even better options than the one initially selected.
... note: we could restrict the set of permitted media inputs to a specific device or set of devices by calling navigator.mediadevices.enumeratedevices() to get a list of devices, filtering the resulting list based on our desired criteria, then using the selected devices' deviceid values in the deviceid field of the the mediaconstraints object passed into getusermedia().
WebSocket - Web APIs
WebAPIWebSocket
websocket.extensions read only the extensions selected by the server.
... websocket.protocol read only the sub-protocol selected by the server.
Inputs and input sources - Web APIs
if it matches, that input source is selected as the primary.
... user-selected the most complex way to determine a primary input source is highly flexible but can require a great deal of work to implement.
Using the Web Speech API - Web APIs
we use the htmlselectelement selectedoptions property to return the currently selected <option> element.
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); in the final part of the handler, we include an speechsynthesisutterance.onpause handler to demonstrate how speec...
Window.speechSynthesis - Web APIs
inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
...ute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesis' in that specification.
Window - Web APIs
WebAPIWindow
window.getselection() returns the selection object representing the selected item(s).
...if the resource fully fits in the window, then this event cannot be invoked globaleventhandlers.onwheel called when the mouse wheel is rotated around any axis globaleventhandlers.onselect called after text in an input field is selected globaleventhandlers.onselectionchange is an eventhandler representing the code to be called when the selectionchange event is raised.
Using the slider role - Accessibility
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.
...in these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value.
ARIA: grid role - Accessibility
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.
HTML To MSAA - Accessibility
el_for (0x1002), points to caption element n/a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_system_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if com...
...bobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a n/a n/a n/a thead role_system_ columnheader n/a n/a n/a n/a n/a n/a abbr, acronym, blockquote, form, frame, h1-h6, iframe bstr role n/a n/a n/a n/a n/a n/a ...
Keyboard-navigable JavaScript widgets - Accessibility
there are two techniques for accomplishing this: roving tabindex: programmatically moving focus aria-activedescendant: managing a 'virtual' focus technique 1: roving tabindex setting the tabindex of the focused element to "0" ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus.
... note that updating the tabindex to "0" requires also updating the previously selected item to tabindex="-1".
::selection - CSS: Cascading Style Sheets
<p>also try selecting text in this paragraph.</p> css ::-moz-selection { color: gold; background-color: red; } p::-moz-selection { color: white; background-color: blue; } /* make selected text gold on a red background */ ::selection { color: gold; background-color: red; } /* make selected text in a paragraph white on a blue background */ p::selection { color: white; background-color: blue; } result accessibility concerns don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs.
... color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors.
:checked - CSS: Cascading Style Sheets
WebCSS:checked
/* 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.
...</option> <option value="opt3">pears</option> </select> css div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
:default - CSS: Cascading Style Sheets
WebCSS:default
what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <input type="checkbox">, <input type="radio">, and <option> elements: a default option element is the first one with the selected attribute, or the first enabled option in dom order.
... multiple <select>s can have more than one selected option, so all will match :default.
:first-child - CSS: Cascading Style Sheets
/* selects any <p> that is the first element among its siblings */ p:first-child { color: lime; } note: as originally defined, the selected element had to have a parent.
... syntax :first-child examples basic example html <div> <p>this text is selected!</p> <p>this text isn't selected.</p> </div> <div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </div> css p:first-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:first-child { color: red; font-weight: bold; } result specifications specification status comment selectors level 4the definition of ':first-child' in that ...
:last-child - CSS: Cascading Style Sheets
/* selects any <p> that is the last element among its siblings */ p:last-child { color: lime; } note: as originally defined, the selected element had to have a parent.
... syntax :last-child examples basic example html <div> <p>this text isn't selected.</p> <p>this text is selected!</p> </div> <div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </div> css p:last-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; } result specifications specification status comment selectors level 4the definition of ':last-child' in that s...
:nth-child() - CSS: Cascading Style Sheets
detailed example html <h3><code>span:nth-child(2n+1)</code>, without an <code>&lt;em&gt;</code> among the child elements.</h3> <p>children 1, 3, 5, and 7 are selected.</p> <div class="first"> <span>span 1!</span> <span>span 2</span> <span>span 3!</span> <span>span 4</span> <span>span 5!</span> <span>span 6</span> <span>span 7!</span> </div> <br> <h3><code>span:nth-child(2n+1)</code>, with an <code>&lt;em&gt;</code> among the child elements.</h3> <p>children 1, 5, and 7 are selected.<br> 3 is used in the counting because it is a child, but...
... it isn't selected because it isn't a <code>&lt;span&gt;</code>.</p> <div class="second"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> </div> <br> <h3><code>span:nth-of-type(2n+1)</code>, with an <code>&lt;em&gt;</code> among the child elements.</h3> <p>children 1, 4, 6, and 8 are selected.<br> 3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>, not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects children of that type.
:scope - CSS: Cascading Style Sheets
WebCSS:scope
javascript var context = document.getelementbyid('context'); var selected = context.queryselectorall(':scope > div'); document.getelementbyid('results').innerhtml = array.prototype.map.call(selected, function (element) { return '#' + element.getattribute('id'); }).join(', '); html <div id="context"> <div id="element-1"> <div id="element-1.1"></div> <div id="element-1.2"></div> </div> <div id="element-2"> <div id="element-2.1">...
...</div> </div> </div> <p> selected elements ids : <span id="results"></span> </p> result specifications specification status comment selectors level 4the definition of ':scope' in that specification.
-ms-high-contrast - CSS: Cascading Style Sheets
highlighttext: controls the color of selected text.
... highlight: controls the background color of selected text.
Introducing the CSS Cascade - CSS: Cascading Style Sheets
WebCSSCascade
as with @font-face, only the at-rule as a whole is selected via the cascade algorithm.
...therefore, it is the last one that is then selected: margin-left: 3px note that the declaration defined in the user css, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
background: url(100px-wide-no-height-or-ratio.svg); background-size: auto 125px; in this case, the width is specified as auto in the css, so the 100px width specified in the svg is selected, per rule 3.
... the height is set at 125px in the css, so that is selected per rule 1.
Shorthand properties - CSS: Cascading Style Sheets
inherit sets the property value applied to a selected element to be the same as that of its parent element.
... initial sets the property value applied to a selected element to the initial value of that property.
background-blend-mode - CSS: Cascading Style Sheets
ednocomputed valueas specifiedanimation typediscrete formal syntax <blend-mode>#where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples <div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosit...
...y</option> </select> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.getelementbyid("select").onchange = function(event) { document.getelementbyid("div").style.backgroundblendmode = document.getelementbyid("select").selectedoptions[0].innerhtml; } console.log(document.getelementbyid('div')); specifications specification status comment compositing and blending level 1the definition of 'background-blend-mode' in that specification.
Constraint validation - Developer guides
here is the html part: <label for="fs">select a file smaller than 75 kb : </label> <input type="file" id="fs"> this displays: the javascript reads the file selected, uses the file.size() method to get its size, compares it to the (hard coded) limit, and calls the constraint api to inform the browser if there is a violation: function checkfilesize() { var fs = document.getelementbyid("fs"); var files = fs.files; // if there is (at least) one file selected if (files.length > 0) { if (files[0].size > 75 * 1024) { // check the constraint fs...
....setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event: window.onload = function () { document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint validation.
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.
... unique file type specifiers a unique file type specifier is a string that describes a type of file that may be selected by the user in an <input> element of type file.
<input type="checkbox"> - HTML: Hypertext Markup Language
WebHTMLElementinputcheckbox
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.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
when you close the color picker, the <code>change</code> event fires, and we detect that to change every paragraph to the selected color.</p> javascript first, there's some setup.
...we handle that event using the updateall() function, using event.target.value to obtain the final selected color: function updateall(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.target.value; }); } this sets the color of every <p> block so that its color attribute matches the current value of the color input, which is referred to using event.target.
<input type="month"> - HTML: Hypertext Markup Language
WebHTMLElementinputmonth
in the following example we specify a minimum month of 1900-01 and a maximum month of 1999-12: <form> <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" min="1900-01" max="1999-12"> </form> the result here is that: only months between in january 1900 and december 1999 can be selected; months outside that range can't be scrolled to in the control.
... for="month-visit">what month would you like to visit us?</label> <input type="month" id="month-visit" name="month-visit"> <span class="validity"></span> </div> <p class="fallbacklabel">what month would you like to visit us?</p> <div class="fallbackdatepicker"> <div> <span> <label for="month">month:</label> <select id="month" name="month"> <option selected>january</option> <option>february</option> <option>march</option> <option>april</option> <option>may</option> <option>june</option> <option>july</option> <option>august</option> <option>september</option> <option>october</option> <option>november</option> <option>december</option> ...
<input type="password"> - HTML: Hypertext Markup Language
WebHTMLElementinputpassword
use of a pattern is strongly recommended for password inputs, in order to help ensure that valid passwords using a wide assortment of character classes are selected and used by your users.
... <label for="userpassword">password: </label> <input id="userpassword" type="password" size="12"> <button id="selectall">select all</button> javascript document.getelementbyid("selectall").onclick = function() { document.getelementbyid("userpassword").select(); } result you can also use selectionstart and selectionend to get (or set) what range of characters in the control are currently selected, and selectiondirection to know which direction selection occurred in (or will be extended in, depending on your platform; see its documentation for an explanation).
<input type="time"> - HTML: Hypertext Markup Language
WebHTMLElementinputtime
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.
...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).
<menuitem> - HTML: Hypertext Markup Language
WebHTMLElementmenuitem
checked boolean attribute which indicates whether the command is selected.
... radiogroup this attribute specifies the name of a group of commands to be toggled as radio buttons when selected.
<picture>: The Picture element - HTML: Hypertext Markup Language
WebHTMLElementpicture
if no matches are found—or the browser doesn't support the <picture> element—the url of the <img> element's src attribute is selected.
... the selected image is then presented in the space occupied by the <img> element.
Intl - JavaScript
the matcher can be selected using a property of the options argument (see below).
... if the selected language tag had a unicode extension substring, that extension is now used to customize the constructed object or the behavior of the function.
Proxy - JavaScript
let view = new proxy({ selected: null }, { set: function(obj, prop, newval) { let oldval = obj[prop]; if (prop === 'selected') { if (oldval) { oldval.setattribute('aria-selected', 'false'); } if (newval) { newval.setattribute('aria-selected', 'true'); } } // the default behavior to store the value obj[prop] = newval; // indicate success return true; } })...
...; let i1 = view.selected = document.getelementbyid('item-1'); //giving error here, i1 is null console.log(i1.getattribute('aria-selected')); // 'true' let i2 = view.selected = document.getelementbyid('item-2'); console.log(i1.getattribute('aria-selected')); // 'false' console.log(i2.getattribute('aria-selected')); // 'true' note: even if selected: !null, then giving oldval.setattribute is not a function value correction and an extra property the products proxy object evaluates the passed value and converts it to an array if needed.
Web audio codec guide - Web media technologies
the specific codec used—and the compression configuration selected—determine how close to the original, uncompressed audio signal the output seems to be when heard by the human ear.
... for an actual music download service, you might offer songs for download as 128 kbps mp3 files, 256 kbps aac files (in mp4 containers), or flac files, depending on a preference selected by the user.
XUL Migration Guide - Archive of obsolete content
this simple example modifies the selected tab's css to enable the user to highlight the selected tab: function highlightactivetab() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-colo...
ui/frame - Archive of obsolete content
use the origin property of the event object passed to the message hander: // listen for messages from the add-on, and send a reply window.addeventlistener("message", function(event) { event.source.postmessage("pong", event.origin) }, false); this frame script listens to change events on the "city-selector" <select> element, and sends a message to the add-on containing the value for the newly selected element.
cfx - Archive of obsolete content
--manifest-overload add fields to, or override selected fields in, package.json.
Creating annotations - Archive of obsolete content
next we will create the editor panel, which enables the user to enter an annotation associated with the selected element.
Progress Listeners - Archive of obsolete content
firefox 3.5 includes a way to set up a listener for all tabs, selected and not: listening to events on all tabs.
Tabbox - Archive of obsolete content
handling onclosetab event assuming the tabbox, tabs, and tabpanels widgets with id's the same as their nodename, this function will correctly remove the current tab and tab panel for the onclosetab tabs event: function removetab(){ var tabbox = document.getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*work around if last tab is removed, widget fails to advance to next tab*/ if(-1 == tabbox.selectedindex && tabs.childnodes.length>0){ tabbox.selecte...
Install Manifests - Archive of obsolete content
if this property is specified, when the extension is selected in the extensions list, the options button is enabled and will show this.
Extensions support in SeaMonkey 2 - Archive of obsolete content
ser-bottombox"> <something insertbefore="status-bar" /> </vbox> use the following technique to make your overlay work on both seamonkey 2 and firefox 3: <window id="main-window"> <vbox id="browser-bottombox" insertbefore="status-bar"> <something insertbefore="status-bar" /> </vbox> </window> thunderbird 3 gfolderdisplay api seamonkey 2.0 only supports a reduced set of methods: selectedcount selectedmessage selectedmessageisfeed selectedmessageisimap selectedmessageisnews selectedmessageisexternal selectedindices selectedmessages selectedmessageuris messagedisplay gmessagedisplay api seamonkey 2.0 only supports a reduced set of methods: displayedmessage visible javascript tweaks firefox supports some shorthand in various places.
Supporting search suggestions in search plugins - Archive of obsolete content
this enhancement request - the handling of a selected suggestion, namely calling of a full specified url as proposed in the opensearch standard - is tracked in bug 386591.
CSS3 - Archive of obsolete content
the control of the aspect ratio to use when fallback fonts are selected via the css font-size-adjust property.
Creating a Web based tone generator - Archive of obsolete content
var frequency = 0, currentsoundsample; var samplerate = 44100; function requestsounddata(sounddata) { if (!frequency) { return; // no sound selected } var k = 2* math.pi * frequency / samplerate; for (var i=0, size=sounddata.length; i<size; i++) { sounddata[i] = math.sin(k * currentsoundsample++); } } var audiodestination = new audiodatadestination(samplerate, requestsounddata); function start() { currentsoundsample = 0; frequency = parsefloat(document.getelementby...
Autodial for Windows NT - Archive of obsolete content
if more than one dialup connection is configured, and none is selected as the default, we display a list of dialup connections and let the user choose one.
Getting Started - Archive of obsolete content
this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected).
Getting Started - Archive of obsolete content
this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected).
In-Depth - Archive of obsolete content
selected in the tree view will be xul:toolbarbutton.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected).
Download Manager preferences - Archive of obsolete content
preference description browser.download.dir a local folder the user may have selected for downloaded files to be saved.
Block and Line Layout Cheat Sheet - Archive of obsolete content
ns_frame_external_reference ns_frame_replaced_element ns_frame_generated_content ns_frame_has_loaded_images ns_frame_out_of_flow ns_frame_selected_content ns_frame_is_dirty ns_frame_is_unflowable an unflowable frame is an error condition; for example, due to system limitations.
slideBar - Archive of obsolete content
when a slidebar feature is selected, its contents will be revealed from behind the current web page.
UI - Archive of obsolete content
e toolbar panel a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with browser tabs and their contained documents statusbar low-level functions and basic calls notifications a system for alerting users via provided ui mechanisms selection interacting with user-selected content window mitigates and eases interactions between different browser windows ...
New Skin Notes - Archive of obsolete content
--nickolay 04:43, 25 aug 2005 (pdt) the radio buttons on history page are jumping in a weird way because the selected row becomes bold.
Writing textual data - Archive of obsolete content
unsupported characters you can specify what should happen with characters that are not supported by the selected character encoding.
A XUL Bestiary - 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.
browser.type - Archive of obsolete content
this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment.
commandupdater - Archive of obsolete content
for example, since the cut command is only valid when something is selected, a command updater might be used when the select event occurs.
completedefaultindex - Archive of obsolete content
if set to false or omitted, the value must be selected from the list.
current - Archive of obsolete content
to change the currently selected item in a listbox, use the listbox property selecteditem.
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.
events - Archive of obsolete content
select: occurs when the selected text changed.
linkedpanel - Archive of obsolete content
« xul reference home linkedpanel type: id the id of the linked tabpanel element that will be displayed when the tab is selected.
onchange - Archive of obsolete content
a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
ontextcommand - Archive of obsolete content
« xul reference home ontextcommand obsolete since gecko 1.9.1 type: script code note: applies to: thunderbird, seamonkeythis event handler is called when a result is selected for the textbox.
ontextentered - Archive of obsolete content
« xul reference home ontextentered new in thunderbird 3requires seamonkey 2.0 type: script code this event handler is called when a result is selected for the textbox.
pending - Archive of obsolete content
if the user has turned on the "don't load tabs until selected" preference, the pending attribute is set on tabs until they get loaded.
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.
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.
Menus - Archive of obsolete content
age views a background image context-undo undo editable text context-cut cuts to clipboard editable text context-copy copies to clipboard context-paste pastes from clipboard editable text context-delete deletes selection editable text context-selectall selects all context-searchselect selected text is searched context-viewpartialsource-selection views the selection source selection context-viewpartialsource-mathml views the mathml source mathml context-viewsource views the source context-viewinfo views the page info context-metadata views the properties context-spell-check-enabled spell ch...
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.
appendItem - Archive of obsolete content
example <script language="javascript"> function additemstolist(){ var list = document.getelementbyid('mymenulist'); // add item with just the label list.appenditem('one'); // add item with label and value list.appenditem('two', 999); // select the first item list.selectedindex = 0; } </script> <button label="add items" oncommand="additemstolist()"/> <menulist id="mymenulist"> <menupopup/> </menulist> see also insertitemat() removeitemat() ...
clearSelection - Archive of obsolete content
a select event is sent before the items are deselected.
loadOneTab - Archive of obsolete content
parameters inbackground if true the tab will be loaded in the background, if false the tab will be the newly selected tab.
moveByOffset - Archive of obsolete content
if isselectingrange is also true, then the new item is selected in addition to any currently selected items.
removeItemAt - Archive of obsolete content
<script language="javascript"> function removeselecteditem(){ var mylistbox = document.getelementbyid('mylistbox'); if(mylistbox.selectedindex == -1){ return; // no item selected so return }else{ mylistbox.removeitemat(mylistbox.selectedindex); } } function removeallitems(){ var mylistbox = document.getelementbyid('mylistbox'); var count = mylistbox.itemcount; while(count-- > 0){ mylistbox.removeitemat(0); } } </script> <button label="remove selected item" oncommand="removeselecteditem()"/> <button label="remove all items" oncommand="removea...
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.
selectItemRange - Archive of obsolete content
all other items are deselected.
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.
timedSelect - Archive of obsolete content
all other items are deselected.
OpenClose - Archive of obsolete content
when an menu item is selected, it fires a command event so that code may be used to perform an action.
Positioning - Archive of obsolete content
if a context menu was opened via the keyboard only, the menu will appear at the top left corner of the document, or underneath the currently selected item if a list is focused.
Popup Guide - Archive of obsolete content
usually it would contain tools related to the main window, or an inspector which displays properties of a selected element.
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.
controllers - Archive of obsolete content
="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox> </window> ...
dateValue - Archive of obsolete content
« xul reference datevalue type: date the date that is currently entered or selected in the datepicker as a date object.
description - Archive of obsolete content
« xul reference description type: string set to the description of the currently selected menuitem.
focusedItem - Archive of obsolete content
« xul reference focuseditem type: radio element holds the currently focused item in the radiogroup, which may or may not be the same as the selected item.
listbox.currentIndex - Archive of obsolete content
(or, on some platforms, typeof(listboxcurrentindex) will be undefined) in a single selection list, the current index will always be the same as the selected index.
menulist.image - Archive of obsolete content
« xul reference image type: image url the image associated with the currently selected item.
selstyle - Archive of obsolete content
« xul reference selstyle type: string if set to the value primary, only the label of the primary column will be highlighted when an item in the tree is selected.
Result Generation - Archive of obsolete content
once you have selected a starting point, you use a number of statements which indicate where to go next when navigating the graph.
Static Content - Archive of obsolete content
<radiogroup datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" onselect="applyfilter(event.target.value);"> <radio label="all" selected="true"/> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <radio uri="?country" label=...
Template and Tree Listeners - Archive of obsolete content
willrebuild : function(builder) { this.item = builder.getresourceatindex(builder.root.currentindex); }, didrebuild : function(builder) { if (this.item) { var idx = builder.getindexofresource(this.item) if (idx != -1) builder.root.view.selection.select(idx); } } }; tree.builder.addlistener(somelistener); this example is very simple and just saves and restores the selected index after a rebuild.
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
for simplicity, the entire text is cut and not just the selected text.
Creating Dialogs - Archive of obsolete content
buttonaccesskeycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favourite fruit"/> <radio id="orange" label="oranges because they are fruity"/> <radio id="violet" selected="true" label="strawberries because of their colour"/> <radio id="yellow" label="bananas because they are pre-packaged"/> </groupbox> </dialog> the buttons elements can be accessed with the following javascript // the accept button var acceptbutt = document.documentelement.getbutton("accept") more examples more examples in dialogs and prompts (code snippets).
Creating a Window - Archive of obsolete content
in this case, the all-important global.css file is selected.
Introduction - Archive of obsolete content
it is still possible to enable this for selected sites to let legacy apps to continue working, but for new remote applications you should use html to create your user interface instead; most of the features you used to have to use xul for are available in html5.
Introduction to RDF - Archive of obsolete content
the name was selected because it has meaning in this case, but we could have selected something else.
Localization - Archive of obsolete content
label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="&opencmdtoolbar.label;"/> <toolbarbutton id="savesearch" label="&savecmdtoolbar.label;"/> </toolbar> </toolbox> <tabbox> <tabs> <tab label="&searchtab;" selected="true"/> <tab label="&optionstab;"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical" context="editpopup"> <description> &finddescription; </description> <spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="&findcriteria;"/> <menulist id="searchtype"> <menupopup> <menuitem label="&type.name;"/> ...
Templates - Archive of obsolete content
in the first rule, bookmark separators are selected, as can be seen by the rdf:type attribute.
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
this element also serves as the item which can be selected by the user.
XPCOM Examples - Archive of obsolete content
ame=window-mediator"].getservice(); mediator.queryinterface(components.interfaces.nsiwindowdatasource); var resource = elem.getattribute('id'); switchwindow = mediator.getwindowforresource(resource); if (switchwindow){ switchwindow.focus(); } } </script> a command handler was added to the menu element which calls the function switchfocus() with a parameter of the element that was selected from the menu.
Using the Editor from XUL - Archive of obsolete content
you are typing over selected text), then calls a generic pre-insertion call willinsert(), which sets up inline styles for the inserted text, and moves the selection to an appropriate place where the text is to be inserted.
XUL Questions and Answers - Archive of obsolete content
an example of this is: var tree = document.getelementbyid('treeid'); selectedtreeitem = tree.view.getitematindex(tree.currentindex); selectedtreeitem.firstchild.setattribute('style', 'background: #ff0000'); what is an example of tab browser in xul?
XUL accessibility guidelines - Archive of obsolete content
in a tabbed dialog, focus should normally start on the first control in the selected tab.
browser - Archive of obsolete content
this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment.
dialog - Archive of obsolete content
s" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selected="true"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
grid - Archive of obsolete content
ArchiveMozillaXULgrid
column --> <groupbox> <caption label="details"/> <grid> <columns> <column flex="1"/> <column flex="2"/> </columns> <rows> <row> <label value="user name"/> <textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, i...
label - Archive of obsolete content
ArchiveMozillaXULlabel
these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
preference - Archive of obsolete content
a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
scrollbar - Archive of obsolete content
the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user.
separator - Archive of obsolete content
these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
splitter - Archive of obsolete content
these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
<statusbarpanel> - Archive of obsolete content
these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
toolbaritem - Archive of obsolete content
examples <toolbaritem> <menulist label="bus"> <menupopup> <menuitem label="car"/> <menuitem label="taxi"/> <menuitem label="bus" selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allowevents, ...
treecol - Archive of obsolete content
this class should be used instead of changing the style of the element directly since it will fit more naturally with the user's selected theme.
Dialogs in XULRunner - Archive of obsolete content
el="return docancel();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favorite fruit"/> <radiogroup> <radio id="1" label="oranges because they are fruity"/> <radio id="2" selected="true" label="strawberries because of color"/> <radio id="3" label="bananna because it pre packaged"/> </radiogroup> </groupbox> </dialog> xul window elements have a special method to open dialogs, called window.opendialog().
XULRunner tips - Archive of obsolete content
ss.type.skin", "extension:manager-themes"); pref("xpinstall.dialog.progress.type.chrome", "extension:manager-extensions"); pref("extensions.update.enabled", true); pref("extensions.update.interval", 86400); pref("extensions.dss.enabled", false); pref("extensions.dss.switchpending", false); pref("extensions.ignoremtimechanges", false); pref("extensions.logging.enabled", false); pref("general.skins.selectedskin", "classic/1.0"); // nb these point at amo pref("extensions.update.url", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmoreextensionsurl", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmorethemesurl", "chrome://mozapps/locale/extensions/extensions.properties"); if your application is based on gecko 2.0, you need to regist...
2006-10-13 - Archive of obsolete content
(no responses as of yet) selected tab looks too close to unselected tab discussion about how to change the colour of a selected tab and an unselected tab.
Extentsions FAQ - Archive of obsolete content
var tab = gbrowser.addtab( url ); // and if you want it to load in the foreground: gbrowser.selectedtab = tab; is it possible to read the html-code of the current url/site?
Atomic RSS - Archive of obsolete content
ArchiveRSSModuleAtom
documentation selected articles atomic rss tim bray talks about using atom 1.0 as a micro format and extension module for rss 2.0; keeping rss 2.0 as your sydication format but bringing in and using selected atom 1.0 elements.
Content - Archive of obsolete content
documentation selected articles why rss content module is popular - including html contents charles iliya krempeaux talks about the rss content module, why it is popular among some, and how it is used to include html contents.
Slash - Archive of obsolete content
ArchiveRSSModuleSlash
documentation selected articles up to 10 why rss slash is popular: counting your comments charles iliya krempeaux talks about the rss slash module, why it is popular among some, and how it is used to give a count for your comments (2005-08-22).
Well-Formed Web - Archive of obsolete content
documentation selected articles why well-formed web rss module is popular - syndicating your comments charles iliya krempeaux talks about the rss well-formed web module, why it is popular among some, and how it is used to link to your comments (2005-08-22).
RSS - Archive of obsolete content
atomic rss tim bray talks about using atom 1.0 as a micro format and extension module for rss 2.0; keeping rss 2.0 as your sydication format but bringing in and using selected atom 1.0 elements.
Building a Theme - Archive of obsolete content
for example, the line skin browser sample skin/browser/ means "when the user has the sample theme selected, use the directory browser/ to look up skins for the browser package." more concisely, this means that the url chrome://browser/skin/some/path/file.css will look for a file browser/some/path/file.css in your theme's root directory.
Common Firefox theme issues and solutions - Archive of obsolete content
text only toolbar buttons not aligned properly when text only toolbar buttons are selected in customize toolbars, text labels in toolbar buttons may not align properly.
-ms-content-zoom-limit-max - Archive of obsolete content
the -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor.
-ms-content-zoom-snap-type - Archive of obsolete content
the snap-point that is selected is the one that is closest to where the content zoom factor would normally stop.
::-ms-fill-lower - Archive of obsolete content
the ::-ms-fill-lower css pseudo-element represents the lower portion of the track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
::-ms-fill-upper - Archive of obsolete content
the ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
::-ms-fill - Archive of obsolete content
an indeterminate progress bar can be selected with the :indeterminate pseudo-class.) by default, internet explorer and edge display a moving dots animation for an indeterminate progress bar.
Implementation Status - Archive of obsolete content
container form controls section title status notes bugs 9.1.1 group supported 9.2.1 switch partial @selected not working inside repeats 339937; 9.2.2 case partial 302497; 329143; 9.3 repeat module partial 264329; 273706; 9.3.1 repeat partial we do not support number attribute 302026; 9.3.2 nested repeats supported 9.
XForms Upload Element - Archive of obsolete content
representations the xforms upload element is represented by visually combining three widgets: a text field that shows the uri of the selected file, a button to open the file picker dialog which allows the user to select a file, and a button to clear the text field and the reference to the file from the bound node (xhtml only).
Visual-js game engine - Game development
inserting new code will be always at current line selected intro editor .
CSS - MDN Web Docs Glossary: Definitions of Web-related terms
the browser applies css style declarations to selected elements to display them properly.
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
would you know what part of the dom is being selected with div > ul > li, or .fruits__item?
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.
How CSS is structured - Learn web development
however, there is also a class that sets the text of selected elements to red.
Styling lists - Learn web development
background-position: this defines where in the background of the selected element the image will appear — in this case we are saying 0 0, which means the bullet will appear in the very top left of each list item.
Web fonts - Learn web development
when you've chosen the font families, press the [number] families selected bar at the bottom of the page.
Advanced form styling - Learn web development
also bear in mind that we've added some javascript to the page that lists the files selected by the file picker, below the control itself.
Client-side form validation - Learn web development
first, some html: <form> <p> <fieldset> <legend>do you have a driver's license?<abbr title="this field is mandatory" aria-label="required">*</abbr></legend> <!-- while only one radio button in a same-named group can be selected at a time, and therefore only one radio button in a same-named group having the "required" attribute suffices in making a selection a requirement --> <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">yes</label> <input type="radio" required name="driver" id="r2" value="no"><label for="r2">no</label> </fieldset> </p> <p> <l...
How to structure a web form - Learn web development
for example, clicking on the "i like cherry" label text in the example below will toggle the selected state of the taste_cherry checkbox: <form> <p> <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> <label for="taste_1">i like cherry</label> </p> <p> <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> <label for="taste_2">i like banana</label> </p> </form> note: you can find this example in checkbox-label.html (see it live also)...
Test your skills: Advanced styling - Learn web development
now give the radio buttons a different style for when they are selected.
Test your skills: Basic controls - Learn web development
make it so that the first radio button is selected upon page load.
What will your website look like? - Learn web development
click the "* family selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected).
Graceful asynchronous programming with Promises - Learn web development
so instead of waiting for the user, getting the chosen devices enabled, and directly returning the mediastream for the stream created from the selected sources, getusermedia() returns a promise which is resolved with the mediastream once it's available.
Looping code - Learn web development
for each iteration, create a new paragraph and append it to the output <div>, which we've selected using const output = document.queryselector('.output');.
Manipulating documents - Learn web development
in this case we will set a class name of highlight on our paragraph: para.setattribute('class', 'highlight'); refresh your page, and you'll see no change — the css is still applied to the paragraph, but this time by giving it a class that is selected by our css rule, not as inline css styles.
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.
Basic math in JavaScript — numbers and operators - Learn web development
for example, booleans can be used to: display the correct text label on a button depending on whether a feature is turned on or off display a game over message if a game is over or a victory message if the game has been won display the correct seasonal greeting depending what holiday season it is zoom a map in or out depending on what zoom level is selected we'll look at how to code such logic when we look at conditional statements in a future article.
Silly story generator - Learn web development
in this block we are saying "if a value has been entered into the customname text input, replace bob in the story with that custom name." inside the second if block, we are checking to see if the uk radio button has been selected.
Working with JSON - Learn web development
inside the powers property is an array containing the selected hero's superpowers.
Getting started with Svelte - Learn web development
this works by adding a class to selected elements, which is based on a hash of the component styles.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
now click on the <input> — you'll see that the entire input text is selected.
Working with Svelte stores - Learn web development
for example, information about the logged in user, or whether the dark theme is selected or not.
Handling common HTML and CSS problems - Learn web development
we've selected the paragraph with p:first-child, which won't work in old versions of ie.
Handling common JavaScript problems - Learn web development
the center panel shows the code in the selected script.
Setting up your own test automation environment - Learn web development
in general, you should make sure that your tests are: using good locator strategies: when you are interacting with the document, make sure that you use locators and page objects that are unlikely to change — if you have a testable element that you want to perform a test on, make sure that it has a stable id, or position on the page that can be selected using a css selector, which isn't going to just change with the next site iteration.
Accessibility API cross-reference
n/a <q> <quote> note the reversed logic in some apis readonly editable editable aria-readonly=true this object can be selected selectable selectable selectable this object is selected selected selected selected aria-selected=true selected (boolean attribute) for a button that is "consistent".
Accessibility Features in Firefox
this will show the html source for only the selected text, which is useful for understanding accessibility problems in some web sites.
Frequently Asked Questions for Lightweight themes
to undo the design you most recently selected, go to tools > add-ons in the menu bar and select the themes tab.
Adding phishing protection data providers
determining the currently-selected data provider if you need to determine the id number of the currently selected anti-phishing data provider, you can look at the current value of the preference browser.safebrowsing.dataprovider.
Application cache implementation overview
but this time the entry is not selected to load the top level document from.
Creating a Language Pack
you have to set your selected language still.
Debugging a hang on OS X (Archived)
for a more detailed view of the sample data, make sure the sample you just recorded is selected in the “detected hangs” window and click on the “open…” button.
Configuring Build Options
this will also help when troubleshooting because people will want to know which build options you have selected and will assume that you have put them in your mozconfig file.
Windows SDK versions
try the following things in order: run the windows sdk configuration tool (if available) and make sure the right sdk is selected.
The Firefox codebase: CSS Guidelines
using descendant selectors is good practice for performance when possible: for example: .autocomplete-item[selected] > .autocomplete-item-title would be more efficient than .autocomplete-item[selected] .autocomplete-item-title overriding css before overriding any css rules, check whether overriding is really needed.
Eclipse CDT
if you click the yellow, double arrow button at the top of the project explorer tab on the left, it will keep the selected file in the project explorer tab in sync with the file that you're currently editing.
Obsolete Build Caveats and Tips
see the chart at the top of this page to ensure that the version you've selected is compatible with the branch you want to build.
Developer guide
mozilla modules and module ownership this article provides information about mozilla's modules, what the role of a module owner is, and how module owners are selected.
Cross Process Object Wrappers
this means that examples like this will actually work, even in multiprocess firefox: gbrowser.selectedbrowser.contentdocument.body.innerhtml = "replaced by chrome code"; it's still important to keep in mind, though, that this is access through a cpow and not direct access to content.
Limitations of chrome scripts
for example: // chrome code gbrowser.contentwindow; // null gbrowser.contentdocument; // null gbrowser.selectedbrowser.contentwindow; // null window.content; // null content; // null as a special note, docshells live in the content process, so they are also inaccessible: gbrowser.docshell; // null gbrowser.selectedbrowser.docshell; // null with the shim the shim will give you a cpow for the content objec...
Communicating with frame scripts
// on some event var browsermm = gbrowser.selectedbrowser.messagemanager; browsermm.loadframescript("chrome://my-addon@me.org/content/frame-script.js", false); messagemanagers.push(browsermm); console.log(messagemanagers.length); we can listen for message-manager-disconnect to update the array when the message managers disconnect (for example because the user closed the tab): function myobserver() { } myobserver.prototype = { observe: functi...
Message manager overview
ific message from frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiprocesschecker nsiframescriptloader nsimessagelistenermanager nsimessagesender how to access the browser message manager can be accessed as a property of the xul <browser> element: // chrome script let browsermm = gbrowser.selectedbrowser.messagemanager; content process content frame message manager description there's a content frame message manager for every open tab.
Message manager overview
it's a chromemessagesender object, which implements the following interfaces: nsiprocesschecker nsiframescriptloader nsimessagelistenermanager nsimessagesender the browser message manager can be accessed as a property of the xul <browser> element: // chrome script let browsermm = gbrowser.selectedbrowser.messagemanager; process message managers process message managers correspond to process boundaries, and enable code running in different processes to communicate.
Performance best practices for Firefox front-end engineers
paint flashing tints each region being painted with a randomly selected color so that it’s more easy to see what on the screen is being painted.
mozbrowsercaretstatechanged
ed a boolean indicating whether the current selection is collapsed (true) or not (false.) caretvisible a boolean indicating whether the caret is currently visible (true) or not (false.) selectionvisible a boolean indicating whether the current selection is visible (true) or not (false.) selectioneditable a boolean indicating whether the current selection is editable (true) or not (false.) selectedtextcontext a domstring containing the currently-selected text content.
mozbrowserselectionstatechanged
the mozbrowserselectionstatechanged event is fired when the text selected inside the browser <iframe> content changes.
:-moz-lwtheme-brighttext
the :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.
:-moz-lwtheme-darktext
the :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.
:-moz-lwtheme
the :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.
Chrome-only CSS reference
MozillaGeckoChromeCSS
it only works in chrome code, and only on mac os x.:-moz-lwthemethe :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.:-moz-lwtheme-brighttextthe :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.:-moz-lwtheme-darktextthe :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.::-moz-tree-cellactivated by the properti...
Embedding Tips
the nsicontextmenulistener::onshowcontextmenu() method will be called with the dom node that the context applies, the dom event plus some flag combinations that assist in determining what menu to display (document, link, image, selected text etc.) how do i implement tool tips?
Gecko Keypress Event
that is, when the currently selected keyboard layout produces a unicode character (according to the current state of capslock and numlock), the charcode property contains that character.
How to Report a Hung Firefox
getservice(ci.nsiwindowmediator); let win = wm.getmostrecentwindow("navigator:browser"); let browser = win.gbrowser.selectedbrowser; if (browser.isremotebrowser) { browser.messagemanager.loadframescript('data:,let appinfo = components.classes["@mozilla.org/xre/app-info;1"];if (appinfo && appinfo.getservice(components.interfaces.nsixulruntime).processtype != components.interfaces.nsixulruntime.process_type_default) {components.utils.import("resource://gre/modules/ctypes.jsm");var zero = new ctypes.intptr_t(8);var badp...
Interfacing with the Add-on Repository
installing the add-on the shownotification() routine displays a notification box offering to install the recommended add-on, if one was found, or reports an error if the search failed: shownotification: function(prompt, button, installobj) { this.install = installobj; var box = popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", prompt, null, /* anchor id */ { label: button, accesskey: "i", callback: function() { if (popupnotifications.install) { popupnotifications.install.install(); } else { popupnotifications.remove(box); } } }, ...
Bootstrapping a new locale
you have to set your selected language still.
Index
you've setup up your local and remote environments, you've selected your l10n tools and projects, done some localization and even some testing!
Localizing XLIFF files for iOS
enter the command git clone https://github.com/mozilla-l10n/firefoxios-l10n/your-locale-code/ you should now see the firefox-ios project in your selected directoy with the firefox-ios.xliff file in it.
Localizing extension metadata on addons.mozilla.org
in step 2, you'll be asked to provide the attributes listed above in the add-on's default locale (selected in step 1).
Localizing with Koala
the string to translated is selected so that you can translate it without any further clicking.
Localizing with Mozilla Translator
files hanging directly from the platform neutral platform can't be part of a partial glossary (because they are not components), and platform neutral itself can't be selected either, since it is not a component, but a platform.
Patching a Localization
the command will only print the differences found in the selected files.
Release phase
you've setup up your local and remote environments, you've selected your l10n tools and projects, done some localization and even some testing!
Creating localizable web applications
this is useful to add minor corrective rules to the css that apply only for selected locales.
MathML Torture Test
mathml torture test html content <p> render mathematics with: <select name="mathfont" id="mathfont"> <option value="default" selected="selected">default fonts</option> <option value="asana">asana</option> <option value="cambria">cambria</option> <option value="dejavu">dejavu</option> <option value="latinmodern">latin modern</option> <option value="libertinus">libertinus</option> <option value="lucidabright">lucida bright</option> <option value="minion">minion</option> <option value="stixtwo">stix two</option> <option value="texgyrebonum">tex gyre bonum</option> <option value="texgyrepagella">tex gyre pagella</option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> <o...
MathML Screenshots
you can get the mathml source of a formula or a selected expression.
Profiling with Xperf
these refer to the time range that was selected for the summary graph; for example, something that's in the aofi category was allocated before the start of the selected time range, but the free event happened inside.
browser.search.context.loadInBackground
browser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.
dom.event.clipboardevents.enabled
dom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
mail.tabs.drawInTitlebar
the subject of the currently selected mail).
Preferences system
you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted platform, as well as the height (in em) for platforms where the window size does not change as the selected panel is changed (e.g.
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 guide to searching crash reports
by default, the "signature facet" tab is selected.
NSS Certificate Download Specification
for nss-based servers it will depend upon the options selected in the server's administration interface.
Index
if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default).
NSS Key Log Format
the size of the hex-encoded secret depends on the selected cipher suite.
NSS 3.21 release notes
sing after having been negotiated ssl_error_unexpected_extended_master_secret - error code for receiving an extended master secret when previously not negotiated in sslt.h ssl_enable_extended_master_secret - configuration to enable the tls extended master secret extension (rfc 7627) ssl_preinfo_version - used with sslpreliminarychannelinfo to indicate that a tls version has been selected ssl_preinfo_cipher_suite - used with sslpreliminarychannelinfo to indicate that a tls cipher suite has been selected ssl_preinfo_all - used with sslpreliminarychannelinfo to indicate that all preliminary information has been set notable changes in nss 3.21 nss now builds with elliptic curve ciphers enabled by default (bug 1205688) nss now builds with warnings as errors (bug 11826...
NSS 3.25.1 release notes
previously, with rare server configurations, an md5 signature algorithm might have been selected for client authentication and caused the client to abort the connection soon after.
NSS 3.26.2 release notes
previously, with rare server configurations, an md5 signature algorithm might have been selected for client authentication and caused the client to abort the connection soon after.
NSS 3.35 release notes
in order to ease transitions, experimental functions return secfailure and set the ssl_error_unsupported_experimental_api code if the selected api is not available.
NSS API Guidelines
it also provides functions that invoke operations in selected modules and slots, such as key selection and generation, signing, encryption and decryption, etc.
Overview of NSS
rsa standard that governs selected attribute types, including those used with pkcs #7, pkcs #8, and pkcs #10.
Python binding for NSS
_cache_with_opt() nss.ssl.get_max_server_cache_locks() nss.ssl.set_max_server_cache_locks() nss.ssl.shutdown_server_session_id_cache() the following constants were added nss.nss.int.pk11_dis_could_not_init_token nss.nss.int.pk11_dis_none nss.nss.int.pk11_dis_token_not_present nss.nss.int.pk11_dis_token_verify_failed nss.nss.int.pk11_dis_user_selected nss.nss.int.pkcs12_des_56 nss.nss.int.pkcs12_des_ede3_168 nss.nss.int.pkcs12_rc2_cbc_128 nss.nss.int.pkcs12_rc2_cbc_40 nss.nss.int.pkcs12_rc4_128 nss.nss.int.pkcs12_rc4_40 the following files were added test/run_tests test/test_cipher.py (replaces cipher_test.py) test/test_client_server.py test/test_digest.py (replaces digest_test.
NSS tools : pk12util
if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default).
NSS reference
data types based on "selected ssl types and structures" in the ssl reference.
OLD SSL Reference
ssl, pkcs #11, and the default security databases setting up the certificate and key databases setting up the ca db and certificate setting up the server db and certificate setting up the client db and certificate verifying the server and client certificates building nss programs chapter 3 selected ssl types and structures this chapter describes some of the most important types and structures used with the functions described in the rest of this document, and how to manage the memory used for them.
ssltyp.html
upgraded documentation may be found in the current nss reference selected ssl types and structures chapter 3 selected ssl types and structures this chapter describes some of the most important types and structures used with the functions described in the rest of this document, and how to manage the memory used for them.
NSS Tools pk12util
it may be the case that the cryptographic module does not support the requested algorithm and a best fit will be selected, likely to be the default.
NSS tools : pk12util
if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default).
Installing Pork
to tell mcpp which gcc installation to integrate itself with, place the selected gcc bin dir as the first element of your path: path=/bindir/of/my/gcc:$path if you want to use a gcc that has binaries named something other than "gcc" and "g++", or you use "ccache" for you main gcc installation and want mcpp to override a separate installation, you need to pass the options "cc=gccxxx cxx=g++xxx" to "./configure".
Rhino overview
in browser embeddings, this language version is selected using the language attribute of the script tag with values such as "javascript1.2".
Tracing JIT
only one architecture-specific variant is included into any given build of the assembler; the architecture is selected and fixed when the build is configured.
JS_GetParent
otherwise, if the context is running any scripts or functions, a default parent object is selected based on those.
JS_GetScopeChain
these objects represent the lexical scope of the currently executing statement or expression, not the call stack, so they include: the variable objects of any enclosing functions or let statements or expressions, and any objects selected by enclosing with statements, in order from the most-nested scope outward; lastly the global object against which the function was created.
Running Automated JavaScript Tests
or you can run all but selected tests with the --exclude option.
Gecko object attributes
grabbed true when the accessible object has been selected for dragging.
XForms Accessibility
submit invokes the submission of the selected instance data to its target destination (see the spec, the docs).
Using the Places history service
a session is ended when a new url is typed in or selected from bookmarks.
Using the Places keywords API
each keyword can be associated with post data, in such a case a post action will be executed when the given url is selected from the awesomebar.
Using XPCOM Components
the function is carried out by the cookiemanager component, and the selected cookie is deleted from disk and removed from the displayed list.
mozISpellCheckingEngine
this will be either element from the array returned by getdictionarylist() or an empty string if no dictionary is selected.
ExtendSelection
see also nsiaccessible.setselected() nsiaccessible.takeselection() ...
TakeSelection
see also nsiaccessible.setselected() nsiaccessible.extendselection() ...
nsIAutoCompleteInput
completeselectedindex boolean if true, the text in the text field will be autocompleted as the user selects from the popup list.
nsIBrowserSearchService
if this value is false, the engine will be added to the list upon successful load, but it will not be selected as the current engine.
nsIContentFrameMessageManager
var acfmm = gbrowser.selectedbrowser._docshell.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsicontentframemessagemanager); get content message manager from content window window here is a html window or any window inside a tab, this code would run from a framescript.
nsIConverterInputStream
this allows reading unicode strings from a stream, automatically converting the bytes from a selected character encoding.
nsIConverterOutputStream
exceptions thrown ns_error_loss_of_significant_data if areplacementcharacter is not encodable in the selected character encoding and an attempt is made to write the character.
nsIDOMFileList
the nsidomfilelist interface contains a list of nsidomfile objects describing the files selected by the user for a "file" input field on a web form.
nsIDOMNSHTMLDocument
for instance, if there is a selection and part of the selected text is bold, then then bold command is in an indeterminate state.
nsIDOMWindow
nsidomcssstyledeclaration getcomputedstyle( in nsidomelement elt, in domstring pseudoelt optional ); parameters elt pseudoelt optional return value getselection() returns the nsiselection object indicating what if any content is currently selected in the window.
nsIDOMXULSelectControlElement
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() nsidomxulselectcontrol...
nsIDOMXULSelectControlItemElement
crop domstring disabled boolean image domstring label domstring selected boolean read only.
nsIDownloadManagerUI
aid optional the id of the download to be preselected upon opening the download manager ui.
nsIEditor
igned 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 nsitransact...
nsIFile
on win32 platforms, it is the currently selected ansi codepage (specified by cp_acp).
nsIFileView
selectedfiles nsiarray an nsiarray of selected files, which contains nsiarray instances.
nsIMacDockSupport
the application should call this to activate itself when one of its dock menu items are selected, since doing so does not automatically activate the application.
nsIMessenger
setdocumentcharset() redisplay the currently selected message (if any) using the given character set.
nsIMicrosummaryService
if the caller passes a bookmark id, and one of the microsummaries is the current one for the bookmark, this method will retrieve content from the datastore for that microsummary, which is useful when callers want to display a list of microsummaries for a page that isn't loaded, and they want to display the actual content of the selected microsummary immediately (rather than after the content is asynchronously loaded).
nsIMimeConverter
thunderbird provides a utility function which performs this for the currently selected message: markcurrentmessageasread().
nsIMsgCompFields
it should be initialized to true and set to false when 'send anyway' is selected by a user.
nsIMsgMessageService
e.g., header=filter return the nsiuri that gets run example for example, the next piece of code shows the selected message code on a dialog: (taken from mozillazine) var content = ""; var messageuri = getfirstselectedmessage(); var msgservice = messenger.messageservicefromuri(messageuri); var msgstream = components.classes["@mozilla.org/network/sync-stream-listener;1"].createinstance(); var consumer = msgstream.queryinterface(components.interfaces.nsiinputstream); var scriptinput = components.cl...
nsINavHistoryResultTreeViewer
this prevents you from seeing multiple entries for things when you have selected to get visits.
nsIScreenManager
if the rectangle overlaps multiple screens, the screen containing the majority of the rectangle's area is selected and returned.
nsIScrollable
example var nsiscr = gbrowser.selectedbrowser.docshell.queryinterface(components.interfaces.nsiscrollable); var v={}; var h={}; nsiscr.getscrollbarvisibility(v,h); v.value //returns true if the vertical scrollbar is displayed h.value //returns true if the horizontal scrollbar is displayed ...
nsISelection
inherits from: nsisupports last changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) interface for manipulating and querying the current selected range of nodes within the document.
nsISelectionController
constants selection constants constant gecko version description 1.7 - 1.9 1.9.1 - 1.9.2 2.0 selection_none 0 selection_normal 1 selection_spellcheck 2 selection_ime_rawinput 4 selection_ime_selectedrawtext 8 selection_ime_convertedtext 16 selection_ime_selectedconvertedtext 32 selection_accessibility 64 for accessibility api usage.
nsISelectionPrivate
"none" means a table element is not selected.
nsIServerSocket
pass -1 to indicate no preference, and a port will be selected automatically.
nsISessionStore
if you you are working in a browser.xul overlay and want the currently selected tab, it's as simple as gbrowser.selectedtab.
nsITaskbarPreview
method overview void invalidate(); attributes attribute type description active boolean indicates whether or not the preview is marked as active (currently selected) in the taskbar.
nsIToolkitProfileService
selectedprofile nsitoolkitprofile the profile that is marked as "default=1" in the profiles.ini file.
nsITreeColumn
selectable boolean if true the nsitreecolumn is able to be selected.
nsIUserCertPicker
inherits from: nsisupports last changed in gecko 1.7 method overview nsix509cert pickbyusage(in nsiinterfacerequestor ctx, in wstring selectednickname, in long certusage, in boolean allowinvalid, in boolean allowduplicatenicknames, out boolean canceled); methods pickbyusage() nsix509cert pickbyusage( in nsiinterfacerequestor ctx, in wstring selectednickname, in long certusage, in boolean allowinvalid, in boolean allowduplicatenicknames, out boolean canceled ); parameters ctx selectednickname certusage allowinvalid allowduplicatenicknames canceled return value ...
nsIWindowMediator
function from the window //window has now loaded now do stuff to it //as example this will add a function to listen to tab select and will fire alert in that window if (domwindow.gbrowser && domwindow.gbrowser.tabcontainer) { domwindow.gbrowser.tabcontainer.addeventlistener('tabselect', function () { domwindow.alert('tab was selected') }, false); } }, false); }, onclosewindow: function (awindow) {}, onwindowtitlechange: function (awindow, atitle) {} }; //to register services.wm.addlistener(windowlistener); //services.wm.removelistener(windowlistener); //once you want to remove this listener execute removelistener, currently its commented out so you can copy paste this code in ...
Adding items to the Folder Pane
however, the complete example file includes code to display the number selected in thunderbird's main viewing pane, when such a number is selected in the folder pane.
WebIDL bindings
the type of the enum class is automatically selected to be the smallest unsigned integer type that can hold all the values.
Working with windows in chrome code
for example: // alerts the title of the document displayed in the content-primary widget alert(content.document.title); for example, you can use content.document in a browser.xul overlay to access the web page in the selected tab in a firefox window.
Preferences System
you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted platform, as well as the height (in em) for platforms where the window size does not change as the selected panel is changed (e.g.
DOM Inspector internals - Firefox Developer Tools
the preference menuitems in the view menu that affect only the dom nodes viewer ("blink selected element", et cetera) are added by that viewer's popup overlay (resources/content/viewers/dom/popupoverlay.xul).
Browser Console - Firefox Developer Tools
try running this code in the browser console's command line (remember that to send multiple lines to the browser console, use shift+enter): var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.selectedtab); newtabbrowser.addeventlistener("load", function() { newtabbrowser.contentdocument.body.innerhtml = "<h1>this page has been eaten</h1>"; }, true); newtabbrowser.contentdocument.location.href = "https://mozilla.org/"; it adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.
DOM Property Viewer - Firefox Developer Tools
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.
Debug worker threads - Firefox Developer Tools
inspecting worker code for example, see the selected item worker.js below — it is listed in a separate thread in the sources list, but appears in the source pane in the same way as main thread code when selected.
Ignore a source - Firefox Developer Tools
however, you can tell the debugger to ignore the details of selected sources.
Debugger keyboard shortcuts - Firefox Developer Tools
find next in the current file ctrl + g cmd + g ctrl + g search for scripts by name ctrl + p cmd + p ctrl + p resume execution when at a breakpoint f8 f8 1 f8 step over f10 f10 1 f10 step into f11 f11 1 f11 step out shift + f11 shift + f11 1 shift + f11 toggle breakpoint on the currently selected line ctrl + b cmd + b ctrl + b toggle conditional breakpoint on the currently selected line ctrl + shift + b cmd + shift + b ctrl + shift + b 1.
Tutorial: Set a breakpoint - Firefox Developer Tools
reportdo.script.setbreakpoint(0, { hit: function (frame) { console.log('hit breakpoint in ' + frame.callee.name); console.log('what = ' + frame.eval('what').return); } }); console.log('finished setting breakpoint!'); in the scratchpad, ensure that no text is selected, and press the “run” button.
Dominators view - Firefox Developer Tools
to see the retaining paths for a node, you have to select the node in the dominators tree panel: here, we've selected an object, and can see a single path back to a gc root.
Inspecting web sockets - Firefox Developer Tools
choose the reponse tab to inspect web socket frames sent and received through the selected connection.
Network request list - Firefox Developer Tools
block url blocks the selected url for future requests.
Network Monitor - Firefox Developer Tools
once the tool is monitoring network requests, the display looks like this: when it is actively monitoring activity, the network monitor records network requests any time the toolbox is open, even if the network monitor itself is not selected.
Edit CSS filters - Firefox Developer Tools
once you have selected the effect you want to add, click the plus sign (+) to the right of the dropdown list.
Examine and edit the box model - Firefox Developer Tools
lement button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page: it's also shown overlaid if you hover over an element's markup in the html pane: if the element is inline and is split over multiple line boxes, the highlighter shows each individual line box that together make up the element: the box model view when an element's selected, you can get a detailed look at the box model in the box model view: if you hover over a value, you'll see a tooltip telling you which rule the value comes from: if you hover over part of the box model in the box model view, the corresponding part of the page is highlighted: editing the box model you can also edit the values in the box model view, and see the results immediately in the ...
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
when you select the checkbox for the subgrid, the lines for the parent grid are displayed also displayed; if the checkbox for the parent grid is unselected, then its lines are translucent.
Waterfall - Firefox Developer Tools
when a marker is selected you'll see more information about it in a sidebar on the right.
Cookies - Firefox Developer Tools
delete <cookie name>.<domain> - deletes the selected cookie delete all from <domain> - deletes all cookies from the selected domain.
Local Storage / Session Storage - Firefox Developer Tools
when an origin corresponding to local storage or session storage is selected within the storage inspector, the names and values of all the items corresponding to local storage or session storage will be listed in a table.
Web Console Helpers - Firefox Developer Tools
in the network monitor, the string now appears and is selected in the request blocking sidebar.
Rich output - Firefox Developer Tools
table", datecreated: 1552404533790 } ​ length: 4 ​ <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the inspector with that node selected.
Split console - Firefox Developer Tools
as usual, $0 works as a shorthand for the element currently selected in the inspector: when you use the split console with the debugger, the console's scope is the currently executing stack frame.
AddressErrors - Web APIs
: ["credit", "debit"] } } ]; let defaultpaymentdetails = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; supportedhandlers describes the supported payment handlers and the details for those.
BasicCardRequest - Web APIs
'diners', 'discover', 'mir', 'unionpay'] } }]; var details = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
BasicCardResponse - Web APIs
supportedtypes: ['credit', 'debit'] } }]; var details = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
Cache.match() - Web APIs
WebAPICachematch
it uses a cache to supply selected data when a request fails.
CryptoKeyPair - Web APIs
a cryptokeypair object can be obtained using subtlecrypto.generatekey(), when the selected algorithm is one of the asymmetric algorithms: rsassa-pkcs1-v1_5, rsa-pss, rsa-oaep, ecdsa, or ecdh.
DOMParser - Web APIs
WebAPIDOMParser
there are three different results possible, selected by the mime type given.
DataTransfer - Web APIs
properties standard properties datatransfer.dropeffect gets the type of drag-and-drop operation currently selected or sets the operation to a new type.
DataTransferItem - Web APIs
datatransferitem.webkitgetasentry() returns an object based on filesystementry representing the selected file's entry in its file system.
Document: drag event - Web APIs
ventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it if (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.
Document.execCommand() - Web APIs
unlink removes the anchor element from a selected hyperlink.
Document.getElementsByClassName() - Web APIs
only elements with all of the classnames specified are selected.
Document.queryCommandState() - Web APIs
example html <div contenteditable="true">select a part of this text!</div> <button onclick="makebold();">test the state of the 'bold' command</button> javascript function makebold() { var state = document.querycommandstate("bold"); switch (state) { case true: alert("the bold formatting will be removed from the selected text."); break; case false: alert("the selected text will be displayed in bold."); break; case null: alert("the state of the 'bold' command is indeterminable."); break; } document.execcommand('bold'); } result specifications specification status comment execcommand ...
DocumentOrShadowRoot.activeElement - Web APIs
morbi sed euismod diam.</textarea> </form> <p>active element id: <b id="output-element"></b></p> <p>selected text: <b id="output-text"></b></p> javascript function onmouseup(e) { const activetextarea = document.activeelement; const selection = activetextarea.value.substring( activetextarea.selectionstart, activetextarea.selectionend ); const outputelement = document.getelementbyid('output-element'); const outputtext = document.getelementbyid('output-text'); outputelement.innerhtml = a...
DocumentOrShadowRoot - Web APIs
documentorshadowroot.getselection() returns a selection object representing the range of text selected by the user, or the current position of the caret.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
the text node would be selected instead of the element you want to affect.
Element.closest() - Web APIs
WebAPIElementclosest
ex: p:hover, .toto + q return value closestelement is the element which is the closest ancestor of the selected element.
Element.insertAdjacentElement() - Web APIs
when one is clicked, it becomes selected and you can then press the insert before and insert after buttons to insert new divs before or after the selected element using insertadjacentelement().
Element.matches() - Web APIs
WebAPIElementmatches
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.
File.getAsDataURL() - Web APIs
WebAPIFilegetAsDataURL
fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // array with acceptable file types var accept = ["image/png"]; // img is a htmlimgelement: <img id="myimg"> var img = document.getelementbyid("myimg"); // if we accept the first selected file type if (accept.indexof(files[0].mediatype) > -1) { // display the image // same as <img src="data:image/png,<imagedata>"> img.src = files[0].getasdataurl(); } specification not part of any specification.
File.name - Web APIs
WebAPIFilename
example <input type="file" multiple onchange="processselectedfiles(this)"> function processselectedfiles(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert("filename " + files[i].name); } } try the results out below: specifications specification status comment file apithe definition of 'name' in that specification.
FileReader: abort event - Web APIs
eview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } reader.abort(); } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: load event - Web APIs
eview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadend event - Web APIs
eview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadstart event - Web APIs
eview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: progress event - Web APIs
eview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
Introduction to the File and Directory Entries API - Web APIs
sample use cases the following are just a few examples of how you can use the file and directory entries api: apps with persistent uploader when a file or directory is selected for upload, you can copy the file into a local sandbox and upload a chunk at a time.
FormData() - Web APIs
WebAPIFormDataFormData
those with a name, not disabled and checked (radio buttons and checkboxes) or selected (one or more options within a select).
GlobalEventHandlers.onselectionchange - Web APIs
the selectionchange event fires when the text selected on a webpage changes.
GlobalEventHandlers - Web APIs
when the text selected on a web page changes.
HTMLImageElement.crossOrigin - Web APIs
if crossorigin is an empty string (""), the anonymous mode is selected.
HTMLImageElement.currentSrc - Web APIs
currentsrc lets you determine which image from the set of provided images was selected by the browser.
HTMLInputElement.mozGetFileNameArray() - Web APIs
the htmlinputelement.mozgetfilenamearray() method returns an array of the names of the files that were selected by the user on an html input element.
HTMLInputElement.mozSetFileNameArray() - Web APIs
the htmlinputelement.mozsetfilenamearray() method sets the names of the files that selected on an html input element.
HTMLInputElement.setRangeText() - Web APIs
the newly inserted text will be highlighted (selected) afterwards.
HTMLMediaElement.load() - Web APIs
once media has been selected and loading is ready to begin, the loadstart event is delivered.
HTMLMediaElement.networkState - Web APIs
network_idle 1 htmlmediaelement is active and has selected a resource, but is not using the network.
IDBObjectStore.get() - Web APIs
the get() method of the idbobjectstore interface returns an idbrequest object, and, in a separate thread, returns the object store selected by the specified key.
IDBObjectStore.getKey() - Web APIs
the getkey() method of the idbobjectstore interface returns an idbrequest object, and, in a separate thread, returns the key selected by the specified query.
Browser storage limits and eviction criteria - Web APIs
this will only be evicted if the user chooses to (for example, in firefox you can choose to delete all stored data or only stored data from selected origins by going to preferences and using the options under privacy & security > cookies & site data).
KeyboardEvent.key - Web APIs
WebAPIKeyboardEventkey
when they occur, the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).
MediaRecorder - Web APIs
properties mediarecorder.mimetype read only returns the mime type that was selected as the recording container for the mediarecorder object when it was created.
MediaSource - Web APIs
mediasource.activesourcebuffers read only returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within mediasource.sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.
MediaStreamAudioSourceNode - Web APIs
the number of channels output by the node matches the number of tracks found in the selected audio track.
MediaTrackConstraints.cursor - Web APIs
usage notes you can check the setting selected by the user agent after the display media has been created by getdisplaymedia() by calling getsettings() on the display media's video mediastreamtrack, then checking the value of the returned mediatracksettings object's cursor object.
MediaTrackConstraints.displaySurface - Web APIs
usage notes you can check the setting selected by the user agent after the display media has been created by getdisplaymedia() by calling getsettings() on the display media's video mediastreamtrack, then checking the value of the returned mediatracksettings object's displaysurface object.
MediaTrackSettings.aspectRatio - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.aspectratio property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.autoGainControl - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.autogaincontrol property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.channelCount - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.channelcount property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.deviceId - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.deviceid property you provided when calling either getusermedia().
MediaTrackSettings.echoCancellation - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.echocancellation property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.facingMode - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.facingmode property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.frameRate - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.framerate property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.groupId - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.groupid property you provided when calling either getusermedia().
MediaTrackSettings.height - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.height property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.latency - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.latency property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.logicalSurface - Web APIs
the most common scenario in which a display surface may be a logical one is if the selected surface contains the entire content area of a window which is too large to display onscreen at once.
MediaTrackSettings.noiseSuppression - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.noisesuppression property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.sampleRate - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.samplerate property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.sampleSize - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.samplesize property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.volume - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.volume property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
MediaTrackSettings.width - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.width property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
Using the Media Capabilities API - Web APIs
<option>video/mp4; codecs=avc1.420034</option> <option>video/ogg; codecs=theora</option> <option>invalid</option> </select> </li> <li> <label for="size">select a size</label> <select id="size"> <option>7680x4320</option> <option>3840x2160</option> <option>2560x1440</option> <option>1920x1080</option> <option>1280x720</option> <option selected>800x600</option> <option>640x480</option> <option>320x240</option> <option value=" x ">none</option> </select> </li> <li> <label for="framerate">select a framerate</label> <select id="framerate"> <option>60</option> <option>50</option> <option>30</option> <option>24</option> <option selected>15</option> </select> </li> <li>...
Capabilities, constraints, and settings - Web APIs
the actual settings the browser selected and is using are shown in the boxes on the right.
Notification.Notification() - Web APIs
the action's name is sent to the service worker notification handler to let it know the action was selected by the user.
PaymentAddress - Web APIs
portedmethods: "basic-card", }, ]; const details = { total: { label: "donation", amount: { currency: "usd", value: "65.00" } }, displayitems: [ { label: "original donation amount", amount: { currency: "usd", value: "65.00" }, }, ], shippingoptions: [ { id: "standard", label: "standard shipping", amount: { currency: "usd", value: "0.00" }, selected: true, }, ], }; const options = { requestshipping: true }; async function dopaymentrequest() { const request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
PaymentDetailsBase - Web APIs
for example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").
PaymentDetailsUpdate.error - Web APIs
this message can be used to explain to the user why they cannot submit their payment as currently specified—whether that's because the selected products cannot be shipped to their region or because their address is not served by any of the shipping companies you use.
PaymentDetailsUpdate - Web APIs
for example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").
PaymentMethodChangeEvent.methodDetails - Web APIs
example this example uses the paymentmethodchange event to watch for changes to the payment method selected for apple pay, in order to compute a discount if the user chooses to use a visa card as their payment method.
PaymentRequest.onshippingoptionchange - Web APIs
var request = new paymentrequest(supportedinstruments, details, options); // when user selects a shipping address request.addeventlistener('shippingaddresschange', e => { e.updatewith(((details, addr) => { var shippingoption = { id: '', label: '', amount: { currency: 'usd', value: '0.00' }, selected: true }; // shipping to us is supported if (addr.country === 'us') { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '0.00'; details.total.amount.value = '55.00'; // shipping to jp is supported } else if (addr.country === 'jp') { shippingoption.id = 'jp'; shippingoption.label = 'inter...
PaymentRequest.shippingAddress - Web APIs
}).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); function updatedetails(details, shippingaddress, resolve) { if (shippingaddress.country === 'us') { var shippingoption = { id: '', label: '', amount: {currency: 'usd', value: '0.00'}, selected: true }; if (shippingaddress.region === 'mo') { shippingoption.id = 'mo'; shippingoption.label = 'free shipping in missouri'; details.total.amount.value = '55.00'; } else { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '5.00'; details.total.amount.value = '60.00'; } details.di...
PaymentRequest.show() - Web APIs
// paymentresponse.methodname contains the selected payment method // paymentresponse.details contains a payment method specific response await response.complete("success"); } catch (err) { console.error("uh oh, something bad happened", err.message); } } the following example shows how to update the payment sheet as it's being presented to the end-user.
PaymentRequest - Web APIs
paymentrequest.shippingoption read only secure context returns the identifier of the selected shipping option.
PaymentRequestEvent() - Web APIs
options optional options are as follows: instrumentkey: a paymentinstrument object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument.
PaymentRequestEvent.instrumentKey - Web APIs
the instrumentkey read-only property of the paymentrequestevent interface returns a paymentinstrument object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument.
PaymentRequestEvent - Web APIs
properties instrumentkeyread only returns a paymentinstrument object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument.
PaymentRequestUpdateEvent.updateWith() - Web APIs
for example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!").
PaymentResponse.methodName - Web APIs
the methodname read-only property of the paymentresponse interface returns a string uniquely identifying the payment handler selected by the user.
PaymentResponse.shippingAddress - Web APIs
}).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); function updatedetails(details, shippingaddress, resolve) { if (shippingaddress.country === 'us') { var shippingoption = { id: '', label: '', amount: {currency: 'usd', value: '0.00'}, selected: true }; if (shippingaddress.region === 'mo') { shippingoption.id = 'mo'; shippingoption.label = 'free shipping in missouri'; details.total.amount.value = '55.00'; } else { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '5.00'; details.total.amount.value = '60.00'; } details.di...
RTCIceCandidate.protocol - Web APIs
these values are defined by the enumerated type rtciceprotocol: tcp the candidate, if selected, would use tcp as the transport protocol for its data.
RTCIceCandidate.relatedAddress - Web APIs
for relay candidates, the related address and port are set to the mapped address selected by the turn server.
RTCIceCandidate.relatedPort - Web APIs
for relay candidates, the related address and port provide the mapped address selected by the turn server.
RTCIceCandidatePairStats.nominated - Web APIs
note: if more than one candidate pair are nominated at the same time, the one whose priority is higher will be selected for use.
RTCIceCandidateStats.address - Web APIs
when a domain name is specified, the first ip address selected for that address is used, even if the domain name maps to multiple ip addresses.
RTCIceCandidateStats.protocol - Web APIs
syntax protocol = rtcicecandidatestats.protocol; value the value is one of the members of the rtciceprotocol enumerated string type: tcp the candidate, if selected, would use tcp as the transport protocol for its data.
RTCIceProtocol - Web APIs
values tcp the candidate, if selected, would use tcp as the transport protocol for its data.
RTCIceServer - Web APIs
every server in the list will be contacted and tried out before one is selected to be used for negotiation.
RTCIceTransport.getLocalCandidates() - Web APIs
to find the best match found so far, call rtcicetransport.getselectedcandidatepair().
RTCIceTransport.getRemoteCandidates() - Web APIs
to find the best match found so far, call rtcicetransport.getselectedcandidatepair().
RTCRtpSender.replaceTrack() - Web APIs
examples switching video cameras // example to change video camera, suppose selected value saved into window.selectedcamera navigator.mediadevices .getusermedia({ video: { deviceid: { exact: window.selectedcamera } } }) .then(function(stream) { let videotrack = stream.getvideotracks()[0]; pcs.foreach(function(pc) { var sender = pc.getsenders().find(function(s) { return s.track.kind == videotrack.kind; }); consol...
Range.cloneContents() - Web APIs
partially selected nodes include the parent tags necessary to make the document fragment valid.
Range.commonAncestorContainer - Web APIs
the listener gets the common ancestors of each piece of selected text, and triggers an animation to highlight them.
Range.compareNode() - Web APIs
WebAPIRangecompareNode
the node is completely selected by the range.
Range.createContextualFragment() - Web APIs
the range.createcontextualfragment() method returns a documentfragment by invoking the html fragment parsing algorithm or the xml fragment parsing algorithm with the start of the range (the parent of the selected node) as the context node.
Range.getBoundingClientRect() - Web APIs
the bounding client rectangle contains everything selected in the range.</p> css #highlight { background: yellow; position: absolute; z-index: -1; } p { width: 200px; } javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); const clientrect = range.getboundingclientrect(); const highlight = document.getelementbyid...
Range.selectNodeContents() - Web APIs
syntax range.selectnodecontents(referencenode); parameters referencenode the node whose contents will be selected within a range.
Range.setStart() - Web APIs
WebAPIRangesetStart
the selected range is then highlighted using range.surroundcontents().
Range.surroundContents() - Web APIs
that is, unlike the alternative above, if there are partially selected nodes, they will not be cloned and instead the operation will fail.
RsaPssParams - Web APIs
rfc 3447 says that "typical salt lengths" are either 0 or the length of the output of the digest algorithm that was selected when this key was generated.
SVGSVGElement - Web APIs
svgsvgelement.deselectall() unselects any selected objects, including any selections of text strings and type-in bars.
Screen.lockOrientation() - Web APIs
passing several strings lets the screen rotate only in the selected orientations.
Screen Capture API - Web APIs
similar to getusermedia(), this method creates a promise that resolves with a mediastream containing the display area selected by the user, in a format that matches the specified options.
Selection.containsNode() - Web APIs
example check for selection this snippet checks whether anything inside the body element is selected.
Selection.getRangeAt() - Web APIs
the selection.getrangeat() method returns a range object representing one of the ranges currently selected.
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.
Selection.removeRange() - Web APIs
return value undefined examples /* programmaticaly, more than one range can be selected.
Selection.selectAllChildren() - Web APIs
syntax sel.selectallchildren(parentnode) parameters parentnode all children of parentnode will be selected.
ShadowRoot - Web APIs
documentorshadowroot.getselection() returns a selection object representing the range of text selected by the user, or the current position of the caret.
SpeechSynthesis.speak() - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speak()' in that specification.
SpeechSynthesisErrorEvent.error - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.error('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications ...
SpeechSynthesisErrorEvent - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications ...
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisutterance()' in that specification.
SpeechSynthesisUtterance.lang - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'lang' in that specificatio...
SpeechSynthesisUtterance.onboundary - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifica...
SpeechSynthesisUtterance.onend - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifica...
SpeechSynthesisUtterance.onerror - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications ...
SpeechSynthesisUtterance.onmark - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } inputtxt.blur(); } specifications specification status comm...
SpeechSynthesisUtterance.onpause - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications spec...
SpeechSynthesisUtterance.onresume - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications sp...
SpeechSynthesisUtterance.onstart - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } inputtxt.blur(); } specifications sp...
SpeechSynthesisUtterance.pitch - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'pitch' in that specification.
SpeechSynthesisUtterance.rate - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.rate = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'rate' in that specification.
SpeechSynthesisUtterance.text - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } console.log(utterthis.text); synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'text' in that specifica...
SpeechSynthesisUtterance.voice - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'voice' in that specification.
SpeechSynthesisUtterance.volume - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'volume' in that specificatio...
SpeechSynthesisUtterance - Web APIs
inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), use the constructor to create a new utterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
SpeechSynthesisVoice - Web APIs
ute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.
SubmitEvent.submitter - Web APIs
let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
SubmitEvent - Web APIs
let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
USB.requestDevice() - Web APIs
WebAPIUSBrequestDevice
only the selected device is passed to then().
USBDevice.configuration - Web APIs
the configuration read only property of the usbdevice interface returns a usbconfiguration object for the currently selected interface for a paired usb device.
USBDevice.selectConfiguration() - Web APIs
the selectconfiguration() method of the usbdevice interface returns a promise that resolves when the specified configuration is selected.
USBInterface - Web APIs
usbinterface.alternateread only returns the currently selected alternative configuration of this interface.
Using DTMF with WebRTC - Web APIs
once the track is selected, you can obtain from its rtcrtpsender the rtcdtmfsender object you'll use for sending dtmf.
WebRTC API - Web APIs
selectedcandidatepairchange the currently-selected pair of ice candidates has changed for the rtcicetransport on which the event is fired.
WebSocket.extensions - Web APIs
the websocket.extensions read-only property returns the extensions selected by the server.
WebSocket.protocol - Web APIs
the websocket.protocol read-only property returns the name of the sub-protocol the server selected; this will be one of the strings specified in the protocols parameter when creating the websocket object, or the empty string if no connection is established.
Writing WebSocket client applications - Web APIs
if you want to open a connection and are flexible about the protocols you support, you can specify an array of protocols: var examplesocket = new websocket("wss://www.example.com/socketserver", ["protocolone", "protocoltwo"]); once the connection is established (that is, readystate is open), examplesocket.protocol will tell you which protocol the server selected.
Window.confirm() - Web APIs
WebAPIWindowconfirm
return value a boolean indicating whether ok (true) or cancel (false) was selected.
Window.content - Web APIs
WebAPIWindowcontent
in unprivileged content (webpages), content is normally equivalent to top (except in the case of a webpage loaded in a sidebar, content still refers to the window of the currently selected tab).
XRReferenceSpace - Web APIs
the tracking behavior is defined by the selected reference space type.
Using the alert role - Accessibility
the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the form with less than 3 checkboxes selected: document.getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making an element with an alert role visible if an element already has role="alert" and is initially hidden using css, making it visible will cause the alert to fire as if it was just added to the page.
Using ARIA: Roles, states, and properties - Accessibility
status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage aria-flowto aria-labell...
ARIA: tabpanel role - Accessibility
<div role="tablist"> <div role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id" tabindex="0">tab label</div> accessibility concerns optionally, warn of any potential accessibility concerns that exist with using this property, and how to work around them.
Accessibility: What users can do to browse more safely - Accessibility
in the screenshot below, you can see an example of windows 10 accessibility settings allowing for color filters to be selected.
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.
Accessibility Information for Web Authors - Accessibility
the output data report is displayed in a clear and well structured table where each and all checkpoints are identified and described (along with an helpful clickable link to the related reference guideline) into logical groups and according to measurable results: passed, warning, failed for automated verification, warning for manual verification, not selected, not available, not related, etc.
Mobile accessibility checklist - Accessibility
however, for other custom controls state changes must be provided via aria states such as aria-checked, aria-disabled, aria-selected, aria-expanded, and aria-pressed.
Understandable - Accessibility
suggesting alternatives when the user is choosing a user name and has selected one that is already taken), unless doing so would cause a security issue (e.g.
::-moz-color-swatch - CSS: Cascading Style Sheets
the ::-moz-color-swatch css pseudo-element is a mozilla extension that represents the color selected in an <input> of type="color".
::-moz-range-progress - CSS: Cascading Style Sheets
this portion corresponds to values lower than the value currently selected by the thumb (i.e., virtual knob).
::after (:after) - CSS: Cascading Style Sheets
WebCSS::after
in css, ::after creates a pseudo-element that is the last child of the selected element.
::before (:before) - CSS: Cascading Style Sheets
WebCSS::before
in css, ::before creates a pseudo-element that is the first child of the selected element.
::cue-region - CSS: Cascading Style Sheets
the ::cue-region css pseudo-element matches webvtt cues within a selected element.
::cue - CSS: Cascading Style Sheets
WebCSS::cue
the ::cue css pseudo-element matches webvtt cues within a selected element.
:disabled - CSS: Cascading Style Sheets
WebCSS:disabled
an element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus.
:enabled - CSS: Cascading Style Sheets
WebCSS:enabled
an element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus.
:first-of-type - CSS: Cascading Style Sheets
/* selects any <p> that is the first element of its type among its siblings */ p:first-of-type { color: red; } note: as originally defined, the selected element had to have a parent.
:invalid - CSS: Cascading Style Sheets
WebCSS:invalid
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 notes radio buttons if any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected.
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
WebCSS:is
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.
:last-of-type - CSS: Cascading Style Sheets
/* selects any <p> that is the last element of its type among its siblings */ p:last-of-type { color: lime; } note: as originally defined, the selected element had to have a parent.
:not() - CSS: Cascading Style Sheets
WebCSS:not
since it prevents specific items from being selected, it is known as the negation pseudo-class.
:only-child - CSS: Cascading Style Sheets
/* selects each <p>, but only if it is the */ /* only child of its parent */ p:only-child { background-color: lime; } note: as originally defined, the selected element had to have a parent.
:only-of-type - CSS: Cascading Style Sheets
/* selects each <p>, but only if it is the */ /* only <p> element inside its parent */ p:only-of-type { background-color: lime; } note: as originally defined, the selected element had to have a parent.
:target - CSS: Cascading Style Sheets
WebCSS:target
/* selects an element with an id matching the current url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
:where() - CSS: Cascading Style Sheets
WebCSS:where
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.
Color picker tool - CSS: Cascading Style Sheets
in addition, based on the currently-selected color, a palette for hsl and hsv, as well as alpha, is generated.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
i have targeted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: center.
Overview of CSS Shapes - CSS: Cascading Style Sheets
in the example below, if you change the threshold the path that the shape takes changes based on the level of opacity you have selected.
Column combinator - CSS: Cascading Style Sheets
/* table cells that belong to the "selected" column */ col.selected || td { background: gray; } syntax column-selector || cell-selector { /* style properties */ } examples html <table border="1"> <colgroup> <col span="2"/> <col class="selected"/> </colgroup> <tbody> <tr> <td>a <td>b <td>c </tr> <tr> <td colspan="2">d</td> <td>e</td> </tr> <tr> <td>f</td> <td colspan="2">g</td> </tr> </tbody> </table> css col.selected || td { background: gray; color: white; font-weight: bold; } result specifications s...
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.
ID selectors - CSS: Cascading Style Sheets
in order for the element to be selected, its id attribute must match exactly the value given in the selector.
Using media queries - CSS: Cascading Style Sheets
only the only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles.
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).
Pseudo-elements - CSS: Cascading Style Sheets
a css pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
align-content - CSS: Cascading Style Sheets
> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">align-content: </label> <select id="values"> <option value="normal">normal</option> <option value="stretch">stretch</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center" selected>center</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="start">start</option> <option value="end">end</option> <option value="left">left</option> <option value="right">right</option> <option value="baseline">baseline</option> <opti...
align-items - CSS: Cascading Style Sheets
splay">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">align-items: </label> <select id="values"> <option value="normal">normal</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center" selected>center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> <option value="start">start</option> <option value="end">end</option> <option value="self-start">self-start</option> <option value="self-end">self-end</option> <option value="left">left</option> <option value="right">right</option> <option value="first baseline...
attr() - CSS: Cascading Style Sheets
WebCSSattr
the attr() css function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet.
<blend-mode> - CSS: Cascading Style Sheets
html <div></div> <p>choose a blend-mode:</p> <select> <option selected>normal</option> <option>multiply</option> <option>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color<...
clip-path - CSS: Cascading Style Sheets
WebCSSclip-path
"cross"> <rect y="110" x="137" width="90" height="90"/> <rect x="0" y="110" width="90" height="90"/> <rect x="137" y="0" width="90" height="90"/> <rect x="0" y="0" width="90" height="90"/> </clippath> </defs> </svg> <select id="clippath"> <option value="none">none</option> <option value="circle(100px at 110px 100px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.getelementbyi...
display - CSS: Cascading Style Sheets
WebCSSdisplay
html <article class="container"> <span>first</span> <span>second</span> <span>third</span> </article> <article class="container"> <span>first</span> <span>second</span> <span>third</span> </article> <div> <label for="display">choose a display value:</label> <select id="display"> <option selected>block</option> <option>inline</option> <option>inline-block</option> <option>none</option> <option>flex</option> <option>inline-flex</option> <option>grid</option> <option>inline-grid</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; padding-top: 10px;...
<easing-function> - CSS: Cascading Style Sheets
html <div> <div></div> </div> <ul> <li> <button class="animation-button">start animation</button> </li> <li> <label for="easing-select">choose an easing function:</label> <select id="easing-select"> <option selected>linear</option> <option>ease</option> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > d...
<filter-function> - CSS: Cascading Style Sheets
html <div></div> <ul> <li> <label for="filter-select">choose a filter function:</label> <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>cu...
font-family - CSS: Cascading Style Sheets
the font-family css property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
font-feature-settings - CSS: Cascading Style Sheets
stylistic alternates), the value implies a particular glyph to be selected; for boolean values, it is a switch.
font-stretch - CSS: Cascading Style Sheets
font face selection the face selected for a given value of font-stretch depends on the faces supported by the font in question.
inherit - CSS: Cascading Style Sheets
WebCSSinherit
examples exclude selected elements from a rule /* make second-level headers green */ h2 { color: green; } /* ...but leave those in the sidebar alone so they use their parent's color */ #sidebar h2 { color: inherit; } in this example the h2 elements inside the sidebar might be different colors.
justify-content - CSS: Cascading Style Sheets
<option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="left">left</option> <option value="right">right</option> <option value="baseline">baseline</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="space-between" selected>space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> </select> javascript var justifycontent = document.getelementbyid("justifycontent"); justifycontent.addeventlistener("change", function (evt) { document.getelementbyid("container").style.justifycontent = evt.target.va...
mask-clip - CSS: Cascading Style Sheets
WebCSSmask-clip
20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> <option value="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("change", function (evt) { document.getelementb...
mask-origin - CSS: Cascading Style Sheets
; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </select> javascript var origin = document.getelementbyid("origin"); origin.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskorigin = evt.target.va...
mask-position - CSS: Cascading Style Sheets
/mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.m...
mask-repeat - CSS: Cascading Style Sheets
ight: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskrepeat = evt.target.value; }); result multiple mask image suppo...
mask-size - CSS: Cascading Style Sheets
WebCSSmask-size
-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.masksize = evt.target.value; }); result specifications specificati...
object-position - CSS: Cascading Style Sheets
the object-position css property specifies the alignment of the selected replaced element's contents within the element's box.
overflow-anchor - CSS: Cascading Style Sheets
none the element won't be selected as a potential anchor.
quotes - CSS: Cascading Style Sheets
WebCSSquotes
auto appropriate quote marks will be used for whatever language value is set on the selected elements (i.e.
<transform-function> - CSS: Cascading Style Sheets
html <main> <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="select-form"> <label>select a transform function</label> <select> <option selected>choose a function</option> <option>rotate(360deg)</option> <option>rotatex(360deg)</option> <option>rotatey(360deg)</option> <option>rotatez(360deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option> <option>scale(1.5)</option> <option>scalex(1.5)</option> <option>scaley(1.5)</option> <option>scalez(1.5)</option> <option>scale3d(1, 1.5, ...
HTML5 - Developer guides
WebGuideHTMLHTML5
using files from web applications support for the new html5 file api has been added to gecko, making it possible for web applications to access local files selected by the user.
HTML attribute reference - HTML: Hypertext Markup Language
scoped <style> selected <option> defines a value which will be selected on page load.
<body>: The Document Body element - HTML: Hypertext Markup Language
WebHTMLElementbody
alink color of text for hyperlinks when selected.
<command>: The HTML Command element - HTML: Hypertext Markup Language
WebHTMLElementcommand
checked indicates whether the command is selected.
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
the selected source size affects the intrinsic size of the image (the image’s display size if no css styling is applied).
<input type="tel"> - HTML: Hypertext Markup Language
WebHTMLElementinputtel
<form> <div> <label for="country">choose your country:</label> <select id="country" name="country"> <option>uk</option> <option selected>us</option> <option>germany</option> </select> </div> <div> <p>enter your telephone number: </p> <span class="areadiv"> <input id="areano" name="areano" type="tel" required placeholder="area code" pattern="[0-9]{3}" aria-label="area code"> <span class="validity"></span> </span> <span class="number1div"> <input id="number1" ...
<input type="week"> - HTML: Hypertext Markup Language
WebHTMLElementinputweek
class="validity"></span> </div> <p class="fallbacklabel">what week would you like to start?</p> <div class="fallbackweekpicker"> <div> <span> <label for="week">week:</label> <select id="fallbackweek" name="week"> </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> <option value="2017" selected>2017</option> <option value="2018">2018</option> </select> </span> </div> </div> </form> the week values are dynamically generated by the javascript code below.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
WebHTMLElementkbd
then, inside that, both the menu and menu item names are contained within both <kbd> and <samp>, indicating an input which is selected from a screen widget.
<keygen> - HTML: Hypertext Markup Language
WebHTMLElementkeygen
when the submit button is pressed, a key pair of the selected size is generated.
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementnextid
html "1.m" - version 1 (second release) in the next published draft of html, <nextid> <nextid> can be individually deselected for display with a simple sgml command.
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.
Want-Digest - HTTP
ant-digest header, listing the algorithms that it does support: request: get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-256, sha-512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
HTTP headers - HTTP
WebHTTPHeaders
content-dpr a number that indicates the ratio between physical pixels over css pixels of the selected image response.
HTTP Index - HTTP
WebHTTPIndex
20 cross-origin resource sharing (cors) ajax, cors, cross-origin resource sharing, fetch, fetch api, http, http access controls, same-origin policy, security, xmlhttprequest, l10n:priority cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.
POST - HTTP
WebHTTPMethodsPOST
in this case, the content type is selected by putting the adequate string in the enctype attribute of the <form> element or the formenctype attribute of the <input> or <button> elements: application/x-www-form-urlencoded: the keys and values are encoded in key-value tuples separated by '&', with a '=' between the key and the value.
Array.prototype.map() - JavaScript
in this case, we return all the selected options' values on the screen: let elems = document.queryselectorall('select option:checked') let values = array.prototype.map.call(elems, function(obj) { return obj.value }) an easier way would be the array.from() method.
Array.prototype.slice() - JavaScript
the slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array.
Intl.DateTimeFormat() constructor - JavaScript
two algorithms are available for this negotiation and selected by the formatmatcher property: a fully specified "basic" algorithm and an implementation-dependent "best fit" algorithm.
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
weekday era year month day hour minute second timezonename the values resulting from format matching between the corresponding properties in the options argument and the available combinations and representations for date-time formatting in the selected locale.
Intl.NumberFormat() constructor - JavaScript
a subset of units from the full list was selected for use in ecmascript.
Math.min() - JavaScript
zero or more numbers among which the lowest value will be selected and returned.
switch - JavaScript
(if multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.) if no matching case clause is found, the program looks for the optional default clause, and if found, transfers control to that clause, executing the associated statements.
<maction> - MathML
toggle: when there is a click on the subexpression, the rendering alternates the display of selected subexpressions.
Media container formats (file types) - Web media technologies
this can be used to offer various versions of a video that can be selected depending on bandwidth availability, but in our case, we'll use it to offer format options.
Web video codec guide - Web media technologies
during encoding, a value is selected for bppmaxkb, and then the video cannot exceed this value for each frame.
Using images in HTML - Web media technologies
WebMediaimages
object-position the object-position css property specifies the alignment of content in a selected replaced element within the element's box.
Progressive web app structure - Progressive web apps (PWAs)
he next code block requests permission for notifications when a button is clicked: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); the last block creates notifications that display a randomly-selected item from the games list: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+games[randomitem].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(n...
The building blocks of responsive design - Progressive web apps (PWAs)
the markup is very simple: <x-deck selected-index="0"> <x-card> … </x-card> <x-card> … </x-card> <x-card> … </x-card> </x-deck> note: these weird x- elements may be unfamiliar; they are part of brick, mozilla's ui element library for mobile web apps.
<a> - SVG: Scalable Vector Graphics
WebSVGElementa
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <i...
<circle> - SVG: Scalable Vector Graphics
WebSVGElementcircle
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of...
<ellipse> - SVG: Scalable Vector Graphics
WebSVGElementellipse
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of...
<foreignObject> - SVG: Scalable Vector Graphics
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<foreignobject>' in that specification.
<g> - SVG: Scalable Vector Graphics
WebSVGElementg
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>,...
<line> - SVG: Scalable Vector Graphics
WebSVGElementline
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of...
<marker> - SVG: Scalable Vector Graphics
WebSVGElementmarker
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <i...
<path> - SVG: Scalable Vector Graphics
WebSVGElementpath
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment svg pathsthe definition of '<path>' in that specification.
<polygon> - SVG: Scalable Vector Graphics
WebSVGElementpolygon
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of...
<polyline> - SVG: Scalable Vector Graphics
WebSVGElementpolyline
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of...
<rect> - SVG: Scalable Vector Graphics
WebSVGElementrect
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of...
<svg> - SVG: Scalable Vector Graphics
WebSVGElementsvg
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>,...
<symbol> - SVG: Scalable Vector Graphics
WebSVGElementsymbol
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>,...
<text> - SVG: Scalable Vector Graphics
WebSVGElementtext
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:animation elementsdescriptive elementstext content elements<a> specifications specification status comment scalable vector grap...
<textPath> - SVG: Scalable Vector Graphics
WebSVGElementtextPath
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications spe...
<tspan> - SVG: Scalable Vector Graphics
WebSVGElementtspan
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications specification status comment...
<use> - SVG: Scalable Vector Graphics
WebSVGElementuse
e, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment ...
Scripting - SVG: Scalable Vector Graphics
WebSVGScripting
preventing default behavior in event code when writing drag and drop code, sometimes you'll find that text on the page gets accidently selected while dragging.
Transport Layer Security - Web security
the security of any connection using transport layer security (tls) is heavily dependent upon the cipher suites and security parameters selected.
<xsl:apply-templates> - XSLT: Extensible Stylesheet Language Transformations
if this attribute is not set, all child nodes of the current node are selected.
<xsl:sort> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementsort
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:sort> element defines a sort key for nodes selected by <xsl:apply-templates> or <xsl:for-each> and determines the order in which they are processed.
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
45 <xsl:sort> element, reference, xslt, sort the <xsl:sort> element defines a sort key for nodes selected by <xsl:apply-templates> or <xsl:for-each> and determines the order in which they are processed.