Useful string methods - Learn web development
'merry christmas my love', 'a happy christmas to all the family', 'you\'re all i want for christmas', 'get well soon']; for (let i = 0; i < greetings.length; i++) { let input = greetings[i]; // your conditional test needs to go inside the parentheses // in the line below, replacing what's currently there if (greetings[i]) { let listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; ...
... \'merry christmas my love\',' + '\n \'a happy christmas to all the family\',' + '\n \'you\\\'re all i want for christmas\',' + '\n \'get well soon\'];' + '\n' + '\nfor (let i = 0; i < greetings.length; i++) {' + '\n let input = greetings[i];' + '\n if (greetings[i].indexof(\'christmas\') !== -1) {' + '\n let result = input;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n }' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (...
... the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 250px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let cities = ['london', 'manchester', 'birmingham', 'liverpool']; for (let i = 0; i < cities.length; i++) { let input = cities[i]; // write your code just below here let result = input; let listitem = document.createelement('li'); listitem.textcontent = result; list.appendchild(listitem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width...
...And 3 more matches

Index - Archive of obsolete content
left xul attributes, xul reference no summary! 923 lightweightthemes lightweight themes, xul attributes, xul reference no summary! 924 lightweightthemesfooter no summary! 925 linkedpanel xul attributes, xul reference no summary! 926 listcell.type xul attributes, xul reference no summary! 927 listitem.type xul attributes, xul reference no summary! 928 matchcaseaccesskey no summary! 929 max xul attributes, xul reference no summary! 930 maxheight xul attributes, xul reference no summary! 931 maxlength xul attributes, xul reference no summary! 932 maxpos xul attributes, xul reference ...
... 1534 radiogroup xul properties, xul reference no summary! 1535 readonly xul properties, xul reference no summary! 1536 ref xul properties, xul reference no summary! 1537 resource xul properties, xul reference no summary! 1538 resultspopup xul properties, xul reference no summary! 1539 richlistitem.label xul properties, xul reference no summary! 1540 scrollboxobject xul properties, xul reference no summary! 1541 scrollincrement xul properties, xul reference no summary! 1542 searchbutton xul properties, xul reference no summary! 1543 searchcount xul properties, xul reference no summary! 1544 ...
...ve xul reference, xul_style_classes no summary! 1629 groove-thin xul reference, xul_style_classes no summary! 1630 header xul reference, xul_style_classes no summary! 1631 indent xul reference, xul_style_classes no summary! 1632 listcell-iconic xul reference, xul_style_classes no summary! 1633 listitem-iconic xul reference, xul_style_classes no summary! 1634 menu-iconic xul, xul reference no summary! 1635 menuitem-iconic xul reference, xul_style_classes no summary! 1636 menuitem-non-iconic xul reference, xul_style_classes no summary! 1637 message-icon xul reference, xul_style_classes no summary! ...
...And 2 more matches

Index - Archive of obsolete content
left xul attributes, xul reference no summary! 176 lightweightthemes lightweight themes, xul attributes, xul reference no summary! 177 lightweightthemesfooter no summary! 178 linkedpanel xul attributes, xul reference no summary! 179 listcell.type xul attributes, xul reference no summary! 180 listitem.type xul attributes, xul reference no summary! 181 matchcaseaccesskey no summary! 182 max xul attributes, xul reference no summary! 183 maxheight xul attributes, xul reference no summary! 184 maxlength xul attributes, xul reference no summary! 185 maxpos xul attributes, xul reference ...
... 803 radiogroup xul properties, xul reference no summary! 804 readonly xul properties, xul reference no summary! 805 ref xul properties, xul reference no summary! 806 resource xul properties, xul reference no summary! 807 resultspopup xul properties, xul reference no summary! 808 richlistitem.label xul properties, xul reference no summary! 809 scrollboxobject xul properties, xul reference no summary! 810 scrollincrement xul properties, xul reference no summary! 811 searchbutton xul properties, xul reference no summary! 812 searchcount xul properties, xul reference no summary! 813 s...
... groove xul reference, xul_style_classes no summary! 898 groove-thin xul reference, xul_style_classes no summary! 899 header xul reference, xul_style_classes no summary! 900 indent xul reference, xul_style_classes no summary! 901 listcell-iconic xul reference, xul_style_classes no summary! 902 listitem-iconic xul reference, xul_style_classes no summary! 903 menu-iconic xul, xul reference no summary! 904 menuitem-iconic xul reference, xul_style_classes no summary! 905 menuitem-non-iconic xul reference, xul_style_classes no summary! 906 message-icon xul reference, xul_style_classes no summary! 907...
...And 2 more matches

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

listcols - Archive of obsolete content
butes | properties | methods | related ] a container for the columns of a listbox, each of which are created with the listcol element. there should be only one listcols element in a list box. if there is no listcols element, the list box has a single column. ...
...of a listbox, each of which are created with the listcol element. there should be only one listcols element in a list box. if there is no listcols element, the list box has a single column. ...
... each of which are created with the listcol element. there should be only one listcols element in a list box. if there is no listcols element, the list box has a single column. ...
...And 2 more matches

Using readable streams - Web APIs
a function called readstream() is invoked to read the data back out of the stream again. we also close the stream, as we’ve stopped enqueuing chunks to it. ...
...ead the data back out of the stream again. we also close the stream, as we’ve stopped enqueuing chunks to it. ...
...e the stream, as we’ve stopped enqueuing chunks to it. ...
...And 2 more matches

Commands - Archive of obsolete content
the supportscommand method returns true for the 'cmd_delete' command, which is the name of the command used when the delete menu item is selected. for other commands, false should be returned sinc...
...the supportscommand method returns true for the 'cmd_delete' command, which is the name of the command used when the delete menu item is selected. for other commands, false should be returned since the controller does not ha...
...the supportscommand method returns true for the 'cmd_delete' command, which is the name of the command used when the delete menu item is selected. for other commands, false should be returned since the controller does not handle any other commands. if y...
...the supportscommand method returns true for the 'cmd_delete' command, which is the name of the command used when the delete menu item is selected. for other commands, false should be returned since the controller does not handle any other commands. if you wanted to handle more comm...

XUL Questions and Answers - Archive of obsolete content
ode they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listitem> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> </listhead> <listitem type...
...if user wants checkbox support for multicolumn lists, then they will have to implement one. ...
...if user wants checkbox support for multicolumn lists, then they will have to implement one. ...
...if user wants checkbox support for multicolumn lists, then they will have to implement one. are xul attributes integers? xul attributes such as left="100" or top="200", as well as corresponding properties, look as if they're integers but they are actually handled as strings. to convert them to integers use the parseint() javascript function. ...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
xul inside of the iframe. okay to use html inside of iframe. see browser element for more info. ...
...<!--label text--></label> <listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </listbox> <label control='listid2' value='<!--list label-->' /> <listbox rows="5" id='listid2'> <listcols> <listcol/> <listcol/> <listcol/> </listcols> <listhead> <listheader label="name" /> <listheader label="sex" /> <listheader label="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws. ...
...theader label="name" /> <listheader label="sex" /> <listheader label="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws. ...
...issues yet: arrowscrollbox bbox box grippy hbox menuseparator overlay page script spacer splitter stringbundle stringbundleset vbox window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor listcell member observes preference preferences prefpane prefwindow resizer richlistbox richlistitem resizer rule scrollbar scrollbox scrollcorner separator template textnode titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip treeseparator triple wizard wizardpage cases to revisit: ...

Gecko info for Windows accessibility vendors
indicates that the absence of state_checked should be spoken as // "unchecked", and that event_state_change will be fired in the event that the // checkbox is toggled. const unsigned long state_required = state_alert_low; // used on form controls // to indicate that this field must be filled out to submit the form const unsigned long state_invalid = state_alert_high; // used ...
...t it may become important in the future. the following html tags are exposed as bstr's: abbr, acronym, blockquote, dd, dl, dt, form, frame, h1, h2, h3, h4, h5, h6, iframe, q, tbody, tfoot, thead in addition, an html list uses the bullet bstr role to expose bullets and numbers that are automatically inserted into the formatting by gecko. ...
.... in addition, role_list with state_readonly and role_listitem are used to expose the list structure. this makes it important to check the state_readonly flag when encountering a role_list, because the html list form element also uses role_list, but without state_readonly set. positional descriptions are supported the accdescription field is overriden for the following roles: role_listitem, role_menuitem, role_radiobutton, role_pagetab and role_outlineitem for everything other than outline item, the positional description is in the form "n of m" where n is an integer indicating the position within other similar objects in a group, and m represents the number of objects in that group. for example, "3 of 5" indicates the 3rd object out of 5. for outline item, more information...
...xposes the url that is pointed to role_helpballoon not supported. n/a role_character not supported. 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. role_outline dhtml: role="wairole:tree" role_outlineitem dhtml: role="wairole:treeitem" sets state_collapsed if has children that are not currently visible. ...

Body.json() - Web APIs
is successful, we read and parse the data using json(), then read values out of the resulting objects as you'd expect and insert them into list items to display our product data. ...
...g json(), then read values out of the resulting objects as you'd expect and insert them into list items to display our product data. ...
...o display our product data. const mylist = document.queryselector('ul'); const myrequest = new request('products.json'); fetch(myrequest) .then(response => response.json()) .then(data => { for (const product of data.products) { let listitem = document.createelement('li'); listitem.appendchild( document.createelement('strong') ).textcontent = product.name; listitem.append( ` can be found in ${ product.location }. ...
...oducts.json'); fetch(myrequest) .then(response => response.json()) .then(data => { for (const product of data.products) { let listitem = document.createelement('li'); listitem.appendchild( document.createelement('strong') ).textcontent = product.name; listitem.append( ` can be found in ${ product.location }. cost: ` ); listitem.appendchild( document.createelement('strong') ).textcontent = `£${product.price}`; mylist.appendchild(listitem); } }) .catch(console.error); specifications specification status comment fetchthe definition of 'body.json()' in that specification. living standard initial definition ...

ARIA: List role - Accessibility
the aria list role can be used to identify a list of items. it is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list. <section role="list"> <div role="listitem">list item 1</div> <div role="listitem">list item 2</div> <div role="listitem">list item 3</div> </section> description any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively. a list must have one or more listitem children, or, alternatively, have one or more groups as children, with each group having one or more listitems as children. there are no hard and fast rules about which elements you should use to markup the list and list items, but y...
...e or more listitems as children. there are no hard and fast rules about which elements you should use to markup the list and list items, but you should make sure that the list items make sense in the context of a list, e.g. a shopping list, recipe steps, driving directions. warning: if at all possible in your work, you should use the appropriate semantic html elements to mark up a list and its listitems — <ul>/<ol> and <li>. see best practices for a full example. associated wai-aria roles, states, and properties listitem a single item in a list or directory. elements with role listitem can only be found in an element with the role list or group. group a collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a...
...an element with the role list or group. group a collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents. keyboard interactions none. required javascript features none. examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript. unlike the html <ol> and <ul>, the aria list roles doesn't distinguish between ordered and unordered lists. if at all possible, you should use the appropriate semantic html elements to mark up a list (<ol> and <ul>) and list items (<li>). for...
...opriate semantic html elements to mark up a list (<ol> and <ul>) and list items (<li>). for example, our above example should be rewritten as follows: <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> or use an ordered list if the order of the list items matters: <ol> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ol> note: the aria list/listitem roles don't distinguish between ordered and unordered lists. as an aside, note that if you are using the semantic html elements of ol or ul and apply a role of presentation, each child li element inherits the presentation role because aria requires the listitem elements to have the parent list element. so, the li elements are not exposed to assistive technologies, but elements contained inside ...

ARIA: listbox role - Accessibility
focus moves within the list, the screen reader announces the relevant items. associated aria roles, states, and properties associated roles option one or more nested options are required. all selected options have aria-selected set to true. all options that are not selected have aria-selected set to false. if an option is not selectable, omit the aria-selected. list a section containing listitem elements states and properties aria-activedescendant holds the id string of the currently active element within the listbox. if that's an option element, then that would be the id of the most recently interacted with option, regardless of whether that option has an aria-selected value of true or not. takes the value of only one id, even in a multiselectable listbox. if the id does not ref...
... descendant <option> elements handles all the needed interactions natively. examples example 1: a single select listbox that uses aria-activedescendant the snippet below shows how the listbox role is added directly into the html source code. ...
...he needed interactions natively. examples example 1: a single select listbox that uses aria-activedescendant the snippet below shows how the listbox role is added directly into the html source code. ...
...ample 1: a single select listbox that uses aria-activedescendant the snippet below shows how the listbox role is added directly into the html source code. ...

display - CSS: Cascading Style Sheets
the detail of what happens when display: flex is declared is defined in the css flexible box model specification. see the table at the end of this document for all of the individual specifications. syntax the css display property is specified using keyword values. keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; } outside <display-outside> these keywords specify the element’s outer display type, which is essentially its role in flow layout. valid <display-outside> values: block the element generates a block element box, generating line breaks both before and after the element when in the normal flow. inline the element generates o...
...lements. note: browsers that support the two value syntax, on finding the inner value only, such as when display: flex or display: grid is specified, will set their outer value to block. this will result in expected behavior; for example if you specify an element to be display: grid, you would expect that the box created on the grid container would be a block level box. list item <display-listitem> the element generates a block box for the content and a separate list-item inline box. a single value of list-item will cause the element to behave like a list item. this can be used together with list-style-type and list-style-position. list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords. note: in browsers that support the ...
...success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valueinlineapplies toall elementsinheritednocomputed valueas the specified value, except for positioned and floating elements and the root element. ...
...nd floating elements and the root element. ...

allowevents - Archive of obsolete content
by setting the allowevents attribute to true, this special behavior is disabled, and the events are targeted the same as other elements. ...
...by setting the allowevents attribute to true, this special behavior is disabled, and the events are targeted the same as other elements. ...
...by setting the allowevents attribute to true, this special behavior is disabled, and the events are targeted the same as other elements. ...

XML Templates - Archive of obsolete content
"male"/> <person name="laura secord" gender="female"/> </people> xml query syntax the query syntax is fairly simple for xml datasources. just place an expr attribute on the query element containing an xpath expression returns the set of results to output. here is an example: <listbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the expr attribute is a very simple xpath expression which simply retrieves the person elements from within the datasource. as there are five in the xml document, five results will be generated. the action element defines the content to generate for each result. the content of the action element will be generated and repeated for eac...
...on> </template> </listbox> the expr attribute is a very simple xpath expression which simply retrieves the person elements from within the datasource. as there are five in the xml document, five results will be generated. the action element defines the content to generate for each result. the content of the action element will be generated and repeated for each result, which in this case, is a listitem. the child of the action element has to have a uri attribute, although it does not have to be a direct child. the element with the uri attribute and its children will be copied once for each result. any elements between the action element and this element are only copied once. this is useful when recursive generation or multiple rules are used, and we'll see examples of why this is useful later.
...it refers to an element with that id (without the number sign) and uses that node as the source xml node instead of a separate file. otherwise the data included inline and the template are the same. note the only change is that the addit...

Things I've tried to do with XUL - Archive of obsolete content
label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... while this works at first, after a number of rows have been added it breaks and stops displaying the first cell (the one specified by the appenditem call). ...
... var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... while this works at first, after a number of rows have been added it breaks and stops displaying the first cell (the one specified by the appenditem call). ...
...cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... while this works at first, after a number of rows have been added it breaks and stops displaying the first cell (the one specified by the appenditem call). instead, you must build up your own listitem full of listcells, and then add that listitem to the listbox, using generic dom calls: var row = document.createelement('listitem'); // create and attach 1st cell var cell = document.createelement('listcell'); cell.setattribute('label', label ); cell.setattribute('value', value ); row.appendchild( cell ); // create and attach 2nd cell cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... // attach row mylistbox.appendchild(...

XUL controls - Archive of obsolete content
g"/> more information about the image element. image reference <label> adds a text label to a nearby control. <label control="volume" value="volume:"/> more information about the label element. label reference <listbox> the listbox is used to select an item from a list of labelled items. <listbox> <listitem label="chocolate"/> <listitem label="jelly beans"/> </listbox> more information about the listbox element. listbox reference related elements: listcell listcols listcol listhead listheader listitem <menulist> a menulist (or combobox) is used to create a control with a drop down to select a value. <menulist> <menupopup> <menuitem label=...
..."heay" value="hea"/> </radiogroup> more information about the radio element. radio reference related elements: radiogroup <richlistbox> the richlistbox displays a list of items where one or more may selected. unlike the listbox which is designed to display fixed size rows, the richlistbox may display any type of content. ...
...more information about the radio element. radio reference related elements: radiogroup <richlistbox> the richlistbox displays a list of items where one or more may selected. unlike the listbox which is designed to display fixed size rows, the richlistbox may display any type of content. <richlistbox> <richlistitem> <image src="happy.png"/> </richlistitem> <richlistitem> <image src="sad.png"/> </richlistitem> <richlistitem> <image src="angry.png"/> </richlistitem> </richlistbox> richlistbox reference related elements: richlistitem <scale> a scale displays a bar with a thumb that may be slid across the bar to select between a range of values. <scale min="1" max="10"/> sc...

CSS and JavaScript accessibility best practices - Learn web development
submitting (using preventdefault()), and display any error messages that have been created (see below). this mechanism means that the errors will only be shown if there are errors, which is better for usability. for each input that doesn't have a value filled in when the form is submitted, we create a list item with a link and insert it in the errorlist. ...
... note: the focus() part of this example is a bit tricky. ...
... note: the focus() part of this example is a bit tricky. ...

Gecko object attributes
it is exposed here. this may provide more information than the mapped role, which is best-fit. the role string may be a space-delimited list of roles. applied to: any role group attributes level for headings, the heading level. for outline items, the indentation level. for diagrams with levels, each item can have its level specified. the level value is 1-based. ...
... item can have its level specified. the level value is 1-based. applied to: grid, heading, listitem, row, tablist exposed in aria: aria-level posinset if this item is in a group, what is the item number within the group, where the size is defined by the setsize attribute. the first item should have posinset="1", and the last item should have a posinset value equal to the setsize. applied to: listitem, option exposed in aria: aria-posinset setsize if this item is in a group, this indicates the number of items in the group. this is useful when combined with the posinset object attribute. ...
...the group, where the size is defined by the setsize attribute. the first item should have posinset="1", and the last item should have a posinset value equal to the setsize. applied to: listitem, option exposed in aria: aria-posinset setsize if this item is in a group, this indicates the number of items in the group. this is useful when combined with the posinset object attribute. applied to: listitem, option exposed in aria: aria-setsize live region attribues atomic true when the entire region should be presented as a whole, when changes within it are considered important enough to automatically present. applied to: any role exposed via aria: aria-atomic live a hint as to whether changes within the current region or subtree should be automatically presented. possible values are "of...

nsIJumpListBuilder
after they are committed. the system tracks removed items between commits. a list of these items is returned by a call to initlistbuild(). nsijumplistbuilder does not filter entries added that have been removed since the last commit. to prevent repeatedly adding entires users have removed, applications are encouraged to track removed items internally. each list is made up of an array of nsiwinjumplistitems representing items such as shortcuts, links, and separators. see nsijumplistitem for information on adding additional jump list types. method overview void abortlistbuild(); boolean addlisttobuild(in short acattype, in nsiarray items optional, in astring catname optional); boolean commitlistbuild(); boolean deleteactivelist(); boolean initlistbuild(in nsimutablearray removeditems); ...
... attributes attribute type description available short indicates whether jump list taskbar features are supported by the current host. read only. islistcommitted boolean jumplist management. indicates if a commit has already occurred in this session. read only. exceptions thrown ns_error_not_available on all calls if taskbar functionality is not supported by the operating system. maxlistitems short the maximum number of jump list items the current desktop can support. read only. constants constant value description jumplist_category_tasks 0 tasks are common actions performed by users within the application. a task can be represented by an application shortcut and associated command line parameters or a uri. task lists should generally be static lists that do not change often...
...er of addbuildlist. methods abortlistbuild() aborts and clears the current jump list build. void abortlistbuild(); parameters none. addlisttobuild() adds a list and if required, a set of items for the list. boolean addlisttobuild( in short acattype, in nsiarray items, optional in astring catname optional ); parameters acattype the type of list to add. items optional an array of nsijumplistitem items to add to the list. catname optional for custom lists, the title of the list. return value true if the operation completed successfully. exceptions thrown ns_error_unexpected on internal errors. ns_error_illegal_value if an item is added that was removed since the last commit. ns_error_invalid_arg if incorrect parameters are passed for a particular category or item type. commitlistbuild(...

Using channel messaging - Web APIs
this saves the transferred port and register an onmessage handler that will be called each time a message is p...
...this saves the transferred port and register an onmessage handler that will be called each time a message is passed through our messagechannel. when a m...
...this saves the transferred port and register an onmessage handler that will be called each time a message is passed through our messagechannel. when a message is received from the main page we create a ...

Element: mouseenter event - Web APIs
. ...
...d('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list ...
...leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseenter' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'mouseenter' in that specification. obsolete ...

Element: mouseleave event - Web APIs
. ...
...d('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list ...
...leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'mouseleave' in that specification. obsolete ...

IDBCursor.advance() - Web APIs
cursor.value.foo. ...
... recommendation ...
... recommendation indexed database api draftthe definition of 'advance()' in that specification. recommendation browse...

IDBCursor.key - Web APIs
the cursor object using cursor.value.foo. ...
... recommendation ...
... recommendation indexed database api draftthe definition of 'key' in that specification. recommendation ...

IDBCursor.primaryKey - Web APIs
the cursor object using cursor.value.foo. ...
... recommendation...
... recommendation indexed database api draftthe definition of 'primarykey' in that specification. ...

IDBCursor.request - Web APIs
ell you what request object the cursor originated from. ...
... from. ...
... recommendation initial definition. browser compatibility the compatibility table on this page ...

IDBCursor.source - Web APIs
the cursor object using cursor.value.foo. ...
... recommendation ...
... recommendation indexed database api draftthe definition of 'source' in that specification. recommenda...

IDBCursorWithValue.value - Web APIs
the cursor object using cursor.value.foo. ...
... recommendation ...
... recommendation indexed database api draftthe definition of 'idbdatabase' in that specification. recomm...

ReadableStream.ReadableStream() - Web APIs
on is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. ...
...blestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. ...
...n is run, which reads the data back out of the stream. ...

ReadableStreamDefaultController.close() - Web APIs
on is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. ...
...blestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. ...
...n is run, which reads the data back out of the stream. ...

ReadableStreamDefaultController.enqueue() - Web APIs
on is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. ...
...blestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. ...
...n is run, which reads the data back out of the stream. ...

ReadableStreamDefaultController - Web APIs
on is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. ...
...blestreamdefaultcontroller.close(), and another function is run, which reads the data back out of the stream. ...
...n is run, which reads the data back out of the stream. ...

ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
// result objects contain two properties: // done - true if the stream has already given you all its data. // value - some data. always undefined when done is true. ...
... // done - true if the stream has already given you all its data. // value - some data. always undefined when done is true. ...
...is true. if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far. current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'readablestreamdefaultreader()' in that specification. living standard initial definition. ...

Adding captions and subtitles to HTML5 video - Developer guides
ining our subtitles menu. first of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one. ...
... to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one. ...
...it also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. this is done by simply setting the required subtlte's mode attribute to showing, and setting the others to hidden. once the menu is built, it is then inserted i...

Customizing the download progress bar - Archive of obsolete content
css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed. this is required since it contains platform-specific directives, as we will see. ...
...reprocessed. this is required since it contains platform-specific directives, as we will see. the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only supports windows and mac, but it would be straightforward to add support for linux. this is ...

SQLite Templates - Archive of obsolete content
*' is typically used. the query for an sqlite datasource is just an sql select statement, as text inside the query element. this simple example shows how to display a listbox containing the values in one column in a database table. <listbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name from myfriends </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the query returns the list of values from the 'name' column in the table 'myfriends'. the action body, starting at the node with uri="?" is repeated for each result returned from the query. if the query returns six results, six listitems will be generated. the labels have the special value '?name'. the syntax with the question mark i...
...arameter, you should also set the type attribute. <listbox id="friends" datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name, from myfriends where age >= :minage && age <= :maxage <param id="minage" name="minage" type="integer">30</param> <param id="maxage" name="maxage" type="integer">40</param> </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> here, the age is an integer number, so the type attribute is set to integer. integers are 32-bit values, but you can use the value int64 for 64-bit integers. you can also use the value double for double precision floating point values. if no type is specified, a string is assumed. we could later change the age to use in the query wit...

XUL Reference - Archive of obsolete content
wscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack...
...oolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script commandset command...

listcell - Archive of obsolete content
f the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. type type: string this attribute is reserved for use by anonymous children of listitem; do not use. properties disabled type: boolean gets and sets the value of the disabled attribute. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ...
...ce even when no label text is set. ...

listheader - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a header for a single column in a listbox. attributes disabled properties acesssibletype examples <listbox> <listhead> <listheader label="name"/> <listheader label="occupation"/> </listhead> <listitem> <listcell label="george"/> <listcell label="house painter"/> </listitem> <listitem> <listcell label="mary ellen"/> <listcell label="candle maker"/> </listitem> <listitem> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </listbox> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with gray...
...qualnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listcols, listhead, listitem ...

Implementation Status - Archive of obsolete content
ethod call supported 5. datatypes section title status notes bugs 5.1 xml schema built-in datatypes partial whitespace facet not supported. ...
... section title status notes bugs 5.1 xml schema built-in datatypes partial whitespace facet not supported. ...

Making decisions in your code — conditionals - Learn web development
5%"> const select = document.queryselector('select'); const list = document.queryselector('ul'); const h1 = document.queryselector('h1'); select.onchange = function() { const choice = select.value; // add conditional here createcalendar(days, choice); } function createcalendar(days, choice) { list.innerhtml = ''; h1.textcontent = choice; for (let i = 1; i <= days; i++) { const listitem = document.createelement('li'); listitem.textcontent = i; list.appendchild(listitem); } } createcalendar(31,'january'); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> .output * { box-sizing: border-box; } .output ul { padding-left: 0; } .output li { display: block;...
...{\n const choice = select.value;\n let days = 31;\n if(choice === \'february\') {\n days = 28;\n } else if(choice === \'april\' || choice === \'june\' || choice === \'september\'|| choice === \'november\') {\n days = 30;\n }\n\n createcalendar(days, choice);\n}\n\nfunction createcalendar(days, choice) {\n list.innerhtml = \'\';\n h1.textcontent = choice;\n for(let i = 1; i <= days; i++) {\n const listitem = document.createelement(\'li\');\n listitem.textcontent = i;\n list.appendchild(listitem);\n }\n }\n\ncreatecalendar(31,\'january\');'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ i...

Working with JSON - Learn web development
ypara3 = document.createelement('p'); const mylist = document.createelement('ul'); myh2.textcontent = heroes[i].name; mypara1.textcontent = 'secret identity: ' + heroes[i].secretidentity; mypara2.textcontent = 'age: ' + heroes[i].age; mypara3.textcontent = 'superpowers:'; const superpowers = heroes[i].powers; for (let j = 0; j < superpowers.length; j++) { const listitem = document.createelement('li'); listitem.textcontent = superpowers[j]; mylist.appendchild(listitem); } myarticle.appendchild(myh2); myarticle.appendchild(mypara1); myarticle.appendchild(mypara2); myarticle.appendchild(mypara3); myarticle.appendchild(mylist); section.appendchild(myarticle); } } to start with, we store the members property of the javascr...
...h their secretidentity, age, and a line saying "superpowers:" to introduce the information in the list. store the powers property in another new constant called superpowers — this contains an array that lists the current hero's superpowers. use another for loop to loop through the current hero's superpowers — for each one we create an <li> element, put the superpower inside it, then put the listitem inside the <ul> element (mylist) using appendchild(). the very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myarticle), then append the <article> inside the <section>. the order in which things are appended is important, as this is the order they will be displayed inside the html. note: if you are having trouble getting the example to work, try referring to our...

Accessibility API cross-reference
en tagged as an artifact (not "real" content) with the 'contentinfo' provided as document level xmp metadata instead the mouse pointer - when and how is this used? cursor n/a n/a n/a a definition of a term or concept. definition <dd>, <dfn> <lbody> iconified version of an app (n/a - use either pushbutton or listitem) desktop_icon desktop_icon n/a a specific kind of a graphic - a diagram. diagram n/a n/a figure <figure> a dial or a knob. msaa only. dial n/a n/a n/a a dialog or message box. dialog dialog dialog dialog <dialog> a list of references to members of a group,...
... link <a> <link> according to the pdf 1.7 spec, a <link> must not be a direct child of a <toci> (table of contents item). in such a case, they should be wrapped in a <reference> pragmatically however, user agents should expect to find <link> tags as direct children of <toci> a list list list list list <ol>, <ul> <l> an item in a list listitem n/a list_item listitem <li> <li> may contain <lbl> (bullet, numeral, term etc.) and <lbody> a type of live region where new information is added in meaningful order and old information may disappear. log the main content of a document, distinct from complementary info, headers, footers, navigation, asides etc. ...

Dict.jsm
fox 19 and above, you may also pass a json string to initialize the dictionary: var somejson = '{key1: "foo", key2: {}}'; var newdict = new dict(somejson); note: any string you pass will be assumed to be json. method overview dict copy(); boolean del(string akey); object get(string akey, [optional] object adefault); boolean has(string akey); array listitems(); array listkeys(); array listvalues(); void set(string akey, object avalue); string tojson(); string tostring(); properties attribute type description count number the number of items in the dictionary. items iterator returns an iterator over all of the items in the dictionary; each item is ...
...eturned for keys that aren't found. return value the value of the specified key, or undefined if no matching key was found. has() determines whether or not the specified key exists in the dictionary. boolean has( string akey ); parameters akey the key for which to determine existence in the dictionary. return value true if the specified key is in the dictionary, otherwise false. listitems() returns an array of the key/value pairs in the dictionary. note: the order in which items are returned is arbitrary. array listitems(); parameters none. return value an array of the key/value pairs in the dictionary. listkeys() returns an array of the keys in the dictionary. note: the order in which items are returned is arbitrary. array listkeys(); parameters none. return valu...

nsIHTMLEditor
acanoutdent); void getinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); astring getinlinepropertywithattrvalue(in nsiatom aproperty, in astring aattribute, in astring 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 aignor...
...roperty aattribute avalue afirst aany aall return value getlinkedobjects() find all the nodes in the document which contain references to outside uris (for example a href, img src, script src, and so on.) the objects in the array will be type nsiurirefobject. nsisupportsarray getlinkedobjects(); parameters none. return value anodelist the linked nodes found. getlistitemstate() getlistitemstate returns what list item type is in the selection. void getlistitemstate( out boolean amixed, out boolean ali, out boolean adt, out boolean add ); parameters amixed true if there is more than one type of list item, or if there is some list and non-list. ali true if "li" list items are selected. adt true if "dt" list items are selected. add true if "dd" ...

BiquadFilterNode.getFrequencyResponse() - Web APIs
uman-readable list at the bottom of the page: var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; ... ...
... var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; ... function calcfrequencyresponse() { biquadfilter.getfrequencyresponse(myfrequencyarray,magresponseoutput,phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification. working draft ...

ContentIndex.getAll() - Web APIs
un...
... unknown initial definition. ...

ContentIndex - Web APIs
async function unre...
...e); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index. async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) return; // unregister conten...

Content Index API - Web APIs
async function unre...
...e); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index. async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) return; // unregister conten...

DeprecationReportBody - Web APIs
tton to display the report details. ...
... reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let key in reports[i].body) { let innerlistitem = document.createelement('li'); let keyvalue = reports[i].body[key]; innerlistitem.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlistitem); } } } the ...

IDBCursor.delete() - Web APIs
bumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { if(cursor.value.albumtitle === 'grace under pressure') { var request = cursor.delete(); request.onsuccess = function() { console.log('deleted that mediocre album from 1984. ...
...= function(event) { var cursor = event.target.result; if(cursor) { if(cursor.value.albumtitle === 'grace under pressure') { var request = cursor.delete(); request.onsuccess = function() { console.log('deleted that mediocre album from 1984. even power windows is better.'); }; } else { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); } cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'delete()' in that specification. recommendation ...

IDBCursor.direction - Web APIs
e.foo. ...
...bcursor example (view example live.) function backwards() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor(null,'prev').onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed backwards.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'direction' in...

IIRFilterNode.getFrequencyResponse() - Web APIs
ge: var feedforwardcoefficients = [0.1, 0.2, 0.3, 0.4, 0.5]; var feedbackcoefficients = [0.5, 0.4, 0.3, 0.2, 0.1]; var iirfilter = audioctx.createiirfilter(feedforwardcoefficients, feedbackcoefficients); ... ...
... 0.3, 0.4, 0.5]; var feedbackcoefficients = [0.5, 0.4, 0.3, 0.2, 0.1]; var iirfilter = audioctx.createiirfilter(feedforwardcoefficients, feedbackcoefficients); ... function calcfrequencyresponse() { iirfilter.getfrequencyresponse(myfrequencyarray, magresponseoutput, phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification. working draft ...

ReadableStream.getReader() - Web APIs
// result objects contain two properties: // done - true if the stream has already given you all its data. // value - some data. always undefined when done is true. ...
... // done - true if the stream has already given you all its data. // value - some data. always undefined when done is true. if (done) { console.log("stream complete"); para.textcontent = value; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far. current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'getreader()' in that specification. living stand...

ReadableStreamDefaultReader.cancel() - Web APIs
ntain two properties: // done - true if the stream has already given you all its data. // value - some data. always undefined when done is true. ...
...the stream has already given you all its data. // value - some data. always undefined when done is true. if (done) { console.log("stream complete"); reader.cancel(); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far. current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'cancel()' in that specification. living standard...

ReadableStreamDefaultReader.read() - Web APIs
// result objects contain two properties: // done - true if the stream has already given you all its data. // value - some data. always undefined when done is true. ...
... // done - true if the stream has already given you all its data. // value - some data. always undefined when done is true. if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far. current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } example 2 - handling text line by line this example shows how you might fetch a text file and handle it as a stream of text lines. it deals with ...

Report - Web APIs
tton to display the report details. ...
... reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let key in reports[i].body) { let innerlistitem = document.createelement('li'); let keyvalue = reports[i].body[key]; innerlistitem.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlistitem); } } } the ...

SVGAnimationElement: endEvent event - Web APIs
svg> <hr> <button>stop animation</button> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); let btn = document.queryselector('button'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('endevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'endevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 're...
....appendchild(listitem); }) animateelem.addeventlistener('endevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'endevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) btn.addeventlistener('click', () => { btn.disabled = true; animateelem.setattribute('repeatcount', '1'); }) event handler property equivalent note that you can also create an event listener for the end event using the onend event handler property: animateelem.onend = () => { console.log('endevent fired'); } specifications ...

<input type="file"> - HTML: Hypertext Markup Language
tchild) { preview.removechild(preview.firstchild); } const curfiles = input.files; if(curfiles.length === 0) { const para = document.createelement('p'); para.textcontent = 'no files currently selected for upload'; preview.appendchild(para); } else { const list = document.createelement('ol'); preview.appendchild(list); for(const file of curfiles) { const listitem = document.createelement('li'); const para = document.createelement('p'); if(validfiletype(file)) { para.textcontent = `file name ${file.name}, file size ${returnfilesize(file.size)}.`; const image = document.createelement('img'); image.src = url.createobjecturl(file); listitem.appendchild(image); listitem.appendchild(para); } else { ...
...file)) { para.textcontent = `file name ${file.name}, file size ${returnfilesize(file.size)}.`; const image = document.createelement('img'); image.src = url.createobjecturl(file); listitem.appendchild(image); listitem.appendchild(para); } else { para.textcontent = `file name ${file.name}: not a valid file type. update your selection.`; listitem.appendchild(para); } list.appendchild(listitem); } } } the custom validfiletype() function takes a file object as a parameter, then uses array.prototype.includes() to check if any value in the filetypes matches the file's type property. if a match is found, the function returns true. if no match is found, it returns false. // https://developer.mozilla.org/docs/web/media/forma...

display - SVG: Scalable Vector Graphics
&& [ flow | flow-root ]? && list-item<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-capti...
...&& [ flow | flow-root ]? ...

indexed-db - Archive of obsolete content
ew array(); trans.oncomplete = function() { cb(items); } var keyrange = idbkeyrange.lowerbound(0); var cursorrequest = store.opencursor(keyrange); cursorrequest.onsuccess = function(e) { var result = e.target.result; if(!!result == false) return; items.push(result.value.name); result.continue(); }; cursorrequest.onerror = database.onerror; }; function listitems(itemlist) { console.log(itemlist); } open("1"); var add = require("sdk/ui/button/action").actionbutton({ id: "add", label: "add", icon: "./add.png", onclick: function() { additem(require("sdk/tabs").activetab.title); } }); var list = require("sdk/ui/button/action").actionbutton({ id: "list", label: "list", icon: "./list.png", onclick: function() { getitems(listitem...

util/list - Archive of obsolete content
experimental building blocks for composing lists. globals constructors list(element1, element2, ...) constructor can takes any number of elements and creates an instance of list populated with the specified elements. parameters element1 : object|string|number element2 : object|string|number ... : object|string|number functions addlistitem(list, item) function adds a item to a list. removelistitem(list, item) function removes an item from a list list an ordered collection (also known as a sequence) disallowing duplicate elements. list is composed out of iterable, therefore it provides custom enumeration behavior that is similar to array (enumerates only on the elements of the list). list is a base trait and is meant to be part of a composition, since all of its api is private ex...

Monitoring downloads - Archive of obsolete content
storage/service;1"] .getservice(components.interfaces.mozistorageservice); var dbconn = this.storageservice.opendatabase(this.dbfile); var loglist = document.getelementbyid("loglist"); var statement = dbconn.createstatement("select * from items"); // get all items in table try { while (statement.executestep()) { var row = document.createelement('listitem'); // add the cells to the row var cell = document.createelement('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltiptext", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.createelement('listcell'); ...

accesskey - Archive of obsolete content
this should be one of the characters that appears in the label attribute for the element. on non-macintosh platforms, the character on the element's label matching the accesskey is underlined. for example, when a menu labeled 'file' has an accesskey of 'f', the generated label will be 'file'. ...

current - Archive of obsolete content
this is typically used by a theme to customize the focus ring. ...

listcell.type - Archive of obsolete content
...

type - Archive of obsolete content
see button.type browser.type colorpicker.type datepicker.type editor.type listcell.type listitem.type menuitem.type notification.type prefwindow.type query.type script.type textbox.type toolbarbutton.type treecol.type ...

insertItemAt - Archive of obsolete content
// 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() ...

removeItemAt - Archive of obsolete content
(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="removeallitems()"/> <listbox id="mylistbox"> <listitem label="alpha"/> <listitem label="beta"/> <listitem label="oscar"/> <listitem label="foxtrot"/> </listbox> see also removeallitems() insertitemat() ...

accessibleType - Archive of obsolete content
06 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xullisthead 1024 xullistheader 1025 xullistitem 100c xulmenubar 100d xulmenuitem 100e xulmenupopup 100f xulmenuseparator 1010 xulpane 1011 xulprogressmeter 1012 xulscale 1013 xulstatusbar 1014 ...

controllers - Archive of obsolete content
mmand : 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> ...

currentItem - Archive of obsolete content
...

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

selectedItems - Archive of obsolete content
...

Style classes - Archive of obsolete content
« xul reference home alert-icon chromeclass-toolbar error-icon groove header indent listcell-iconic listitem-iconic menuitem-iconic menuitem-non-iconic message-icon monospace plain question-icon small-margin statusbarpanel-iconic statusbarpanel-iconic-text statusbarpanel-menu-iconic text-link thin tree-splitter treecol-image ...

Introduction - Archive of obsolete content
the url of an xml file, which can be either the location of a web site or a file on the local file system, using its file or chrome url. this file will be loaded and the resulting xml document will be used as the datasource when the template builder generates results and creates content. for example: <listbox datasources="http://www.xulplanet.com/ds/sample.xml" querytype="xml"> <template> <listitem label="?name"/> </template> </listbox> this template uses an xml datasource to generate a listbox. although we'll look at the details of this later, the simple result here is that a listitem will be generated for each child node in the xml data, setting the label to the name attribute for each xml node. for sqlite datasources, the datasources attribute specifies the uri of a database file. onl...

Namespaces - Archive of obsolete content
<listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <rule ns:gender="male"> <label uri="?" ...

Sorting Results - Archive of obsolete content
e flags="dont-build-content"), sorting is done by placing the sort and sortdirection attributes on the root node of the template. the sortactive attribute is not needed. in this example, the list of people is sorted ascending by name. <listbox datasources="people2.xml" ref="*" querytype="xml" sort="?name" sortdirection="ascending"> <template> <query expr="*/*"/> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> it will often be the case that multiple items have the same value, especially for larger amounts of data. you can specify multiple sort keys to further define how a sort should be handled in the case where the values for the first sort key are the same. to do this, just add another key after the first separated by a space, as in the ...

Trees - Archive of obsolete content
y a number of treecol elements, one for each column. each column will appear as a header at the top of the tree. the second part, the tree body, contains the data to appear in the tree and is created with a treechildren tag. the tree is unique in that the body of the tree consists only of a single widget which draws all of the data in the tree. this contrasts with the listbox, where individual listitem and listcell tags are used to specify the rows in the listbox. in a tree, all of the data to be displayed is supplied by a separate object, called a tree view. when it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. the tree is smart enough to only ask for information from the view for those rows ...

XUL Changes for Firefox 1.5 - Archive of obsolete content
this lists the most notable changes to xul in firefox 1.5 (gecko 1.8). for other changes you should be aware of, see adapting xul applications for firefox 1.5. <scrollcorner> a <scrollcorner> element is added which is used to create the small box in the intersection of the horizontal and vertical scrollbars. <richlistbox> and <richlistitem> the <richlistbox> and <richlistitem> elements are used for creating lists containing arbitrary content. this element works similarly to the <listbox> which is designed primarily for lists of textual items. the <richlistbox> supports much of the same api as the <listbox> and single items, created with the <richlistitem> element may be selected. see xul:richlistbox for more information. preferences system several elements have been added which may b...

elements - Archive of obsolete content
binding bindings box broadcaster broadcasterset button browser c checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar...

listhead - Archive of obsolete content
alnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listcols, listheader, listitem ...

How to enable locale switching in a XULRunner application - Archive of obsolete content
ackage("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? selecteditem = listitem; } localelistbox.appendchild(listitem); } // highlight current locale localelistbox.selecteditem = selecteditem; } catch (err) { alert (err); } ...

Theme changes in Firefox 2 - Archive of obsolete content
safebrowser/browser-protection.css this file, new to firefox 2, skins browser pro...

What are browser developer tools? - Learn web development
nter pane of the debugger. source code set breakpoints where you want to pause execution. in the following image, the highlight on the number 18 shows that the line has a breakpoint set. watch expressions and breakpoints the right-hand pane shows a list of the watch expressions you have added and breakpoints you have set. in the image, the first section, watch expressions, shows that the listitems variable has been added. you can expand the list to view the values in the array. the next section, breakpoints, lists the breakpoints set on the page. in example.js, a breakpoint has been set on the statement listitems.push(inputnewitem.value); the final two sections only appear when the code is running. the call stack section shows you what code was executed to get to the current line. you ...

ROLE_ROW
« gecko roles page represents a row of cells within a table. also, see role_table. interfaces nsiaccessible nsisupports nsiaccessiblehyperlink nsiaccessibleselectable mapped to at-spi: role_list_item atk: atk_role_list_item ua: nsaccessibilityrowrole msaa/ia2: role_system_row used by aria: row html: <tr> xul:<listitem/> ...

Gecko Roles
ike text or a graphic, but it acts like a button. role_helpballoon displays a help topic in the form of a tooltip or help balloon. role_character represents a cartoon-like graphic object, such as microsoft office assistant, which is displayed to provide help to users of an application. role_list represents a list box, allowing the user to select one or more items. role_listitem represents an item in a list. role_outline represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches. role_outlineitem represents an item in an outline or tree structure. role_pagetab represents a page tab, it is a child of a page tab list. role_propertypage repres...

Index
jump lists are built and then applied. modifying an applied jump list is not permitted. callers should begin the creation of a new jump list using initlistbuild(), add sub lists using addlisttobuild(), then commit the jump list using commitlistbuild(). lists are built in real-time during the sequence of build calls, make sure to check for errors on each individual step. 711 nsijumplistitem interfaces, interfaces:scriptable, xpcom, xpcom interface reference compare this item to another. 712 nsilivemarkservice interfaces, interfaces:scriptable, places, xpcom, xpcom interface reference implemented by: @mozilla.org/browser/livemark-service;2. to use this service, use: 713 nsiloadgroup interfaces, interfaces:scriptable, xpcom interface refer...

nsIAccessibleProvider
xultabbox 0x00001018 a com...

nsIAccessibleRole
isplays a help topic in the form of a tooltip or help balloon. role_character 32 represents a cartoon-like graphic object, such as microsoft office assistant, which is displayed to provide help to users of an application. role_list 33 represents a list box, allowing the user to select one or more items. it is used for xul:listbox, html:select@size, role="list". see also role_list_item. role_listitem 34 represents an item in a list. see also role_list. role_outline 35 represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches. is is used for role="tree". role_outlineitem 36 represents an item in an outline or tree structure. it is used for role="treeitem". role_pagetab 37 represents a page t...

XPCOM Interface Reference
observernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpupgradelistenernsiidnservicensiiframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputstreamcallbacknsiinstalllocationnsiinterfacerequestornsijscidnsijsidnsijsiidnsijsonnsijetpacknsijetpackservicensijumplistbuildernsijumplistitemnsilivemarkservicensiloadgroupnsilocalfilensilocalfilemacnsilocalensilocaleservicensilogininfonsiloginmanagernsiloginmanagercryptonsiloginmanageriemigrationhelpernsiloginmanagerprompternsiloginmanagerstoragensiloginmetainfonsimimeinputstreamnsimacdocksupportnsimarkupdocumentviewernsimemorynsimemorymultireporternsimemorymultireportercallbacknsimemoryreporternsimemoryreportermanagernsimenuboxobjectn...

HTML Drag and Drop API - Web APIs
wser compatibility table, drag-and-drop interoperability is relatively broad among desktop browsers (except the datatransferitem and datatransferitemlist interfaces have less support). this data also indicates drag-and-drop support among mobile browsers is very low. ...

IDBCursor.continue() - Web APIs
the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'continue()' in that specification. r...

IDBCursor.update() - Web APIs
().onsuccess = function(event) { const cursor = event.target.result; if (cursor) { if (cursor.value.albumtitle === 'a farewell to kings') { const updatedata = cursor.value; updatedata.year = 2050; const request = cursor.update(updatedata); request.onsuccess = function() { console.log('a better album year?'); }; }; const listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'update()' in that specific...

IDBCursor - Web APIs
the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'cursor' in that specification. recommenda...

IDBCursorWithValue - Web APIs
the cursor object using cursor.value.foo. for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'idbcursorwithvalue' in that specification. ...

IDBKeyRange.bound() - Web APIs
ory in the indexeddb-examples repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'bound(...

IDBKeyRange.lower - Web APIs
mple live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowe...

IDBKeyRange.lowerBound() - Web APIs
ok at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowe...

IDBKeyRange.lowerOpen - Web APIs
live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowerop...

IDBKeyRange.only() - Web APIs
nge, have a look at our idbkeyrange repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'only' i...

IDBKeyRange.upper - Web APIs
mple live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'uppe...

IDBKeyRange.upperBound() - Web APIs
ok at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'u...

IDBKeyRange.upperOpen - Web APIs
live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'uppe...

IDBKeyRange - Web APIs
a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'idbkeyrange' in that sp...

Index - Web APIs
y determines if content fully fits into the region or not. 5325 mssetmediaprotectionmanager mssetmediaprotectionmanager the mssetmediaprotectionmanager method specifies the media protection manager for a given media pipeline. 5326 mswriteprofilermark mswriteprofilermark the mswriteprofilermark method writes a profiling event. 5327 mssitemodejumplistitemremoved the mssitemodejumplistitemremoved event occurs when mssitemodeshowjumplist is called and an item has been removed from a jump list by the user. 5328 msthumbnailclick msthumbnailclick the msthumbnailclick event occurs when a user clicks a button or thumbnail icon in the taskbar. ...

Intersection Observer API - Web APIs
you would specify the array [0, 0.25, 0.5, 0.75, 1]. the default is 0 (meaning as soon as even one pixel is visible, the callback will be run). a value of 1.0 means that the threshold isn't considered passed until every pixel is visible. targeting an element to be observed once you have created the observer, you need to give it a target element to watch: let target = document.queryselector('#listitem'); observer.observe(target); // the callback we setup for the observer will be executed now for the first time // it waits until we assign a target to our observer (even if the target is currently not visible) whenever the target meets a threshold specified for the intersectionobserver, the callback is invoked. the callback receives a list of intersectionobserverentry objects and the observer:...

Microsoft API extensions - Web APIs
ndedcode msgraphicstrust msgraphicstruststatus msisboxed msplaytodisabled msplaytopreferredsourceuri msplaytoprimary msplaytosource msrealtime mssetmediaprotectionmanager mssetvideorectangle msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...

ReadableStream.tee() - Web APIs
processtext({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data. // value - some data. always undefined when done is true. if (done) { console.log("stream complete"); return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'read ' + charsreceived + ' characters so far. current chunk = ' + chunk; list.appendchild(listitem); // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'tee()' in that specification. ...

SVGAnimationElement: beginEvent event - Web APIs
h="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property e...

SVGAnimationElement: repeatEvent event - Web APIs
th="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property e...

Using writable streams - Web APIs
-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queu...

WritableStream.WritableStream() - Web APIs
-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queu...

WritableStream.getWriter() - Web APIs
-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queu...

WritableStream - Web APIs
-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queu...

WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queu...

WritableStreamDefaultWriter.close() - Web APIs
-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queu...

WritableStreamDefaultWriter.write() - Web APIs
-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queu...

WritableStreamDefaultWriter - Web APIs
t queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err)...

Using the group role - Accessibility
assistive technology products which can then notify the user about it. a group should be used to form a logical collection of items with related functionality, such as children in a tree widget forming a collection of siblings in a hierarchy, or a collection of items having the same container in a directory. however, when a group is used in the context of list, authors must limit its children to listitem elements. group elements may be nested. proper handling of a group by assistive technologies is determined by the context in which it is provided. if an author believes a section is significant enough to warrant inclusion in the page's table of contents, they should assign the section a role of region or a standard landmark role. possible effects on user agents and assistive technology when ...

Using ARIA: Roles, states, and properties - Accessibility
eir required and optional child roles. ...

ARIA Test Cases - Accessibility
ation of this item's position within the list if the screen reader supports this in other lists as well. as focus moves within the list, the screen reader should announce the relevant list items. ...

ARIA: button role - Accessibility
ate with enter or space // get the new name value from the input element let newnameinput = document.getelementbyid('newname'); let name = newnameinput.value; newnameinput.value = ''; // clear the text field newnameinput.focus(); // give the text field focus to enable entering and additional name. // don't add blank entries to the list. if(name.length > 0) { listitem = document.createelement('li'); listitem.appendchild(document.createtextnode(name)); // add the new name to the list. let list = document.getelementbyid('namelist'); list.appendchild(listitem); } } toggle button example in this snippet a <span> element is converted to a toggle button using the button role and the aria-pressed attribute. when the button is ...

WAI-ARIA Roles - Accessibility
.aria: img rolethe aria img role can be used to identify multiple elements inside page content that should be considered as a single image. these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.aria: list rolethe aria list role can be used to identify a list of items. it is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list.aria: listbox rolethe listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.aria: listitem rolethe aria listitem role can be used to identify an item inside a list of items. it is normally used in conjunction with the list role, whic...

HTML To MSAA - Accessibility
iobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" event_object_ statechange when state is changed label role_system_ statictext from child nodes n/a n/a n/a n/a n/a legend role_system_ statictext n/a n/a n/a label_for (0x1002), points to caption element n/a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_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_ s...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
role_dialog [semi-important, not currently used by all at's] role_border role_grouping role_separator [important] role_toolbar role_statusbar [important] role_table [important] role_columnheader role_rowheader role_column role_row role_cell [important] role_link [important] role_helpballoon role_character role_list [important] role_listitem [important] role_outline [important] role_outlineitem [important] role_pagetab [important] role_propertypage [important] role_indicator role_graphic [important] role_statictext [important] role_text [important] role_pushbutton [important] role_checkbutton [important] role_radiobutton [important] role_combobox [important] role_droplist [important...

Accessibility documentation index - Accessibility
at relates to the main content, yet can stand alone when separated. these sections are frequently presented as sidebars or call-out boxes. if possible, use the html <aside> element instead. 44 aria: list role aria, aria role, aria list, accessibility, reference, rôle, list the aria list role can be used to identify a list of items. it is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list. 45 aria: listitem role aria, aria role, aria listitem, accessibility, reference, rôle, listitem the aria listitem role can be used to identify an item inside a list of items. it is normally used in conjunction with the list role, which is used to identify a list container. 46 aria: main role ...

CSS Display - CSS: Cascading Style Sheets
css display is a module of css that defines how the css formatting box tree is generated from the document element tree and defines properties controlling it. ...

CSS reference - CSS: Cascading Style Sheets
umn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfo...

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
ox chrome safari image-controls-button div{ color: black; -moz-appearance: image-controls-button; -webkit-appearance: image-controls-button; } <div>lorem</div> safari list-button div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; } <div>lorem</div> safari datalist listitem div { color: black; -moz-appearance: listitem; -webkit-appearance: listitem; } <div>lorem</div> firefox chrome safari edge media-enter-fullscreen-button div{ color: black; -webkit-appearance: media-enter-fullscreen-button; } <div>lorem</div> chrome safari media-exit-fullscreen-button div{ col...

<dt>: The Description Term element - HTML: Hypertext Markup Language
tag omission must have a start tag. the end tag may be omitted if this element is immediately followed by another <dt> or a <dd> element, or if there is no more content in the parent element. permitted parents before a <dt> or a <dd> element, inside a <dl> or (in whatwg html) a <div> that is inside a <dl>. implicit aria role term permitted aria roles listitem dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element. attributes this element only includes the global attributes. example for an example, see the example provided for the <dl> element. specifications specification status comment html living standardthe definition of...

<li> - HTML: Hypertext Markup Language
egories none. permitted content flow content. tag omission the end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element. permitted parents an <ul>, <ol>, or <menu> element. though not a conforming usage, the obsolete <dir> can also be a parent. implicit aria role listitem when child of an ol, ul or menu permitted aria roles menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem dom interface htmllielement attributes this element includes the global attributes. value this integer attribute indicates the current ordinal value of the list item as defined by the <ol> element. the only ...