Search completed in 1.87 seconds.
DataTransferItemList.DataTransferItem() - Web APIs
the datatransfer
item() getter method implements support for accessing
items in the datatransfer
itemlist using array-style syntax (that is datatransfer
item[index]).
... syntax data
item = datatransfer
item[index]; parameters index the zero-based index of the
item in the drag data list to return.
... return value the datatransfer
item object at the specified index in the
item list.
...And 6 more matches
mssitemodejumplistitemremoved - Web APIs
the mss
itemodejumplist
itemremoved event occurs when mss
itemodeshowjumplist is called and an
item has been removed from a jump list by the user.
... syntax event property object.oncandidatewindowhide = handler; addeventlistener method object.addeventlistener("mss
itemodejumplist
itemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this event is raised once for every
item that has been removed since the last time mss
itemodeshowjumplist was called.
... this event is not triggered if mss
itemodeclearjumplist has been called.
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
in this guide we will be exploring the three properties that are applied to flex
items, which enable us to control the size and flexibility of the
items along the main axis — flex-grow, flex-shrink, and flex-basis.
... fully understanding how these properties work with growing and shrinking
items is the real key to mastering flexbox.
... a first look our three properties control the following aspects of a flex
item's flexibility: flex-grow: how much of the positive free space does this
item get?
...And 66 more matches
MenuItems - Archive of obsolete content
features of the menu
item element the menu
item element has a number of features beyond just being a label for a menu command.
... adding shortcut keys to menu
items a shortcut key may be associated with a menu
item.
...in reality, the keyboard shortcut is handled by the key element, however, the menu
item will display the shortcut next to its label.
...And 51 more matches
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
to center our box we use the align-
items property to align our
item on the cross axis, which in this case is the block axis running vertically.
... we use justify-content to align the
item on the main axis, which in this case the inline axis running horizontally.
... justify-content — controls alignment of all
items on the main axis.
...And 45 more matches
itemprop - HTML: Hypertext Markup Language
the
itemprop global attribute is used to add properties to an
item.
... every html element can have an
itemprop attribute specified, and an
itemprop consists of a name-value pair.
... each name-value pair is called a property, and a group of one or more properties forms an
item.
...And 32 more matches
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
flexbox was designed as a single dimensional layout, meaning that it deals with laying out
items as a row or as a column — but not both at once.
... there is however the ability to wrap flex
items onto new lines, creating new rows if flex-direction is row and new columns if flex-direction is column.
...this means that if you have a set of flex
items that are too wide for their container, they will overflow it.
...And 30 more matches
Dragging and Dropping Multiple Items - Web APIs
mozilla supports the ability to drag multiple
items using some additional non-standard methods.
... these are methods that mirror the types property as well as the getdata(), setdata() and cleardata() methods, however, they take an additional argument that specifies the index of the
item to retrieve, modify or remove.
...this processing does not use the datatransfer
item interface nor the datatransfer
itemlist interface.
...And 28 more matches
Ordering Flex Items - CSS: Cascading Style Sheets
we will also consider the implications of reordering
items from an accessibility point of view.
... reverse the display of the
items the flex-direction property can take one of four values: row column row-reverse column-reverse the first two values keep the
items in the same order that they appear in the document source order and display them sequentially from the start line.
... the second two values reverse the
items by switching the start and end lines.
...And 27 more matches
menuitem - Archive of obsolete content
attributes acceltext, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menu
item-iconic, menu
item-non-iconic examples <menulist> <menupopup> <menu
item label="option 1" value="1"/> <menu
item label="option 2" value="2"/> <menu
item label="option 3" value="3"/> <menu
item label="option 4" value="4"/> </menupopup> </menulist> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (ac...
... note: if the checked attribute is set to true, and you persist its value via the persist attribute, mozilla will fail to persist its value when the menu
item is unchecked because of bug 15232.
... a workaround is to set the autocheck attribute to false, then programmatically set the checked attribute when the user selects the
item, and set it to false instead of removing the attribute (i.e.
...And 23 more matches
align-items - CSS: Cascading Style Sheets
the css align-
items property sets the align-self value on all direct children as a group.
... in flexbox, it controls the alignment of
items on the cross axis.
... in grid layout, it controls the alignment of
items on the block axis within their grid area.
...And 23 more matches
nsIUpdateItem
toolkit/mozapps/extensions/public/nsiextensionmanager.idlscriptable describes an
item managed by the extension system, providing metadata describing the
item.
...ring version, in astring installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring targetappid); attributes attribute type description iconurl astring the url of the icon that can be shown for this
item.
... id astring the guid of the
item.
...And 22 more matches
justify-items - CSS: Cascading Style Sheets
the css justify-
items property defines the default justify-self for all
items of the box, giving them all a default way of justifying each box along the appropriate axis.
... the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns the
items inside their containing block on the inline axis.
... for absolutely-positioned elements, it aligns the
items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.
...And 22 more matches
itemscope - HTML: Hypertext Markup Language
itemscope is a boolean global attribute that defines the scope of associated metadata.
... specifying the
itemscope attribute for an element creates a new
item, which results in a number of name-value pairs that are associated with the element.
... a related attribute,
itemtype, is used to specify the valid url of a vocabulary (such as schema.org) that describes the
item and its properties context.
...And 22 more matches
place-items - CSS: Cascading Style Sheets
the css place-
items shorthand property allows you to align
items along both the block and inline directions at once (i.e.
... the align-
items and justify-
items properties) in a relevant layout system such as grid or flexbox.
... constituent properties this property is a shorthand for the following css properties: align-
items justify-
items syntax /* keyword values */ place-
items: auto center; place-
items: normal start; /* positional alignment */ place-
items: center normal; place-
items: start auto; place-
items: end normal; place-
items: self-start auto; place-
items: self-end normal; place-
items: flex-start auto; place-
items: flex-end normal; place-
items: left auto; place-
items: right normal; /* baseline alignment */ pl...
...And 20 more matches
Multiple item extension packaging - Archive of obsolete content
from the release of firefox 53, multiple
item extension packages are no longer supported and will not load.
... a multiple
item package provides the ability to package multiple installable bundles which can then be downloaded and installed by a user, or provided pre-packaged with an application or by an external program.
... every multiple
item package must provide an install.rdf file (not old-style install.js!) and has the same requirements as an extension except as noted below.
...And 16 more matches
itemtype - HTML: Hypertext Markup Language
the global attribute
itemtype specifies the url of the vocabulary that will be used to define
itemprop's (
item properties) in the data structure.
...
itemscope is used to set the scope of where in the data structure the vocabulary set by
itemtype will be active.
...in this case, musicevent would be the url used by
itemtype, with startdate and location as
itemprop's which musicevent defines.
...And 13 more matches
Add a Context Menu Item - Archive of obsolete content
to add
items and submenus to the firefox context menu, use the context-menu module.
... here's an add-on that adds a new context menu
item.
... the
item is displayed whenever something in the page is selected.
...And 12 more matches
DataTransferItem.webkitGetAsEntry() - Web APIs
if the
item described by the datatransfer
item is a file, webkitgetasentry() returns a filesystemfileentry or filesystemdirectoryentry representing it.
... if the
item isn't a file, null is returned.
... syntax datatransfer
item.webkitgetasentry(); parameters none.
...And 10 more matches
listitem - Archive of obsolete content
the text of the list
item is specified either using listcell elements, or by placing a label attribute directly on the list
item element.
... by default it contains a single listcell element of type and class appropriate to that of the list
item.
... attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes list
item-iconic examples <listbox id="thelist"> <list
item label="ruby"/> <list
item label="emerald"/> <list
item label="sapphire" selected="true"/> <list
item label="diamond"/> </listbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...And 9 more matches
Adding items to the Folder Pane
this tutorial examines how to add
items to an existing folder pane view.
...that container will have 3 child-
items, the numbers 1, 2, and 3.
... clicking on those
items will display the number in the main viewing pane of thunderbird.
...And 9 more matches
DataTransferItemList.add() - Web APIs
the datatransfer
itemlist.add() method creates a new datatransfer
item using the specified data and adds it to the drag data list.
... the
item may be a file or a string of a given type.
... if the
item is successfully added to the list, the newly-created datatransfer
item object is returned.
...And 9 more matches
ARIA: Listitem role - Accessibility
the aria list
item role can be used to identify an
item inside a list of
items.
... <section role="list"> <div role="list
item">list
item 1</div> <div role="list
item">list
item 2</div> <div role="list
item">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 list
item containers respectively.
... 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.
...And 9 more matches
nsIJumpListItem
widget/public/nsijumplist
item.idlscriptable implements windows 7 taskbar jump list
item interfaces.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: to consumers: it's reasonable to expect we'll need support for other types of jump list
items (an audio file, an email message, etc.).
... to add types, create the specific interface here, add an implementation class to winjumplist
item, and add support to addlistbuild and removed
items processing.
...And 8 more matches
DataTransferItem - Web APIs
the datatransfer
item object represents one drag data
item.
... during a drag operation, each drag event has a datatransfer property which contains a list of drag data
items.
... each
item in the list is a datatransfer
item object.
...And 8 more matches
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
summary: an obscure bug in gecko causes list-
item markers to be differently sizeed than the text of the list
item, but there is a fix authors can use.
... learn how to correctly size list
item markers in gecko 0.9.4, the basis of netscape 6.2.x and compuserve 7.
... shortly before mozilla 0.9.4 was finished, a bug was introduced that affects the sizing of list
item markers (such as the numbers in an ordered list).
...And 6 more matches
ClipboardItem - Web APIs
the clipboard
item interface of the clipboard api represents a single
item format, used when reading or writing data via the clipboard api.
... the benefit of having the clipboard
item interface to represent data, is that it enables developers to cope with the varying scope of file types and data easily.
... note: you can only pass in one clipboard
item at a time.
...And 6 more matches
DataTransfer.items - Web APIs
the read-only datatransfer property
items property is a list of the data transfer
items in a drag operation.
... the list includes one
item for each
item in the operation and if the operation had no
items, the list is empty.
... syntax
itemlist = datatransfer.
items; return value a datatransfer
itemlist object containing datatransfer
item objects representing the
items being dragged in a drag operation, one list
item for each object being dragged.
...And 6 more matches
DataTransferItemList - Web APIs
the datatransfer
itemlist object is a list of datatransfer
item objects representing
items being dragged.
... during a drag operation, each dragevent has a datatransfer property and that property is a datatransfer
itemlist.
... properties datatransfer
itemlist.length read only an unsigned long that is the number of drag
items in the list.
...And 6 more matches
itemid - HTML: Hypertext Markup Language
the
itemid global attribute provides microdata in the form of a unique, global identifier of an
item.
... an
itemid attribute can only be specified for an element that has both
itemscope and
itemtype attributes.
... also,
itemid can only be specified on elements that possess an
itemscope attribute whose corresponding
itemtype refers to or defines a vocabulary that supports global identifiers.
...And 6 more matches
DataTransferItemList.remove() - Web APIs
the datatransfer
itemlist.remove() method removes the datatransfer
item at the specified index from the list.
... syntax datatransfer
itemlist.remove(index); parameters index the zero-based index number of the
item in the drag data list to remove.
... if the index doesn't correspond to an existing
item in the list, the list is left unchanged.
...And 5 more matches
<menuitem> - HTML: Hypertext Markup Language
the html <menu
item> element represents a command that a user is able to invoke through a popup menu.
...(menu
items for indirect commands gain checkboxes or radio buttons when defined against elements <input type="checkbox"> and <input type="radio">.) content categories none.
...(if specified, the type attribute of the <menu> element must be popup; if missing, the parent element of the <menu> must itself be a <menu> in the popup menu state.) permitted aria roles none dom interface htmlmenu
itemelement attributes this element includes the global attributes; in particular title can be used to describe the command, or provide usage hints.
...And 5 more matches
insertItem - Archive of obsolete content
« xul reference home insert
item( id, beforenode, wrapper, beforepermanent ) not in seamonkey 1.x return type: element add an
item with the given id to the toolbar.
... the new
item is added just before the
item given by the second argument.
... if the second argument is null, but the beforepermanent argument is true, the
item is added to the beginning of the toolbar before the first permanent
item.
...And 4 more matches
DataTransferItem.getAsFile() - Web APIs
if the
item is a file, the datatransfer
item.getasfile() method returns the drag data
item's file object.
... if the
item is not a file, this method returns null.
... syntax file = datatransfer
item.getasfile(); parameters none.
...And 4 more matches
DataTransferItemList.length - Web APIs
the read-only length property of the datatransfer
itemlist interface returns the number of
items currently in the drag
item list.
... syntax length = datatransfer
itemlist.length; value the number of drag data
items in the list, or 0 if the list is empty or disabled.
... the drag
item list is considered to be disabled if the
item list's datatransfer object is not associated with a drag data store.
...And 4 more matches
Storage.removeItem() - Web APIs
the remove
item() method of the storage interface, when passed a key name, will remove that key from the given storage object if it exists.
... if there is no
item associated with the given key, this method will do nothing.
... syntax storage.remove
item(keyname); parameters keyname a domstring containing the name of the key you want to remove.
...And 4 more matches
Storage.setItem() - Web APIs
the set
item() method of the storage interface, when passed a key name and value, will add that key to the given storage object, or update that key's value if it already exists.
... syntax storage.set
item(keyname, keyvalue); parameters keyname a domstring containing the name of the key you want to create/update.
... exceptions set
item() may throw an exception if the storage is full.
...And 4 more matches
menuitem.type - Archive of obsolete content
« xul reference home type type: one of the values below can be used to create checkable menu
items or for radio button menu
items.
... checkbox the menu
item is checked.
... the checked attribute determines whether the menu
item is checked or not.
...And 3 more matches
ClipboardItem.getType() - Web APIs
the gettype() method of the clipboard
item interface returns a promise that resolves with a blob of the requested mime type or an error if the mime type is not found.
... syntax var blob = clipboard
item.gettype(type); parameters type a valid mime type.
... typeerror no parameter is specified or the type is not that of the clipboard
item.
...And 3 more matches
DataTransferItem.getAsString() - Web APIs
the datatransfer
item.getasstring() method invokes the given callback with the drag data
item's string data as the argument if the
item's kind is a plain unicode string (i.e.
... syntax datatransfer
item.getasstring(callback); parameters callback a callback function that has access to the data transfer
item's string data.
... return value undefined callback the callback parameter is a callback function which accepts one parameter: domstring the drag data
item's string data.
...And 3 more matches
DataTransferItem.kind - Web APIs
the read-only datatransfer
item.kind property returns a datatransfer
item representing the drag data
item kind: some text or some file.
... syntax var
itemkind = datatransfer
item.kind; return value a domstring representing the drag data
item's kind.
... it must be one of the following values: 'file' if the drag data
item is a file.
...And 3 more matches
DataTransferItemList.clear() - Web APIs
the datatransfer
itemlist method clear() removes all datatransfer
item objects from the drag data
items list, leaving the list empty.
... syntax datatransfer
itemlist.clear(); parameters none.
...">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.
items; datalist.add(ev.target.id, "text/plain"); // add some other
items to the drag payload datalist.add("<p>...
...And 3 more matches
HTMLSelectElement.item() - Web APIs
the htmlselectelement.
item() method returns the element corresponding to the htmloptionelement whose position in the options list corresponds to the index given in the parameter, or null if there are none.
... in javascript, using the array bracket syntax with an unsigned long, like selectelt[index] is equivalent to selectelt.named
item(index).
... syntax var
item = collection.
item(index); var
item = collection[index]; parameters index is an unsigned long.
...And 3 more matches
HTMLSelectElement.namedItem() - Web APIs
the htmlselectelement.named
item() method returns the htmloptionelement corresponding to the htmloptionelement whose name or id match the specified name, or null if no option matches.
... in javascript, using the array bracket syntax with a string, like selectelt["value"] is equivalent to selectelt.named
item("value").
... syntax var
item = collection.named
item(str); var
item = collection[str]; parameters str is a domstring.
...And 3 more matches
PaymentItem - Web APIs
the payment
item dictionary is used by the payment request api to describe a single line
item on a payment request.
... this might be an
item or service being purchased or a tax or other charge.
... properties amount secure context a paymentcurrencyamount object describing the monetary value of the
item.
...And 3 more matches
itemref - HTML: Hypertext Markup Language
properties that are not descendants of an element with the
itemscope attribute can be associated with an
item using the global attribute
itemref.
...
itemref provides a list of element ids (not
itemids) elsewhere in the document, with additional properties the
itemref attribute can only be specified on elements that have an
itemscope attribute specified.
... note: the
itemref attribute is not part of the microdata data model.
...And 3 more matches
richlistitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an individual
item in a richlistbox.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...to change the selection, set either the selectedindex or selected
item property of the containing element.
...And 2 more matches
treeitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a tree
item should be placed inside a treechildren element and should contain treerow elements.
... the tree
item can be clicked by the user to select the row of the tree.
... the tree
item contains a single row and all of what appear to the user as that row's descendants.
...And 2 more matches
Enumerator.item - Archive of obsolete content
the enumerator.
item method returns the current
item in the collection.
... syntax enumobj.
item() remarks the required enumobj reference is any enumerator object.
... the
item method returns the current
item.
...And 2 more matches
nsIDOMStorageItem
dom/interfaces/storage/nsidomstorage
item.idlscriptable this interface represents an object in dom storage.
... attributes attribute type description secure boolean if true, the
item was stored for an https page.
... note: all
items, regardless of whether they were stored for an http page or an https page, are visible from https pages.
...And 2 more matches
ClipboardItem() - Web APIs
the clipboard
item() constructor of the clipboard api creates a new clipboard
item object which represents data to be stored or retrieved via the clipboard api, that is clipboard.write() and clipboard.read() respectively.
... syntax var clipboard
item = new clipboard
item(clipboard
itemdata); parameters clipboard
itemdata an object with the mime type as the key and blob as the value.
... examples the below example requests a png image using the fetch api, and in turn, the responses' blob() method, to create a new clipboard
item and write it to the clipboard, using the clipboard api.
...And 2 more matches
DOMTokenList.item() - Web APIs
the
item() method of the domtokenlist interface returns an
item in the list by its index.
... syntax tokenlist.
item(index) parameters index a domstring representing the index of the
item you want to return.
... return value a domstring representing the returned
item.
...And 2 more matches
DataTransferItem.type - Web APIs
the read-only datatransfer
item.type property returns the type (format) of the datatransfer
item object representing the drag data
item.
... syntax data
item.type; return value a domstring representing the drag data
item's type.
... function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.
items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this
item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data
item is html console.log("...
...And 2 more matches
HTMLFormControlsCollection.namedItem() - Web APIs
the htmlformcontrolscollection.named
item() method returns the radionodelist or the element in the collection whose name or id match the specified name, or null if no node matches.
... note that this version of named
item() hides the one inherited from htmlcollection.
... like that one, in javascript, using the array bracket syntax with a string, like collection["value"] is equivalent to collection.named
item("value").
...And 2 more matches
Storage.getItem() - Web APIs
the get
item() method of the storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given storage object.
... syntax var avalue = storage.get
item(keyname); parameters keyname a domstring containing the name of the key you want to retrieve the value of.
... example the following function retrieves three data
items from local storage, then uses them to set custom styles on a page.
...And 2 more matches
insertItemAt - Archive of obsolete content
« xul reference home insert
itemat( index, label, value ) return type: element this method creates a new
item and inserts it at the specified position.
...the new
item element is returned.
... note: you cannot insert an
item to an index that does not exist, eg: trying to insert an
item at the end with element.getrowcount() + 1 example <!-- this example inserts at the selected
item or appends, then selects the newly created
item --> <script language="javascript"> function insert
itemtolist(){ var mylistbox = document.getelementbyid('mylistbox'); // create a date to get some labels and values var somedate = new date(); if(mylistbox.selectedindex == -1){ // no
item was selected in list so append to the end mylistbox.append
item( somedate.tolocaletimestring(), somedate.gettime() ); var newindex = mylistbox.getrowcount() -1 }else{ //
item was selected so insert at the selected
item var newindex = mylistbox.selectedin...
...dex; mylistbox.insert
itemat(newindex, somedate.tolocaletimestring(), somedate.gettime()); } // select the newly created
item mylistbox.selectedindex = newindex; } </script> <button label="insert
item at selected" oncommand="insert
itemtolist()"/> <listbox id="mylistbox"> <list
item label="foo"/> </listbox> see also append
item() remove
itemat() ...
removeItemAt - Archive of obsolete content
« xul reference home remove
itemat( index ) return type: element removes the child
item in the element at the specified index.
... the method returns the removed
item.
... <script language="javascript"> function removeselected
item(){ var mylistbox = document.getelementbyid('mylistbox'); if(mylistbox.selectedindex == -1){ return; // no
item selected so return }else{ mylistbox.remove
itemat(mylistbox.selectedindex); } } function removeall
items(){ var mylistbox = document.getelementbyid('mylistbox'); var count = mylistbox.
itemcount; while(count-- > 0){ mylistbox.remove
itemat(0); } } </script> <button label="remove selected
item" oncommand="removeselected
item()"/> <button label="remove all
items" oncommand="removeall
items()"/> <listbox id="mylistbox"> <list
item label="alpha"/> <list
item label="beta"/> <list
item label="oscar"/> <list
item label="foxtrot"/> </listbox> see also removeallit...
...ems() insert
itemat() ...
selectedItem - Archive of obsolete content
« xul reference selected
item type: element holds the currently selected
item.
... if no
item is currently selected, this value will be null.
... you can select an
item by setting this value.
...the listbox, richlistbox, radiogroup, etc., not the list
item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
toolbaritem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only an
item that appears on a toolbar.
... this element should wrap all customizable
items (unless they're instances of toolbarbutton).
... if you don't need the thing you're placing in the toolbar to be customized then it doesn't need to be in a toolbar
item element.
... examples <toolbar
item> <menulist label="bus"> <menupopup> <menu
item label="car"/> <menu
item label="taxi"/> <menu
item label="bus" selected="true"/> <menu
item label="train"/> </menupopup> </menulist> </toolbar
item> <toolbar
item id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbar
item> attributes inherited from xul element align, allowevents, allownegativeas...
ClipboardItem.types - Web APIs
the read-only types property of the clipboard
item interface returns an array of mime types available within the clipboard
item syntax var types = clipboard
item.types; value an array of available mime types.
... examples in the below example, we're returning all
items on the clipboard via the clipboard.read() method.
... then checking the types property for available types before utilizing the clipboard
item.gettype() method to return the blob object.
... async function getclipboardcontents() { try { const clipboard
items = await navigator.clipboard.read(); for (const clipboard
item of clipboard
items) { for (const type of clipboard
item.types) { const blob = await clipboard
item.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboard
item' in that specification.
DataTransfer.mozItemCount - Web APIs
the datatransfer.moz
itemcount property returns the number of
items being dragged.
... syntax datatransfer.moz
itemcount; return value a number representing the number of
items being dragged.
... example this example shows the use of the moz
itemcount property.
... function drop_handler(event) { var files = []; var dt = event.datatransfer; for (var i = 0; i < dt.moz
itemcount; i++) files.push(dt.mozgetdataat("application/x-moz-file", i)); } specifications this property is not defined in any web standard.
HTMLCollection.item - Web APIs
the htmlcollection method
item() returns the node located at the specified offset into the collection.
... syntax var element = htmlcollection.
item(index) parameters index the position of the node to be returned.
... usage notes the
item() method returns a numbered element from an htmlcollection.
... example var c = document.images; // this is an htmlcollection var img0 = c.
item(0); // you can use the
item() method this way var img1 = c[1]; // but this notation is easier and more common ...
MSSiteModeEvent - Web APIs
mss
itemodeevent provides event properties that are specific to pinned site events.
... dom information inheritance hierarchy event mss
itemodeevent methods method description initevent initializes a new generic event that the createevent method created.
... properties property description actionurl gets the url of a jump list
item that is removed.
... example interface mss
itemodeevent extends event { buttonid: number; actionurl: string; } declare var mss
itemodeevent: { prototype: mss
itemodeevent; new(): mss
itemodeevent; } see also microsoft api extensions ...
TouchList.item() - Web APIs
the
item() method returns the touch object at the specified index in the touchlist.
... syntax var touchpoint = touchlist.
item(index); parameters index the index of the touch object to retrieve.
... example this code example illustrates the use of the touchlist interface's
item method and the length property.
... target = document.getelementbyid("target"); target.addeventlistener('touchstart', function(ev) { // if this touchstart event started on element target, // set touch to the first
item in the targettouches list; // otherwise set touch to the first
item in the touches list var touch; if (ev.targettouches.length >= 1) touch = ev.targettouches.
item(0); else touch = ev.touches.
item(0); }, false); specifications specification status comment touch events – level 2 draft non-stable version.
XPathResult.snapshotItem() - Web APIs
the snapshot
item() method of the xpathresult interface returns an
item of the snapshot collection or null in case the index is not within the range of nodes.
... syntax var node = result.snapshot
item(i); return value the node at the given index within the node set of the xpathresult.
... example the following example shows the use of the snapshot
item() method.
... html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); var node = null; var tagnames = []; for(var i = 0; i < result.snapshotlength; i++) { var node = result.snapshot
item(i); tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.snapshot
item()' in that specification.
<display-listitem> - CSS: Cascading Style Sheets
the list-
item keyword causes the element to generate a ::marker pseudo-element with the content specified by its list-style properties (for example a bullet point) together with a principal box of the specified type for its own contents.
... syntax a single value of list-
item will cause the element to behave like a list
item.
... list-
item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords.
... examples html <div class="fake-list">i will display as a list
item</div> css .fake-list { display: list-
item; list-style-position: inside; } result specifications specification status css display module level 3the definition of 'display-list
item' in that specification.
menuitem.name - Archive of obsolete content
« xul reference home name type: string name radio menu
items with the same name as put into a group.
... only one menu
item in each radio group can be checked at a time.
... example <toolbox> <menubar id="planets-menubar"> <menu id="planet-menu" label="planet"> <menupopup> <menu
item id="jupiter" label="jupiter" type="radio" name="planet"/> <menu
item id="saturn" label="saturn" type="radio" name="planet" checked="true"/> <menu
item id="uranus" label="uranus" type="radio" name="planet"/> </menupopup> </menu> </menubar> </toolbox> see also name and menus in the xul tutorial ...
getSelectedItem - Archive of obsolete content
« xul reference home getselected
item( index ) return type: element when multiple
items are selected, you can retrieve each selected
item using this method.
... the argument index specifies the index in the list of the selected
items, not the row number of the
item.
... the
item index is zero-based, thus this example will return the first selected
item: getselected
item(0).
menulist.appendItem - Archive of obsolete content
« xul reference home append
item( label, value, description ) return type: element creates a new menu
item element and adds it to the end of the menulist.
...the function returns the new
item.
... see also append
item ...
VBArray.getItem - Archive of obsolete content
the vbarray.get
item method returns the
item at the specified location.
... syntax safearray.get
item(dimension1[, dimension2, ...], dimensionn) parameters safearray a vbarray object.
... <head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(i, j) = k document.writeln(k) k = k + 1 next document.writeln("<br>") next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function get
itemtest(vbarray) { var i, j; var a = new vbarray(vbarray); for (i = 0; i <= 2; i++) { for (j =0; j <= 2; j++) { document.writeln(a.get
item(i, j)); } } } --> </script> </head> <body> <script type="text/javascript"> <!-- get
itemtest(createvbarray()); --> </script> </body> requirements supported in the following document modes: quirks, internet explorer 6...
Flex Item - MDN Web Docs Glossary: Definitions of Web-related terms
the direct children of a flex container (elements with display: flex or display: inline-flex set on them) become flex
items.
... continuous runs of text inside flex containers will also become flex
items.
... learn more property reference align-self flex-basis flex-grow flex-shrink order further reading css flexbox guide: basic concepts of flexbox css flexbox guide: ordering flex
items css flexbox guide: controlling ratios of flex
items along the main axis ...
ROLE_OUTLINEITEM
« gecko roles page represents an
item in an outline or tree structure.
... interfaces nsiaccessibletreecache nsiaccessible nsiaccessibleselectable nsiaccessnode mapped to at-spi: role_list_
item atk: atk_role_list_
item ua: nsaccessibilityrowrole (use outlinerow as subrole) msaa/ia2: role_system_outline
item used by aria: tree
item html: ??
... xul: <tree
item/> ...
CSSStyleDeclaration.item() - Web APIs
the cssstyledeclaration.
item() method interface returns a css property name from a cssstyledeclaration by index.
... syntax var propertyname = style.
item(index); parameters index is the index of the node to be fetched.
... javascript has a special simpler syntax for obtaining an
item from a nodelist by index: var propertyname = style[index]; example var style = document.getelementbyid('div1').style; var propertyname = style.
item(1); // or simply style[1] - returns the second style listed specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.
item()' in that specification.
CSSValueList.item() - Web APIs
the
item() method of the cssvaluelist interface is used to retrieve a cssvalue by ordinal index.
... syntax var cssvalue = cssvaluelist.
item(index); parameters index an unsigned long representing the index of the css value within the collection.
... specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvaluelist.
item' in that specification.
HTMLMenuItemElement - Web APIs
the htmlmenu
itemelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating <menu
item> elements.
...andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenu
itemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenu
itemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis inte...
...rface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html 5.1the definition of 'htmlmenu
itemelement' in that specification.
NodeList.item() - Web APIs
syntax node
item = nodelist.
item(index) nodelist is a nodelist.
... node
item is the indexth node in the nodelist returned by the
item method.
... alternate syntax javascript also offers an array-like bracketed syntax for obtaining an
item from a nodelist by index: node
item = nodelist[index] example var tables = document.getelementsbytagname("table"); var firsttable = tables.
item(1); // or simply tables[1] - returns the second table in the dom specifications specification status comment domthe definition of 'nodelist:
item' in that specification.
SVGAltGlyphItemElement - Web APIs
the svgaltglyph
itemelement interface corresponds to the <altglyph
item> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgaltglyph
itemelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyph
itemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgaltglyph
itemelement' in that specification.
<altGlyphItem> - SVG: Scalable Vector Graphics
the <altglyph
item> element provides a set of candidates for glyph substitution by the <altglyph> element.
... usage context categoriestext content elementpermitted contentone or more <glyphref> elements example attributes global attributes core attributes specific attributes none dom interface this element implements the svgaltglyph
itemelement interface.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<altglyph
item>' in that specification.
appendItem - Archive of obsolete content
« xul reference home append
item( label, value ) return type: element creates a new
item and adds it to the end of the existing list of
items.
... example <script language="javascript"> function add
itemstolist(){ var list = document.getelementbyid('mymenulist'); // add
item with just the label list.append
item('one'); // add
item with label and value list.append
item('two', 999); // select the first
item list.selectedindex = 0; } </script> <button label="add
items" oncommand="add
itemstolist()"/> <menulist id="mymenulist"> <menupopup/> </menulist> see also insert
itemat() remove
itemat() ...
getIndexOfItem - Archive of obsolete content
« xul reference home getindexof
item(
item ) return type: integer returns the zero-based position of the specified
item.
...
items are numbered starting at the first
item displayed in the list.
getNextItem - Archive of obsolete content
« xul reference home getnext
item( start
item, delta ) return type: element this method returns the
item a given distance (delta) after the specified start
item, or null if no such
item exists.
... this example will return the
item two rows after some
item: getnext
item ( some
item, 2 ); ...
getPreviousItem - Archive of obsolete content
« xul reference home getprevious
item( start
item, delta ) return type: element this method returns the
item a given distance (delta) before the specified start
item, or null if no such
item exists.
... this example will return the
item five rows before some
item: getprevious
item ( some
item, 5 ); ...
selectItemRange - Archive of obsolete content
« xul reference home select
itemrange( start
item, end
item ) return type: no return value selects the
items between the two
items given as arguments, including the start and end
items.
... all other
items are deselected.
toggleItemSelection - Archive of obsolete content
« xul reference home toggle
itemselection(
item ) return type: no return value if the specified
item is selected, it is deselected.
...other
items in the list box that are selected are not affected, and retain their selected state.
focusedItem - Archive of obsolete content
« xul reference focused
item type: radio element holds the currently focused
item in the radiogroup, which may or may not be the same as the selected
item.
... you can change the focused
item by setting this property.
itemCount - Archive of obsolete content
« xul reference
itemcount type: integer read only property holding the number of child
items.
... example var bucket = document.getelementbyid("attachmentbucket"); if(bucket.
itemcount == 0) { dump("\n\n no attachments \n\n"); } else { dump("\n\n attachment exists \n\n"); } ...
menuitem-non-iconic - Archive of obsolete content
« xul reference home menu
item-non-iconic normally, menu
items have a margin to the left for an image or checkmark.
... this class may be used to remove this margin so that the menu
item appears on the left edge of the menupopup.
Sizing items in CSS - Learn web development
previous overview: building blocks next in the various lessons so far you have come across a number of ways to size
items on a web page using css.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing
items in css images, media, and form elements styling tables debugging css organizing your css ...
ROLE_MENUITEM
« gecko roles page represents a menu
item, which is an entry in a menu that a user can choose to carry out a command, select an option.
...mapped to at-spi: role_menu_
item atk: atk_role_menu_
item ua: nsaccessibilitymenu
itemrole msaa/ ia2: role_system_menu
item used by aria: menu
item xul: <menu
item/> ...
context-menu - Archive of obsolete content
adds
items, submenus, and menu separators to the page's context menu.
... usage instead of manually adding
items when particular contexts occur and then removing them when those contexts go away, you bind
items to contexts, and the adding and removing is automatically handled for you.
...
items are bound to contexts in much the same way that event listeners are bound to events.
...And 103 more matches
nsINavBookmarksService
toolkit/components/places/nsinavbookmarksservice.idlscriptable the bookmarksservice interface provides methods for managing bookmarked history
items.
...ervice, use: var navbookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); method overview void addobserver(in nsinavbookmarkobserver observer, in boolean ownsweak); void beginupdatebatch(); obsolete since gecko 1.9 void changebookmarkuri(in long long a
itemid, in nsiuri anewuri); long long createdynamiccontainer(in long long aparentfolder, in autf8string aname, in astring acontractid, in long aindex); note: renamed from createcontainer in gecko 1.9 obsolete since gecko 13.0 long long createfolder(in long long aparentfolder, in autf8string name, in long index); void endupdatebatch(); obsolete since gecko 1.9 void e...
... obsolete since gecko 2.0 nsiuri getbookmarkuri(in long long a
itemid); long long getchildfolder(in long long afolder, in astring asubfolder); obsolete since gecko 2.0 long long getfolderidfor
item(in long long a
itemid); boolean getfolderreadonly(in long long a
itemid); astring getfoldertitle(in print64 folder); obsolete since gecko 1.9 nsiuri getfolderuri(in print64 folder); obsolete since gecko 1.9 long long...
...And 103 more matches
Index - Archive of obsolete content
44 context-menu add-on sdk, add-ons, extensions, firefox, sdk adds
items, submenus, and menu separators to the page's context menu.
... 142 add a context menu
item add-on sdk, firefox, guide no summary!
... 143 add a menu
item to firefox add-on sdk no summary!
...And 86 more matches
nsIAnnotationService
method overview void setpageannotation(in nsiuri auri, in autf8string aname, in nsivariant avalue, in long aflags, in unsigned short aexpiration); void set
itemannotation(in long long a
itemid, in autf8string aname, in nsivariant avalue, in long aflags, in unsigned short aexpiration); void setpageannotationstring(in nsiuri auri, in autf8string aname, in astring avalue, in long aflags, in unsigned short aexpiration); boolean set
itemannotationstring(in long long a
itemid, in autf8string aname, in astring avalue, in long aflags, in unsigned ...
...short aexpiration); void setpageannotationint32(in nsiuri auri, in autf8string aname, in long avalue, in long aflags, in unsigned short aexpiration); void set
itemannotationint32(in long long a
itemid, in autf8string aname, in long avalue, in long aflags, in unsigned short aexpiration); void setpageannotationint64(in nsiuri auri, in autf8string aname, in long long avalue, in long aflags, in unsigned short aexpiration); void set
itemannotationint64(in long long a
itemid, in autf8string aname, in long long avalue, in long aflags, in unsigned short aexpiration); void setpageannotationdouble(in nsiuri auri, in autf8string aname, in double avalue, in long aflags, in unsigned short aexpiration); void set
itemannotationdouble(in long long a
itemid, in a...
...utf8string aname, in double avalue, in long aflags, in unsigned short aexpiration); void setpageannotationbinary(in nsiuri auri, in autf8string aname,[const, array, size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in long aflags, in unsigned short aexpiration); void set
itemannotationbinary(in long long a
itemid, in autf8string aname,[const, array, size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in long aflags, in unsigned short aexpiration); nsivariant getpageannotation(in nsiuri auri, in autf8string aname); nsivariant get
itemannotation(in long long a
itemid, in autf8string aname); astring getpageannotationstring(in nsiuri auri, in autf8string aname); astring getit...
...And 79 more matches
Enhanced Extension Installation - Archive of obsolete content
it forces its
items to be located in different places on the user's disk - some vendors wish to keep all of their installed content within c:\program files\foo\ for example.
... there is no clean uninstall procedure, as the -install-global-extension flag was designed only as a means to install
items for all user profiles, not as a means for third party installers to register their components.
...
items that are installed must be visible in the extension manager user interface, even if the extension type is just an integration hook that has no meaningful ui presence.
...And 78 more matches
Index - Web APIs
437 csspositionvalue.x api, css typed object model api, csspositionvalue, experimental, houdini, property, reference, x the x property of the csspositionvalue interface returns returns the
item's position along the web page's horizontal axis.
... 438 csspositionvalue.y api, css typed object model api, csspositionvalue, experimental, houdini, property, reference, y the y property of the csspositionvalue interface returns the
item's position along the vertical axis.
... 460 cssstyledeclaration.
item() api, cssom, method, reference the cssstyledeclaration.
item() method interface returns a css property name from a cssstyledeclaration by index 461 cssstyledeclaration.length api, cssom, property, reference the read-only property returns an integer that represents the number of style declarations in this css declaration block.
...And 77 more matches
Menu - Archive of obsolete content
jetpack.menu(menu
items) creates a menu with the given
items.
... parameters menu
items an array of menu
items.
...the
items property may be used to define an array of menu
items.
...And 67 more matches
Index - Archive of obsolete content
the purpose of this article is not to describe these
items in any great detail but to define what they are in simple terms.
... i selected
items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-platform development.
... in contrast to the mozilla jargon file, this article describes
items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
...And 67 more matches
Basic concepts of flexbox - CSS: Cascading Style Sheets
the flexible box module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between
items in an interface and powerful alignment capabilities.
... understanding which axis is which is important when we start to look at aligning and justifying flex
items; flexbox features properties that align and justify content along one axis or the other.
... you can read more about the relationship between flexbox and the writing modes specification in a later article; however, the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex
items flow in.
...And 67 more matches
nsINavBookmarkObserver
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) method overview void onbefore
itemremoved(in long long a
itemid, in unsigned short a
itemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); obsolete since gecko 21.0 void onbeginupdatebatch(); void onendupdatebatch(); void onfolderadded(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 void onfolderchanged(in print64 folder, in acstring property); obsolete since gecko 1.9 void onfoldermoved(in print64 fol...
...der, in print64 oldparent, in print32 oldindex, in print64 newparent, in print32 newindex); obsolete since gecko 1.9 void onfolderremoved(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 void on
itemadded(in long long a
itemid, in long long aparentid, in long aindex, in unsigned short a
itemtype, in nsiuri auri, in autf8string atitle, in prtime adateadded, in acstring aguid, in acstring aparentguid); void on
itemchanged(in long long a
itemid, in acstring aproperty, in boolean aisannotationproperty, in autf8string anewvalue, in prtime alastmodified, in unsigned short a
itemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); void on
itemmoved(in long long a
itemid, in long long aoldparentid, in long aoldindex, in...
... long long anewparentid, in long anewindex, in unsigned short a
itemtype, in acstring aguid, in acstring aoldparentguid, in acstring anewparentguid); void on
itemremoved(in long long a
itemid, in long long aparentid, in long aindex, in unsigned short a
itemtype, in nsiuri auri, in acstring aguid, in acstring aparentguid); void on
itemreplaced(in print64 folder, in nsiuri
item, in nsiuri new
item); obsolete since gecko 1.9 void on
itemvisited(in long long a
itemid, in long long avisitid, in prtime atime, in unsigned long atransitiontype, in nsiuri auri, in long long aparentid, in acstring aguid, in acstring aparentguid); void onseparatoradded(in print64 parent, in print32 index); obsolete since gecko 1.9 void onseparatorremoved(in print64 parent, in print32...
...And 59 more matches
listbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of
items where one or more of the
items may be selected.
...there are numerous methods which allow the
items in the listbox to be retrieved and modified.
...a listbox is expected to contain list
item elements.
...And 56 more matches
richlistbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of list
items (richlist
items), similar to a listbox, but is designed to be used when the
items do not contain simple text content.
... attributes disabled, disablekeynavigation, preference, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, current
item, disabled, disablekeynavigation,
itemcount, scrollboxobject, selectedcount, selectedindex, selected
item, selected
items, seltype, suppressonselect, tabindex, value methods add
itemtoselection, append
item, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexof
item, get
itematindex, getnumberofvisiblerows, getrowcount, getselected
item, insert
itemat, invertselection, movebyoffset, remove
itemat, remove
itemfromselection, scrolltoindex, sele...
...ctall, select
item, select
itemrange, timedselect, toggle
itemselection examples <richlistbox> <richlist
item> <description>a xul description!</description> </richlist
item> <richlist
item> <button label="a xul button"/> </richlist
item> </richlistbox> the richlistbox element contains multiple richlist
item elements, which can contain any content.
...And 52 more matches
Menus - Archive of obsolete content
menulist a menulist is used when you wish the user to select from a list of
items.
... for this type of menu, one of the
items within it is selected.
... when another
item is selected, the label of the
item is set as the label of the menulist.
...And 48 more matches
places/bookmarks - Archive of obsolete content
usage this module exports: three constructors: bookmark, group, and separator, corresponding to the types of objects, referred to as bookmark
items, in the bookmarks database in firefox two additional functions, save() to create, update, and remove bookmark
items, and search() to retrieve the bookmark
items that match a particular set of criteria.
... each retrieved bookmark
item represents only a snapshot of state at a specific time.
... the module does not automatically sync up a bookmark instance with ongoing changes to that
item in the database from the same add-on, other add-ons, or the user.
...And 47 more matches
Vue conditional rendering: editing existing todos - Learn web development
previous overview: client-side javascript frameworks next now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo
items.
... to do this, we will take advantage of vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo
item view, and an edit view where you can update todo
item labels.
... we'll also look at adding functionality to delete todo
items.
...And 46 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
i have five child
items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels.
... i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis,
items will wrap onto a new row.
... .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 150px; } in the image, you can see that two
items have wrapped onto a new line.
...And 43 more matches
Flexbox - Learn web development
previous overview: css layout next flexbox is a one-dimensional layout method for laying out
items in rows or columns.
...
items flex to fill additional space and shrink to fit into smaller spaces.
...in this case we want to lay out the <article> elements, so we set this on the <section>: section { display: flex; } this causes the <section> element to become a flex container, and its children to become flex
items.
...And 39 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
in addition to the ability to place
items accurately onto a created grid, the css grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child
items.
... you can see auto-placement in action in the simplest of ways by creating a grid on a set of
items.
... if you give the
items no placement information they will position themselves on the grid, one in each grid cell.
...And 37 more matches
Manipulating Lists - Archive of obsolete content
list manipulation the listbox element provides numerous methods to retrieve and manipulate its
items.
... the append
item() function is used to append a new
item to the end a list.
...here is an example: example 1 : source view <script> function add
item(){ document.getelementbyid('thelist').append
item("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="add
item();"/> the append
item() takes two arguments, the label, in this case 'thursday', and a value 'thu'.
...And 34 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout implements the specification box alignment level 3 which is the same standard flexbox uses for aligning
items in its flex container.
... aligning
items on the block axis the align-self and align-
items properties control alignment on the block axis.
... when we use these properties, we are changing the alignment of the
item within the grid area you have placed it.
...And 33 more matches
Arrays - Learn web development
previous overview: first steps next in the final article of this module, we'll look at arrays — a neat way of storing a list of data
items under a single variable name.
... here we look at why this is useful, then explore how to create an array, retrieve, add, and remove
items stored in an array, and more besides.
...maybe we've got a series of product
items and their prices stored in an array, and we want to loop through them all and print them out on an invoice, while totaling all the prices together and printing out the total price at the bottom.
...And 32 more matches
Accessibility Inspector - Firefox Developer Tools
right-click an
item in the html pane of the page inspector, and choose show accessibility properties in the context menu.
... features of the accessibility panel the enabled accessibility panel looks like so: on the left-hand side, there is a tree diagram representing all the
items in the accessibility tree for the current page.
...
items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy.
...And 31 more matches
ARIA Test Cases - Accessibility
when closing the menu, this should be indicated, and focus should be repeated for the menu button the menu was opened from, or the new focus location if the activated menu
item results in that.
...but when dropping down the lists of states in either example, after the second or so list
item, jaws turns off forms mode, and the user has to turn off v cursor to be able to make selections or tab to anything useful.
... regression testers should test both tabbing forward and back, to make sure that the groupbox description and button description are both read when the button is the first
item focused in the groupbox.
...And 31 more matches
SVGTransformList - Web APIs
note: starting in gecko 9.0,the svgtransformlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear() svgtransform initialize(in svgtransform new
item) svgtransform get
item(in unsigned long index) svgtransform insert
itembefore(in svgtransform new
item, in unsigned long index) svgtransform replace
item(in svgtransform new
item, in unsigned long index) svgtransform remove
item(in unsigned long index) svgtransform append
item(in svgtransform new
item) svgtransform createsvgtransformfrommatrix(in svgmatrix) svgtransform...
... consolidate() properties readonly unsigned long numberof
items readonly unsigned long length normative document svg 1.1 (2nd edition) properties name type description numberof
items unsigned long the number of
items in the list.
... length unsigned long the number of
items in the list.
...And 30 more matches
Typical use cases of Flexbox - CSS: Cascading Style Sheets
in a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of
items out in one direction or another.
... as you lay out your
items you want to control the dimensions of the
items in that one dimension, or control the spacing between
items.
... navigation a common pattern for navigation is to have a list of
items displayed as a horizontal bar.
...And 29 more matches
MenuModification - Archive of obsolete content
modifying a menu menus have a number of methods which may be used to add and remove
items.
... adding
items to a menu the append
item method may be used to append a new
item to the end of the popup associated with a menu.
... this method will create a new menu
item element and insert it into the popup.
...And 28 more matches
Creating our first Vue component - Learn web development
previous overview: client-side javascript frameworks next now it's time to dive deeper into vue, and create our own custom component — we'll start by creating a component to represent each
item in the todo list.
... creating a todo
item component let's create our first component, which will display a single todo
item.
... in your moz-todo-vue/src/components directory, create a new file named todo
item.vue.
...And 28 more matches
Enc Dec MAC Output Public Key as CSR
file.\n\n", ""); exit(-1); } /* map option letter enumerated commad type */ static commandtype option2command(const char* c) { switch (*c) { case 'g': return gen_csr; case 'e': return encrypt; case 'd': return decrypt; default: return unknown; } } /* * wrap the symkey using public key */ secstatus wrapkey(pk11symkey* key, seckeypublickey *pubkey, sec
item **wrappedkey) { secstatus rv; sec
item *data = (sec
item *)port_zalloc(sizeof(sec
item)); if (!data) { pr_fprintf(pr_stderr, "error while allocating memory\n"); rv = secfailure; goto cleanup; } data->len = seckey_publickeystrength(pubkey); data->data = (unsigned char*)port_zalloc((data->len)*sizeof(unsigned int)); if (!data->data) { pr_f...
...printf(pr_stderr, "error while allocating memory\n"); rv = secfailure; goto cleanup; } rv = pk11_pubwrapsymkey(ckm_rsa_pkcs, pubkey, key, data); if (rv != secsuccess) { rv = secfailure; } else { *wrappedkey = data; return secsuccess; } cleanup: if (data) { sec
item_free
item(data, pr_true); } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, sec
item *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_false, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetr...
...return secfailure; } pr_fprintf(outfile, "%s\n", header); printasascii(outfile, buf, len); pr_fprintf(outfile, "%s\n\n", trailer); return secsuccess; } /* * initialize for encryption or decryption - common code */ pk11context * cryptinit(pk11symkey *key, unsigned char *iv, unsigned int ivlen, ck_mechanism_type type, ck_attribute_type operation) { sec
item iv
item = { sibuffer, iv, ivlen }; pk11context *ctx = null; sec
item *secparam = pk11_paramfromiv(type, &iv
item); if (secparam == null) { pr_fprintf(pr_stderr, "crypt failed : secparam null\n"); return null; } ctx = pk11_createcontextbysymkey(type, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't create a cont...
...And 28 more matches
Places Developer Guide
there are two models of identity in the system: uris, and unique integer identifiers for
items in the bookmark system.
... some of the apis are uri-centric, some use
item ids.
...bookmarks the toolkit bookmarks service is nsinavbookmarksservice: var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); this service provides methods for adding, editing and deleting
items in the bookmarks collection.
...And 27 more matches
Microdata DOM API - Web APIs
the document.get
items(typenames) method provides access to the top-level microdata
items.
... it returns a nodelist containing the
items with the specified types, or all types if no argument is specified.
... each
item is represented in the dom by the element on which the relevant
itemscope attribute is found.
...And 27 more matches
ContextMenus - Archive of obsolete content
context menus a context menu is a menu where the
items on the menu are specific to the context in which the menu was opened.
... <window id="main-window"> <popupset> <menupopup id="ins-del-menu"> <menu
item label="insert"/> <menu
item label="delete"/> </menupopup> </popupset> </window> <grid context="ins-del-menu"> <columns> <column/> <column flex="1"/> </columns> <rows id="rows"> <row align="center"> <label value="name:"/> <textbox/> </row> </rows> </grid> the same context menu can be attached to multiple elements.
...for example, the following will attach a context menu with the id 'contentareacontextmenu' to a browser element: <browser context="contentareacontextmenu"> indicating the default
item on some platforms, one of the
items in a context menu is marked as being a default operation.
...And 26 more matches
menulist - Archive of obsolete content
to create the drop-down, put a menupopup inside the menulist containing the choices as menu
item elements.
... attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield,
itemcount, label, menuboxobject, menupopup, open, selectedindex, selected
item, tabindex, value methods append
item, contains, getindexof
item, get
itematindex, insert
itemat, removeall
items, remove
itemat, select examples <menulist> <menupopup> <menu
item label="option 1" value="1"/> <menu
item label="option 2" value="2"/> <menu
item label="option 3" value="3"/> <menu
item label="op...
...for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } disableautoselect type: boolean if this attribute is true or omitted, the selected
item on the menu will update to match what the user entered in the textbox.
...And 26 more matches
Places utilities for JavaScript
load_in_sidebar_anno - this annotation is associated with bookmarks or
items that should load in the sidebar automatically.
...; boolean nodeisreadonly(nsinavhistoryresultnode anode); boolean nodeishost(nsinavhistoryresultnode anode); boolean nodeiscontainer(nsinavhistoryresultnode anode); boolean nodeisdynamiccontainer(nsinavhistoryresultnode anode); boolean nodeislivemarkcontainer(nsinavhistoryresultnode anode); obsolete since gecko 21 boolean nodeislivemark
item(nsinavhistoryresultnode anode); obsolete since gecko 21 boolean isreadonlyfolder(nsinavhistoryresultnode anode); int getindexofnode(nsinavhistoryresultnode anode); string wrapnode(nsinavhistoryresultnode anode, string atype, nsiuri aoverrideuri); array unwrapnodes(string blob, string atype); nsitransaction maketransaction(string data, string type, nsin...
...avhistoryresultnode container, int index, boolean copy); nsinavhistoryresult getfoldercontents(int afolderid, boolean aexclude
items, boolean aexpandqueries); boolean showaddbookmarkui(nsiuri auri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker, boolean aloadinsidebar, string akeyword, string apostdata); boolean showminimaladdbookmarkui(nsiuri auri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker, boolean aloadinsidebar, string akeyword, string apostdata); boolean showaddlivemarkui(nsiuri afeeduri, nsiuri asiteuri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker); boolean showminimaladdlivemarkui(nsiuri afeeduri, nsiuri asiteuri, string atitle...
...And 26 more matches
SVGLengthList - Web APIs
note: starting in gecko 5.0,the svglengthlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear() svglength initialize(in svglength new
item) svglength get
item(in unsigned long index) svglength insert
itembefore(in svglength new
item, in unsigned long index) svglength replace
item(in svglength new
item, in unsigned long index) svglength remove
item(in unsigned long index) svglength append
item(in svglength new
item) properties readonly unsigned long numberof
items readonly unsigned long len...
...gth normative document svg 1.1 (2nd edition) properties name type description numberof
items unsigned long the number of
items in the list.
... length unsigned long the number of
items in the list.
...And 26 more matches
SVGNumberList - Web APIs
interface overview also implement none methods void clear() svgnumber initialize(in svgnumber new
item) svgnumber get
item(in unsigned long index) svgnumber insert
itembefore(in svgnumber new
item, in unsigned long index) svgnumber replace
item(in svgnumber new
item, in unsigned long index) svgnumber remove
item(in unsigned long index) svgnumber append
item(in svgnumber new
item) properties readonly unsigned long numberof
items readonly unsigned...
... long length normative document svg 1.1 (2nd edition) properties name type description numberof
items unsigned long the number of
items in the list.
... length unsigned long the number of
items in the list.
...And 26 more matches
SVGStringList - Web APIs
interface overview also implement none methods void clear() domstring initialize(in domstring new
item) domstring get
item(in unsigned long index) domstring insert
itembefore(in domstring new
item, in unsigned long index) domstring replace
item(in domstring new
item, in unsigned long index) domstring remove
item(in unsigned long index) domstring append
item(in domstring new
item) properties readonly unsigned long numberof
items readonly unsigned long length ...
... normative document svg 1.1 (2nd edition) properties name type description numberof
items unsigned long the number of
items in the list.
... length unsigned long a mirror of the value in numberof
items, for consistency with other interfaces.
...And 26 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
item placement you can place
items into a precise location on the grid using line numbers, names or by targeting an area of the grid.
... grid also contains an algorithm to control the placement of
items not given an explicit position on the grid.
... alignment control grid contains alignment features so we can control how the
items align once placed into a grid area, and how the entire grid is aligned.
...And 26 more matches
SVGPathSegList - Web APIs
interface overview also implement none methods void clear() svgpathseg initialize(in svgpathseg new
item) svgpathseg get
item(in unsigned long index) svgpathseg insert
itembefore(in svgpathseg new
item, in unsigned long index) svgpathseg replace
item(in svgpathseg new
item, in unsigned long index) svgpathseg remove
item(in unsigned long index) svgpathseg append
item(in svgpathseg new
item) properties readonly unsigned long numb...
...erof
items normative document svg 1.1 (2nd edition) properties name type description numberof
itemsread only unsigned long the number of
items in the list.
... methods clear() void clears all existing current
items from the list, with the result being an empty list.
...And 25 more matches
SVGPointList - Web APIs
interface overview also implement none methods void clear() svgpoint initialize(in svgpoint new
item) svgpoint get
item(in unsigned long index) svgpoint insert
itembefore(in svgpoint new
item, in unsigned long index) svgpoint replace
item(in svgpoint new
item, in unsigned long index) svgpoint remove
item(in unsigned long index) svgpoint append
item(in svgpoint new
item) properties ...
... readonly unsigned long numberof
items normative document svg 1.1 (2nd edition) properties name type description numberof
items unsigned long the number of
items in the list.
... methods name & arguments return description clear() void clears all existing current
items from the list, with the result being an empty list.
...And 25 more matches
Rendering a list of Vue components - Learn web development
previous overview: client-side javascript frameworks next at this point we've got a fully working component; we're now ready to add multiple todo
item components to our app.
... in this artcle we'll look at adding a set of todo
item data to our app.vue component, which we'll then loop through and display inside todo
item components using the v-for directive.
... rendering lists with v-for to be an effective to-do list, we need to be able to render multiple to-do
items.
...And 24 more matches
Index
113 detailed xpcom hashtable guide guide, xpcom a hashtable is a data construct that stores a set of
items.
... each
item has a key that identifies the
item.
...
items are found, added, and removed from the hashtable by using the key.
...And 24 more matches
justify-content - CSS: Cascading Style Sheets
the css justify-content property defines how the browser distributes space between and around content
items along the main-axis of a flex container, and the inline axis of a grid container.
... syntax /* positional alignment */ justify-content: center; /* pack
items around the center */ justify-content: start; /* pack
items from the start */ justify-content: end; /* pack
items from the end */ justify-content: flex-start; /* pack flex
items from the start */ justify-content: flex-end; /* pack flex
items from the end */ justify-content: left; /* pack
items from the left */ justify-content: right; /* pack
items from the right */ /* ba...
...seline alignment */ /* justify-content does not take baseline values */ /* normal alignment */ justify-content: normal; /* distributed alignment */ justify-content: space-between; /* distribute
items evenly the first
item is flush with the start, the last is flush with the end */ justify-content: space-around; /* distribute
items evenly
items have a half-size space on either end */ justify-content: space-evenly; /* distribute
items evenly
items have equal space around them */ justify-content: stretch; /* distribute
items evenly stretch 'auto'-sized
items to fit ...
...And 24 more matches
Adding menus and submenus - Archive of obsolete content
the toolbox should be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menu
item label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menu
item label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menu
item label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> ...
... <menuseparator /> <menu
item label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting.
... the separator is usually displayed as a horizontal line that creates a logical division between different types of menu
item elements, keeping everything more organized.
...And 23 more matches
Client-side storage - Learn web development
new school: web storage and indexeddb the "easier" features we mentioned above are as follows: the web storage api provides a very simple syntax for storing and retrieving smaller, data
items consisting of a name and a corresponding value.
... the storage.set
item() method allows you to save a data
item in storage — it takes two parameters: the name of the
item, and its value.
... try typing this into your javascript console (change the value to your own name, if you wish!): localstorage.set
item('name','chris'); the storage.get
item() method takes one parameter — the name of a data
item you want to retrieve — and returns the
item's value.
...And 23 more matches
nss tech note5
ck_mechanism_type ciphermech = ckm_des_cbc_pad <big>(for example)</big> choose a slot on which to to do the operation pk11slotinfo* slot = pk11_getbestslot(ciphermech, null); or pk11slotinfo* slot = pk11_getinternalkeyslot(); /* alwys returns internal slot, may not be optimal */ prepare the key if using a raw key /* turn the raw key into a sec
item */ sec
item key
item; key
item.data = /* ptr to an array of key bytes */ key
item.len = /* length of the array of key bytes */ /* turn the sec
item into a key object */ pk11symkey* symkey = pk11_importsymkey(slot, ciphermech, pk11_originunwrap, cka_encrypt, &...
...key
item, null); if generating the key - see section generate a symmetric key <big>prepare the parameter for crypto context.
...if not using cbc mode, just pass a null iv parm to pk11_paramfromiv function sec
item iv
item; iv
item.data = /* ptr to an array of iv bytes */ iv
item.len = /* length of the array of iv bytes */ sec
item *secparam = pk11_paramfromiv(ciphermech, &iv
item);</big> <big>now encrypt and decrypt using the key and parameter setup in above steps</big> create encryption context pk11context* enccontext = pk11_createcontextbysymkey(ciphermech, cka_encrypt or cka_decrypt, symkey, secparam); do the operation.
...And 23 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
we go to a two column layout, and then to a three column layout by redefining the grid, and the placement of
items on the grid.</p> </article> <aside class="side">sidebar</aside> <div class="ad">advertising</div> <footer class="main-footer">the footer</footer> </div> as we are using grid-template-areas to create the layout.
... .main-head { grid-area: header; } .content { grid-area: content; } .main-nav { grid-area: nav; } .side { grid-area: sidebar; } .ad { grid-area: ad; } .main-footer { grid-area: footer; } this will not create any layout, however our
items now have names we can use to do so.
...i have not defined any column or row tracks but this layout dictates a single column, and rows will be created as needed for each of the
items in the implicit grid.
...And 23 more matches
align-content - CSS: Cascading Style Sheets
the css align-content property sets the distribution of space between and around content
items along a flexbox's cross-axis or a grid's block axis.
... syntax /* basic positional alignment */ /* align-content does not take left and right values */ align-content: center; /* pack
items around the center */ align-content: start; /* pack
items from the start */ align-content: end; /* pack
items from the end */ align-content: flex-start; /* pack flex
items from the start */ align-content: flex-end; /* pack flex
items from the end */ /* normal alignment */ align-content: normal; /* baseline alignment */ align-content: baseline; align-content: first baseline; align-...
...content: last baseline; /* distributed alignment */ align-content: space-between; /* distribute
items evenly the first
item is flush with the start, the last is flush with the end */ align-content: space-around; /* distribute
items evenly
items have a half-size space on either end */ align-content: space-evenly; /* distribute
items evenly
items have equal space around them */ align-content: stretch; /* distribute
items evenly stretch 'auto'-sized
items to fit the container */ /* overflow alignment */ align-content: safe center; align-content: unsafe center;...
...And 23 more matches
Extensions - Archive of obsolete content
for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menu
item label="web"/> <menu
item label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu.
... adding a new menu
item you might wish to add a new
item to one of the menus.
... this can be done by overlaying the popup to append the
item to.
...And 22 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
use a cross-package overlay on top of browser.xul to add a button or menu
item to the firefox browser window.
... developing a simple extension: hello world in this section, we will write an extremely simple “hello world” extension that only displays the time.3 phase 1: test install our first step will be to perform a test installation consisting of the minimum code needed to add a new menu
item to the tools menu (figure 3).
... content/overlay.xul xul file that will be overlaid on the firefox browser window, adding buttons, menu
items, etc.
...And 21 more matches
Introduction to CSS layout - Learn web development
for example, the <li> element is display: block by default, meaning that list
items display one below the other in our english document.
... in addition to being able to change the default presentation by turning an
item from block to inline and vice versa, there are some bigger layout methods that start out as a value of display.
...to use flexbox, you apply display: flex to the parent element of the elements you want to lay out; all its direct children then become flex
items.
...And 21 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
progname, dbdir, headerfilename, encryptedfilename); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-d -d <dbdirpath> -b <headerfilename> -e <encryptfilename> -o <opfilename>\n"); exit(-1); } } /* * sign the contents of input file using private key and * return result as sec
item */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, sec
item *res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[4096]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_...
... if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_end\n"); goto cleanup; } cleanup: if (infile) { pr_close(infile); } if (sgn) { sgn_destroycontext(sgn, pr_true); } return rv; } /* * verify the signature using public key */ secstatus verifydata(const char *infilename, seckeypublickey *pk, sec
item *sig
item, secupwdata *pwdata) { unsigned int nb; unsigned char ibuf[4096]; secstatus rv = secfailure; vfycontext *vfy = null; prfiledesc *infile = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", ...
...infilename); rv = secfailure; goto cleanup; } vfy = vfy_createcontext(pk, sig
item, sec_oid_pkcs1_md5_with_rsa_encryption, pwdata); if (!vfy) { pr_fprintf(pr_stderr, "unable to create context for verifying signature\n"); rv = secfailure; goto cleanup; } rv = vfy_begin(vfy); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while vfy_begin\n"); goto cleanup; } while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { rv = vfy_update(vfy, ibuf, nb); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while vfy_update\n"); goto cleanup; } } rv =...
...And 21 more matches
HTML Drag and Drop API - Web APIs
each drag event type has an associated global event handler: event on event handler fires when… drag ondrag …a dragged
item (element or text selection) is dragged.
... dragend ondragend …a drag operation ends (such as releasing a mouse button or hitting the esc key; see finishing a drag.) dragenter ondragenter …a dragged
item enters a valid drop target.
... dragleave ondragleave …a dragged
item leaves a valid drop target.
...And 21 more matches
Special per-platform menu considerations - Archive of obsolete content
for many menu commands, convention dictates where these
items will be placed.
... some menu
items have specific common labels or locations where certain menu
items would go that differ on each platform.
... for instance, on windows, the menu
item which exits the application is labeled "exit" and is normally placed at the end of the file menu.
...And 20 more matches
Tree View Details - Archive of obsolete content
here, we will examine how to create a hierarchical set of
items using the view.
... this is a fairly tricky process as it involves keeping track of which
items have children and also which rows are open and closed.
... containers there are also three functions, iscontainer, iscontainerempty and iscontaineropen that are used to handle a parent
item in the tree.
...And 20 more matches
Accessibility API cross-reference
all accessibility apis to date define a list of possible object roles, or general types, such as button, menu
item, text, etc.
...all accessibility apis to date define a list of possible object roles, or general types, such as button, menu
item, text, etc.
... banner a portion of quoted content which is 'too long' to appear 'inline' n/a blockquote <blockquote> entire window border as 1 object border n/a n/a n/a specific kind of button that drops down a list of
items, msaa only buttondropdown n/a n/a expressed with aria-haspopup on an element with a button role specific kind of button that drops down a grid, msaa only buttondropdowngrid n/a n/a specific kind of button that drops down a menu, msaa only buttonmenu n/a n/a expressed with aria-haspopup on an element with a...
...And 20 more matches
Encrypt Decrypt_MAC_Using Token
*/ secstatus gathercka_id(pk11symkey* key, sec
item* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key.
... */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, sec
item *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key.
... */ pk11context * cryptinit(pk11symkey *key, unsigned char *iv, unsigned int ivlen, ck_mechanism_type type, ck_attribute_type operation) { sec
item iv
item = { sibuffer, iv, ivlen }; pk11context *ctx = null; sec
item *secparam = pk11_paramfromiv(ckm_aes_cbc, &iv
item); if (secparam == null) { pr_fprintf(pr_stderr, "crypt failed : secparam null\n"); return null; } ctx = pk11_createcontextbysymkey(ckm_aes_cbc, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't...
...And 20 more matches
mix-blend-mode - CSS: Cascading Style Sheets
t | difference | exclusion | hue | saturation | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="
item firefox"></div> <svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,...
...50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </lineargradient> <lineargradient id="blue"> <stop offset="0" stop-color="hsl(240,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </lineargradient> </defs> <ellipse class="
item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="
item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="
item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> multiply <div class="container multiply"> <div class="group"> <div class="
item firefox...
..."></div> <svg viewbox="0 0 150 150"> <ellipse class="
item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="
item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="
item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> darken <div class="container darken"> <div class="group"> <div class="
item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="
item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="
item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="
item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> ...
...And 20 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
you would use this to set a hidden or absent state, for example
items that aren't displayed in contextual menus.
... <menubar> <menu label="menu 1"> <menupopup> <menu
item label="
item 1"/> <menu
item label="
item 2"/> <menuseparator/> <menu
item label="
item 3"/> <menu label="submenu"> <menupopup> <menu
item label="
item 4"/> <menu
item label="
item 5"/> </menupopup> </menu> </menupopup> </menu> </menubar> listing 9: a menu definition figure 6: output from listing 9 each
item in a menu is marked ...
...up with the menu
item tag.
...And 19 more matches
JXON - Archive of obsolete content
conversion snippets now imagine you have this sample xml document: example.xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_
item gender="men's"> <
item_number>qwz5671</
item_number> <price>39.95</price> <size description="medium"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> <size description="large"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgun...
...dy_cardigan.jpg">burgundy</color_swatch> </size> </catalog_
item> <catalog_
item gender="women's"> <
item_number>rrx9856</
item_number> <discount_until>dec 25, 1995</discount_until> <price>42.50</price> <size description="medium"> <color_swatch image="black_cardigan.jpg">black</color_swatch> </size> </catalog_
item> </product> <script type="text/javascript"><![cdata[function matchwo(a,b) { if (a < b && a < 0) { return 1; } else { return 0; } }]]></script> </catalog> first, create a dom tree like the previous example as described in the how to create a dom tree article.
... return null; } if (/^(?:true|false)$/i.test(svalue)) { return svalue.tolowercase() === "true"; } if (isfinite(svalue)) { return parsefloat(svalue); } if (isfinite(date.parse(svalue))) { return new date(svalue); } return svalue; } function jxontree (oxmlparent) { var nattrlen = 0, nlength = 0, scollectedtxt = ""; if (oxmlparent.haschildnodes()) { for (var onode, sprop, vcontent, n
item = 0; n
item < oxmlparent.childnodes.length; n
item++) { onode = oxmlparent.childnodes.
item(n
item); if ((onode.nodetype - 1 | 1) === 3) { scollectedtxt += onode.nodetype === 3 ?
...And 19 more matches
Creating regular expressions for a microsummary generator - Archive of obsolete content
in this tutorial, we'll explain how to make regular expressions that match the urls for ebay auction
item pages.
... urls 101 urls for auction
item pages on ebay, like those on many other sites, usually start with the string "http://" and contain a domain name, a file path, and some query parameters.
... here's a url for an auction
item page on ebay: http://cgi.ebay.com/ws/ebayisapi.dll?view
item&
item=280018439106 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?view
item&
item=280018439106".
...And 19 more matches
sample2
rr, "%s -d -d %s -b %s -e %s -o : output file name is not found\n", progname, dbdir, headerfilename, encryptedfilename); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-d -d <dbdirpath> -b <headerfilename> -e <encryptfilename> -o <opfilename>\n"); exit(-1); } } /* * sign the contents of input file using private key and * return result as sec
item */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, sec
item *res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[4096]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto ...
...fprintf(pr_stderr, "problem while sgn_update\n"); goto cleanup; } } rv = sgn_end(sgn, res); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_end\n"); goto cleanup; } cleanup: if (infile) { pr_close(infile); } if (sgn) { sgn_destroycontext(sgn, pr_true); } return rv; } /* * verify the signature using public key */ secstatus verifydata(const char *infilename, seckeypublickey *pk, sec
item *sig
item, secupwdata *pwdata) { unsigned int nb; unsigned char ibuf[4096]; secstatus rv = secfailure; vfycontext *vfy = null; prfiledesc *infile = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } vfy = vfy_createcontext(pk, sig
item, sec_...
..., header); pr_fprintf(outfile, "%s\n", buf); pr_fprintf(outfile, "%s\n\n", trailer); return secsuccess; break; default: return secfailure; } pr_fprintf(outfile, "%s\n", header); printashex(outfile, buf, len); pr_fprintf(outfile, "%s\n\n", trailer); return secsuccess; } /* * read cryptographic parameters from the header file */ secstatus readfromheaderfile(const char *filename, headertype type, sec
item *
item, prbool ishexdata) { secstatus rv = secsuccess; prfiledesc* file = null; sec
item filedata; sec
item outbuf; unsigned char *nonbody; unsigned char *body; char *header; char *trailer; outbuf.type = sibuffer; file = pr_open(filename, pr_rdonly, 0); if (!file) { pr_fprintf(pr_stderr, "failed to open %s\n", filename); rv = secfailure; goto cleanup; } switch (type) { case pubkey: header = pubkey_h...
...And 19 more matches
justify-self - CSS: Cascading Style Sheets
the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns an
item inside its containing block on the inline axis.
... for absolutely-positioned elements, it aligns an
item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.
... in table cell layouts, this property is ignored (more about alignment in block, absolute positioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns an
item inside its grid area on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-self: auto; justify-self: normal; justify-self: stretch; /* positional alignment */ justify-self: center; /* pack
item around the center */ justify-self: start; /* pack
item from the start */ justify-self: end; /* pack
item from the end */ justify-self: flex-start; /* equivalent to 'start'.
...And 19 more matches
toolbar - Archive of obsolete content
note: starting in gecko 1.9.1, toolbar
items are moved from the toolbarpalette and added to the toolbar when a toolbar is first displayed.
... in earlier versions, a copy of each
item was created and placed on the toolbar.
... this means that the palette now only contains
items not already in the toolbar.
...And 18 more matches
tree - Archive of obsolete content
the third column indicates whether tree
item element are used.
... description content tree nsitreeview, nsitreecontentview yes this tree has tree
item elements placed within the treechildren element.
... in this situation, a content view (which implements the interface nsitreecontentview) which is a more specialized type of view, uses the tree
item elements and their descendants to determine the data to display in the tree.
...And 18 more matches
Encrypt Decrypt MAC Keys As Session Objects
", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, sec
item* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mecha...
...nism_type mechanism, int keysize, sec
item *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) ...
...ler); break; } pr_fprintf(outfile, "%s\n", header); printashex(outfile, buf, len); pr_fprintf(outfile, "%s\n\n", trailer); return secsuccess; } /* * initialize for encryption or decryption - common code */ pk11context * cryptinit(pk11symkey *key, unsigned char *iv, unsigned int ivlen, ck_mechanism_type type, ck_attribute_type operation) { sec
item iv
item = { sibuffer, iv, ivlen }; pk11context *ctx = null; sec
item *secparam = pk11_paramfromiv(ckm_aes_cbc, &iv
item); if (secparam == null) { pr_fprintf(pr_stderr, "crypt failed : secparam null\n"); return null; } ctx = pk11_createcontextbysymkey(ckm_aes_cbc, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't...
...And 18 more matches
Encrypt and decrypt MAC using token
", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, sec
item* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mecha...
...nism_type mechanism, int keysize, sec
item *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) ...
...ler); break; } pr_fprintf(outfile, "%s\n", header); printashex(outfile, buf, len); pr_fprintf(outfile, "%s\n\n", trailer); return secsuccess; } /* * initialize for encryption or decryption - common code */ pk11context * cryptinit(pk11symkey *key, unsigned char *iv, unsigned int ivlen, ck_mechanism_type type, ck_attribute_type operation) { sec
item iv
item = { sibuffer, iv, ivlen }; pk11context *ctx = null; sec
item *secparam = pk11_paramfromiv(ckm_aes_cbc, &iv
item); if (secparam == null) { pr_fprintf(pr_stderr, "crypt failed : secparam null\n"); return null; } ctx = pk11_createcontextbysymkey(ckm_aes_cbc, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't...
...And 18 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
*/ /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, sec
item* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mecha...
...nism_type mechanism, int keysize, sec
item *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) ...
...ler); break; } pr_fprintf(outfile, "%s\n", header); printashex(outfile, buf, len); pr_fprintf(outfile, "%s\n\n", trailer); return secsuccess; } /* * initialize for encryption or decryption - common code */ pk11context * cryptinit(pk11symkey *key, unsigned char *iv, unsigned int ivlen, ck_mechanism_type type, ck_attribute_type operation) { sec
item iv
item = { sibuffer, iv, ivlen }; pk11context *ctx = null; sec
item *secparam = pk11_paramfromiv(ckm_aes_cbc, &iv
item); if (secparam == null) { pr_fprintf(pr_stderr, "crypt failed : secparam null\n"); return null; } ctx = pk11_createcontextbysymkey(ckm_aes_cbc, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't...
...And 18 more matches
menu - Archive of obsolete content
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image,
itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods append
item, getindexof
item, get
itematindex, insert
itemat, remove
itemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu
item label="new"/> <menu
item label="open"/> <menu
item label="save"/...
...> <menuseparator/> <menu
item label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menu
item label="undo"/> <menu
item label="redo"/> </menupopup> </menu> </menubar> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
...for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
...And 17 more matches
radiogroup - Archive of obsolete content
attributes disabled, focused, preference, tabindex, value properties accessibletype, disabled, focused
item,
itemcount, selectedindex, selected
item, tabindex, value methods append
item, checkadjacentelement, getindexof
item, get
itematindex, insert
itemat, remove
itemat examples <radiogroup> <radio id="orange" label="red"/> <radio id="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> </radiogroup> attributes disabled type: boolean indicates whether the elem...
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
... focused
item type: radio element holds the currently focused
item in the radiogroup, which may or may not be the same as the selected
item.
...And 17 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
previous overview: client-side javascript frameworks next we now have sample data in place, and a loop that takes each bit of data and renders it inside a todo
item in our app.
... what we really need next is the ability to allow our users to enter their own todo
items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data.
... creating a new to-do form we now have an app that displays a list of to-do
items.
...And 17 more matches
nsIJumpListBuilder
the default number of allowed
items in a jump list is ten.
...user may also pin
items to jump lists, which take up additional slots.
... applications do not have control over the number of
items allowed in jump lists; excess
items added are dropped by the system.
...And 17 more matches
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
the box alignment module for many people the first reason they start to look at flexbox is because of the ability to properly align flex
items inside a flex container.
... flexbox provides access to properties that allow the alignment of
items on their cross axis and justification of
items on the main axis.
...additionally, any new values defined in the box alignment module will apply to flexible box layout; in otherwords, the box alignment module, once completed, will supercede the definitions here." in a later article in this series — aligning
items in a flex container — we will take a thorough look at how the box alignment properties apply to flex
items.
...And 17 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
if we position an
item using absolute positioning, we use these physical keywords as offset values to push the
item around.
... in the code snippet below, the
item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position: relative; } .
item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="
item">
item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right.
...in default writing mode, grid auto-places
items starting at the top left, moving along to the right, filling up the three cells on the inline axis.
...And 17 more matches
place-content - CSS: Cascading Style Sheets
values start the
items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.
... end the
items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.
... flex-start the
items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start or cross-start side.
...And 17 more matches
Tree Selection - Archive of obsolete content
« previousnext » the section will describe how to get and set the selected
items in a tree.
... getting the selected tree
items each
item in a tree (that corresponds to tree
item element, if using content tree view) may be selected individually.
...the tree provides a number of functions which can be used to determine whether an
item is selected.
...And 16 more matches
XUL controls - Archive of obsolete content
<button type="menu" label="view"> <menupopup> <menu
item label="list"/> <menu
item label="details"/> </menupopup> </button> more information about this type of menu button element.
... button reference related elements: menupopup menu
item <button type="menu-button"> a button that that has a separate arrow button with a menu attached to it.
... <button type="menu-button" label="new"> <menupopup> <menu
item label="new document"/> <menu
item label="new image"/> </menupopup> </button> more information about this type of menu button element.
...And 16 more matches
tabs - Archive of obsolete content
attributes closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltiptextnew, value, properties accessibletype, disabled,
itemcount, selectedindex, selected
item, tabindex, value, methods advanceselectedtab, append
item, getindexof
item, get
itematindex, insert
itemat, remove
itemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...the first
item is at index 0.
...And 16 more matches
TPS Bookmark Lists
after: the title of the bookmark
item expected to be found after this bookmark; used only in verify and modify actions.
... before: the title of the bookmark
item expected to be found before this bookmark; used only in verify and modify actions.
...the properties for this object include the uri, title, loadinsidebar, description, tags, keyword properties above, plus two additional properties: location: the full path of the folder that the bookmark should be moved to position: the title of the existing bookmark
item, in the current folder, where this bookmark should be moved to (i.e., this bookmark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { uri: "http://www.google.com", title: "google", loadinsidebar: false, tags: [ "google", "computers", "misc" ] } livemark objects valid properties are: livemark: ...
...And 16 more matches
nsIAccessibleRole
role_menu
item 12 represents a menu
item, which is an entry in a menu that a user can choose to carry out a command, select an option.
... it is used for xul:menu
item, role="menu
item".
...users can navigate between panes and within the contents of the current pane, but cannot navigate between
items in different panes.
...And 16 more matches
nsINavHistoryResultViewer
wtitle); void noderemoved(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode, in unsigned long aoldindex); void nodetagschanged(in nsinavhistoryresultnode anode); void nodeurichanged(in nsinavhistoryresultnode anode, in autf8string anewuri); void nodereplaced(in nsinavhistorycontainerresultnode parent, in nsinavhistoryresultnode old
item, in nsinavhistoryresultnode new
item, in unsigned long index); void nodeinserted(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode , in unsigned long anewindex); void sortingchanged(in unsigned short sortingmode); attributes attribute type description result nsinavhistoryresult the nsinavhistoryresult this viewer m...
...the
item may be a container or a leaf.
... void
itemmoved( in nsinavhistoryresultnode anode, in nsinavhistorycontainerresultnode aoldparent, in unsigned long aoldindex, in nsinavhistorycontainerresultnode anewparent, in unsigned long anewindex ); parameters anode the moved
item.
...And 16 more matches
CSS Box Alignment - CSS: Cascading Style Sheets
on the block (cross) axis the alignment of the
items inside their grid areas is controlled with align-
items.
... the first
item overrides the align-
items value set on the group by setting align-self to center.
... flexbox alignment example in this example, three flex
items are aligned on the main axis using justify-content and on the cross axis using align-
items.
...And 16 more matches
align-self - CSS: Cascading Style Sheets
the align-self css property overrides a grid or flex
item's align-
items value.
... in grid, it aligns the
item inside the grid area.
... in flexbox, it aligns the
item on the cross axis.
...And 16 more matches
Microdata - HTML: Hypertext Markup Language
microdata uses a supporting vocabulary to describe an
item and name-value pairs to assign values to its properties.
...the groups are called
items, and each name-value pair is a property.
...
items and properties are represented by regular elements.
...And 16 more matches
JavaScript Client API - Archive of obsolete content
in this case, it is highly recommended to use the utils.makeguid() helper to generate new guids: let newguid = utils.makeguid(); your store object must implement the following methods:
itemexists(id) createrecord(id, collection) change
itemid(oldid, newid) getallids() wipe() create(record) update(record) remove(record) you may also find it useful to override other methods of the base implementation, for example applyincomingbatch if the underlying storage for your data supports batch operations.
... createrecord the createrecord( id, collection ) method gets called by the engine to request a new record for an
item with a given guid.
...
itemexists(guid) should simply return true if an
item with the given guid exists in the store, false otherwise.
...And 15 more matches
More Tree Features - Archive of obsolete content
the tree view has a number of functions which specify the hierarchy of the
items in a tree.
... each
item in the tree has a level starting at 0.
... the topmost
items in the tree will have a level of 0, the children of those
items will have a level of 1, the children below that will have a level of 2, and so on.
...And 15 more matches
ssltyp.html
types and structures managing sec
item memory types and structures these types and structures are described here: certcertdbhandle certcertificate pk11slotinfo sec
item seckeyprivatekey secstatus additional types used by a single function only are described with the function's entry in each chapter.
... syntax #include <pk11expt.h> typedef struct pk11slotinfostr pk11slotinfo; sec
item a structure that points to other structures.
... syntax #include <seccomon.h> #include <prtypes.h> #include <secport.h> typedef enum { sibuffer, sicleardatabuffer, sicipherdatabuffer, sidercertbuffer, siencodedcertbuffer, sidernamebuffer, siencodednamebuffer, siasciinamestring, siasciistring, sideroid } sec
itemtype; typedef struct sec
itemstr sec
item; struct sec
itemstr { sec
itemtype type; unsigned char *data; unsigned int len; }; description a sec
item structure can be used to associate your own data with an ssl socket.
...And 15 more matches
nsICollection
xpcom/ds/nsicollection.idlscriptable this interface represents a list of nsisupports
items.
... it provides basic operations on those
items like: getting, setting, appending, removing, and so on.
... inherits from: nsiserializable last changed in gecko 1.7 method overview void appendelement(in nsisupports
item); void clear(); pruint32 count(); nsienumerator enumerate(); nsisupports getelementat(in pruint32 index); void queryelementat(in pruint32 index, in nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result); void removeelement(in nsisupports
item); void setelementat(in pruint32 index, in nsisupports
item); methods appendelement() appends a new
item to the collection.
...And 15 more matches
nsIInstallLocation
you can get the install location of a particular add-on using nsiextensionmanager interface: var il = components.classes["@mozilla.org/extensions/manager;1"] .getservice(components.interfaces.nsiextensionmanager) .getinstalllocation("add-on id") method overview astring getidforlocation(in nsifile file); nsifile get
itemfile(in astring id, in astring path); nsifile get
itemlocation(in astring id); nsifile getstagefile(in astring id); boolean
itemismanagedindependently(in astring id); void removefile(in nsifile file); nsifile stagefile(in nsifile file, in astring id); attributes attribute type description canaccess boolean whether or not the user can write to the install location with the curre...
...
itemlocations nsidirectoryenumerator an enumeration of nsifiles for: locations that contain
items potential dropped-in xpis note: this enumeration resolves text links to the directories they refer to.
... location nsifile the file system location where
items live.
...And 15 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
in the article covering the basic concepts of grid layout, we started to look at how to position
items on a grid using line numbers.
...if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one
item in each of the first four cells.
...olid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning
items by line number we can use line-based placement to control where these
items sit on the grid.
...And 15 more matches
List Controls - Archive of obsolete content
list boxes a list box is used to display a number of
items in a list.
... the user may select an
item from the list.
...the simplest list box uses the listbox element for the box itself, and the list
item element for each
item.
...And 14 more matches
Using Remote XUL - Archive of obsolete content
the categorized links are analogous to menu
items organized into menus, where clicking the link/selecting the menu
item performs some function, so we'll use xul menu elements to implement them in our document.
... source | rendered step 4: menu
items menus aren't terribly useful unless they contain selectable
items.
... to add
items to a menu, we need to first add a menupopup element and then put menu
item elements within it for each
item we want to appear on the menu.
...And 14 more matches
Styling lists - Learn web development
from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em.) the list
items (<li> elements) have no set defaults for spacing.
... rule 4 sets the same line-height on the paragraphs and list
items — so the paragraphs and each individual list
item will have the same spacing between lines.
... rules 5 and 6 apply to the description list — we set the same line-height on the description list terms and descriptions as we did with the paragraphs and list
items.
...And 14 more matches
EncDecMAC using token object - sample 3
intf(stderr, "%-7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, sec
item* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, sec
item *k...
...ad: strcpy(header, pad_header); strcpy(trailer, pad_trailer); break; } pr_fprintf(outfile, "%s\n", header); printashex(outfile, buf, len); pr_fprintf(outfile, "%s\n\n", trailer); return secsuccess; } /* * initialize for encryption or decryption - common code */ pk11context * cryptinit(pk11symkey *key, unsigned char *iv, unsigned int ivlen, ck_mechanism_type type, ck_attribute_type operation) { sec
item iv
item = { sibuffer, iv, ivlen }; pk11context *ctx = null; sec
item *secparam = pk11_paramfromiv(ckm_aes_cbc, &iv
item); if (secparam == null) { pr_fprintf(pr_stderr, "crypt failed : secparam null\n"); return null; } ctx = pk11_createcontextbysymkey(ckm_aes_cbc, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't create a context\n"); goto cleanup; } cleanup: i...
...f (secparam) { sec
item_free
item(secparam, pr_true); } return ctx; } /* * common encryption and decryption code */ secstatus crypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int maxout, unsigned char *in, unsigned int inlen) { secstatus rv; rv = pk11_cipherop(ctx, out, outlen, maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen, maxout, in, inlen); } /* * encrypt */ secstatus encrypt(pk11context* ctx, unsigned char *out, unsigned int *outlen...
...And 14 more matches
Gecko Roles
role_nothing used when the accessible
item doesn't have a strongly defined role.
... role_menu
item represents a menu
item, which is an entry in a menu that a user can choose to carry out a command, select an option.
...users can navigate between panes and within the contents of the current pane, but cannot navigate between
items in different panes.
...And 14 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
if you have floated an
item, which is also a grid
item in a supporting browser, the float will no longer apply to the
item.
... the fact is that a grid
item takes precedence.
...to create gaps between the cards, i use a margin on the
items, and then a negative margin on the container: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; ...
...And 14 more matches
Subgrid - CSS: Cascading Style Sheets
introduction to subgrid when you add display: grid to a grid container, only the direct children become grid
items and can then be placed on the grid that you have created.
... the children of these
items display in normal flow.
... you can "nest" grids by making a grid
item a grid container.
...And 14 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
the api can be seen as a simple contract (the interface) between the application offering it and other
items, such as third party software or hardware.
...the name comes from the fact that often card sorting is carried out by literally writing the
items to sort onto cards, and then arranging the cards into piles.
...in xml and html, an element may contain a data
item or a chunk of text or an image, or perhaps nothing.
...And 13 more matches
Accessible Toolkit Checklist
tab order must wrap, not have invisible
items in tab order dynamically added
items must not corrupt the tab cycle or make it disorderly tab cycle must be identical backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visible on any widget, and focus must always be visible shift+f10 or context menu key should work like right click on focused
item, and co...
...for example, a unique child id would be required for each tree
item supporting the most important basic iaccessible events get_accparent: get the parent of an iaccessible.
... get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu
item.
...And 13 more matches
CustomizableUI.jsm
the customizableui.jsm javascript code module allows you to interact with customizable buttons and
items in firefox's main window ui.
... widgets widget is the term that customizableui uses for each of the
items in a customizable area.
...aarea will be the area the
item is dragged to, or undefined after the measurements have been done and the node has been moved back to its 'regular' area.
...And 13 more matches
ARIA: listbox role - Accessibility
the listbox role is used for lists from which a user may select one or more
items which are static and, unlike html <select> elements, may contain images.
... description the listbox role is used to identify an element that creates a list from which a user may select one or more static
items, similar to the html <select> element.
... it is highly recommended to use the html select element, or a group of radio buttons if only one
item can be selected, or a group of checkboxes if multiple
items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free.
...And 13 more matches
HTML documentation index - HTML: Hypertext Markup Language
21
itemid attribute, global attribute, html, html microdata, microdata, reference,
itemid the
itemid global attribute provides microdata in the form of a unique, global identifier of an
item.
... 22
itemprop attribute, global attribute, html, html microdata, microdata, reference the
itemprop global attribute is used to add properties to an
item.
... every html element can have an
itemprop attribute specified, and an
itemprop consists of a name-value pair.
...And 13 more matches
Indexed collections - JavaScript
to create an array with non-zero length, but without any
items, either of the following can be used: // this...
... writing a value that is shorter than the number of stored
items truncates the array.
... writing 0 empties it entirely: let cats = ['dusty', 'misty', 'twiggy'] console.log(cats.length) // 3 cats.length = 2 console.log(cats) // logs "dusty, misty" - twiggy has been removed cats.length = 0 console.log(cats) // logs []; the cats array is empty cats.length = 3 console.log(cats) // logs [ <3 empty
items> ] iterating over arrays a common operation is to iterate over the values of an array, processing each one in some way.
...And 13 more matches
ui/toolbar - Archive of obsolete content
/ui/frame"); var previous = actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = new frame({ url: "./frame-player.html" }); var toolbar = toolbar({ title: "player",
items: [previous, next, play, frame] }); the toolbar appears just above the content window: to destroy a toolbar call its destroy() method.
...the only mandatory option is title, but for the toolbar to contain any actual content, the
items parameter must also be supplied, and must contain at least object.
...-on creates a toolbar containing one button and a frame: var { actionbutton } = require('sdk/ui/button/action'); var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var button = actionbutton({ id: "my-button", label: "my-button", icon: "./my-button.png" }); var frame = new frame({ url: "./my-frame.html" }); var toolbar = toolbar({ title: "player",
items: [button, frame] }); this add-on creates a toolbar with one frame, that's hidden initially, and that logs show and hide events: var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); var toolbar = toolbar({ title: "my toolbar",
items: [frame], hidden: true, onshow: showing, onhide: hiding }); function...
...And 12 more matches
More Menu Features - Archive of obsolete content
we've looked at placing menu
items and menuseparators in menupopups.
...the example below creates a simple submenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menu
item label="window"/> <menu
item label="message"/> </menupopup> </menu> <menu
item label="open"/> <menu
item label="save"/> <menuseparator/> <menu
item label="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog.
... <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menu
item label="open search..." accesskey="o"/> <menu
item label="save search..." accesskey="s"/> <menuseparator/> <menu
item label="close" accesskey="c"/> </menupopup> </menu> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menu
item label="cut" accesskey="t"/> <menu
item label="copy" accesskey="c"/> <menu
item label="paste" accesskey="p" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar> here we have added two menus with various ...
...And 12 more matches
Simple Menu Bars - Archive of obsolete content
the
items on the menus can be customized quite easily.
... menu
item an individual command on a menu.
... example of a simple menu bar example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu
item label="new"/> <menu
item label="open"/> <menu
item label="save"/> <menuseparator/> <menu
item label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menu
item label="undo"/> <menu
item label="redo"/> </menupopup> </menu> </menubar> </toolbox> here, a simple menu bar is created...
...And 12 more matches
Trees - Archive of obsolete content
this contrasts with the listbox, where individual list
item and listcell tags are used to specify the rows in the listbox.
...the following tags are used: tree
item this contains a single parent row and all its descendants.
... this element also serves as the
item which can be selected by the user.
...And 12 more matches
Index - Learn web development
77 arrays arrays, article, beginner, codingscripting, javascript, join, learn, pop, push, l10n:priority, shift, split, unshift in the final article of this module, we'll look at arrays — a neat way of storing a list of data
items under a single variable name.
... here we look at why this is useful, then explore how to create an array, retrieve, add, and remove
items stored in an array, and more besides.
... 93 image gallery assessment, beginner, codingscripting, conditionals, event handler, javascript, learn, loops, events, l10n:priority now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common
item you'll see on a lot of websites — a javascript-powered image gallery.
...And 12 more matches
NSS Sample Code Sample1
int exportpublickey(sec
item **pubkeydata); // export the encryption and key using the key // provided.
...(the admin should verify this.) // // in this example, the server must be started to perform // this function (see start()) int exportkeys(sec
item *pubkey, sec
item **wrappedenckey, sec
item **wrappedmackey); // import the keys received from another server in the // cluster.
... int importkeys(sec
item *wrappedenckey, sec
item *wrappedmackey); // start the server, loading the encryption and macing keys // from files int start(); // shut down the server.
...And 12 more matches
Using the Places annotation service
the annotation service, provided by the nsiannotationservice interface, is designed to store arbitrary data about a web page or about an
item in the places database in firefox 3.
... most methods in the service are duplicated with one method labeled as a 'page annotation' taking an nsiuri and the others labeled as an '
item annotation' and taking the id of an
item in the places database.
... setting an annotation the annotation provides a variety of scriptable and non-scriptable setters for annotations on both pages and on
items in the places database (see nsiannotationservice.idl for the exact declarations).
...And 12 more matches
nsINavHistoryResultObserver
ng anewkeyword); void nodelastmodifiedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodemoved(in nsinavhistoryresultnode anode, in nsinavhistorycontainerresultnode aoldparent, in unsigned long aoldindex, in nsinavhistorycontainerresultnode anewparent, in unsigned long anewindex); void noderemoved(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode a
item, in unsigned long aoldindex); void nodereplaced(in nsinavhistorycontainerresultnode aparentnode, in nsinavhistoryresultnode aoldnode, in nsinavhistoryresultnode anewnode, in unsigned long aindex); void nodetagschanged(in nsinavhistoryresultnode anode); void nodetitlechanged(in nsinavhistoryresultnode anode, in autf8string anewtitle); void nodeurichanged(in nsinavhistoryresultnode anode, i...
... nodeinserted() called when an
item is inserted into a container.
... the
item previously at the specified index (if any) and everything below it is shifted down by one.
...And 12 more matches
nsITransactionList
inherits from: nsisupports last changed in gecko 1.7 method overview nsitransactionlist getchildlistfor
item(in long aindex); nsitransaction get
item(in long aindex); long getnumchildrenfor
item(in long aindex); boolean
itemisbatch(in long aindex); attributes attribute type description num
items long the number of transactions contained in this list.
... methods getchildlistfor
item() returns the list of children associated with the
item at aindex.
...nsitransactionlist getchildlistfor
item( in long aindex ); parameters aindex the index of the
item in the list.
...And 12 more matches
nsITreeView
to get the behavior where drops are only allowed on
items, such as the mailnews folder pane, always return false when the orientation is not drop_on.
... note: drop_on will only be passed to candrop() if the
item is a container; see iscontainer().
...to get the behavior where drops are only allowed on
items, such as the mailnews folder pane, always return false from candropbeforeafter().
...And 12 more matches
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
; display: -webkit-flex; display: -ms-flexbox; display: flex; } //using this mixin %flexbox { @include flexbox; } @mixin inline-flex { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } %inline-flex { @include inline-flex; } flexbox direction the flex-direction property specifies how flex
items are placed in the flex container, by setting the direction of the flex container's main axis.
... this determines the direction in which flex
items are laid out in.
... -webkit-flex-flow: $values; -ms-flex-flow: $values; flex-flow: $values; } flexbox order the order property controls the order in which flex
items appear within their flex container, by assigning them to ordinal groups.
...And 12 more matches
Column layouts - CSS: Cascading Style Sheets
a single row of
items arranged as columns, with all heights being equal.
... you have a set of small
items you want to break into columns.
... a single row of
items with equal heights — flexbox flexbox can be used to break content into columns by setting flex-direction to row, however flexbox targets the elements inside the flex container and will place each direct child into a new column.
...And 12 more matches
place-self - CSS: Cascading Style Sheets
the place-self css shorthand property allows you to align an individual
item in both the block and inline directions at once (i.e.
...lf-end normal; place-self: flex-start auto; place-self: flex-end normal; place-self: left auto; place-self: right normal; /* baseline alignment */ place-self: baseline normal; place-self: first baseline auto; place-self: last baseline normal; place-self: stretch auto; /* global values */ place-self: inherit; place-self: initial; place-self: unset; values auto computes to the parent's align-
items value.
... for flex
items, the keyword behaves as stretch.
...And 12 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
if false, the default, the value will not be filled in until the user selects an
item.
...if false, the default, the value will not be filled in until the user selects an
item.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...And 11 more matches
Using Vue computed properties - Learn web development
previous overview: client-side javascript frameworks next in this article we'll add a counter that displays the number of completed todo
items, using a feature of vue called computed properties.
...if we have 2 of 5
items completed in our to-do list, our summary could read "3
items completed out of 5".
... while it might be tempting to do something like this: <h2>{{todo
items.filter(
item =>
item.done).length}} out of {{todo
items.length}}
items completed</h2> it would be recalculated on every render.
...And 11 more matches
nss tech note1
the main non-streaming apis for these two decoders have an identical prototype : secstatus sec_asn1decode
item(prarenapool *pool, void *dest, const sec_asn1template *t, sec
item *
item); secstatus sec_quickderdecode
item(prarenapool* arena, void* dest, const sec_asn1template* templateentry, sec
item* src); here is a description of the arguments : sec
item* src† is a structure containing a pointer to the binary data to be decoded, as well as its size.
...sec_asn1decode
item can only skip required components and will assert if you try to skip an optional component.
... sec_quickderdecode
item supports skipping the decoding of optional components if you define the tag of the component in the template sec_asn1_inner: recurse into the component and saves its content, without the surrounding asn.1 tag and length sec_asn1_save: saves the component data, but does not proceed to the next component if within a sequence template array.
...And 11 more matches
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 list
item role, which is used to identify a list
item contained inside the list.
... <section role="list"> <div role="list
item">list
item 1</div> <div role="list
item">list
item 2</div> <div role="list
item">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 list
item containers respectively.
...And 11 more matches
Box alignment in Flexbox - CSS: Cascading Style Sheets
basic example in this example, three flex
items are aligned on the main axis using justify-content and on the cross axis using align-
items.
... the first
item overrides the align-
items values set on the group by setting align-self to center.
... the axes and flex-direction flexbox respects the writing mode of the document, therefore if you are working in english and set justify-content to flex-end this will align the
items to the end of the flex container.
...And 11 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
in previous guides we’ve looked at placing
items by the lines created by defining grid tracks and also how to place
items using named template areas.
... .wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; } once the lines have names, we can use the name to place the
item rather than the line number.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } i’m using the same grid definitions as above, however this time i am going to place a single
item into the named area content.
...And 11 more matches
Actions - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/related
item" object="?related
item"/> </query> <action> <button uri="?related
item" label="?related
item"/> </action> </template> </vbox> in this example, we omit the <xul:rule> element around the <xul:action> as it is optional when we want to generate content unconditionally.
...in this example, there's only one variable to use, ?related
item, since ?start is the starting point and the start and end points cannot be the same.
...let's look at the results again: (?start = http://www.xulplanet.com/rdf/a, ?related
item = http://www.xulplanet.com/rdf/b) (?start = http://www.xulplanet.com/rdf/a, ?related
item = http://www.xulplanet.com/rdf/c) (?start = http://www.xulplanet.com/rdf/a, ?related
item = http://www.xulplanet.com/rdf/d) the builder will start with the first result.
...And 10 more matches
Handling common accessibility problems - Learn web development
safari doesn't allow you to tab through links by default; to enable this, you need to open safari's preferences, go to advanced, and check the press tab to highlight each
item on a webpage checkbox.
...if you do need complexity, you should consider using wai-aria (accessible rich internet applications), a specification that provides semantics (in the form of new html attributes) for
items such as complex form controls and updating panels that can be understood by most browsers and screen readers.
... vo + spacebar select/activate
items highlighted by the vo cursor.
...And 10 more matches
Dict.jsm
method overview dict copy(); boolean del(string akey); object get(string akey, [optional] object adefault); boolean has(string akey); array list
items(); 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 returned as a pair (a two-element array) with the first element being the key and the second being the value.
... note: the order in which
items are returned is arbitrary, and may change without notice.
...And 10 more matches
DOM Inspector internals - Firefox Developer Tools
this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menu
items placed via overlay).
...in order for dom inspector to be useful with its host application, though, there should be a way to launch dom inspector within it, e.g., by a menu
item and an optional keyboard shortcut such as ctrl+shift+i (or cmd+shift+i).
... either the host applications must provide these themselves (usually bundling dom inspector with the application, too), or dom inspector must explicitly support them by providing its own menu
items and keyboard shortcuts with host-integration overlays.
...And 10 more matches
Network request list - Firefox Developer Tools
to turn a specific block off or on: toggle the checkbox next to that
item.
... to delete a blocked
item, click the x icon that appears when you focus the
item.
... (starting with firefox 77) right-click any
item in the list and choose from the context menu: enable all enables blocking of all
items in the list.
...And 10 more matches
DataTransfer - Web APIs
it may hold one or more data
items, each of one or more data types.
... datatransfer.
items read only gives a datatransfer
itemlist object which is a list of all of the drag data.
... deprecated properties datatransfer.moz
itemcount read only gives the number of
items in the drag operation.
...And 10 more matches
Box alignment in grid layout - CSS: Cascading Style Sheets
on the block (cross) axis the alignment of the
items inside their grid areas is controlled with align-
items.
... the first
item overrides the align-
items value set on the group by setting align-self to center.
... grid axes as a two-dimensional layout method, when working with grid layout we always have two axes on which to align our
items.
...And 10 more matches
flex - CSS: Cascading Style Sheets
the flex css shorthand property sets how a flex
item will grow or shrink to fit the space available in its flex container.
... values initial the
item is sized according to its width and height properties.
... auto the
item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container.
...And 10 more matches
Responsive Navigation Patterns - Progressive web apps (PWAs)
pattern 1: top toggle menu in this pattern, as the screen width is reduced, the top navigation
items rearrange until there is not enough space.
... at that point, some
items move from the top navigation to a drop-down menu.
... in the smallest screen, all navigation
items live in a toggle menu, and the user has to tap to expand the toggle menu.
...And 10 more matches
The Essentials of an Extension - Archive of obsolete content
we'll skip some code that is covered in the locale section, moving on to the most important part of the content: <menubar id="main-menubar"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="helpmenu"> <menupopup> <menu
item id="xulschoolhello-hello-menu-
item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hello
item.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menubar> <vbox id="appmenusecondarypane"> <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu...
....accesskey;" insertafter="appmenu_addons"> <menupopup> <menu
item id="xulschoolhello-hello-menu-
item-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hello
item.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </vbox> this is the code that adds the hello world menu to the browser window.
...we're adding a menu of our own, and telling firefox to add it in that pane, right after the add-ons
item.
...And 9 more matches
Building Menus With Templates - Archive of obsolete content
this means that a menu created with a template will not have any of the generated
items until the user opens the menu, or a script opens the menu.
...here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menu
item uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button.
...the uri attribute has not been placed on the menupopup element which is the direct child of the action element but has instead been placed on the menu
item element.
...And 9 more matches
Theme changes in Firefox 2 - Archive of obsolete content
browser/browser.css needs to be updated to include new css for microsummaries, search fields, iconic bookmark menu
items, and more.
... mozapps/extensions/
itemdisabledfader.png new file; a translucent png used as an overlay on top of
items that are disabled in the add-ons manager.
... mozapps/extensions/
itemenabledfader.png new file; a translucent png used as an overlay on top of
items that are enabled in the add-ons manager.
...And 9 more matches
WAI-ARIA basics - Learn web development
for example, voiceover gives you the following: on the <header> element — "banner, 2
items" (it contains a heading and the <nav>).
... on the <nav> element — "navigation 2
items" (it contains a list and a form).
... on the <main> element — "main 2
items" (it contains an article and an aside).
...And 9 more matches
Supporting older browsers - Learn web development
creating fallbacks in css css specifications contain information that explains what the browser does when two layout methods are applied to the same
item.
... this means that there is a definition for what happens if a floated
item, for example, is also a grid
item using css grid layout.
...a floated
item that becomes a grid
item loses the float behaviour, which means that by turning the wrapper into a grid container, the floated
items become grid
items.
...And 9 more matches
Focus management with Vue refs - Learn web development
you should see a focus outline on the input for adding new to-do
items.
... adding a ref to our app so, let's attach a ref to our "edit" button in todo
item.vue.
... update it like this: <button type="button" class="btn" ref="editbutton" @click="toggleto
itemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> to access the value associated with our ref, we use the $refs property provided on our component instance.
...And 9 more matches
Using the Web Storage API - Web APIs
you can access these values like an object, or with the storage.get
item() and storage.set
item() methods.
... these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a4509b'; localstorage['colorsetting'] = '#a4509b'; localstorage.set
item('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (set
item, get
item, remove
item, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.
... these mechanisms are available via the window.sessionstorage and window.localstorage properties (to be more precise, in supporting browsers the window object implements the windowlocalstorage and windowsessionstorage objects, which the localstorage and sessionstorage properties are members of) — invoking one of these will create an instance of the storage object, through which data
items can be set, retrieved, and removed.
...And 9 more matches
util/collection - Archive of obsolete content
usage a collection is ordered, like an array, but its
items are unique, like a set.
...setting it to an array empties the collection and adds all the
items in the array.
...
items are yielded in the order they were added.
...And 8 more matches
MenuButtons - Archive of obsolete content
for instance, in the following example, pressing the 'view' button will open a menu which allows the user to select from a set of radio menu
items.
... <button type="menu" label="view"> <menupopup> <menu
item label="icons" type="radio" name="view"/> <menu
item label="list" type="radio" name="view"/> <menu
item label="details" type="radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected.
... <toolbarbutton type="menu" image="cookies.png"> <menupopup> <menu
item label="block cookies" type="checkbox"/> <menu
item label="clear cookies"/> </menupopup> </toolbarbutton> the 'menu-button' button the 'menu-button' type of button is used when you want to attach a menu to a button but want to have a default action carried out when the button is pressed by itself.
...And 8 more matches
PopupEvents - Archive of obsolete content
this event is most commonly used to add or adjust
items on the popup based on the context.
...this may happen because the user selected an
item from the menu, or it may be because the popup was closed by clicking elsewhere.
...for instance, right clicking on an image might display
items on a context menu pertaining to images, whereas clicking on a link would display only those
items pertaining to links.
...And 8 more matches
Static Content - Archive of obsolete content
« previousnext » creating a menu
item in the filter list to show all
items is fairly easy.
... this
item doesn't need to be generated from the datasource.
... <menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" oncommand="applyfilter(event.target.value);"> <menupopup> <menu
item label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <menupop...
...And 8 more matches
Looping code - Learn web development
previous overview: building blocks next programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar
items of work to complete.
... inside the parentheses we have three
items, separated by semi-colons: an initializer — this is usually a variable set to a number, which is incremented to count the number of times the loop has run.
... this shows a loop is used to iterate over the
items in an array and do something with each of them — a very common pattern in javascript.
...And 8 more matches
nss tech note4
critical : indicates whether the extension is critical value : the value of the extension looping through all extensions certcertextension** extensions =cert->extensions; if (extensions) { while (*extensions) { sec
item *ext_oid = &(*extensions)->id; sec
item *ext_critical = &(*extensions)->critical; sec
item *ext_value = &(*extensions)->value; /* id attribute of the extension */ secoiddata *oiddata = secoid_findoid(ext_oid); if (oiddata == null) { /* oid not fo...
...und */ /* sec
item ext_oid has type (sec
itemtype), data (unsigned char *) and len (unsigned int) fields - the application interprets these */ .......
...extension */ if (ext_critical->len > 0) { if (ext_critical->data[0]) /* the extension is critical */ else /* the extension is not critical */ } /* value attribute of the extension */ /* sec
item ext_value has type (sec
itemtype), data (unsigned char *) and len (unsigned int) fields - the application interprets these */ secoidtag oidtag = secoid_findoidtag(ext_oid); switch (oidtag) { case a_tag_that_app_recognizes: .....
...And 8 more matches
Python binding for NSS
the (indent, text) pairs allow you to insert the
item into a gui tree structure or simply change the indentation formatting.
...following module functions were added: nss.create_pbev2_algorithm_id the following class methods were added: nss.algorithmid.get_pbe_crypto_mechanism nss.algorithmid.get_pbe_iv nss.pk11slot.pbe_key_gen nss.pk11slot.format_lines nss.pk11slot.format nss.pk11symkey.format_lines nss.pk11symkey.format nss.sec
item.to_base64 nss.sec
item.format_lines nss.sec
item.format the following files were added: doc/examples/pbkdf2_example.py the sec
item constructor added 'ascii' parameter to permit initialization from base64 and/or pem textual data.
... a sec
item now converts almost all der encoded data to a string when it's str method is invoked, formerly it was limited to only a few objects.
...And 8 more matches
nsIDOMStorage
items stored in session storage may be accessed by any interested party in the same browsing context.
...method overview void clear(); domstring get
item(in domstring key); domstring key(in unsigned long index); void remove
item(in domstring key); void set
item(in domstring key, in domstring data); attributes attribute type description length unsigned long the number of keys stored in the session store.
...get
item() returns from session storage the data corresponding to the specified key.
...And 8 more matches
nsIMacDockSupport
the application should call this to activate itself when one of its dock menu
items are selected, since doing so does not automatically activate the application.
... about dockmenu by default firefox adds two menu
items to the dock menu.
... the menu
items are "new window" and "new private window".
...And 8 more matches
nsINavHistoryQueryOptions
exclude
itemifparenthasannotation obsolete since gecko 13.0 autf8string this option excludes
items from a bookmarks query if the parent of the
item has this annotation.
... an example is to exclude livemark
items (parent folders have the "livemark/feeduri" annotation).
... exclude
items boolean this option excludes all uris and separators from a bookmarks query.
...And 8 more matches
Storage Inspector - Firefox Developer Tools
indexeddb — all indexeddb databases created by the page or any iframes inside the page, their object stores and the
items stored in these object stores.
... local storage — all local storage
items created by the page or any iframes inside the page.
... session storage — all session storage
items created by the page or any iframes inside the page.
...And 8 more matches
Checking when a deadline is due - Web APIs
this step is mainly for browsers that don't support html form validation (i have used the required attribute in my html to force validation, in those that do.) else { var new
item = [ { tasktitle: title.value, hours : hours.value, minutes : minutes.value, day : day.value, month : month.value, year : year.value, notified : "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the su...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var request = objectstore.add(new
item[0]); in this section we create an object called new
item that stores the data in the format required to insert it into the database.
... the next few lines open the database transaction and provide messages to notify the user if this was successful or failed.then an objectstore is created into which the new
item is added.
...And 8 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
[important] get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu
item.
... try to use unique names for each
item in a dialog so that voice dictation software doesn't have to deal with extra ambiguity.[important] get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a url for a link, the text a user entered in a field.
...[important] get_accselection: which children of this
item are selected?
...And 8 more matches
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
the specification defines what happens if you use other layout methods on an element which then becomes a flex
item.
... floated
items “float and clear do not create floating or clearance of flex
item, and do not take it out-of-flow.” - 3.
...the
items are now flex
items, which means they stretch to equal height.
...And 8 more matches
CSS Flexible Box Layout - CSS: Cascading Style Sheets
css flexible box layout is a module of css that defines a css box model optimized for user interface design, and the layout of
items in one dimension.
... basic example in the following example a container has been set to display: flex, which means that the three child
items become flex
items.
... the value of justify-content has been set to space-between in order to space the
items out evenly on the main axis.
...And 8 more matches
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
we can use the order property, which will change how
items auto-place.
... we can use grid-auto-flow: dense which will take
items visually out of dom order.
... we can also position
items using line-based placement of grid template areas, without considering their location in the source.
...And 8 more matches
Consistent list indentation - CSS: Cascading Style Sheets
one of the most common style changes made to lists is a change in the indentation distance—that is, how far the list
items are pushed over to the right.
... making a list first, we consider a single, pure list
item.
... this list
item has no marker (otherwise known as a "bullet") and is not yet part of a list itself.
...And 8 more matches
<ol>: The Ordered List element - HTML: Hypertext Markup Language
the html <ol> element represents an ordered list of
items — typically rendered as a numbered list.
... reversed this boolean attribute specifies that the list’s
items are in reverse order.
...
items will be numbered from high to low.
...And 8 more matches
Array.from() - JavaScript
1 : -1) * math.floor(math.abs(number)); }; var maxsafeinteger = math.pow(2, 53) - 1; var tolength = function (value) { var len = tointeger(value); return math.min(math.max(len, 0), maxsafeinteger); }; var setget
itemhandler = function setget
itemhandler(isiterator,
items) { var iterator = isiterator &&
items[symboliterator](); return function get
item(k) { return isiterator ?
... iterator.next() :
items[k]; }; }; var getarray = function getarray( t, a, len, get
item, isiterator, mapfn ) { // 16.
...repeat, while k < len… or while iterator is done (also steps a - h) while (k < len || isiterator) { var
item = get
item(k); var kvalue = isiterator ?
...And 8 more matches
Bookmarks - Archive of obsolete content
finding bookmark
items if you know the uri of a site and wish to find all bookmarks that link to it, you can use the nsinavbookmarksservice.getbookmarkidsforuri() method.
... manipulating existing
items there are a number of convenient methods you can use to make changes to existing bookmarks and bookmark folders.
... the
item title to change the title of a bookmark or bookmark folder, you use the nsinavbookmarksservice.set
itemtitle() method.
...And 7 more matches
XUL Event Propagation - Archive of obsolete content
hrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menu
item oncommand="alert('new
item alert')" label="new" /> <menu
item label="open" /> <menu
item oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menu
item oncommand="alert('edit source handler')" label="edit source" /> <menu
item label="reload" /> <menu
item label="view source" /> <...
.../menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this file, the lowest-down, or "leaf" elements are the menu
items.
... the hierarchy of the interface can be represented as follows: when one of these menu
items raises an event, any of the elements above it in the hierarchy can handle it.
...And 7 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
find the <h2> heading with an id of list-heading and replace the hardcoded number of active and completed tasks with dynamic expressions: <h2 id="list-heading">{completedtodos} out of {totaltodos}
items completed</h2> go to the app, and you should see the "2 out of 3
items completed" message as before, but this time the information is coming from the todos array.
... dynamically generating the todos from the data at the moment, our displayed todo
items are all static.
... we want to iterate over each
item in our todos array and render the markup for each task, so let's do that now.
...And 7 more matches
Understanding client-side JavaScript frameworks - Learn web development
ember interactivity: events, classes and state at this point we'll start adding some interactivity to our app, providing the ability to add and display new todo
items.
...creating our first vue component now it's time to dive deeper into vue, and create our own custom component — we'll start by creating a component to represent each
item in the todo list.
...rendering a list of vue components at this point we've got a fully working component; we're now ready to add multiple todo
item components to our app.
...And 7 more matches
Gecko info for Windows accessibility vendors
these relations can affect the calculation for the next next or previous
item of a certain type.
... here is an algorithm for iterating through the nodes, looking for an
item of a particular type: store a pointer to the start_
item if the current
item has a flows_to relation, follow that relation otherwise, go to the next
item in depth first search order if the current
item matches your criteria, then return current_
item if the current_
item == start_
item, return null (no
item found) if the end has been reached, go back to the start if wrapping is desired, otherwise return null (no
item found) go to step 2 checkable, required and invalid states are supported gecko defines three state constants using previously unused states: const unsigned long state_checkable = state_marqueed; // useful on menu
item, list
item // and tree
item.
...in addition, role_list with state_readonly and role_list
item are used to expose the list structure.
...And 7 more matches
Gecko object attributes
for outline
items, the indentation level.
... for diagrams with levels, each
item can have its level specified.
... applied to: grid, heading, list
item, 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.
...And 7 more matches
Manipulating bookmarks using Places
finding bookmark
items if you know the uri of a site and wish to find all bookmarks that link to it, you can use the nsinavbookmarksservice.getbookmarkidsforuri() method.
... manipulating existing
items there are a number of convenient methods you can use to make changes to existing bookmarks and bookmark folders.
... the
item title to change the title of a bookmark or bookmark folder, you use the nsinavbookmarksservice.set
itemtitle() method.
...And 7 more matches
nsIDOMOfflineResourceList
last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsisupports method overview void mozadd(in domstring uri); boolean mozhas
item(in domstring uri); domstring moz
item(in unsigned long index); void mozremove(in domstring uri); void swapcache(); void update(); attributes attribute type description moz
items nsidomofflineresourcelist the list of dynamically-managed entries in the offline resource list.
... methods mozadd() adds an
item to the dynamically managed entries.
... mozhas
item returns a boolean value indicating whether or not the specified uri represents a resource that's in the application cache's list.
...And 7 more matches
Grid template areas - CSS: Cascading Style Sheets
in the previous guide we looked at grid lines, and how to position
items against those lines.
... when you use css grid layout you always have lines, and this can be a straightforward way to place
items on your grid.
... however, there is an alternate method to use for positioning
items on the grid which you can use alone or in combination with line-based placement.
...And 7 more matches
repeat() - CSS: Cascading Style Sheets
max-content represents the largest max-content contribution of the grid
items occupying the grid track.
... min-content represents the largest min-content contribution of the grid
items occupying the grid track.
...as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid
items occupying the grid track.
...And 7 more matches
A XUL Bestiary - Archive of obsolete content
the purpose of this article is not to describe these
items in any great detail but to define what they are in simple terms.
... i selected
items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-platform development.
... in contrast to the mozilla jargon file, this article describes
items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
...And 6 more matches
RDF Query Syntax - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/related
item" object="?related
item"/> </query> <rule> ...
...the content tag doesn't do anything else at this point, meaning it doesn't add anything else to the network of potential results, so processing continues on to the next statement, the triple, which looks like this: <triple subject="?start" predicate="http://www.xulplanet.com/rdf/related
item" object="?related
item"/> the triple statement is used to follow arcs or arrows in the rdf graph.
...in the triple used here, the predicate is 'http://www.xulplanet.com/rdf/related
item', so we know that the builder will look for arrows with that label.
...And 6 more matches
Keyboard Shortcuts - Archive of obsolete content
however, it would be tedious to do that for every button and menu
item (though it could be necessary when one's key commands are only triggered when the user is focused on a particular element).
...we've already seen in the section on menus that we can define an attribute called accesskey which specifies the key which a user can press to activate the menu or menu
item.
...once the file menu is open, the close menu
item can be selected by pressing c.
...And 6 more matches
XPCOM Examples - Archive of obsolete content
we can use this as in the following example: example 1 : source <toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menu
item uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows.
...window mediator component this is fine for displaying a list of open windows, but we would like to enhance this so that clicking on the menu
item will switch to that window.
...the template generates an id attribute on each menu
item element.
...And 6 more matches
menuseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to create a separator between menu
items.
... attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menu
item label="
item1"/> <menuseparator/> <menu
item label="
item2"/> <menu
item label="
item3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
...for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
...And 6 more matches
calICalendarViewController - Archive of obsolete content
summary a calicalendarviewcontroller provides a way for a calicalendarview to create, modify, and delete
items.
... interface code [scriptable, uuid(1f783898-f4c2-4b2d-972e-360e0de38237)] interface calicalendarviewcontroller : nsisupports { void createnewevent (in calicalendar acalendar, in calidatetime astarttime, in calidatetime aendtime); void modifyoccurrence (in cali
itemoccurrence aoccurrence, in calidatetime anewstarttime, in calidatetime anewendtime); void deleteoccurrence (in cali
itemoccurrence aoccurrence); }; methods createnewevent void createnewevent (in calicalendar acalendar, in calidatetime astarttime, in calidatetime aendtime); the createnewevent method is used for creating a new calievent in the calicalend...
... modifyoccurrence void modifyoccurrence (in cali
itemoccurrence aoccurrence, in calidatetime anewstarttime, in calidatetime anewendtime); the modifyoccurrence method is used to change the attributes of an already existing cali
item.
...And 6 more matches
XForms Select1 Element - Archive of obsolete content
the list of pre-defined
items can be specified by either
item (see the spec) or
itemset (see the spec) elements.
... you can visually group these pre-defined
items by using the choices (see the spec) element to contain them.
...the data binding restriction to simple content may be relaxed when an
itemset element is used, which allows the available choices to be obtained from an xforms model.
...And 6 more matches
Grids - Learn web development
creating your grid in css having decided on the grid that your design needs, you can use css grid layout to create that grid in css and place
items onto it.
...you will see an example with a container, which has some child
items.
...as with flexbox, this switches on grid layout, and all of the direct children of the container become grid
items.
...And 6 more matches
Manipulating documents - Learn web development
active learning: a dynamic shopping list to round off the article, we'd like to set you a little challenge — we want to make a simple shopping list example that allows you to dynamically add
items to the list using a form input and button.
... when you add an
item to the input and press the button: the
item should appear in the list.
... each
item should be given a button that can be pressed to delete that
item off the list.
...And 6 more matches
Componentizing our Svelte app - Learn web development
newtodo.svelte: the text input and button that allow you to enter a new todo
item.
... filterbutton.svelte: the all, active, and completed buttons that allow you to apply filters to the displayed todo
items.
... todosstatus.svelte: the "x out of y
items completed" heading.
...And 6 more matches
NSS functions
sec_dersigndata mxr 3.2 and later sec_destroycrl mxr 3.2 and later sec_findcrlbydercert mxr 3.2 and later sec_findcrlbyname mxr 3.2 and later sec_lookupcrls mxr 3.2 and later sec_newcrl mxr 3.2 and later sec_quickderdecode
item mxr 3.6 and later seckey_cachestaticflags mxr 3.10 and later seckey_converttopublickey mxr 3.2 and later seckey_copyprivatekey mxr 3.2 and later seckey_copypublickey mxr 3.6 and later seckey_copysubjectpublickeyinfo mxr 3.4 and later ...
... function name/documentation source code nss versions atob_asciitodata mxr deprecated 3.2 use nssbase64_decodebuffer atob_convertasciito
item mxr deprecated 3.2 use nssbase64_decodebuffer btoa_convert
itemtoascii mxr deprecated 3.2 use nssbase64_encode
item btoa_datatoascii mxr deprecated 3.2 use nssbase64_encode
item der_asciitotime mxr 3.5 and later der_decodetimechoice mxr 3.9 and later der_encode ...
...r 3.11.1 and later nss_versioncheck mxr 3.2 and later nssbase64_decodebuffer mxr 3.4 and later nssbase64decoder_create mxr 3.2 and later nssbase64decoder_destroy mxr 3.2 and later nssbase64decoder_update mxr 3.2 and later nssbase64_encode
item mxr 3.4 and later nssbase64encoder_create mxr 3.2 and later nssbase64encoder_destroy mxr 3.2 and later nssbase64encoder_update mxr 3.2 and later nssrwlock_destroy mxr 3.2 and later nssrwlock_havewritelock mxr 3.2 and later nssrwloc...
...And 6 more matches
Rhino Debugger
opening scripts you may select the file->open menu
item on the menu bar to load javascript scripts contained in files.
... running scripts you may select the file->run menu
item on the menu bar to execute javascript scripts contained in files.
... controlling execution the debugger provides the following facilities for you to control the execution of scripts you are debugging: step into to single step entering any function calls, you may do any of the following: select the debug->step into menu
item on the menu bar press the step into button on the toolbar press the f11 key on the keyboard execution will resume.
...And 6 more matches
nsIDOMStorage2
items stored in local storage may only be accessed by the same origin that created the
items in the first place.
... last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void clear(); domstring get
item(in domstring key); domstring key(in unsigned long index); void remove
item(in domstring key); void set
item(in domstring key, in domstring data); attributes attribute type description length unsigned long the number of keys stored in local storage.
...get
item() returns from local storage the data corresponding to the specified key.
...And 6 more matches
nsINavHistoryQuery
this will only work for results_as_uri since there will be no visits for these
items.
... maxvisits long set upper limits for how many times an
item has been visited.
... the default value is "-1", and in that case all
items are matched regardless of their visit count.
...And 6 more matches
XUL Overlays
though there is no formal restriction on what kind of xul content is located in "base" xul files and what kind should be put in overlays, xul overlays generally define
items that are not present in the basic versions of the ui, such as additional components.
...the installation of a media plug-in, for example, may add new icons and menu
items to the interface: in the navigatoroverlay.xul file or in a separate navigatorsspoverlay.xul file (where navigator.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menu
item name="super stream player"/> <menupopup name="ss favorites"> <menu
item name="wave" src="mavericks.ssp"/> <menu
item name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes base...
...<menu id="file-menu"> <menupopup id="menu_filepopup"> <menu
item name="new"/> <menu
item name="open"/> <menu
item name="save"/> <menu
item name="close"/> </menupopup> </menu> ...
...And 6 more matches
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
when you hover over a flex container or flex
item, the tooltip includes the appropriate information.
... this header is a flex container: each navbar link is a flex
item: the nav element within the header is both a flex
item and a flex container which holds the navigation links: in the css pane in the css pane's rules view, any instance of a display: flex declaration gets a small flexbox icon next to the word flex.
... clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex
item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related css properties and see how the flex
items are affected by your changes.
...And 6 more matches
FileSystemDirectoryReader.readEntries() - Web APIs
this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the
item parameter), and an element into which to insert the list of contents (the container parameter).
... let dropzone = document.getelementbyid("dropzone"); let listing = document.getelementbyid("listing"); function scanfiles(
item, container) { let elem = document.createelement("li"); elem.innerhtml =
item.name; container.appendchild(elem); if (
item.isdirectory) { let directoryreader =
item.createreader(); let directorycontainer = document.createelement("ul"); container.appendchild(directorycontainer); directoryreader.readentries(function(entries) { entries.foreach(function(entry) { scanfiles(entry, directorycontainer); }); }); } } ...
... scanfiles() begins by creating a new <li> element to represent the
item being scanned, inserts the name of the
item into it as its text content, and then appends it to the container.
...And 6 more matches
Drag Operations - Web APIs
this document does not use the datatransfer
item interface nor the datatransfer
itemlist interface.
...for example, when dragging the selected text within a textbox, the data associated with the drag data
item is the text itself.
... similarly, when dragging a link on a web page, the drag data
item is the link's url.
...And 6 more matches
Storage - Web APIs
it allows, for example, the addition, modification, or deletion of stored data
items.
... properties storage.length read only returns an integer representing the number of data
items stored in the storage object.
... storage.get
item() when passed a key name, will return that key's value.
...And 6 more matches
In Flow and Out of Flow - CSS: Cascading Style Sheets
the list is displayed using flexbox to arrange the
items into a row, however it too is participating in block and inline layout - the container has an outside display type of block.
... taking an
item out of flow all elements are in-flow apart from: floated
items
items with position: absolute (including position: fixed which acts in the same way) the root element (html) out of flow
items create a new block formatting context (bfc) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page.
... floated
items in this example i have a div, and then two paragraphs.
...And 6 more matches
display - CSS: Cascading Style Sheets
keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-list
item> | <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.
... list
item <display-list
item> 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.
...And 6 more matches
grid-auto-flow - CSS: Cascading Style Sheets
the grid-auto-flow css property controls how the auto-placement algorithm works, specifying exactly how auto-placed
items get flowed into the grid.
... values row
items are placed by filling each row in turn, adding new rows as necessary.
... column
items are placed by filling each column in turn, adding new columns as necessary.
...And 6 more matches
grid-column - CSS: Cascading Style Sheets
the grid-column css shorthand property specifies a grid
item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
... values auto is a keyword indicating that the property contributes nothing to the grid
item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
... <custom-ident> if there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid
item’s placement.
...And 6 more matches
grid-row - CSS: Cascading Style Sheets
the grid-row css shorthand property specifies a grid
item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
... <integer> + <custom-ident> values */ grid-row: span 3; grid-row: span somegridarea; grid-row: 5 somegridarea span; grid-row: span 3 / 6; grid-row: span somegridarea / span someothergridarea; grid-row: 5 somegridarea span / 2 span; /* global values */ grid-row: inherit; grid-row: initial; grid-row: unset; values auto is a keyword indicating that the property contributes nothing to the grid
item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
... <custom-ident> if there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid
item’s placement.
...And 6 more matches
list-style-type - CSS: Cascading Style Sheets
the list-style-type css property sets the marker (such as a disc, character, or custom counter style) of a list
item element.
... only a few elements (<li> and <summary>) have a default value of display: list-
item.
... however, the list-style-type property may be applied to any element whose display value is set to list-
item.
...And 6 more matches
<menu> - HTML: Hypertext Markup Language
(list menu is the default state, unless the parent element is a <menu> in the context menu state.) if the element is in the context menu state: zero or more occurrences, in any order, of <menu> (context menu state only), <menu
item>, <hr>, <script>, and <template>.
... usage notes the <menu> and <ul> elements both represent an unordered list of
items.
... the key difference is that <ul> primarily contains
items for display, whilst <menu> is intended for interactive
items, to act on.
...And 6 more matches
<ul>: The Unordered List element - HTML: Hypertext Markup Language
the html <ul> element represents an unordered list of
items, typically rendered as a bulleted list.
... usage notes the <ul> element is for grouping a collection of
items that do not have a numerical ordering, and their order in the list is meaningless.
... typically, unordered-list
items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square.
...And 6 more matches
Closures - JavaScript
the lexical environment contains two private
items: a variable called privatecounter, and a function called changeby.
...age: <input type="text" id="age" name="age"></p> function showhelp(help) { document.getelementbyid('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 16)'} ]; for (var i = 0; i < helptext.length; i++) { var
item = helptext[i]; document.getelementbyid(
item.id).onfocus = function() { showhelp(
item.help); } } } setuphelp(); try running the code in jsfiddle.
...three closures have been created by the loop, but each one shares the same single lexical environment, which has a variable with changing values (
item).
...And 6 more matches
Extension Etiquette - Archive of obsolete content
user interface tools menu
items using the tool menu option gives the author the maximum amount of choices.
...ideally, the location would be below the add-ons
item, grouped with the other extension-related commands (menu
item:insertafter="javascriptconsole,devtoolsseparator").
... sub-menus should be used for single extensions needing multiple menu
items, and a tools menu
item should not be created for options and preferences (for options and preferences, see the add-on manager).
...And 5 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
... disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific
items within the element by pressing keys corresponding to letters in the
item's label.
... this is done incrementally, so typing more letters with select more specific
items.
...And 5 more matches
Accessibility/XUL Accessibility Reference - Archive of obsolete content
image <image src="images/img.xbm" tooltiptext='<!--image label-->'/> key see keyboard shortcut tutorial keyset see keyboard shortcut tutorial listbox <label control='listid'><!--label text--></label> <listbox id="listid"> <list
item 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> <list
item> <label value="<!--pearl-->" /> <label val...
...ue="<!--female-->" /> <label value="<!--gray-->" /> </list
item> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws.
...
items are read per line as in "pearl female gray" list
item see listbox menu
item see menulist and menubar menubar <menubar hidden="false"> <menu label="file" accesskey="f"> <menupopup> <menu
item label="new" accesskey="n" key="file-new-key"/> </menupopup> </menu> </menubar> menulist <label value="<!--label text-->" control="comboid" /> <menulist id="comboid"> <menupopup> <menu
item label="<!--option1-->" /> <menu
item label="<!--option2-->" selected="true" /> <menu
item label="<!--option3-->" /> </menupopup> </menulist> menupopup see menulist and menubar popup see popupset popupset be careful regarding keyboard access of popups...
...And 5 more matches
What is RSS - Archive of obsolete content
for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>example news site</title> <description>this is an example news site.</description> <lastbuilddate>wed, 27 jul 2005 00:30:30 -0700</lastbuilddate> <link>http://news.example.com/</link> <
item> <title>news flash: i like bread</title> <guid ispermalink="false">4d4a0a12-f188-4c97-908b-eea27213c2fe</guid> <pubdate>wed, 27 jul 2005 00:30:30 -0700</pubdate> <link>http://news.example.com/artcle/554</link> </
item> <
item> <title>big news today: birds fly</title> <guid ispermalink="false">c4a63f09-b45b-466b-...
...8773-6ff264001ab7</guid> <pubdate>tue, 19 jul 2005 04:32:51 -0700</pubdate> <link>http://news.example.com/artcle/553</link> </
item> <
item> <title>fire is hot</title> <guid ispermalink="false">c1795324-d5ea-44fa-95b1-b5ce2090d4f1</guid> <pubdate>sun, 15 may 2005 13:02:08 -0700</pubdate> <link>http://news.example.com/artcle/552</link> </
item> </channel> </rss> bloggers use rss to provide everyone with a list of their newest blog posts.
... for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>joe blow's blog</title> <description>this is the weblog of joe blow</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://joe-blow.example.net/</link> <
item> <title>i be blogging...</title> <guid>http://joe-blow.example.net/log/21</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://joe-blow.example.net/log/21</link> </
item> <
item> <title>i am so smrt</title> <guid>http://joe-blow.example.net/log/20</guid> <pubdate>sat, 14 may 2005 22:19:18 -0500</pubdate> <link>http://joe-blow.example.net/log/20</link> </i...
...And 5 more matches
XForms Select Element - Archive of obsolete content
introduction allows the user to choose one or more selections from a list of pre-defined
items (see the spec).
... the list of pre-defined
items can be specified by either
item (see the spec) or
itemset (see the spec) elements.
... you can visually group these pre-defined
items by using the choices (see the spec) element to contain them.
...And 5 more matches
Mobile accessibility - Learn web development
you can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/
items you move across.
... swipe left and right to move between different
items on the page.
... once voiceover is enabled, ios's basic control gestures will be a bit different: a single tap will cause the
item you tap on to be selected; your device will speak the
item you've tapped on.
...And 5 more matches
Floats - Learn web development
this is because a floated element is taken out of normal flow, and the boxes of the following
items actually run behind the float.
... in your html from the previous example, add a class of cleared to the second paragraph below the floated
item.
...the clear property accepts the following values: left: clear
items floated to the left.
...And 5 more matches
Getting started with CSS - Learn web development
it contains an <em>emphasized</em> element.</p> <ul> <li>
item one</li> <li>
item two</li> <li>
item <em>three</em></li> </ul> </body> </html> note: if you are reading this on a device or an environment where you can't easily create files, then don't worry — live code editors are provided below to allow you to write example code right here in the page.
...if i want all paragraphs and all list
items to be green my rule looks like this: p, li { color: green; } try this out in the interactive editor below (edit the code boxes), or in your local css document.
... in your html document, add a class attribute to the second list
item.
...And 5 more matches
Test your skills: Arrays - Learn web development
in this task we'd like you to create an array of three
items, stored inside a variable called myarray.
... the
items can be anything you want — how about your favourite foods or bands?
... next, modify the first two
items in the array using simple bracket notation and assignment.
...And 5 more matches
mozbrowsercontextmenu
contextmenu a menu object (see the menu object, below) representing a custom menu defined via <menu> / <menu
item> elements and pointed to via a contextmenu attribute on the dom element clicked on, which contains the menu's id.
... contextmenu
itemselected an anonymous function that fires when a menu
item is selected.
... the menu object an object representing a custom menu defined via <menu> / <menu
item> elements and pointed to via a contextmenu attribute on the dom element clicked on, which contains the menu's id.
...And 5 more matches
NSS 3.15 release notes
tls client applications may enable this via a call to ssl_optionsetdefault(ssl_enable_ocsp_stapling, pr_true); added function sec
item_realloc
itemv2.
... it replaces function sec
item_realloc
item, which is now declared as obsolete.
... in sec
item.h sec
item_allocarray sec
item_duparray sec
item_freearray sec
item_zfreearray - utility functions to handle the allocation and deallocation of sec
itemarrays sec
item_realloc
itemv2 - replaces sec
item_realloc
item, which is now obsolete.
...And 5 more matches
Utilities for nss samples
* password or the file to read it from */ } secupwdata; /* * printasascii */ extern void printasascii(prfiledesc* out, const unsigned char *data, unsigned int len); /* * printashex */ extern void printashex(prfiledesc* out, const unsigned char *data, unsigned int len); /* * getdigit */ extern int getdigit(char c); /* * hextobuf */ extern int hextobuf(unsigned char *instring, sec
item *outbuf, prbool ishexdata); /* * fileto
item */ extern secstatus fileto
item(sec
item *dst, prfiledesc *src); /* * checkpassword */ extern prbool checkpassword(char *cp); /* * getpassword */ extern char * getpassword(file *input, file *output, char *prompt, prbool (*ok)(char *)); /* * filepasswd extracts the password from a text file * * storing...
..._2_name:its_password * */ extern char * filepasswd(pk11slotinfo * slot, prbool retry, void *arg); /* * getmodulepassword */ extern char * getmodulepassword(pk11slotinfo *slot, int retry, void *pwdata); /* * generaterandom */ extern secstatus generaterandom(unsigned char *rbuf, int rsize); /* * fileto
item */ extern secstatus fileto
item(sec
item *dst, prfiledesc *src); /* * seedfromnoisefile */ extern secstatus seedfromnoisefile(const char *noisefilename); /* * filesize */ extern long filesize(const char* filename); /* * readderfromfile */ extern secstatus readderfromfile(sec
item *der, const char *infilename, prbool ascii); #endif /* _util_h */ util.c /* this source code f...
...evel) { newline(out); } } /* * getdigit */ int getdigit(char c) { if (c == 0) { return -1; } if (c <= '9' && c >= '0') { return c - '0'; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } return -1; } /* * hextobuf */ int hextobuf(unsigned char *instring, sec
item *outbuf, prbool ishexdata) { int len = strlen((const char *)instring); int outlen = len+1/2; int truelen = 0; int digit1, digit2; outbuf->data = ishexdata ?
...And 5 more matches
Detailed XPCOM hashtable guide
a hashtable is a data construct that stores a set of
items.
... each
item has a key that identifies the
item.
...
items are found, added, and removed from the hashtable by using the key.
...And 5 more matches
nsIApplicationCache
constants constant value description
item_manifest 1 this
item is the application manifest.
...
item_explicit 2 this
item was explicitly listed in the application manifest.
...
item_implicit 4 this
item was navigated to in a top level browsing context, and named this cache's group as its manifest.
...And 5 more matches
nsIXULWindow
void assumechromeflagsarefrozen(); void center(in nsixulwindow arelative, in boolean ascreen, in boolean aalert); nsixulwindow createnewwindow(in print32 achromeflags, in nsiappshell aappshell); nsidocshelltree
item getcontentshellbyid(in wstring id); void removechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint32 chromeflags are from nsiwebbrowserchrome.
... primarycontentshell nsidocshelltree
item the primary content shell.
... note: that this is a docshell tree
item and therefore can not be assured of what object it is.
...And 5 more matches
Mail event system
on
item*<event> - in the nsifolderlistener interface.
... notifypropertychanged broadcasts this event to each its nsifolderlisteners by calling on
itemintpropertychanged on each listener: listener->onintpropertychanged(this, ktotalmessagesatom, 4, 5); the dialog is one of these folder-specific listeners.
... events at the time this document is being written, these are the current events: nsifolder nsifolderlistener notify
itemadded on
itemadded notify
itemremoved on
itemremoved notify
itempropertychanged on
itempropertychanged notify
itemintpropertychanged on
itemintpropertychanged notify
itemboolpropertychanged on
itemboolpropertychanged notify
itemunicharpropertychanged on
itemunicharpropertychanged notify
itempropertyflagchanged on
itempropertyflagchanged...
...And 5 more matches
UI Tour - Firefox Developer Tools
there are several context menu options available for individual files and folders or groups; typically viewed by right-clicking on the
item.
... for folders and groups, the following context menu options are available: collapse all collapses all subfolders of the
item.
... expand all expands all subfolders of the
item.
...And 5 more matches
ContentIndex.add() - Web APIs
the add() method of the contentindex interface registers an
item with the content index.
... syntax contentindex.add(contentdescription).then(...); parameters contentdescription the
item registered is an object containing the following data: id: a unique string identifier.
... title: a string title for the
item.
...And 5 more matches
ContentIndex.getAll() - Web APIs
return value returns a promise that resolves with an array of contentdescription
items.
... contentdescription each
item returned is an object containing the following data: id: a unique string identifier.
... title: a string title for the
item.
...And 5 more matches
NamedNodeMap - Web APIs
namednodemap.getnamed
item() returns a attr, corresponding to the given name.
... namednodemap.setnamed
item() replaces, or adds, the attr identified in the map by the given name.
... namednodemap.removenamed
item() removes the attr identified by the given map.
...And 5 more matches
Visual formatting model - CSS: Cascading Style Sheets
some elements may generate additional boxes in addition to the principal box, for example display: list-
item generates more than one box (e.g.
...it will then behave as a flex
item, however, it cannot be targeted and styled like a regular box because there is no element to target.
...grid layout behaves in the same way as the flexbox example above, turning strings of text into a grid
item with an anonymous box.
...And 5 more matches
<color> - CSS: Cascading Style Sheets
this makes the background behind the colored
item completely visible.
... activetext text of active links buttonface background of push buttons buttontext text of push buttons canvas background of application content or documents canvastext text in application content or documents field background of input fields fieldtext text in input fields graytext text that is disabled highlight background of
items that are selected in a control highlighttext text of
items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions of the css color module.
... -moz-cellhighlight background color for selected
item in a tree widget.
...And 5 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
one way of creating arrays is as follows: var a = new array(); a[0] = 'dog'; a[1] = 'cat'; a[2] = 'hen'; a.length; // 3 a more convenient notation is to use an array literal: var a = ['dog', 'cat', 'hen']; a.length; // 3 note that array.length isn't necessarily the number of
items in the array.
... another way of iterating over an array that was added with ecmascript 5 is foreach(): ['dog', 'cat', 'hen'].foreach(function(currentvalue, index, array) { // do something with currentvalue or array[index] }); if you want to append an
item to an array simply do it like this: a.push(
item); arrays come with a number of methods.
... a.concat(
item1[,
item2[, ...[,
itemn]]]) returns a new array with the
items added on to it.
...And 5 more matches
Using third-party modules (jpm) - Archive of obsolete content
to install menu
item you'll need to have git command.
...we'll use the menu
item package to add a new menu
item to firefox.
... summary first, while in the root of your add-on, install the package that contains the modules you want to use: npm install menu
item --save now you'll see a new directory in your add-on root called "node_modules" that contains a directory "menu
item".
...And 4 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
the toolbarpalette is a collection of all toolbar buttons and toolbar
items in firefox, including those added by extensions.
...in the case of a toolbar
item element (discussed later), use the title attribute instead of label.
...the way to include the file in the manifest is to add this line: style chrome://global/content/customizetoolbar.xul chrome://xulschoolhello/skin/toolbar.css if you are using xbl bindings (explained way ahead) for your toolbar
items, you'll have to include the css files for those as well, each in a new line like the one above.
...And 4 more matches
In-Depth - Archive of obsolete content
button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, tree
item, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bottom-colors defines a series of colours.
...-moz-box-direction controls which way the
items in this box are displayed.
... normal in english web browsers
items are displayed top to bottom and left to right.
...And 4 more matches
Venkman Introduction - Archive of obsolete content
you can then access the debugger via a new, dynamically created menu
item in the tools menu of that browser, or else restart the browser with a special debugger option.
...for more information about this counter and the data, see
item 2.2 in the venkman faq.) when you first start venkman, the basic views are arranged as in the screenshot above—though you can customize the layout and presence of the different views however you want, as we describe in the view customization section below.
... when pretty print is enabled you will see a green check mark on the toolbar button, and the menu
item will be checked as well.
...And 4 more matches
Building Trees - Archive of obsolete content
this means that dom nodes are not constructed for any of the
items.
... specifically, the action body should be a single tree
item with its rows and cells.
... here is an example (using an rdf source): <tree id="photoslist" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <treechildren> <tree
item uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> <treecell label="rdf:http://purl.org/dc/elements/1.1/date"/> </treerow> </tree
item> </treechildren> </template> </tree> note: the tree columns (treecols) are declared outside the template as static content, since they only need to be declared once.
...And 4 more matches
Recursive Generation - Archive of obsolete content
in the graph,
item c has a related
item arrow pointing out of it to
item d.
...here is the content that was generated after one iteration: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/related
item" object="?related
item"/> </query> <action> <hbox uri="?related
item"> <button label="?start"/> <button label="?related
item"/> </hbox> </action> </template> <hbox id="http://www.xulplanet.com/rdf/b"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/b"/> </hbox> <hbox id="http://www.xulp...
...for a nested
item, the builder processes the query in the same way as usual, however instead of using the ref attribute as the seed starting point, the end point or member is used instead.
...And 4 more matches
Rule Compilation - Archive of obsolete content
for instance, if generating the
items in a listbox, you will typically use only one rule.
...however, there are two cases where content is not generated automatically: menus and child tree
items.
...however, it also means that the dom api usage, such as an attempt to get the number of child nodes as above, will also not include generated
items until the menu is opened.
...And 4 more matches
Template and Tree Listeners - Archive of obsolete content
var somelistener = {
item: null, willrebuild : function(builder) { this.
item = builder.getresourceatindex(builder.root.currentindex); }, didrebuild : function(builder) { if (this.
item) { var idx = builder.getindexofresource(this.
item) if (idx != -1) builder.root.view.selection.select(idx); } } }; tree.builder.addlistener(somelistener); this example is very simple and just saves and restor...
...these two methods are available for tree builders and will convert between an index in the tree and the associated member resource for the
item at the index.
... naturally, we can't store the index as the
item may have moved its position.
...And 4 more matches
Commands - Archive of obsolete content
for instance, you might have a menu
item, a toolbar button and a keyboard shortcut all for the same operation.
... any buttons and menu
items hooked up to it will be disabled automatically.
... try opening the example below (source view) in a browser window and selecting
items from the list.
...And 4 more matches
Localization - Archive of obsolete content
xul <menu
item label="&undo.label;" accesskey="&undo.key;"/> dtd <!entity undo.label "undo"> <!entity undo.key "u"> the example above uses two entities, one for the label on the undo menu
item and the second for the access key.
...file.css" type="text/css"?> <!doctype window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="findfile.js"/> <popupset> <menupopup id="editpopup"> <menu
item label="&cutcmd.label;" accesskey="&cutcmd.accesskey;"/> <menu
item label="©cmd.label;" accesskey="©cmd.accesskey;"/> <menu
item label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" disabled="true"/> </menupopup> </popupset> <keyset> <key id="cut_cmd" modifiers="accel" key="&cutcmd.commandkey;"/> <key id="copy_cmd" modifiers="accel" key="©cmd.commandkey;"/> <k...
...ey id="paste_cmd" modifiers="accel" key="&pastecmd.commandkey;"/> <key id="close_cmd" keycode="vk_escape" oncommand="window.close();"/> </keyset> <vbox flex="1"> <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="&filemenu.label;" accesskey="&filemenu.accesskey;"> <menupopup id="file-popup"> <menu
item label="&opencmd.label;" accesskey="&opencmd.accesskey;"/> <menu
item label="&savecmd.label;" accesskey="&savecmd.accesskey;"/> <menuseparator/> <menu
item label="&closecmd.label;" accesskey="&closecmd.accesskey;" key="close_cmd" oncommand="window.close();"/> </menupopup> </menu> <menu id="edit-menu" label="&editmenu.label;" accesskey="&editmenu...
...And 4 more matches
XUL Questions and Answers - Archive of obsolete content
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> <list
item> <listcell type="checkbox" value="1" label="vghkvghk"/> </list
item> <list
item> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> </list
item> <list
item> <listcell type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </list
item> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> </listhead> <list
item type...
...="checkbox" value="1" label="vghkvghk"/> <list
item type="checkbox" value="2" label="vghjkvk" checked="true"/> <list
item type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listbox> </window> list box handlers can only check for list
items not listcells.
...(server can just send the xul code to use for popup - alternatively it can send generic xml describing the attributes of the
items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/
item background color with javascript?
...And 4 more matches
toolbarbutton - Archive of obsolete content
where possible, duplicate functionality in a menu
item or context menu.
...accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarbutton accesskey="b" label="menu-button" type="menu-button"> <menupopup> <menu
item label="menu
item 1"/> <menu
item label="menu
item 2"/> </menupopup> </toolbarbutton> <toolbarbutton accesskey="m" label="menu" type="menu"> <menupopup> <menu
item label="menu
item 1"/> <menu
item label="menu
item 2"/> </menupopup> </toolbarbutton> </toolbar> <toolbar id="radio-toolbar"> <toolbarbutton accesskey="1" label="radio 1" type="radio" group="radiogroup"...
...for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed.
...And 4 more matches
Implementation Status - Archive of obsolete content
supported 3.2.1 common attributes supported 3.2.2 linking attributes supported 3.2.3 single-node binding attributes supported 3.2.4 node-set binding attributes supported 3.2.5 model
item property attributes partial in some cases a loop error can occur on valid bindings 302168; 3.3.1 model supported 3.3.2 instance partial instance element with two child element does not trigger exception 337302; 3.3.3 submission partial no support for @indent and ...
... 5.2.1 additional xforms datatypes to allow empty content unsupported 5.2.2 xforms:list
item supported 5.2.3 xforms:list
items supported 5.2.4 xforms:daytimeduration supported 5.2.5 xforms:yearmonthduration supported 5.2.6 xforms:email unsupported 5.2.7 xforms:card-number ...
...model
item properties section title status notes bugs 6.1.1 type partial limited to types mentioned above 6.1.2 readonly supported 6.1.3 required supported 6.1.4 relevant partial relevancy applied via a bind to ...
...And 4 more matches
Organizing your CSS - Learn web development
} after this section we could define a few utility classes, for example a class that removes the default list style for lists we're going to display as flex
items or in some other way.
... if you are not taking an oocss approach you might create custom css for the different places this pattern is used, for example creating a class called comment with a bunch of rules for the component parts, then a class called list-
item with almost the same rules as the comment class except for some tiny differences.
... the differences between these two components is that the list-
item has a bottom border, and images in comments have a border whereas list-
item images do not.
...And 4 more matches
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 list
item = document.createelement('li'); list
item.textcontent = input; list.appendchild(list
item); } } </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 list
item = document.createelement(\'li\');' + '\n list
item.textcontent = result;' + '\n list.appendchild(list
item);' + '\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 (...
... 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 list
item = document.createelement('li'); list
item.textcontent = result; list.appendchild(list
item); } </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 4 more matches
JavaScript object basics - Learn web development
the first four
items are data
items, and are referred to as the object's properties.
... the last two
items are functions that allow the object to do something with that data, and are referred to as the object's methods.
... it is very common to create an object using an object literal when you want to transfer a series of structured, related data
items in some manner, for example sending a request to the server to be put into a database.
...And 4 more matches
NSS Sample Code sample2
*/ #include "nss.h" #include "pk11pub.h" /* example key & iv */ unsigned char gkey[] = {0xe8, 0xa7, 0x7c, 0xe2, 0x05, 0x63, 0x6a, 0x31}; unsigned char giv[] = {0xe4, 0xbb, 0x3b, 0xd3, 0xc3, 0x71, 0x2e, 0x58}; int main(int argc, char **argv) { ck_mechanism_type ciphermech; pk11slotinfo* slot = null; pk11symkey* symkey = null; sec
item* secparam = null; pk11context* enccontext = null; sec
item key
item, iv
item; secstatus rv, rv1, rv2; unsigned char data[1024], buf1[1024], buf2[1024]; int i, result_len, tmp1_outlen, tmp2_outlen; /* initialize nss * if your application code has already initialized nss, you can skip it * here.
...for * des ops, internal slot is typically the best slot */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_geterror()); goto out; } /* nss passes blobs around as sec
items.
...turn the raw key into a sec
item.
...And 4 more matches
Observer Notifications
this can happen multiple times, such as when the window first opens, when multiple
items are removed, and when entering private browsing mode.
... topic data description em-action-requested
item-installed a new extension has been installed.
... em-action-requested
item-upgraded a different version of an existing extension has been installed.
...And 4 more matches
nsIHTMLEditor
noutdent); 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 getlist
itemstate(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...
... void getalignment( out boolean amixed, out short aalign ); parameters amixed true if there is more than one type of list
item, or if there is some list and non-list.
... getlist
itemstate() getlist
itemstate returns what list
item type is in the selection.
...And 4 more matches
nsINavHistoryResultViewObserver
column column); void onselectionchanged(); void onperformaction(in wstring action); void onperformactiononrow(in wstring action, in long row); void onperformactiononcell(in wstring action, in long row, in nsitreecolumn column); constants constant value description drop_before -1 the drag operation wishes to insert the dragged
item before the indicated row.
... drop_on 0 the drag operation wishes to drop the dragged
item onto the indicated row.
... drop_after 1 the drag operation wishes to insert the dragged
item after the indicated row.
...And 4 more matches
Gloda examples
a) show all messages in a conversation regardless of the folder in which they are stored, b) search messages by subject assuming that you have a message (glodamessage) in the conversation already, this is straight forward using glodamessage.conversation.getmessagescollection() alistener = { /* called when new
items are returned by the database query or freshly indexed */ on
itemsadded: function _on
itemsadded(a
items, acollection) { }, /* called when
items that are already in our collection get re-indexed */ on
itemsmodified: function _on
itemsmodified(a
items, acollection) { }, /* called when
items that are in our collection are purged from the system */ on
itemsremoved: function _oni...
...temsremoved(a
items, acollection) { }, /* called when our database query completes */ onquerycompleted: function _onquerycompleted(conversation_coll) { try { for (var conv in conversation_coll) { //do something with the conversation here alert(conv.subject); } } catch (e) {} } } glodamessage.conversation.getmessagescollection(alistener) alternatively if you need to get a conversation based on the subject, you need to do a query (using the same listener as above).
...age); let tagarray = mailservices.tags.getalltags({}); query.tags(...tagarray); let collection = query.getcollection(mylistener); search messages by daterange searches for all messages within a date range id_q=gloda.newquery(gloda.noun_message); // define a date range form yesterday to now id_q.daterange([new date() - 86400000, new date()]); var mylistener = { /* called when new
items are returned by the database query or freshly indexed */ on
itemsadded: function _on
itemsadded(a
items, acollection) { }, /* called when
items that are already in our collection get re-indexed */ on
itemsmodified: function _on
itemsmodified(a
items, acollection) { }, /* called when
items that are in our collection are purged from the system */ on
itemsremoved: function _oni...
...And 4 more matches
ContentIndex - Web APIs
methods contentindex.add registers an
item with the content index.
... contentindex.delete unregisters an
item from the currently indexed content.
... // reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } adding to the content index here we're declaring an
item in the correct format and creating an asynchronous function which uses the add() method to register it with the content index.
...And 4 more matches
HTMLSelectElement - Web APIs
htmlselectelement.multiple a boolean reflecting the multiple html attribute, which indicates whether multiple
items can be selected.
... htmlselectelement.size a long reflecting the size html attribute, which contains the number of visible
items in the control.
... htmlselectelement.
item() gets an
item from the options collection for this <select> element.
...And 4 more matches
Keyboard-navigable JavaScript widgets - Accessibility
note that disabled
items within a grouped widget (such as menu
items in a menu) should remain navigable using arrow keys.
... managing focus inside groups when a user tabs away from a widget and returns, focus should return to the specific element that had focus, for example, the tree
item or grid cell.
... there are two techniques for accomplishing this: roving tabindex: programmatically moving focus aria-activedescendant: managing a 'virtual' focus technique 1: roving tabindex setting the tabindex of the focused element to "0" ensures that if the user tabs away from the widget and then returns, the selected
item within the group retains focus.
...And 4 more matches
Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
justify-self the justify-self property is used to align an
item inside its containing block on the inline axis.
...the normal keyword resolves to stretch, unless the positioned
item is a replaced element, in which case it resolves to start.
... align-self the align-self property does not apply to block-level boxes (including floats), because there is more than one
item in the block axis.
...And 4 more matches
flex-grow - CSS: Cascading Style Sheets
the flex-grow css property sets the flex grow factor of a flex
item main size.
... description this property specifies how much of the remaining space in the flex container should be assigned to the
item (the flex grow factor).
... the main size is either width or height of the
item which is dependent on the flex-direction value.
...And 4 more matches
grid-area - CSS: Cascading Style Sheets
the grid-area css shorthand property specifies a grid
item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
... 4 some-grid-area; grid-area: 4 some-grid-area / 2 another-grid-area; /* span && [ <integer> || <custom-ident> ] values */ grid-area: span 3; grid-area: span 3 / span some-grid-area; grid-area: 2 span / another-grid-area span; /* global values */ grid-area: inherit; grid-area: initial; grid-area: unset; values auto is a keyword indicating that the property contributes nothing to the grid
item’s placement, indicating auto-placement or a default span of 1.
... <custom-ident> if there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid
item’s placement.
...And 4 more matches
grid-column-end - CSS: Cascading Style Sheets
the grid-column-end css property specifies a grid
item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
... values */ grid-column-end: 2; grid-column-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-end: span 3; grid-column-end: span somegridarea; grid-column-end: 5 somegridarea span; /* global values */ grid-column-end: inherit; grid-column-end: initial; grid-column-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid
item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
... <custom-ident> if there is a named line with the name '<custom-ident>-end', it contributes the first such line to the grid
item’s placement.
...And 4 more matches
grid-column-start - CSS: Cascading Style Sheets
the grid-column-start css property specifies a grid
item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement.
... values auto a keyword indicating that the property contributes nothing to the grid
item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
... <custom-ident> if there is a named line with the name <custom-ident>-start, it contributes the first such line to the grid
item’s placement.
...And 4 more matches
grid-row-end - CSS: Cascading Style Sheets
the grid-row-end css property specifies a grid
item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.
...nteger> + <custom-ident> values */ grid-row-end: 2; grid-row-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-end: span 3; grid-row-end: span somegridarea; grid-row-end: 5 somegridarea span; /* global values */ grid-row-end: inherit; grid-row-end: initial; grid-row-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid
item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
... <custom-ident> if there is a named line with the name '<custom-ident>-end', it contributes the first such line to the grid
item’s placement.
...And 4 more matches
grid-row-start - CSS: Cascading Style Sheets
the grid-row-start css property specifies a grid
item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.
... values auto is a keyword indicating that the property contributes nothing to the grid
item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
... <custom-ident> if there is a named line with the name '<custom-ident>-start', it contributes the first such line to the grid
item’s placement.
...And 4 more matches
<li> - HTML: Hypertext Markup Language
the html <li> element is used to represent an
item in a list.
...in menus and unordered lists, list
items are usually displayed using bullet points.
... 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.
...And 4 more matches
HTML elements reference - HTML: Hypertext Markup Language
<li> the html <li> element is used to represent an
item in a list.
... <ol> the html <ol> element represents an ordered list of
items — typically rendered as a numbered list.
... <ul> the html <ul> element represents an unordered list of
items, typically rendered as a bulleted list.
...And 4 more matches
Regular expression syntax cheatsheet - JavaScript
quantifiers if you are looking to contribute to this document, please also edit the original article note: in the following,
item refers not only to singular characters, but also includes character classes, unicode property escapes, groups and ranges.
... characters meaning x* matches the preceding
item "x" 0 or more times.
... x+ matches the preceding
item "x" 1 or more times.
...And 4 more matches
Quantifiers - JavaScript
note: in the following,
item refers not only to singular characters, but also includes character classes, unicode property escapes, groups and ranges.
... characters meaning x* matches the preceding
item "x" 0 or more times.
... x+ matches the preceding
item "x" 1 or more times.
...And 4 more matches
ui/frame - Archive of obsolete content
></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html" }); var toolbar = toolbar({ name: "city-info", title: "city info",
items: [frame] }); the toolbar is positioned between the address bar and the content window.
... var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html", onmessage: (e) => { console.log("new city: " + e.data); } }); var toolbar = toolbar({ name: "city-info", title: "city info",
items: [frame] }); from add-on to all frames to send a message from the add-on code to all frames, attached to all open browser windows, you can use frame.postmessage().
... a real case it might ask a web service): var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var weather = { "london" : "rainy", "toronto" : "snowy", "san francisco" : "foggy" } var frame = new frame({ url: "./city-info.html", onmessage: (e) => { updateweather(e.data); } }); var toolbar = toolbar({ name: "city-info", title: "city info",
items: [frame] }); function updateweather(location) { frame.postmessage(weather[location], frame.url); } to listen to these messages in the frame script, add a listener to the window's message event: window.addeventlistener("message", updateweather, false); function updateweather(message) { var label = window.document.getelementbyid("weather"); label.textcontent = message.data; } from add-...
...And 3 more matches
Finding window handles - Archive of obsolete content
var basewindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltree
item) .treeowner .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsibasewindow); then in c++ part, a function take nsibasewindow as param hwnd getparentwindowhwnd(nsibasewindow *window) { nativewindow hwnd; nsresult rv = window->getparentnativewindow(&hwnd); if (ns_failed(rv))...
...tils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no browser window found'); } var basewindow = browserwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltree
item) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var hwndstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var user32 = ctypes.open('user32.dll'); /* http://msdn.microsoft.com/en-us/library/ms633539%28v=vs.85%29.aspx * b...
...tils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no browser window found'); } var basewindow = browserwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltree
item) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var nswindowstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var objc = ctypes.open(ctypes.libraryname('objc')); // types let id = ctypes.voidptr_t; let sel = ctypes.voidp...
...And 3 more matches
MMgc - Archive of obsolete content
the memory profiler use srtti and stack traces to get information by location and type: class avmplus::growablebuffer - 24.9% - 3015 kb 514
items, avg 6007b 98.9% - 2983 kb - 512
items - poolobject.cpp:29 abcparser.cpp:948 … 0.8% - 24 kb - 1
items - poolobject.cpp:29 abcparser.cpp:948 … class avmplus::string - 13.2% - 1602 kb 15675
items, avg 104b 65.6% - 1051 kb - 14397
items - stringobject.cpp:46 avmcore.cpp:2300 … 20.4% - 326 kb - 10439
items - avmcore.cpp:2300 abcparser.cpp:1077 … 6.5% - 103 kb - 3...
...311
items - avmcore.cpp:2300 abcparser.cpp:1077 … other profiling tools the gcstats flag on the gc object controls verbose output.
...
items on the queue are conservatively marked and unmarked gc pointers discovered while processing each
item are pushed on to the queue.
...And 3 more matches
Using XML Data Islands in Mozilla - Archive of obsolete content
for example, a simple xml purchase order can be embedded like this: <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <line
item> <name>line
item 1</name> <price>1.25</price> </line
item> <line
item> <name>line
item 2</name> <price>2.48</price> </line
item> </purchaseorder> </script> the xml source text can then be retrieved like this: var ordersource = document.getelementbyid("purchase-order").textcontent; the xml source text can be parsed into a dom tree using the domparser api: var parser = new domp...
...here is a complete demo (also available as an attachment): <!doctype html> <html> <head> <title>xml data block demo</title> <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <line
item> <name>line
item 1</name> <price>1.25</price> </line
item> <line
item> <name>line
item 2</name> <price>2.48</price> </line
item> </purchaseorder> </script> <script> function rundemo() { var ordersource = document.getelementbyid("purchase-order").textcontent; var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); var line
items = d...
...oc.getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "line
item"); var firstprice = line
items[0].getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.body.textcontent = "the purchase order contains " + line
items.length + " line
items.
...And 3 more matches
Drag and Drop - Archive of obsolete content
transferablearray an array of nsitransferable objects, one for each
item being dragged.
... nsidragservice.dragdrop_action_copy the
item being dragged should be copied to its dropped location.
... nsidragservice.dragdrop_action_move the
item being dragged should be moved to its dropped location.
...And 3 more matches
Monitoring downloads - Archive of obsolete content
dbconn.executesimplesql("create table
items (source text, size integer," + " starttime integer, endtime integer," + " speed real, status integer)"); dbconn.close(); }, this is fairly simple stuff.
... var dbconn = this.storageservice.opendatabase(this.dbfile); statement = dbconn.createstatement("replace into
items values " + "(?1, ?2, ?3, 0, 0.0, 0)"); statement.bindstringparameter(0, adownload.source.spec); statement.bindint64parameter(1, adownload.size); statement.bindint64parameter(2, adownload.starttime); statement.execute(); statement.reset(); dbconn.close(); break; // record the completion (whether fail...
... var dbconn = this.storageservice.opendatabase(this.dbfile); var statement = dbconn.createstatement("update
items set size=?1, " + "endtime=?2, speed=?3, status=?4 where source=?5 and starttime=?6"); statement.bindint64parameter(0, adownload.size); statement.bindint64parameter(1, endtime.gettime()); statement.binddoubleparameter(2, adownload.speed); statement.bindint32parameter(3, adownload.state); statement.bindstringparameter(4, adownload.source.spec); statement.bind...
...And 3 more matches
PopupKeys - Archive of obsolete content
this allows
items within the menu to be navigated with the cursor keys.
...on linux and the macintosh, disabled
items within the menu are skipped over when navigating with the cursor keys.
...home/end move the highlight to the beginning or the end of the menu, selecting the first or last
item.
...And 3 more matches
Building Hierarchical Trees - Archive of obsolete content
if the
items are containers, the tree builder will mark the right rows as containers, so that they can be opened and closed with the small icon twisties on the left of the column.
...to be able to do this, the tree builder must know that an
item is a container.
...if a node is a container, the tree
item becomes a container, and the user may open the row by double-clicking it.
...And 3 more matches
Adding Event Handlers - Archive of obsolete content
for example, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/
items.js"/> this tutorial does not attempt to describe how to use javascript (except as related to event handling) as this is a fairly large topic and there are plenty of other resources that are available for this.
...the command event is fired when a user activates an element, for example by pressing a button, changing a checkbox or selecting an
item from a menu.
...while we're at it, let's add the same code to the close menu
item.
...And 3 more matches
XUL Changes for Firefox 1.5 - Archive of obsolete content
<richlistbox> and <richlist
item> the <richlistbox> and <richlist
item> 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 <richlist
item> element may be selected.
...And 3 more matches
menupopup - Archive of obsolete content
<menulist> <menupopup> <menu
item label="mozilla" value="http://mozilla.org"/> <menu
item label="slashdot" value="http://slashdot.org"/> <menu
item label="sourceforge" value="http://sf.net"/> <menu
item label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> the following example shows how a menupopup can be used as a context menu for an element.
... <menupopup id="clipmenu"> <menu
item label="cut"/> <menu
item label="copy"/> <menu
item label="paste"/> </menupopup> <label value="right click for popup" context="clipmenu"/> attributes ignorekeys type: boolean if true, keyboard navigation between
items in the popup is disabled.
... example: <menupopup id="top" onpopuphidden="console.log('the onpopuphidden method of id=top was called.');"> <menu
item label="
item 1"/> <menu
item label="
item 2"/> <menu id="submenu1" label="submenu 1"> <menupopup id="submenu1-popup"> <menu
item label="submenu1
item 1"/> <menu
item label="submenu1
item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menu
item label="submenu2
item 1"/> ...
...And 3 more matches
radio - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
...And 3 more matches
tab - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
...And 3 more matches
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
rss does not have any facilites for including this information in an <
item>, so the rss slash module exists to fill in this gap.
...the rss slash module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <
item> <title>review of sin city</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <slash:comments>43</slash:comments> </
item> <
item> <title>what ...
...is the 3571st prime number</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</lastbuilddate></pubdate> <link>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <slash:comments>72</slash:comments> </
item> <
item> <title>first article!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <slash:comments>118</slash:comments> </
item> </channel> </rss> the <slash:comments> element is it reason that the rss slas...
...And 3 more matches
Debug - Archive of obsolete content
constants async callback status codes contant description value debug.ms_async_callback_status_assign_delegate the synchronous work
item assigned a callback or continuation to be run by an asynchronous operation.
... 0 debug.ms_async_callback_status_join the synchronous work
item satisfied part of a join asynchronous operation.
... 1 debug.ms_async_callback_status_chooseany the synchronous work
item satisfied a choice asynchronous operation.
...And 3 more matches
Enumerator - Archive of obsolete content
the enumerator object enables enumeration of
items in a collection.
...instead of using indexes, as you would with arrays, you can move the current
item pointer only to the first or next element of a collection.
... example the following code shows the usage of the enumerator object: var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); document.write(fso.drives); var e = new enumerator(fso.drives); var drivestring = ""; e.movefirst(); while (e.atend() == false) { var drv = e.
item(); drivestring += drv.path + " - "; if (drv.isready){ var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; drivestring += freegb.tofixed(3) + " gb free of "; drivestring += totalgb.tofixed(3) + " gb"; } else{ drivestring += "not ready"; } drivestring += "<br />";; e.movenext(); } document.write(...
...And 3 more matches
The box model - Learn web development
previous overview: building blocks next everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align
items with other
items.
...any direct children of this box will become flex
items and will be laid out according to the rules set out in the flexbox spec, which you'll learn about later on.
...this establishes flex layout for the
items inside the container, however, the list itself is a block box and — like the paragraph — expands to the full container width and breaks onto a new line.
...And 3 more matches
Test your skills: Flexbox - Learn web development
the aim of this task is to get you working with flexbox and demonstrate your understanding of how flex
items behave.
... flex layout one these list
items are the navigation for a site.
... they should be laid out as a row, with an equal amount of space between each
item.
...And 3 more matches
Legacy layout methods - Learn web development
they work by giving
items a size, and pushing them around to line them up in a way that looks like a grid.
...the calc() function allows us to do this calculation right inside the width value, so for any
item spanning 4 columns we can do this, for example: .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } try replacing your bottom block of rules with the following, then reload it in the browser to see if you get the same result: .col.span2 { width: calc((6.25%*2) + 2.08333333%); } .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } .col.span4 { width: calc((6.25%*4) + (2.08333333%*3))...
... on .col we set the flex property's first value (flex-grow) to 1 so our
items can grow, the second value (flex-shrink) to 1 so the
items can shrink, and the third value (flex-basis) to auto.
...And 3 more matches
Basic native form controls - Learn web development
checkable
items: checkboxes and radio buttons checkable
items are controls whose state you can change by clicking on them or their associated labels.
... there are two kinds of checkable
item: the check box and the radio button.
...in the case of checkable
items, their values are sent only if they are checked.
...And 3 more matches
Aprender y obtener ayuda - Learn web development
then you could break it down further, for example, "implement horizontal navigation menu" could be written out as: make a list of menu
items sit horizontally in a line.
... style hover/focus/active states of menu
items appropriately.
... make the menu
items equally spaced along the line.
...And 3 more matches
Ember interactivity: Events, classes and state - Learn web development
previous overview: client-side javascript frameworks next at this point we'll start adding some interactivity to our app, providing the ability to add and display new todo
items.
...xport default class headercomponent extends component { @action onkeydown({ target, key }) { let text = target.value.trim(); let hasvalue = boolean(text); if (key === 'enter' && hasvalue) { alert(text); target.value = '' } } } the @action decorator is the only ember-specific code here (aside from extending from the component superclass, and the ember-specific
items we are importing using javascript module syntax) — the rest of the file is vanilla javascript, and would work in any application.
...this function's contents are fairly easy to understand — when the function is invoked, a new todo object instance is created with a text value of text, and the todos property value is updated to all of the current
items inside the array (accessed conveniently using spread syntax), plus the new todo.
...And 3 more matches
Introduction to client-side frameworks - Learn web development
a brief history when javascript debuted in 1996, it added occasional interactivity and exc
itement to a web that was, up until then, composed of static documents.
...we want to represent each task as a list
item – an html <li> element inside of an unordered list element (a <ul>).
...that could look something like this: function buildtodo
itemel(id, name) { const
item = document.createelement('li'); const span = document.createelement('span'); const textcontent = document.createtextnode(name); span.appendchild(textcontent)
item.id = id;
item.appendchild(span);
item.appendchild(builddeletebuttonel(id)); return
item; } here, we use the document.createelement() method to make our <li>, and several more lines of code to create the properties and children it needs.
...And 3 more matches
Application cache implementation overview
when found, this update is processing an “update” and this cache is used as a cache to satisfy each manifest
item and the manifest it self load from.
...note: whenever a load of an
items (including the manifest) fails due to a network or server error or leads to a redirect, the update fails and completely rollbacks any changes made (i.e.
...if so, the update switches to downloading state and fetches in parallel
items listed in the manifest by call to nsofflinecacheupdate::processnexturi().
...And 3 more matches
Displaying Places information using views
historyresultnode property title title url uri date time visitcount accesscount keyword * description * dateadded dateadded lastmodified lastmodified tags tags ** icon *keyword and description are looked up in the places database using the nsinavhistoryresultnode property
itemid.
... select
items() selects the first node in the tree that matches each given
item id.
... it will open any parent nodes that it needs to in order to show the selected
items.
...And 3 more matches
NSPR Contributor Guide
abstract: nspr accepts contributions in the form of bugfixes, new features, libraries, platform ports, documentation, test cases and other
items from many sources.
...this means that the behavior of an existing public api
item in nspr cannot change.
... generally useful platform abstractions you agree to sustain, bug fix may rely on the nspr api may not rely on any other library api new platform ports all nspr api
items must be implemented platform specific headers in pr/include/md/_platformname.[h!cfg] platform specific code in pr/src/md/platform/*.c make rules in config/_platform.mk documentation the files for nspr's documentation are maintained using a proprietary word processing system [don't ask].
...And 3 more matches
NSS Sample Code Utilities_1
evel) { newline(out); } } /* * getdigit */ int getdigit(char c) { if (c == 0) { return -1; } if (c <= '9' && c >= '0') { return c - '0'; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } return -1; } /* * hextobuf */ int hextobuf(unsigned char *instring, sec
item *outbuf, prbool ishexdata) { int len = strlen(instring); int outlen = len+1/2; int truelen = 0; int digit1, digit2; outbuf->data = ishexdata ?
... outbuf->data[truelen++] = digit1 << 4 | digit2; } } else { while (*instring) { if (*instring == '\n') { instring++; continue; } outbuf->data[truelen++] = *instring++; } outbuf->data[truelen] = '\0'; truelen = truelen-1; } outbuf->len = truelen; return 0; } /* * fileto
item */ secstatus fileto
item(sec
item *dst, prfiledesc *src) { prfileinfo info; print32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (sec
item_alloc
item(null, dst, info.size)) { numbytes = pr_read(src, dst->data, info.size); if (numbytes == info.size...
...) { return secsuccess; } } sec
item_free
item(dst, pr_false); dst->data = null; return secfailure; } /* * echooff */ static void echooff(int fd) { if (isatty(fd)) { struct termios tio; tcgetattr(fd, &tio); tio.c_lflag &= ~echo; tcsetattr(fd, tcsaflush, &tio); } } /* * echoon */ static void echoon(int fd) { if (isatty(fd)) { struct termios tio; tcgetattr(fd, &tio); tio.c_lflag |= echo; tcsetattr(fd, tcsaflush, &tio); } } /* * checkpassword */ prbool checkpassword(char *cp) { int len; char *end; len = port_strlen(cp); if (len < 8) { return pr_false; } end = cp + len; while (cp < end) { unsigned char ch = *cp++; if (!((ch >= 'a') && (ch...
...And 3 more matches
Utility functions
function name/documentation source code nss versions atob_asciitodata mxr deprecated 3.2 use nssbase64_decodebuffer atob_convertasciito
item mxr deprecated 3.2 use nssbase64_decodebuffer btoa_convert
itemtoascii mxr deprecated 3.2 use nssbase64_encode
item btoa_datatoascii mxr deprecated 3.2 use nssbase64_encode
item der_asciitotime mxr 3.5 and later der_decodetimechoice mxr 3.9 and later der_encode ...
...r 3.11.1 and later nss_versioncheck mxr 3.2 and later nssbase64_decodebuffer mxr 3.4 and later nssbase64decoder_create mxr 3.2 and later nssbase64decoder_destroy mxr 3.2 and later nssbase64decoder_update mxr 3.2 and later nssbase64_encode
item mxr 3.4 and later nssbase64encoder_create mxr 3.2 and later nssbase64encoder_destroy mxr 3.2 and later nssbase64encoder_update mxr 3.2 and later nssrwlock_destroy mxr 3.2 and later nssrwlock_havewritelock mxr 3.2 and later nssrwloc...
... port_ucs2_utf8conversion mxr 3.2 and later port_zalloc mxr 3.2 and later port_zfree mxr 3.2 and later rsa_formatblock mxr 3.2 and later sec_asn1decode mxr 3.4 and later sec_asn1decodeinteger mxr 3.2 and later sec_asn1decode
item mxr 3.2 and later sec_asn1decoderabort mxr 3.9 and later sec_asn1decoderclearfilterproc mxr 3.2 and later sec_asn1decoderclearnotifyproc mxr 3.2 and later sec_asn1decoderfinish mxr 3.2 and later sec_asn1decodersetfilterproc mxr 3.2 and later ...
...And 3 more matches
extISessionStorage
method boolean has(in astring aname) void set(in astring aname, in nsivariant avalue) nsivariant get(in astring aname, in nsivariant adefaultvalue) attributes attribute type description events readonly attribute extievents the events object for the storage supports: "change" methods has() determines if a storage
item exists with the given name.
... boolean has(in astring aname) parameters aname the name of an
item return value true if an
item exists with the given name, false otherwise.
... set() sets the value of a storage
item with the given name.
...And 3 more matches
XPCOM hashtable guide
a hashtable is a data construct that stores a set of
items.
... each
item has a key that identifies the
item.
...
items are found, added, and removed from the hashtable by using the key.
...And 3 more matches
nsIApplicationCacheNamespace
method overview void init(in unsigned long
itemtype, in acstring namespacespec, in acstring data); attributes attribute type description data acstring data associated with the namespace, such as a fallback.
...
itemtype unsigned long a bit field indicating one or more namespace types.
... constants constant value description namespace_bypass 1
items matching this namespace can be fetched from the network when loading from this cache.
...And 3 more matches
nsIDragSession
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void getdata( in nsitransferable atransferable, in unsigned long a
itemindex ); boolean isdataflavorsupported( in string adataflavor ); attributes attribute type description candrop boolean set the current state of the drag, whether it can be dropped or not.
...(see nsidragservice) numdrop
items unsigned long get the number of
items that were dropped.
... void getdata( in nsitransferable atransferable, in unsigned long a
itemindex ); parameters atransferable the transferable for the data to be put into.
...And 3 more matches
nsIDynamicContainer
it can use the property bag on every result node to store data associated with each
item, such as a full path on disk.
...method overview void oncontainermoved(in long long a
itemid, in long long anewparent, in long anewindex); void oncontainernodeclosed(in nsinavhistorycontainerresultnode acontainer); void oncontainernodeopening(in nsinavhistorycontainerresultnode acontainer, in nsinavhistoryqueryoptions aoptions); void oncontainerremoving(in long long a
itemid); methods oncontainermoved() this method is called when the given container has just been moved, in case the service needs to do any bookkeeping.
...void oncontainermoved( in long long a
itemid, in long long anewparent, in long anewindex ); parameters a
itemid the
item-id of the container
item.
...And 3 more matches
nsINavHistoryResultNode
bookmarkindex long when this
item is in a bookmark folder (its parent is of type folder), this is the index into that folder at which this node resides.
...for
items that are not in a bookmark folder, this value is -1.
... dateadded prtime if the node is an
item (bookmark, folder, or separator), this value is the time at which the
item was created.
...And 3 more matches
nsITransactionManager
on atransaction); void endbatch(); nsitransactionlist getredolist(); nsitransactionlist getundolist(); nsitransaction peekredostack(); nsitransaction peekundostack(); void redotransaction(); void removelistener(in nsitransactionlistener alistener); void undotransaction(); attributes attribute type description maxtransactioncount long sets the maximum number of transaction
items the transaction manager will maintain at any time.
...this method will prune the necessary number of transactions on the undo and redo stacks if the value specified is less than the number of
items that exist on both the undo and redo stacks.
... numberofredo
items long the number of
items on the redo stack.
...And 3 more matches
nsITreeContentView
last changed in gecko 1.8.0 inherits from: nsisupports method overview long getindexof
item(in nsidomelement
item); nsidomelement get
itematindex(in long index); attributes attribute type description root nsidomelement the element in the dom which this view uses as root content.
...obsolete since gecko 1.8 methods getindexof
item() retrieve the index associated with the specified content
item.
... long getindexof
item( in nsidomelement
item ); parameters
item a tree row for which to find the row index.
...And 3 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
nd()"> <p>hi</p> <p>hello</p> </body> javascript function set_background() { // get a list of all the body elements (there will only be one), // and then select the zeroth (or first) such element mybody = document.getelementsbytagname("body")[0]; // now, get all the p elements that are descendants of the body mybodyelements = mybody.getelementsbytagname("p"); // get the second
item of the list of p elements myp = mybodyelements[1]; myp.style.background = "rgb(255,0,0)"; } in this example, we set the myp variable to the dom object for the second p element inside the body: first, we get a list of all the body elements via mybody = document.getelementsbytagname("body")[0] since there is only one body element in any valid html document, this list will have only on...
...e
item, which we retrieve by selecting the first element in that list using [0].
... next, we get all the p elements that are descendants of the body: mybodyelements = mybody.getelementsbytagname("p"); finally, we get the second
item from the list of p elements via myp = mybodyelements[1]; once you have gotten the dom object for an html element, you can set its properties.
...And 3 more matches
FileList - Web APIs
using the file list all <input> element nodes have a files attribute of type filelist on them which allows access to the
items in this list.
... for example, if the html includes the following file input: <input id="file
item" type="file"> the following line of code fetches the first file in the node's file list as a file object: var file = document.getelementbyid('file
item').files[0]; method overview file
item(index); properties attribute type description length integer a read-only value indicating the number of files in the list.
... methods
item() returns a file object representing the file at the specified index in the file list.
...And 3 more matches
PaymentRequest.PaymentRequest() - Web APIs
each
item in the array contains the following fields: supportedmethods for early implementations of the spec, this was a sequence of identifiers for payment methods that the merchant website accepts.
... display
items an array of optional line
items for the payment request that the user agent may display, such as product details, tax, and shipping.
...this parameter contains the following fields: additionaldisplay
items an array of
items to be appended to the details.display
items property.
...And 3 more matches
Web APIs
ule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboard
item closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialscontainer crypto cryptokey cryptokeypair customelementregistry customevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domi...
...mplementationlist domlocator dommatrix dommatrixreadonly domobject domparser dompoint dompointinit dompointreadonly domquad domrect domrectreadonly domstring domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransfer
item datatransfer
itemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch documenttype doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_f...
...ment htmlformcontrolscollection htmlformelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenu
itemelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeignelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspa...
...And 3 more matches
ARIA Screen Reader Implementors Guide - Accessibility
politeness (aria-live or from role) takes first precedence,:
items should be added to the queue based on their politeness level from the aria-live property or inherited from the role (e.g.
...assertive
items are first then politeness level.
... alternatively, implementations may choose to have a policy of clearing more polite
items, e.g.
...And 3 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
checkbox-label div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; } <div>lorem</div> firefox checkmenu
item div { color: black; height: 20px; -moz-appearance: checkmenu
item; -webkit-appearance: checkmenu
item; } <div>lorem</div> firefox color-well div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; } <div>lorem</div> safari input type=color continuous-capacity-level-indicator ...
...hrome 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 list
item div { color: black; -moz-appearance: list
item; -webkit-appearance: list
item; } <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...
...irefox removed in firefox 64 dualbutton firefox removed in firefox 64 groupbox firefox removed in firefox 64 menuarrow firefox removed in firefox 64 menubar firefox removed in firefox 64 menucheckbox firefox removed in firefox 64 menuimage firefox removed in firefox 64 menu
item firefox removed in firefox 64.
...And 3 more matches
list-style - CSS: Cascading Style Sheets
note: this property is applied to list
items, i.e., elements with display: list-
item; .
...because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the
items inside.
...to address this, add a zero-width space as pseudo-content before each list
item to ensure the list is recognized properly.
...And 3 more matches
minmax() - CSS: Cascading Style Sheets
max-content represents the largest max-content contribution of the grid
items occupying the grid track.
... min-content represents the largest min-content contribution of the grid
items occupying the grid track.
...as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid
items occupying the grid track.
...And 3 more matches
Install Manifests - Archive of obsolete content
2 extensions 4 themes 8 locale 32 multiple
item package 64 spell check dictionary 128 telemetry experiment 256 webextension experiment examples <em:type>2</em:type> this property was added for firefox 1.5, and is only required for add-on types other than extensions and themes.
...currently 1 %
item_id% the id of the add-on being updated %
item_version% the version of the add-on being updated %
item_maxappversion% the maxversion of the targetapplication object corresponding to the current application for the add-on being updated.
... %
item_status% comma separated list of the add-ons operating status in the application.
...And 2 more matches
Adding sidebars - Archive of obsolete content
<menupopup id="viewsidebarmenu"> <menu
item id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="checkbox" autocheck="false" group="sidebar" sidebarurl="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;" oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the example in the mdc page includes...
...this kind of positioning can be useful for various artistic effects, as well as some type of desktop-like or dashboard-like interface, where
items are located in positions determined by the user, and they can overlap with each other.
...here's an example of a simple tree: <tree flex="1"> <treecols> <treecol label="&xulschoolhello.namecolumn.label;" flex="1" /> <treecol label="&xulschoolhello.greetingcolumn.label;" flex="3" /> </treecols> <treechildren> <tree
item> <treerow> <treecell label="peter" /> <treecell label="hey, what's up?" /> </treerow> </tree
item> <tree
item> <treerow> <treecell label="john"/> <treecell label="good evening, how are you doing?" /> </treerow> </tree
item> </treechildren> </tree> the text in the rows of the tree is hardcoded because we wouldn't generally use t...
...And 2 more matches
Tabbed browser - Archive of obsolete content
from a sidebar basically, if your extension code is a sidebar you can use: var mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltree
item) .roottree
item .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.gbrowser.addtab(...); from a dialog if your code is running in a dialog opened directly by a browser window, you can use: window.opener.gbrowser.addtab(...); if window.opener doesn't wo...
...the code given is for a menu
item, but will work equally well for other xul elements.
... xul: <menu
item oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstore;1", "nsisessionstore"); // create new tab, but don't load the content.
...And 2 more matches
Working With Directories - Archive of obsolete content
iterating over the files in a directory the directory object's directoryentries (nsifile.attributes) attribute is used to get a list of the
items in a directory.
...function getlatestfile() { var lastmod = 0; var homedir = io.getfile("home", ""); var
items = homedir.directoryentries; while (
items.hasmoreelements()) { var
item =
items.getnext().queryinterface(components.interfaces.nsifile); if (
item.isfile() &&
item.lastmodifiedtime > lastmod.lastmodifiedtime) lastmod =
item; } return lastmod; } this example iterates through the files in the home directory and looks for the file with the latest modification time (the last file in that directory that was written to).
... as the directoryentries (nsifile.attributes) property is an enumeration, you can iterate over the
items by using nsisimpleenumerator.hasmoreelements() and nsisimpleenumerator.getnext().
...And 2 more matches
Filtering - Archive of obsolete content
in this example, the menulist is hard-coded to contain the
items that we know are in the datasource.
...it is common to use a template to generate the
items on a menu or in a listbox or tree.
... <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> the action body will need to generate a <menu
item> for each result.
...And 2 more matches
Popup Menus - Archive of obsolete content
first, an example: <popupset> <menupopup id="clipmenu"> <menu
item label="cut"/> <menu
item label="copy"/> <menu
item label="paste"/> </menupopup> </popupset> as can be seen here, a simple popup menu with three commands on it has been created.
... the menupopup element surrounds the three menu
item elements.
...the sample below shows how we might do this: example 1 : source view <popupset> <menupopup id="clipmenu"> <menu
item label="cut"/> <menu
item label="copy"/> <menu
item label="paste"/> </menupopup> </popupset> <box context="clipmenu"> <label value="context click for menu"/> </box> here, the menupopup has been associated with a box.
...And 2 more matches
Tree Box Objects - Archive of obsolete content
roll(){ var value = document.getelementbyid("tbox").value; var tree = document.getelementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.scrolltorow(value); } </script> <tree id="thetree" rows="4"> <treecols> <treecol id="row" label="row" primary="true" flex="1"/> </treecols> <treechildren> <tree
item label="row 0"/> <tree
item label="row 1"/> <tree
item label="row 2"/> <tree
item label="row 3"/> <tree
item label="row 4"/> <tree
item label="row 5"/> <tree
item label="row 6"/> <tree
item label="row 7"/> <tree
item label="row 8"/> <tree
item label="row 9"/> </treechildren> </tree> <hbox align="center"> <label value="scroll to row:"/> <textbox id="tbox"/> <butt...
...getelementbyid("row").value = row.value; document.getelementbyid("column").value = column.value; document.getelementbyid("part").value = part.value; } </script> <tree id="thetree" flex="1" onmousemove="updatefields(event);"> <treecols> <treecol id="utensil" label="utensil" primary="true" flex="1"/> <treecol id="count" label="count" flex="1"/> </treecols> <treechildren> <tree
item> <treerow> <treecell label="fork"/> <treecell label="5"/> </treerow> </tree
item> <tree
item> <treerow> <treecell label="knife"/> <treecell label="2"/> </treerow> </tree
item> <tree
item> <treerow> <treecell label="spoon"/> <treecell label="8"/> </treerow> </tree
item> </treechildren> </tree> <l...
... to go in reverse and get the coordinates of a specific cell, use the getcoordsforcell
item() function.
...And 2 more matches
XUL accessibility guidelines - Archive of obsolete content
you should be able to perform all functionality either directly in the application or through menu
items or the context menu.
...the recommended way of fixing this is that all functionality associated with a toolbar be duplicated elsewhere in the application, such as in a menu
item or context menu.
...consider using context menu
items or other xul elements along with keyboard shortcuts.
...And 2 more matches
The Implementation of the Application Object Model - Archive of obsolete content
the personal toolbar must show up in a tree widget (in which case it has to be faking a tree content model, complete with <tt><tree
item></tt> and <tt><treecell></tt> nodes), or it must be able to show up on a toolbar (complete with <tt><button></tt> nodes and popup trees attached to folder buttons).
...yet another example of this problem arises from the need to perform fast sorts on a potentially large number of content
items.
...futhermore, the original natural order of the
items (e.g., in the case of bookmarks) would be lost.
...And 2 more matches
deck - Archive of obsolete content
the first
item is at index 0.
... maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties selectedindex type: integer returns the index of the currently selected
item.
... you may select an
item by assigning its index to this property.
...And 2 more matches
listcell - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
...And 2 more matches
tabpanels - Archive of obsolete content
the first
item is at index 0.
... selectedindex type: integer returns the index of the currently selected
item.
... you may select an
item by assigning its index to this property.
...And 2 more matches
toolbarpalette - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only the
item is a palette of available toolbar
items.
... it is not displayed, but is used by the toolbar customization dialog to display the list of
items.
... the children of the toolbarpalette should be the complete list of toolbarbuttons and toolbar
items that can be added to the toolbar.
...And 2 more matches
tooltip - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
... example: <menupopup id="top" onpopuphidden="console.log('the onpopuphidden method of id=top was called.');"> <menu
item label="
item 1"/> <menu
item label="
item 2"/> <menu id="submenu1" label="submenu 1"> <menupopup id="submenu1-popup"> <menu
item label="submenu1
item 1"/> <menu
item label="submenu1
item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menu
item label="submenu2
item 1"/> ...
...And 2 more matches
How to enable locale switching in a XULRunner application - Archive of obsolete content
you can hardwire the choices into the xul code using fixed list
items, or could take the elegant approach and construct the list dynamically.
...here is a code snippet showing how this is done: the definition of the xul control: <listbox id="locale-listbox"> <!-- generated list
items go in here --> </listbox> <button label="&switchlocale.button;" oncommand="changelocale()"/> the javascript code to populate the control: try { // query available and selected locales var chromeregservice = components.classes["@mozilla.org/chrome/chrome-registry;1"].getservice(); var xulchromereg = chromeregservice.queryinterface(components.interfaces.nsixulchromeregistry); var toolkitchromereg = chromeregservice.queryinterface(components.interfaces.nsitoolkitchromeregistry); var selectedlocale = x...
...ulchromereg.getselectedlocale("localeswitchdemo"); var availablelocales = toolkitchromereg.getlocalesforpackage("localeswitchdemo"); // render locale menulist by iterating through the query result from getlocalesforpackage() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.getelementbyid("locale-listbox"); var selected
item = null; while(availablelocales.hasmore()) { var locale = availablelocales.getnext(); var list
item = document.createelementns(xul_ns, "list
item"); list
item.setattribute("value", locale); list
item.setattribute("label", locale); if (locale == selectedlocale) { // is this the current locale?
...And 2 more matches
calICalendarView - Archive of obsolete content
readonly attribute calidatetime startdate; readonly attribute calidatetime enddate; readonly attribute boolean supportsdisjointdates; readonly attribute boolean hasdisjointdates; void setdatelist(in unsigned long acount, [array,size_is(acount)] in calidatetime adates); void getdatelist(out unsigned long acount, [array,size_is(acount),retval] out calidatetime adates); attribute cali
itembase selected
item; attribute calidatetime selectedday; attributes displaycalendar the displaycalendar is an implementation of the calicalendar interface.
...notice that a calicalendarview does not contain any add
item or refresh methods.
... therefore, it makes sense for an implementation of calicalendarview to add a caliobserver to the its displaycalendar in order to be notified of additions, modifications, and deletions of
items it may be displaying.
...And 2 more matches
Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
flexbox is the commonly-used name for the css flexible box layout module, a layout model for displaying
items in a single dimension — as a row or as a column.
...the key feature of flexbox is the fact that
items in a flex layout can grow and shrink.
... space can be assigned to the
items themselves, or distributed between or around the
items.
...And 2 more matches
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
placing
items onto the grid by line number having created a grid, you can place
items onto the grid by line number.
... in the following example the
item is positioned from column line 1 to column line 3, and from row line 1 to row line 3.
...er-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="
item">
item</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } .
item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } naming lines the lines created in the explicit grid can be named, by adding the name in square brackets before or after the track sizing information.
...And 2 more matches
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
all we want is a list of the name, quantity and price of each
item we need to buy this week.
... going back to our shopping list app, the model would specify what data the list
items should contain —
item, price, etc.
... — and what list
items are already present.
...And 2 more matches
CSS and JavaScript accessibility best practices - Learn web development
"standard" text content structure headings, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two
items.</li> </ul> some typical css might look like this: h1 { font-size: 5rem; } p, li { line-height: 1.5; font-size: 1.6rem; } you should: select sensible font sizes, line heights, letter spacing, etc.
...readers can read them out alongside: <label for="name">enter your name:</label> <input type="text" name="name" id="name"> we only do the validation when the form is submitted — this is so that we don't update the ui too often and potentially confuse screen reader (and possibly other) users: form.onsubmit = validate; function validate(e) { errorlist.innerhtml = ''; for(let i = 0; i < form
items.length; i++) { const test
item = form
items[i]; if(test
item.input.value === '') { errorfield.style.left = '360px'; createlink(test
item); } } if(errorlist.innerhtml !== '') { e.preventdefault(); } } note: in this example, we are hiding and showing the error message box using absolute positioning rather than another method such as visibility or display, because i...
...here we've just implemented a simple check that a value has been filled in to each input field (if(test
item.input.value === '')).
...And 2 more matches
CSS values and units - Learn web development
change this value to 1.5em and you will see that the font size of all the elements increases, but only the last
item will get wider, as the width is relative to that font size.
...each <li> has a font-size of 80%, therefore the nested list
items become progressively smaller as they inherit their sizing from their parent.
... position the <position> data type represents a set of 2d coordinates, used to position an
item such as a background image (via background-position).
...And 2 more matches
JavaScript basics - Learn web development
function setusername() { let myname = prompt('please enter your name.'); localstorage.set
item('name', myname); myheading.textcontent = 'mozilla is cool, ' + myname; } the setusername() function contains a prompt() function, which displays a dialog box, similar to alert().
...we use localstorage's set
item() function to create and store a data
item called 'name', setting its value to the myname variable which contains the user's entry for the name.
... if(!localstorage.get
item('name')) { setusername(); } else { let storedname = localstorage.get
item('name'); myheading.textcontent = 'mozilla is cool, ' + storedname; } this first line of this block uses the negation operator (logical not, represented by the !) to check whether the name data exists.
...And 2 more matches
HTML table advanced features and accessibility - Learn web development
the <tfoot> element needs to wrap the part of the table that is the footer — this might be a final row with
items in the previous rows summed, for example.
...
items sold august 2016 clothes accessories trousers skirts dresses bracelets rings belgium antwerp 56 22 43 72 23 gent 46 18 50 61 15 brussels 51 27 38 69 28 the netherlands amsterdam 89 34 69 85 38 utrecht 80 12 43 36 19 b...
...if you look back at the "
items sold august 2016" table at the start of this section of the article, you'll see that the "clothes" cell sits above the "trousers", "skirts", and "dresses" cells.
...And 2 more matches
TypeScript support in Svelte - Learn web development
to fix it, replace tabindex="-1" with tabindex={-1}, like this: <h2 id="list-heading" bind:this={headingel} tabindex={-1}>{completedtodos} out of {totaltodos}
items completed</h2> this way typescript can prevent us from incorrectly assigning it to a string variable.
... import type { jsonvalue } from './types/json.type' export const localstore = (key: string, initial: jsonvalue) => { // receives the key of the local storage and an initial value const tostring = (value: jsonvalue) => json.stringify(value, null, 2) // helper function const toobj = json.parse // helper function if (localstorage.get
item(key) === null) { //
item not present in local storage localstorage.set
item(key, tostring(initial)) // initialize local storage with initial value } const saved = toobj(localstorage.get
item(key)) // convert to object const { subscribe, set, update } = writable(saved) // create the under...
...lying writable store return { subscribe, set: (value: jsonvalue) => { localstorage.set
item(key, tostring(value)) // save also to local storage as a string return set(value) }, update } } now if we try to create a localstore with something that cannot be converted to json via json.stringify(), for example an object with a function as a property, vs code/validate will complain about it: and best of all, it will even work with the $store auto-subscription syntax.
...And 2 more matches
Working with Svelte stores - Learn web development
om 'svelte' let alertcontent = '' const unsubscribe = alert.subscribe(value => alertcontent = value) ondestroy(unsubscribe) </script> {#if alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-
items: center; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 1.4rem; font-size: 1.5rem; z-index: 100; opacity: 95%; } div p { color: #fff; } div svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right: 0.5rem; } </style> let's walk through this piece of code in detail.
... give it the following content: import { writable } from 'svelte/store'; export const localstore = (key, initial) => { // receives the key of the local storage and an initial value const tostring = (value) => json.stringify(value, null, 2) // helper function const toobj = json.parse // helper function if (localstorage.get
item(key) === null) { //
item not present in local storage localstorage.set
item(key, tostring(initial)) // initialize local storage with initial value } const saved = toobj(localstorage.get
item(key)) // convert to object const { subscribe, set, update } = writable(saved) // create the underlying writable store return { subscribe, ...
... set: (value) => { localstorage.set
item(key, tostring(value)) // save also to local storage as a string return set(value) }, update } } our localstore will be a function that when executed initially reads its content from web storage, and returns an object with three methods: subscribe(), set(), and update().
...And 2 more matches
Styling Vue components with CSS - Learn web development
x) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } </style> if you check the app, you'll see that our todo list is now in a card, and we have some better formatting of our to-do
items.
...this will help improve the spacing of our to-do
items a bit.
... update it as follows: <ul aria-labelledby="list-summary" class="stack-large"> adding scoped styles the last component we want to style is our todo
item component.
...And 2 more matches
Eclipse CDT Manual Setup
click on the little green button beside this message to open the "progress" tab, and keep an eye on the "refreshing workspace"
item as you continue with the steps below.
... (if an "indexing"
item starts after the "refreshing the workspace"
item has finished, click the little red box beside that
item to cancel it, since we want to configure the project before the indexer runs.) initial project properties so that the indexer will run faster and give better results, and so that eclipse doesn't give results for irrelevant files, you should add some resource filters to have eclipse ignore certain non-source files and directories.
... to create resource filters, open the project properties (different to the workspace preferences!) by selecting properties from the context menu for the project (root
item) in the project explorer tab on the left, or by selecting project > properties from the menubar.
...And 2 more matches
sslcrt.html
validating certificates manipulating certificates getting certificate information comparing sec
item objects validating certificates cert_verifycertnow cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames cert_verifycertnow checks that the current date is within the certificate's validity period and that the ca signature on the certificate is valid.
... syntax #include <cert.h> certcertificate *cert_findcertbyname ( certcertdbhandle *handle, sec
item *name); parameters this function has the following parameters: handle a pointer to the certificate database handle.
... returns the function returns one of these values: kt_null = 0 kt_rsa kt_dh kt_fortezza kt_kea_size comparing sec
item objects sec
item_compare
item compares two sec
item objects and returns a seccomparison enumerator that shows the difference between them.
...And 2 more matches
Feed content access API
(components.interfaces.nsifeed); // open a new window var win = window.open("", "feedtest_window"); var doc = win.document.wrappedjsobject; doc.open(); // write the html header and page title doc.write("<html><head><title>feed: " + feed.title.text + "</title></head><body>"); doc.write("<h1>" + feed.title.text + "</h1><p>"); var
itemarray = feed.
items; var num
items =
itemarray.length; // write the article information if (!num
items) { doc.write("<i>no news is good news!</i>"); } else { var i; var theentry; var theurl; var info; for (i=0; i<num
items; i++) { theentry =
itemarray.queryelementat(i, components.interfac...
...we then scan the array of
items in the feed by looking at the feed.
items nsiarray.
... this array contains nsifeedentry objects that describe each feed
item.
...And 2 more matches
Querying Places
by_annotation_ascending = 15 const unsigned short sort_by_annotation_descending = 16 const unsigned short results_as_uri = 0 const unsigned short results_as_visit = 1 const unsigned short results_as_full_visit = 2 (not yet implemented -- see bug 320831) attribute unsigned short sortingmode attribute autf8string sortingannotation attribute unsigned short resulttype attribute boolean exclude
items attribute boolean excludequeries attribute boolean excludereadonlyfolders attribute boolean expandqueries attribute boolean includehidden attribute boolean showsessions attribute unsigned long maxresults const unsigned short query_type_history = 0 const unsigned short query_type_bookmarks = 1 const unsigned short query_type_unified = 2 (not yet implemented -- see bug 378798) attribute ...
...this
item is an array of folder ids from the bookmark service.
... for sorting, you will generally want to use sort_by_none (the default) since this will return
items in their "natural" order as specified by the user in the bookmarks manager.
...And 2 more matches
XPCOM array guide
void processvisible
items() { // temporary stack-based nscomarray nscomarray<nsifoo> foo
items; getcompletelist(foo
items); // now filter out non visible objects // doing this backwards pruint32 i = foo
items.count(); while (i > 0) { --i; prbool isvisible; foo
items[i]->getisvisible(&isvisible); if (!isvisible) { foo
items.removeobjectat(i); } } // now deal with the processed list...
... processlist(foo
items); // foo
items will release all its members // when it goes out of scope } access to elements nscomarray<t> is a concrete c++ class, and so the [] operator is used to access its members.
...this lets you delete multiple objects from the array at once by specifying the index to the first
item to delete as well as the number of
items to delete.
...And 2 more matches
nsIAccessibleProvider
description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullist
item 0x0000100c xulmenubar 0x0000100d xulmenu
item 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001016 xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface.
... xultext 0x0000101a xultextbox 0x0000101b xulthumb 0x0000101c xultree 0x0000101d xultreecolumns 0x0000101e xultreecolumn
item 0x0000101f xultoolbar 0x00001020 xultoolbarseparator 0x00001021 xultooltip 0x00001022 xultoolbarbutton 0x00001023 xforms elements constants constant value description xformscontainer 0x00002000 used for xforms elements that provide accessible object for itself as well for anonymous content.
... xforms
itemcheckgroup 0x00002012 used for xforms
item element that is used inside xforms select elements represented by group of checkboxes.
...And 2 more matches
nsIAnnotationObserver
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void on
itemannotationremoved(in long long a
itemid, in autf8string aname); void on
itemannotationset(in long long a
itemid, in autf8string aname); void onpageannotationremoved(in nsiuri auri, in autf8string aname); void onpageannotationset(in nsiuri apage, in autf8string aname); methods on
itemannotationremoved() this method is called when an annotation is deleted for an
item.
... if aname is empty, then all annotations for the given
item have been deleted.
...void on
itemannotationremoved( in long long a
itemid, in autf8string aname ); parameters a
itemid the
item whose annotation is to be deleted.
...And 2 more matches
nsIZipEntry
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) attributes attribute type description compression unsigned short the type of compression used for the
item.
... issynthetic boolean use this attribute to determine whether this
item is an actual zip entry or is one synthesized for part of a real entry's path.
... lastmodifiedtime prtime the time at which this
item was last modified.
...And 2 more matches
XPCOM Interface Reference
ncachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocomplete
itemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitorn...
...entnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorage
itemnsidomstoragelistnsidomstoragemanagernsidomstoragewindownsidomuserdatahandlernsidomwindownsidomwindow2nsidomwindowinternalnsidomwindowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpathresultnsidomxulcontrolelementnsidomxulelementnsidomxullabeledcontrolelementnsidomxulselectcontrolelementnsidomxulselectcontrol
itemelementnsidatasignatureverifiernsidebugnsidebug2nsidevicemo...
...arsernsidirectoryenumeratornsidirectoryiteratornsidirectoryservicensidirectoryserviceprovidernsidirectoryserviceprovider2nsidiskcachestreaminternalnsidispatchsupportnsidocshellnsidocumentloadernsidownloadnsidownloadhistorynsidownloadmanagernsidownloadmanageruinsidownloadobservernsidownloadprogresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlink
itemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtargetnsiexceptionnsiextensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternalurlhandlerservic...
...And 2 more matches
Add to iPhoto
cfrange cfrange is a structure that identifies a range; that is, it identifies an offset to an
item in a list and a number of
items.
... however, obviously there are cases in which you'll want to be able to manipulate the contents of an array by adding and removing
items, sorting them, and so forth.
... if (document.getelementbyid("contentareacontextmenu")) { document.getelementbyid("contentareacontextmenu").addeventlistener("popupshowing", iphoto.onpopup, false); } responding when the context menu is clicked when the user right-clicks an image, our handler gets called: onpopup: function() { var node = iphoto.getcurrentnode(); var
item = document.getelementbyid("add-to-iphoto_menu
item"); if (
item) {
item.hidden = (node == null); // hide it if we're not on an image } } this code finds the image node the user right-clicked in by calling our getcurrentnode() method, then sets the hidden state of the "add image to iphoto" menu
item based on whether or not an image node was found.
...And 2 more matches
DOM Inspector FAQ - Firefox Developer Tools
you can hide anonymous nodes in inspector by unchecking the view > show anonymous content menu
item.
... the good news is, you can hide these whitespace nodes in inspector by unchecking the view > show whitespace nodes menu
item.
...menu
item from the edit menu in an inspector window that is inspecting the document you wish to search, and enter your search criteria there.
...And 2 more matches
Content Index API - Web APIs
// reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } adding to the content index here we're declaring an
item in the correct format and creating an asynchronous function which uses the add() method to register it with the content index.
... // our content const
item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving
items within the current index the below example shows an asynchronous function that retrieve...
...s
items within the content index and iterates over each entry, building a list for the interface.
...And 2 more matches
DataTransfer.mozClearDataAt() - Web APIs
the datatransfer.mozcleardataat() method removes the data associated with the given format for an
item at the specified index.
... the index must be in the range from zero to the number of
items minus one.
...if the last format for the
item is removed, the entire
item is removed, reducing moz
itemcount by one.
...And 2 more matches
DataTransfer.mozGetDataAt() - Web APIs
the datatransfer.mozgetdataat() method is used to retrieve an
item in the drag event's data transfer object, based on a given format and index.
... this method returns null if the specified
item does not exist or if the index is not in the range from zero to the number of
items minus one.
... return value nsivariant the data
item requested.
...And 2 more matches
Introduction to the DOM - Web APIs
items in a nodelist are accessed by index in either of two ways: list.
item(1) list[1] these two are equivalent.
... in the first,
item() is the single method on the nodelist object.
... the latter uses the typical array syntax to fetch the second
item in the list.
...And 2 more matches
HTMLCollection - Web APIs
note: this interface is called htmlcollection for historical reasons (before the modern dom, collections implementing this interface could only have html elements as their
items).
... properties htmlcollection.length read only returns the number of
items in the collection.
... methods htmlcollection.
item() returns the specific node at the given zero-based index into the list.
...And 2 more matches
Using the group role - Accessibility
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 list
item elements.
... <div id="tree1" role="tree" tabindex="-1"> <div id="animals" class="groupheader" role="presentation" aria-owns="animalgroup" aria-expanded="true"> <img role="presentation" tabindex="-1" src="images/treeexpanded.gif" /> <span role="tree
item" tabindex="0">animals</span> </div> <div id="animalgroup" role="group"> <div id="birds" role="tree
item"> <span tabindex="-1">birds</span> </div> <div id="cats" class="groupheader" role="presentation" aria-owns="catgroup" aria-expanded="false"> <img role="presentation" tabindex="-1" src="images/treecontracted.gif" /> <span role="tree
item" tabindex="0">cats</span> ...
...And 2 more matches
Accessibility documentation index - Accessibility
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 list
item role, which is used to identify a list
item contained inside the list.
... 45 aria: list
item role aria, aria role, aria list
item, accessibility, reference, rôle, list
item the aria list
item role can be used to identify an
item inside a list of
items.
...And 2 more matches
Introduction to formatting contexts - CSS: Cascading Style Sheets
a block formatting context (bfc) will lay child elements out according to block layout rules, a flex formatting context will lay its children out as flex
items, etc.
...s (including position: fixed or position: sticky) elements with display: inline-block table cells or elements with display: table-cell, including anonymous table cells created when using the display: table-* properties table captions or elements with display: table-caption block elements where overflow has a value other than visible elements with display: flow-root or display: flow-root list-
item elements with contain: layout, content, or strict flex
items grid
items multicol containers elements with column-span set to all this is useful because a new bfc will behave much like the outermost document in that it becomes a mini-layout inside the main layout.
... a bfc contains everything inside it, float and clear only apply to
items inside the same formatting context, and margins only collapse between elements in the same formatting context.
...And 2 more matches
List group with badges - CSS: Cascading Style Sheets
requirements our list
items should be displayed with the badges lined up on the right, no matter how much content the
item has.
...this places any extra space between the
items.
... in the live example, if you remove this property and you will see the badge move to the end of the text on
items with text shorter than the one line.
...And 2 more matches
Pagination - CSS: Cascading Style Sheets
requirements the pagination pattern typically displays
items in a row.
... to ensure that the pagination is understandable by people using a screenreader, we mark the
items up as a list inside a <nav> element, and then use css to display the layout visually as a row.
... the list itself also becomes a flex container to lay the
items out as a row.
...And 2 more matches
Split Navigation - CSS: Cascading Style Sheets
a navigation pattern where one or more elements are separated from the rest of the navigation
items.
...we can use flexbox to achieve this, without needing to make the two sets of
items into two separate flex containers.
... recipe download this example choices made this pattern combines auto margins with flexbox to split the
items.
...And 2 more matches
CSS reference - CSS: Cascading Style Sheets
--webkit-line-clampa:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-
itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-or...
...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-list
item><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...
...nsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-
itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (...
...And 2 more matches
grid-auto-columns - CSS: Cascading Style Sheets
if a grid
item is positioned into a column that is not explicitly sized by grid-template-columns, implicit grid tracks are created to hold it.
... max-content is a keyword representing the largest maximal content contribution of the grid
items occupying the grid track.
... min-content is a keyword representing the largest minimal content contribution of the grid
items occupying the grid track.
...And 2 more matches
grid-auto-rows - CSS: Cascading Style Sheets
if a grid
item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it.
... max-content is a keyword representing the largest maximal content contribution of the grid
items occupying the grid track.
... min-content is a keyword representing the largest minimal content contribution of the grid
items occupying the grid track.
...And 2 more matches
list-style-image - CSS: Cascading Style Sheets
the list-style-image css property sets an image to be used as the list
item marker.
... note: this property is applied to list
items, i.e.
... elements with display: list-
item; by default this includes <li> elements.
...And 2 more matches
list-style-position - CSS: Cascading Style Sheets
the list-style-position css property sets the position of the ::marker relative to a list
item.
... note: this property is applied to list
items, i.e., elements with display: list-
item;.
...because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list
items.
...And 2 more matches
order - CSS: Cascading Style Sheets
the order css property sets the order to lay out an
item in a flex or grid container.
...
items in a container are sorted by ascending order value and then by their source code order.
... values <integer> represents the ordinal group to be used by the
item.
...And 2 more matches
HTML attribute reference - HTML: Hypertext Markup Language
itemprop global attribute keytype <keygen> specifies the type of key generated.
...the following examples are valid ways to mark up a boolean attribute: <div
itemscope> this is valid html but invalid xml.
... </div> <div
itemscope=
itemscope> this is also valid html but invalid xml.
...And 2 more matches
<input type="file"> - HTML: Hypertext Markup Language
if it is, we: print out its name and file size into a list
item inside the previous <div> (obtained from file.name and file.size).
...then, insert the image into the list
item too by creating a new <img> and setting its src to the thumbnail.
... if the file type is invalid, we display a message inside a list
item telling the user that they need to select a different file type.
...And 2 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
warning: the mechanism for selecting multiple non-contiguous
items via the keyboard described below currently only seems to work in firefox.
... keyboard users can select multiple contiguous
items by: focusing on the <select> element (e.g.
... selecting an
item at the top or bottom of the range they want to select using the up and down cursor keys to go up and down the options.
...And 2 more matches
JavaScript modules - JavaScript
the easiest way to use it is to place it in front of any
items you want exported out of the module, for example: export const name = 'square'; export function draw(ctx, length, x, y, color) { ctx.fillstyle = color; ctx.fillrect(x, y, length, length); return { length: length, x: x, y: y, color: color }; } you can export functions, var, let, const, and — as we'll see later — classes.
... they need to be top-level
items; you can't use export inside a function, for example.
... a more convenient way of exporting all the
items you want to export is to use a single export statement at the end of your module file, followed by a comma-separated list of the features you want to export wrapped in curly braces.
...And 2 more matches
Proxy - JavaScript
let oldval = obj[prop]; if (prop === 'selected') { if (oldval) { oldval.setattribute('aria-selected', 'false'); } if (newval) { newval.setattribute('aria-selected', 'true'); } } // the default behavior to store the value obj[prop] = newval; // indicate success return true; } }); let i1 = view.selected = document.getelementbyid('
item-1'); //giving error here, i1 is null console.log(i1.getattribute('aria-selected')); // 'true' let i2 = view.selected = document.getelementbyid('
item-2'); console.log(i1.getattribute('aria-selected')); // 'false' console.log(i2.getattribute('aria-selected')); // 'true' note: even if selected: !null, then giving oldval.setattribute is not a function value correction and an extra property t...
...n true; } }); console.log(products.browsers); // ['internet explorer', 'netscape'] products.browsers = 'firefox'; // pass a string (by mistake) console.log(products.browsers); // ['firefox'] <- no problem, the value is an array products.latestbrowser = 'chrome'; console.log(products.browsers); // ['firefox', 'chrome'] console.log(products.latestbrowser); // 'chrome' finding an array
item object by its property this proxy extends an array with some utility features.
...get the "doccookies" object here: https://developer.mozilla.org/docs/dom/document.cookie#a_little_framework.3a_a_complete_cookies_reader.2fwriter_with_full_unicode_support */ var doccookies = new proxy(doccookies, { get: function (otarget, skey) { return otarget[skey] || otarget.get
item(skey) || undefined; }, set: function (otarget, skey, vvalue) { if (skey in otarget) { return false; } return otarget.set
item(skey, vvalue); }, deleteproperty: function (otarget, skey) { if (skey in otarget) { return false; } return otarget.remove
item(skey); }, enumerate: function (otarget, skey) { return otarget.keys(); }, ownkeys: function (otarget, skey) { ...
...And 2 more matches
XUL Migration Guide - Archive of obsolete content
in this way an extension can integrate its user interface into the browser: for example, adding menu
items, buttons, and toolbars.
...in order of complexity, the main options are: the sdk includes modules that implement some basic user interface components including buttons, dialogs, and context menu
items.
... some limitations only exist because we haven't yet implemented the relevant apis: for example, there's currently no way to add
items to the browser's main menus using the sdk's supported apis.
... see the guide to adding firefox menu
items.
indexed-db - Archive of obsolete content
the add-on implements helper functions open(), add
item() and get
items() to open the database, add a new
item to the database, and get all
items in the database.
... var { indexeddb, idbkeyrange } = require('sdk/indexed-db'); var database = {}; database.onerror = function(e) { console.error(e.value) } function open(version) { var request = indexeddb.open("stuff", version); request.onupgradeneeded = function(e) { var db = e.target.result; e.target.transaction.onerror = database.onerror; if(db.objectstorenames.contains("
items")) { db.deleteobjectstore("
items"); } var store = db.createobjectstore("
items", {keypath: "time"}); }; request.onsuccess = function(e) { database.db = e.target.result; }; request.onerror = database.onerror; }; function add
item(name) { var db = database.db; var trans = db.transaction(["
items"], "readwrite"); var store = trans.objectstore("
items"); var time = new date().
...gettime(); var request = store.put({ "name": name, "time": time }); request.onerror = database.onerror; }; function get
items(callback) { var cb = callback; var db = database.db; var trans = db.transaction(["
items"], "readwrite"); var store = trans.objectstore("
items"); var
items = new 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 list
items(
itemlist) { console.log(
itemlist); } open("1"); var add = require("sdk/ui/button/...
...action").actionbutton({ id: "add", label: "add", icon: "./add.png", onclick: function() { add
item(require("sdk/tabs").activetab.title); } }); var list = require("sdk/ui/button/action").actionbutton({ id: "list", label: "list", icon: "./list.png", onclick: function() { get
items(list
items); } }); note that to run this add-on you'll need to provide icons named "add.png" and "list.png" in the add-on's "data" directory.
HTML in XUL for rich tooltips - Archive of obsolete content
ple is what the final xul overlay could look like, assuming a javascript overlay titled overlay.js: <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menu
item id="htmltip1" label="foo1" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> <menu
item id="htmltip2" label="foo2" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> </popup> <popupset id="mainpopupset"> <tooltip id="myhtmltip"> <html:div id="myhtmltipdiv" type="content"/> </toolti...
... a number of menu
items have a tooltip attribute pointing to the same tooltip.
... that tooltip is empty now, but we will use the mouseover event to dynamically populate the tooltip (which is about to be shown) with a different message for each menu
item.
... <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menu
item id="htmltip3" label="foo3" tooltip="mytip3html" /> </popup> <popupset id="mainpopupset"> <tooltip id="mytip3html"> <html:div type="content"> <html:b>bold foo</html:b> </html:div> </tooltip> </popupset> </overlay> ...
xml:base support in old browsers - Archive of obsolete content
var scheme = /(\w(\w|\d|\+|\- |\ .)*)\:\/\//; function getxmlbaselink (xlink, this
item) { var xmlbase = ''; if (!xlink.match(scheme)) { // only check for xml base if there is no protocol // tests for 'scheme' per http://www.ietf.org/rfc/rfc2396.txt' xmlbase = getxmlbase (this
item); if (!xmlbase.match(/\/$/) && !xlink.match(/\/$/)) { // if no preceding slash on xlink or trailing slash on xml:base, add one in between xmlbase += '/'; } else if (xmlbase.match(/\/$/) && xli...
...he host only link = loc.protocol + '//' + loc.host + link; } else { // if link is relative, it should be from full path, minus the file var dirpath = loc.pathname.substring(0, loc.pathname.lastindexof('/')-1); if (link.lastindexof('/') !== link.length-1) { link += '/'; } link = loc.protocol + '//' + loc.host + dirpath + link; } } return link; } function getxmlbase (this
item) { // fix: need to keep going up the chain if still a relative url!!!!!
... // var ns = 'http://www.w3.org/xml/1998/namespace'; var att, protocolpos; var xmlbase = ''; var abs = false; // avoid loop if node is not present if (!this
item || !this
item.nodename) { return xmlbase; } // check present element and higher up for xml:base // now check for the next matching local name up in the hierarchy (until the document root) while (this
item.nodename !== '#document' && this
item.nodename !== '#document-fragment') { att = this
item.getattribute('xml:base'); // xml: namespaces must use 'xml' prefix if (att) { protocolpos = att.indexof('//'); var protocolmatch = att.match(scheme); if (protocolmatch) { // if has protocol, can stop if (abs) { var skipfile = (att.indexof('///') === protocolpos) ?
... was not absolute, resolve against the full uri here' break; } else if (att.indexof('/') === 0) { // if absolute (/), need to prepare for next time to strip out after slash xmlbase = att + xmlbase; abs = true; // once the protocol is found on the next round, make sure any extra path is ignored } else { // if relative, just add it xmlbase = att + xmlbase; } } this
item = this
item.parentnode; } //return (xmlbase === '') ?
Extension Packaging - Archive of obsolete content
multi-
item extension xpis in some cases, a single xpi file may wish to install multiple extensions/themes.
... a special kind of extension xpi, called the multiple
item package, explains how to create this kind of package.
... (firefox 1.5/xulrunner 1.8 required.) from the release of firefox 53, multiple
item extension packages are no longer supported and will not load.
... official references for toolkit api structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-
item extension packaging: specific information about multiple-
item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration printing in xul apps ...
Adding Events and Commands - Archive of obsolete content
it's very useful because it represents the most common action for input controls such as menu
items, buttons and checkboxes.
... then you need to identify which of your xul elements will be linked to this broadcaster, using the observes attribute: <menu
item id="xulschoolhello-hello-menu-
item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hello
item.accesskey;" observes="xulschoolhello-online-broadcaster" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> the attribute value is set to be the id of the broadcaster element, indicating that this element will observe all attribute changes that happen in the broadcas...
...--> <menu
item id="xulschoolhello-hello-menu-
item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hello
item.accesskey;" command="xulschoolhello-hello-command" /> commands allow you to keep your javascript calls in a single place, avoiding code repetition and possible bugs.
...you can create an extension that adds toolbar buttons, statusbar buttons and menu
items, all with equivalent behavior, and without having to repeat lots of xul code in the process.
Custom XUL Elements with XBL - Archive of obsolete content
you should see a new
item in the hello world menu, that opens a binding test window where you can add "persons" to a list.
...these nodes are part of the xul dom just like any other, and having an id attribute is bound to cause problems, given that you could have more than instance of your element in the same document and then multiple inner
items with the same id.
... methods our "person" binding has a single method that removes the
item from the list: <method name="remove"> <parameter name="aevent" /> <body><![cdata[ this.parentnode.removechild(this); ]]></body> </method> as you can see, it's very easy to define a method and the parameters it takes.
... with inheritance you could take the richlistbox element and modify it to make a rich
item tree, or create a switch button that changes state everytime it's clicked.
Security best practices in extensions - Archive of obsolete content
some
items mentioned are strict guidelines, meaning that if you don't follow them then your add-on will not be approved on mozilla add-ons.
... other
items are recommendations.
... this is written from the perspective of a firefox extension, but most
items apply to extensions for other mozilla-based applications such as thunderbird or seamonkey.
...many of the
items talked about so far in this document apply in this sphere, but here are some additional tips: api providers should use the https protocol, which provides better protection for data passed over the network.
List of Former Mozilla-Based Applications - Archive of obsolete content
world desktop client switched from embedded mozilla browser to a plugin architecture with a qtwebkit plugin applications that are no longer being developed name description additional information aphrodite browser inactive aol client for mac internet software no longer available beonex communicator internet software last news
item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available doczilla sgml/xml/html browser last release on site from july 2005 fabula language learning application inactive gale...
...on browser last news
item on site from september 2006 gencatrss rss reader domain switched over to domain parking service ghostzilla browser archived version of ghostzilla site from 2005 homebase desktop operating environment for internet computers no longer available hp printer assistant printer utility hall of fame page mentions that this used an embedded version of mozilla at some point but i can't find reference to current status (may still be using mozilla code?) icebrowser java browser sdk uses mozilla rhino --eol'ed in 2009 (jin'sync) office app launcher download page last updated on 12/21/06 kylix compiler and integrated development environment borland discontinued this produc...
...old article available about how borland embedded mozilla in kylix 2 mango im client last news
item on site from january 2007 mobidvd dvd/vcd/cd ripping software site down mozilla suite internet application suite development shifted to firefox, thunderbird and seamonkey applications netscape navigator browser support for netscape ended on february 1, 2008 nvu web authoring tool development stopped in 2005 and is being continued as an unofficial bugfix release by the kompozer project pogo browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news
item on site from july 2007 script editor editor inactive skipstone gtk+ br...
...owser last news
item on site from february 2008 xabyl visual xbl editor inactive xulplayer media player last project update on 3/14/09 zoomcreator photo collage tool on april 29, 2010 the site announced zoomara was shutting down.
Creating a Firefox sidebar extension - Archive of obsolete content
this is an separate xul file that specifies the location of menu
items.
...chrome/content/firefoxoverlay.xul <?xml version="1.0"?> <!doctype overlay system "chrome://emptysidebar/locale/emptysidebar.dtd"> <overlay id="emptysidebaroverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="viewsidebarmenu"> <menu
item key="key_openemptysidebar" observes="viewemptysidebar" /> </menupopup> <keyset id="mainkeyset"> <key id="key_openemptysidebar" command="viewemptysidebar" key="&openemptysidebar.commandkey;" modifiers="&openemptysidebar.modifierskey;" /> </keyset> <broadcasterset id="mainbroadcasterset"> <broadcaster id="viewemptysidebar" label="&emptysidebar.t...
...the second is it provides attributes to the menu
item, some of which are changed automatically when togglesidebar is called.
...one must then set the key attribute of the menu
item to "".
Code snippets - Archive of obsolete content
let mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltree
item) .roottree
item .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); // obtain a reference to sync's tabs "engine." let tabsengine = weave.service.enginemanager.get("tabs"); // iterate over each client having data.
...let collection = "forms"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/record.js"); let recordtype = weave.engines.get(collection)._recordobj; let coll = new collection(weave.service.storageurl + collection, recordtype); coll.full = true; coll.recordhandler = function(
item) {
item.collection = collection;
item.decrypt(); console.log(
item.cleartext); }; coll.get(); print an individual record let collection = "history"; let id = "guid_goes_here"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/record.js"); let recordtype = weave.engines.get(collection)._recordobj; let coll = new collection(weave.
...service.storageurl + collection, recordtype); coll.full = true; coll.ids = [id]; coll.recordhandler = function(
item) {
item.collection = collection;
item.decrypt(); console.log(
item.cleartext); }; coll.get(); count types of bookmark records components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/record.js"); let deleted = 0; let
items = {}; let collection = "bookmarks"; let recordtype = weave.engines.get(collection)._recordobj; let coll = new collection(weave.service.storageurl + collection, recordtype); coll.full = true; coll.limit = null; coll.recordhandler = function(
item) {
item.collection = collection;
item.decrypt(); if (
item.deleted) { deleted++; } else {
items[
item.type]...
... = 1 + (
items[
item.type] || 0); } }; coll.get(); console.log("deleted: " + deleted + ", " + json.stringify(
items)); get a log from xul fennec view about:sync-log.
Dynamically modifying XUL-based user interface - Archive of obsolete content
var element = document.getelementbyid("someelement"); while(element.haschildnodes()){ element.removechild(element.firstchild); } inserting menu
items to a menu this example adds two new menu
items to a <menupopup>: to the start and to the end of it.
... it uses document.createelementns() method to create the
items, and insertbefore() with appendchild() to insert the created xml elements within the document.
... function createmenu
item(alabel) { const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var
item = document.createelementns(xul_ns, "menu
item"); // create a new xul menu
item item.setattribute("label", alabel); return
item; } var popup = document.getelementbyid("mypopup"); // a <menupopup> element var first = createmenu
item("first
item"); var last = createmenu
item("last
item"); popup.insertbefore(first, popu...
...for example you could move the
item labeled "first
item" to the end of popup by adding this statement as a last line to the snippet above: popup.appendchild(first); this statement would remove the node from its current position in the document and re-insert it at the end of the popup.
XUL Events - Archive of obsolete content
this event would be used to update the disabled status of its commands.dommenu
itemactivethe dommenu
itemactive event is executed when a <menu> or a <menu
item> has been hovered or highlighted.dommenu
iteminactivethe dommenu
iteminactive event is executed when a <menu> or a <menu
item> in no longer hovered or highlighted.popuphiddenthe popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.popuphidingthe popuphiding event is executed when a <menupopu...
... attribute: onmouseup select this event is sent to a listbox or tree when an
item is selected.
... attribute: onunderflow dommenu
itemactive this event is sent when a menu or menu
item is hovered over, or highlighted.
... dommenu
iteminactive this event is sent when a menu or menu
item is no longer being hovered over, or highlighted.
moveByOffset - Archive of obsolete content
« xul reference home movebyoffset( offset , isselecting, isselectingrange) return type: no return value if offset is positive, adjusts the focused
item forward by that many
items.
... if offset is negative, adjusts the focused
item backward by that many
items.
...if isselectingrange is also true, then the new
item is selected in addition to any currently selected
items.
...
items that are hidden are skipped.
Positioning - Archive of obsolete content
a submenu, however, is placed by default to the right of the parent menu
item, such that the top edge of the menu is aligned with the top edge of the parent menu
item.
...if a context menu was opened via the keyboard only, the menu will appear at the top left corner of the document, or underneath the currently selected
item if a list is focused.
... for instance: <menupopup id="edit
items" position="end_before"> <menu
item label="cut"/> <menu
item label="copy"/> <menu
item label="paste"/> </menupopup> <label value="clipboard" popup="edit
items"/> in this example, a menupopup is attached to a label via the popup attribute, which will cause the popup to appear when the label is left-clicked.
... <button label="popup" type="menu"> <menupopup style="margin-top: 2ex;"> <menu
item label="cat"/> <menu
item label="dog"/> </menupopup> </button> this technique is used internally for tooltips.
Popup Guide - Archive of obsolete content
it displays
items in a list, can display submenus, and provides keyboard navigation between the
items.
... features of
items on a menu to learn about the various features of
items on a menu, see features of the menu
item element modifying the
items on a menu to append, insert and remove elements from a menu, see modifying a menu.
... using popups in extensions extensions may add additional menu
items either to a menu on the menu bar or to the context menu.
...another common task is to create an extension which adds an
item to the browser's context menu.
selectedIndex - Archive of obsolete content
« xul reference selectedindex type: integer returns the index of the currently selected
item.
... you may select an
item by assigning its index to this property.
... by assigning -1 to this property, all
items will be deselected.
... returns -1 if no
items are selected ...
Sorting Results - Archive of obsolete content
when the reference node is an rdf seq container and the results are in that container, however, the template builder orders the results in the order the
items appear in the seq.
...sorting tree results we'll examine sorting of trees first since trees are the most common element used with sorted
items.
...<listbox datasources="people2.xml" ref="*" querytype="xml" sort="?name" sortdirection="ascending"> <template> <query expr="*/*"/> <action> <list
item 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.
...able: <hbox datasources="template-guide-photos5.rdf" sort="http://purl.org/dc/elements/1.1/title" sortdirection="ascending" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> </hbox> in this example, the generated
items will be sorted by title.
Templates - Archive of obsolete content
usually, elements such as tree
items and menu
items will be populated with data.
...in the example below, one hbox will be created and it will be filled with a label for each
item.
...this isn't a problem though, since other elements such as menus wouldn't be expected to display too many
items.
... it's also possible to use the content builder for trees as well, and a tree
item element and related elements will be created for each row.
Updating Commands - Archive of obsolete content
a simple command updater looks like this: <commandset id="updatepaste
item" commandupdater="true" events="focus" oncommandupdate="goupdatecommand('cmd_paste');"/> a command updater is indicated by using the commandupdater attribute, which should be set to true.
...it will update the command and enable or disable necessary buttons and menu
items.
...<commandset id="globaleditmenu
items" commandupdater="true" events="focus" oncommandupdate="goupdateglobaleditmenu
items()"/> <commandset id="selecteditmenu
items" commandupdater="true" events="select" oncommandupdate="goupdateselecteditmenu
items()"/> <commandset id="undoeditmenu
items" commandupdater="true" events="undo" oncomm...
...andupdate="goupdateundoeditmenu
items()"/> <commandset id="clipboardeditmenu
items" commandupdater="true" events="clipboard" oncommandupdate="goupdatepastemenu
items()"/> next, we'll find out how to use observers.
XUL Reference - Archive of obsolete content
ollbox 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 list
item member menu menubar menu
item menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlist
item row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack...
... statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbar
item toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols tree
item treerow treeseparator triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbar
item toolbarpallete ...
...el caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menu
item menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbar
item 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 a...
...utocomplete) textbox (mozilla autocomplete) timepicker description label image listbox list
item listcell listcol listcols listhead listheader richlistbox richlist
item tree treecell treechildren treecol treecols tree
item 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 broadcaster broadcasterset observes key keyset stringbundle stringbundleset arrowscrollbox dropmarker grippy scrollbar scrollcorner spinbuttons all attributes all properties all methods attributes defined for all xul elements style classes event handlers deprecated/defunct markup ...
command - Archive of obsolete content
in addition, disabling the command will automatically disable the menu
items and keyboard shortcuts.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
...this occurs when a user selects a menu
item or presses a keyboard shortcut attached to the command.
key - Archive of obsolete content
to display the shortcut defined with the key element in the ui, you can use <menu
item key="key element's id" command="command id" .../>.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...this text would appear next to a menu
item label if that menu
item is associated with the key element via its key attribute.
...this occurs when a user selects a menu
item or presses a keyboard shortcut attached to the command.
listheader - Archive of obsolete content
attributes disabled properties acesssibletype examples <listbox> <listhead> <listheader label="name"/> <listheader label="occupation"/> </listhead> <list
item> <listcell label="george"/> <listcell label="house painter"/> </list
item> <list
item> <listcell label="mary ellen"/> <listcell label="candle maker"/> </list
item> <list
item> <listcell label="roger"/> <listcell label="swashbuckler"/> </list
item> </listbox> attributes disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
...node, 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, list
item ...
tabbox - Archive of obsolete content
selectedindex type: integer returns the index of the currently selected
item.
... you may select an
item by assigning its index to this property.
... by assigning -1 to this property, all
items will be deselected.
... returns -1 if no
items are selected selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element.
treecol - Archive of obsolete content
<tree flex="1" editable="true"> <treecols> <treecol label="active" type="checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <tree
item> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </tree
item> <tree
item> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </tree
item> </treechildren> </tree> to make the checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type).
...for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } cycler type: boolean if true, then the column is a cycler column.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
... related elements tree, treecols, treechildren, tree
item, treerow, treecell and treeseparator.
title - Archive of obsolete content
it is used to specify thetitle of a <channel>, an <image>, an <
item>, or a <textinput>.
...advogato</title> <link>http://www.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> <url>http://www.advogato.org/image/tinyadvogato.png</url> </image> <
item> <title>why can i not get any tang?!</title> <link>http://www.advogato.org/article/10101.html</link> <description>seriously.
... why can't i get any tang?</description> </
item> </channel> </rss> attributes none sub-elements none parent elements the table below shows a list of rss elements that this element can be a child of.
...th>0.93</td> <th>0.94</td> <th>1.0</td> <th>2.0</td> </tr> <tr> <td>rss channel element</td> <td><channel></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss image element</td> <td><image></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss
item element</td> <td><
item></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss text input element</td> <td><textinput></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> </table> </center> see also none rss element</td> <th colspan="9" ...
XForms Repeat Element - Archive of obsolete content
example <model> <instance> <my:lines> <my:line name="a"> <my:price>3.00</my:price> </my:line> <my:line name="b"> <my:price>32.25</my:price> </my:line> </my:lines> </instance> </model> <repeat id="lineset" nodeset="/my:lines/my:line"> <input ref="my:price"> <label>line
item</label> </input> <input ref="@name"> <label>name</label> </input> </repeat> <trigger> <label>insert a new
item after the current one</label> <action ev:event="domactivate"> <insert nodeset="/my:lines/my:line" at="index('lineset')" position="after"/> <setvalue ref="/my:lines/my:line[index('lineset')]/@name"/> <setvalue ref="/my:lines/my:line[index('lineset')]/price...
...">0.00</setvalue> </action> </trigger> <trigger> <label>remove current
item</label> <delete ev:event="domactivate" nodeset="/my:lines/my:line" at="index('lineset')"/> </trigger> attribute based repeat when using xforms within host languages like xhtml, it is often necessary to create repeating structures within constructs such as html:table.
... <xf:delete ev:event="domactivate" at="index('anonidgridrepeat')" xbl:inherits="model, bind, nodeset"/> </xf:trigger> </xf:repeat> </xbl:content> </xbl:binding> </xbl:bindings> <style> div.grid { -moz-binding: url('#grid'); } </style> <xf:model> <xf:instance> <data xmlns=""> <repeat> <
item> <input>input1</input> </
item> <
item> <input>input2</input> </
item> <
item> <input>input3</input> </
item> </repeat> </data> </xf:instance> </xf:model> </head> <body> <xf:repeat nodeset="/data/repeat/
item" id="gridrepeat"> <xf:input ref="input"/> </xf:repeat> <br/> <div class="gri...
...d" nodeset="/data/repeat/
item"/> </body> ...
Flex Container - MDN Web Docs Glossary: Definitions of Web-related terms
a flexbox layout is defined using the flex or inline-flex values of the display property on the parent
item.
... this element then becomes a flex container, and each one of its children becomes a flex
item.
...these values create a flex formatting context for the element, which is similar to a block formatting context in that floats will not intrude into the container, and the margins on the container will not collapse with those of the
items.
... learn more property reference align-content align-
items flex flex-direction flex-flow flex-wrap justify-content further reading css flexbox guide: basic concepts of flexbox css flexbox guide: aligning
items in a flex container css flexbox guide: mastering wrapping of flex
items ...
Images, media, and form elements - Learn web development
you can see this happening in the example below where we have a two column, two row grid container, which has four
items in it.
...different browsers are inconsistent in how much styling and customization they allow for such
items.
...this includes all the
items mentioned in the last three sections: button, input, select, textarea { font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; } textarea { overflow: auto; } note: normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing
items in css images, media, and form elements styling tables debugging css organizing your css ...
Test your skills: values and units - Learn web development
task one in this task, the first list
item has been given a background color using hex color codes.
... your task is to complete the css using the same color in different formats, plus a final list
item where you should make the background semi-opaque.
... the second list
item should use rgb color.
... task two in this task you need to set the size of various
items of text.
Test your skills: Grid Layout - Learn web development
this aim of this task is to get you working with css grid layout, and test that you understand how a grid and grid
items behave.
...by editing the css rules for the two child elements, cause them to span over several grid tracks each; the second
item should overlay the first as in the image below.
... try updating the live code below to recreate the finished example: additional questions: can you now cause the first
item to display on top without changing the order of
items in the source?
...use the grid-area and grid-template-areas properties to lay the
items out as shown in the image.
Responsive design - Learn web development
.container { column-width: 10em; } flexbox in flexbox, flex
items will shrink and distribute space between the
items according to the space in their container, as their initial behavior.
... by changing the values for flex-grow and flex-shrink you can indicate how you want the
items to behave when they encounter more or less space around them.
... in the example below the flex
items will each take an equal amount of space in the flex container, using the shorthand of flex: 1 as described in the layout topic flexbox: flexible sizing of flex
items.
... .container { display: flex; } .
item { flex: 1; } note: as an example, we have rebuilt the simple responsive layout above, this time using flexbox.
Styling links - Learn web development
the last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list
items in the last article — this time however we are using background shorthand instead of the individual properties.
...for example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list
items, or other things.
...in this case, we are creating a horizontal list of links, so in the third rule we set the display property to inline, which causes the list
items to sit on the same line as one another — they now behave like inline elements.
... note: you may have noticed that the list
items in the html are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout.
What are browser developer tools? - Learn web development
opera: developer ➤ developer tools context menu: press-and-hold/right-click an
item on a webpage (ctrl-click on the mac), and choose inspect element from the context menu that appears.
... in the image, the first section, watch expressions, shows that the list
items variable has been added.
...in example.js, a breakpoint has been set on the statement list
items.push(inputnew
item.value); the final two sections only appear when the code is running.
...for example, in the image below, you can see the objects available to the code in the add
itemclick function.
Document and website structure - Learn web development
non-semantic wrappers sometimes you'll come across a situation where you can't find an ideal semantic element to group some
items together or wrap some content.
... next, try to sort all these content
items into groups, to give you an idea of what parts might live together on different pages.
... now try to sketch a rough s
itemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages.
... active learning: create your own s
itemap try carrying out the above exercise for a website of your own creation.
What’s in the head? Metadata in HTML - Learn web development
objective: to learn about the html head, its purpose, the most important
items it can contain, and what effect it can have on the html document.
...now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list
item.
... when you press the ok button, a new list
item will be added to the list containing the text.
... when you click on an existing list
item, a dialog box will pop up allowing you to change the
item's text.
Starting our Svelte Todo list app - Learn web development
<span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> <!-- todosstatus --> <h2 id="list-heading">2 out of 3
items completed</h2> <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <div class="stack-small"> <form class="stack-small"> <div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' </la...
... an unordered list, which holds a list
item for each task.
... when the task is being edited, the list
item has an input and two button to cancel or save modifications.
...: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo
item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; ...
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
todosstatus: displays the "x out of y
items completed" status heading.
...ll the todos with the completed property updated accordingly, like this: const checkalltodos = (completed) => { todos = todos.map(t => { // shorter version: todos = todos.map(t => ({...t, completed})) return {...t, completed: completed} }) } in this case we are using the map() method, which returns a new array with the results of executing the provided function for each
item.
... add the following contents to it: <script> export let todos $: totaltodos = todos.length $: completedtodos = todos.filter(todo => todo.completed).length </script> <h2 id="list-heading">{completedtodos} out of {totaltodos}
items completed</h2> import the file at the beginning of todos.svelte, adding the following import statement below the others: import todosstatus from './todosstatus.svelte' replace the <h2> status heading inside todos.svelte with a call to the todosstatus component, passing todos to it as a prop, like so: <todosstatus {todos} /> you can also do a bit of clean-up, removing the ...
...dosstatus.svelte like so: <script> export let todos $: totaltodos = todos.length $: completedtodos = todos.filter(todo => todo.completed).length let headingel export function focus() { // shorter version: export const focus = () => headingel.focus() headingel.focus() } </script> <h2 id="list-heading" bind:this={headingel} tabindex="-1">{completedtodos} out of {totaltodos}
items completed</h2> note that we've added a tabindex attribute to the <h2> to allow the element to receive focus programmatically.
Commenting IDL for better documentation
used at the beginning of a comment line to indicate an unordered list
item.
... there must be a space between the list marker and the
item.
... -# used at the beginning of a comment line to indicate an ordered list
item.
... there must be a space between the list marker and the
item.
Performance best practices for Firefox front-end engineers
note that some
items in the list may be browser-specific or subject to change, and that an
item not occurring explicitly in the list doesn't mean it doesn't cause reflow.
...for example, when using xul <xul:menupopup>s, you often have script which dynamically inserts <xul:menu
item>s.
... inserting
items into the dom has a cost.
... this example has been cribbed from davidwalsh’s blog post: // create the fragment var frag = document.createdocumentfragment(); // create numerous list
items, add to fragment for(var x = 0; x < 10; x++) { var li = document.createelement("li"); li.innerhtml = "list
item " + x; frag.appendchild(li); } // mass-add the fragment nodes to the list listnode.appendchild(frag); the above is strictly cheaper than individually adding each node to the dom.
Midas
if the caret is inside a list, that
item becomes a sub-
item one level deeper.
...if the caret is inside a bulleted
item, the bulleted
item becomes a numbered
item.
...if the caret is inside a numbered
item, the numbered
item becomes a bulleted
item.
... if the caret is in a list
item, the
item will bump up a level in the list or break out of the list entirely.
NSS 3.12.5 release_notes
additional documentation in pk11pub.h: the caller of pk11_derencodepublickey should free the returned sec
item with a sec
item_free
item(..., pr_true) call.
...the caller of pk11_readrawattribute should free the data buffer pointed to by
item using a sec
item_free
item(
item, pr_false) or port_free(
item->data) call.
... in secasn1.h: if both pool and dest are null, the caller should free the returned sec
item with a sec
item_free
item(..., pr_true) call.
... if pool is null but dest is not null, the caller should free the data buffer pointed to by dest with a sec
item_free
item(dest, pr_false) or port_free(dest->data) call.
NSS_3.12_release_notes.html
ug 401986: mac os x leopard build failure in legacydb bug 325805: diff considers mozilla/security/nss/cmd/pk11util/scripts/pkey a binary file bug 385151: remove the link time dependency from nss to softoken bug 387892: add entrust root ca certificate(s) to nss bug 433386: when system clock is off by more than two days, oscp check fails, can result in crash if user tries to view certificate [[@ sec
item_compare
item_util] [[@ memcmp] bug 396256: certutil and pp do not print all the generalnames in a crldp extension bug 398019: correct confusing and erroneous comments in der_asciitotime bug 422866: vfychain -pp command crashes in nss_shutdown bug 345779: useless assignment statements in ec_gf2m_pt_mul_mont bug 349011: please stop exporting these crmf_ symbols bug 397178: crash when entering chrome...
...bug 401610: shared db fails on iopr tests bug 388120: build error due to sec_begin_protos / sec_end_protos are undefined bug 415264: make security use of new nspr rotate macros bug 317052: lib/base/whatnspr.c is obsolete bug 317323: set nspr31_lib_prefix to empty explicitly for win95 and wince builds bug 320336: sec
item_alloc
item returns a non-null pointer if the allocation of its 'data' buffer fails bug 327529: can't pass 0 as an unnamed null pointer argument to cert_createrdn bug 334683: extraneous semicolons cause empty declaration compiler warnings bug 335275: compile with the gcc flag -werror-implicit-function-declaration bug 354565: fipstest sha_test needs to detect sha tests that are incorrectly configure...
...ion about trust arguments bug 410226: leak in create_objects_from_handles bug 415007: pk11_findcertfromdersubjectandnickname is dead code bug 416267: compiler warnings on solaris due to extra semicolon in sec_asn1_mksub bug 419763: logger thread should be joined on exit bug 424471: counter overflow in bltest bug 229335: remove certificates that expired in august 2004 from tree bug 346551: init sec
item dertemp in crmf_encode_popoprivkey bug 395080: double backslash in sysdir filenames causes problems on os/2 bug 341371: certutil lacks a way to request a certificate with an existing key bug 382292: add support for camellia to cmd/symkeyutil bug 385642: add additional cert usage(s) for certutil's -v -u option bug 175741: strict aliasing bugs in mozilla/dbm bug 210584: cert_asciitoname doesn't acc...
...crash in ecgroup_fromnameandhex bug 362278: lib/util includes header files from other nss directories bug 228190: remove unnecessary nss_enable_ecc defines from manifest.mn bug 412906: remove sha.c and sha.h from lib/freebl bug 353543: valgrind uninitialized memory read in nsspkiobjectcollection_addinstances bug 377548: nss qa test program certutil's default dsa prime is only 512 bits bug 333405:
item cleanup is unused deadcode in sec
item_alloc
item loser bug 288730: compiler warnings in certutil bug 337251: warning: /* within comment bug 362967: export secmod_deletemoduleex bug 389248: nss build failure when nss_enable_ecc is not defined bug 390451: remembered passwords lost when changing master password bug 418546: reference leak in cert_pkixverifycert bug 390074: os/2 sign.cmd doesn't find s...
NSS Sample Code sample5
rv; certcertificate *cert = null; seckeypublickey *pubkey = null; certsubjectpublickeyinfo *spki = null; seckeyprivatekey *pvtkey = null; int modulus_len, i, outlen; char *buf1 = null; char *buf2 = null; char *pubkstr = base64_encoded_subjectpublickeyinfo; char *pvtkstr = base64_encoded_privatekeyinfo; sec
item der; sec
item nickname; pk11slotinfo *slot = null; /* initialize nss * you need to explicitly authenticate to the internal token if you use * nss_init insteadf of nss_nodb_init * invoke this after getting the internal token handle * pk11_authenticate(slot, pr_false, null); */ rv = nss_nodb_init("."); if (rv != secsuccess) { fprintf(st...
...derr, "nss initialization failed (err %d)\n", pr_geterror()); goto cleanup; } /* get internal slot */ slot = pk11_getinternalkeyslot(); if (slot == null) { fprintf(stderr, "couldn't find slot (err %d)\n", pr_geterror()); goto cleanup; } rv = atob_convertasciito
item(&der, pubkstr); if (rv!= secsuccess) { fprintf(stderr, "atob_convertasciito
item failed %d\n", pr_geterror()); goto cleanup; } spki = seckey_decodedersubjectpublickeyinfo(&der); sec
item_free
item(&der, pr_false); pubkey = seckey_extractpublickey(spki); if (pubkey == null) { fprintf(stderr, "couldn't extract public key (err %d)\n", pr_geterror()); goto cleanup; } modulus_len = seckey_publickeystrength(pubkey); fprintf(stderr, "public key modulus %d bytes\n"...
...n", buf1); /* encrypt buf1, result will be in buf2 */ rv = pk11_pubencryptraw(pubkey, buf2, buf1, modulus_len, null); if (rv != secsuccess) { fprintf(stderr, "encrypt with public key failed (err %d)\n", pr_geterror()); goto cleanup; } nickname.type = sibuffer; nickname.data = "pvtkeynickname"; nickname.len = strlen("pvtkeynickname"); rv = atob_convertasciito
item(&der, pvtkstr); if (rv!= secsuccess) { fprintf(stderr, "atob_convertasciito
item failed %d\n", pr_geterror()); goto cleanup; } /* ku_all includes a lot of different key usages, ku_data_encipherment * is enough for just rsa encryption.
... * publicvalue arg (4th) can be null for rsa key - i think it is even * ignored */ pk11_importderprivatekeyinfoandreturnkey(slot, &der, null, null, pr_false, pr_true, ku_all, &pvtkey, null); sec
item_free
item(&der, pr_false); if (pvtkey == null) { fprintf(stderr, "couldn't extract private key (err %d)\n", pr_geterror()); goto cleanup; } /* clear buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= '\0'; } /* decrypt buf2, result will be in buf1 */ rv = pk11_pubdecryptraw(pvtkey, buf1, &outlen, modulus_len, buf2, modulus_len); if (rv != secsuccess) { fprintf(stderr, "decrypt with private key failed (err %d)\n", pr_geterror());...
sslfnc.html
ssl_getsessionid returns a sec
item structure containing the ssl session id associated with a file descriptor.
... syntax #include "ssl.h" sec
item *ssl_getsessionid(prfiledesc *fd); parameter this function has the following parameter: fd a pointer to the file descriptor for the ssl socket.
... description this function returns a sec
item structure containing the ssl session id associated with the file descriptor fd.
... when the application is finished with the sec
item structure returned by this function, it should free the structure by calling sec
item_free
item(
item, pr_true).
JS_LockGCThing
protect a specified js
item from garbage collection.
... thing void * pointer to the
item to protect.
... description js_lockgcthing is a deprecated function that protects a specified
item, thing, associated with an executable script context, cx, from garbage collection.
...js_unlockgcthing removes a lock from a specified
item, thing, allowing it to be garbage collected when the javascript engine determines it is unreachable.
Web Replay
open a new tab in recording mode click the 'tools -> web developer -> web replay -> reload and record tab' menu
item.
... open a saved recording in a new tab click the 'tools -> web developer -> web replay -> open new recording tab' menu
item to open a new blank tab that is recorded.
... save recording and replay on the same machine clicking the 'tools -> web developer -> web replay -> save recording' menu
item when a recording tab is open will allow the entire recording to be saved to a file.
... clicking the 'tools -> web developer -> web replay -> load recording in new tab' menu
item will start a new tab which replays the recording to the end.
Gecko states
applied to: role_menu
item, role_cell, role_outline
item, xxx: continue events: event_state_change Сoncomitant state: state_selectable state_focused the object is focused applied to: events: concomitant state: state_focusable state_pressed the object is pressed.
... state_expanded children of this object that have the role_outline
item role are displayed.
... state_collapsed children of this object that have the role_outline
item role are hidden.
...in this case, the client application can communicate all
items in the list to users.
IAccessible2
firefox 3) method overview [propget] hresult attributes([out] bstr attributes ); [propget] hresult extendedrole([out] bstr extendedrole ); [propget] hresult extendedstates([in] long maxextendedstates, [out, size_is(,maxextendedstates), length_is(, nextendedstates)] bstr extendedstates, [out] long nextendedstates ); [propget] hresult groupposition([out] long grouplevel, [out] long similar
itemsingroup, [out] long positioningroup ); [propget] hresult indexinparent([out] long indexinparent ); [propget] hresult locale([out] ia2locale locale ); [propget] hresult localizedextendedrole([out] bstr localizedextendedrole ); [propget] hresult localizedextendedstates([in] long maxlocalizedextendedstates, [out, size_is(,maxlocalizedextendedstates), length_is(, nlocalizedextendedstates)] bs...
...used for tree
items, list
items, tab panel labels, radio buttons, and so on.
...[propget] hresult groupposition( [out] long grouplevel, [out] long similar
itemsingroup, [out] long positioningroup ); parameters grouplevel 1 based, 0 indicates that this value is not applicable.
... similar
itemsingroup 1 based, 0 indicates that this value is not applicable.
nsIAccessibleStates
state_expanded 0x00000200 children of this object that have the role_outline
item role are displayed.
... state_collapsed 0x00000400 children of this object that have the role_outline
item role are hidden.
...for example, menu
items are programmatically hidden until a user activates the menu.
...in this case, the client application can communicate all
items in the list to users.
nsIAccessibleTreeCache
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview nsiaccessible getcachedtree
itemaccessible(in long arow, in nsitreecolumn acolumn); void invalidatecache(in long arow, in long acount); void treeviewchanged(); void treeviewinvalidated(in long astartrow, in long aendrow, in long astartcol, in long aendcol); methods getcachedtree
itemaccessible() returns the tree
item from the cache for the cell in the specified row and column; the nsiaccessible is created if it doesn'...
...nsiaccessible getcachedtree
itemaccessible( in long arow, in nsitreecolumn acolumn ); parameters arow the row index.
...invalidatecache() invalidates the number of cached tree
item accessibles.
...acount the number of tree
item accessibles to invalidate, the number sign specifies whether rows have been inserted (plus) or removed (minus) treeviewchanged() invalidates children created for the previous tree view.
nsIDroppedLinkHandler
) method overview boolean candroplink(in nsidomdragevent aevent, in prbool aallowsamedocument); astring droplink(in nsidomdragevent aevent, out astring aname, [optional] in boolean adisallowinherit); void droplinks(in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlink
item alinks); methods candroplink() determines if a link being dragged can be dropped.
... void droplinks( in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlink
item alinks ); parameters aevent a drop event.
... adisallowinherit acount receives the count of alinks array alinks recives an array of objects with nsidroppedlink
item interface return value nothing.
... see also nsidroppedlink
item ...
nsIFeedProgressListener
fox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void handleentry(in nsifeedentry entry, in nsifeedresult result); void handlefeedatfirstentry(in nsifeedresult result); void handlestartfeed(in nsifeedresult result); void reporterror(in astring errortext, in long linenumber, in boolean bozo); methods handleentry() called after each entry or
item is processed.
... if the document is a standalone
item or entry, the handlefeedatfirstentry() method will not already have been called, and the received nsifeedentry will have a null parent value.
... handlefeedatfirstentry() called when the first entry or
item in the feed is encountered.
... note: if the feed type is one of the entry or
item-only types, this event will never be called.
nsIMsgFolder
rlistener(in nsifolderlistener listener); void notifypropertychanged(in nsiatom property, in acstring oldvalue, in acstring newvalue); void notifyintpropertychanged(in nsiatom property, in long oldvalue, in long newvalue); void notifyboolpropertychanged(in nsiatom property, in boolean oldvalue, in boolean newvalue); void notifypropertyflagchanged(in nsimsgdbhdr
item, in nsiatom property, in unsigned long oldvalue, in unsigned long newvalue); void notifyunicharpropertychanged(in nsiatom property, in astring oldvalue, in astring newvalue); void notify
itemadded(in nsisupports
item); void notify
itemremoved(in nsisupports
item); void notifyfolderevent(in nsiatom event); void listdescendents(in nsisupportsarray descende...
... dbtransferinfo nsidbfolderinfo subfolders nsisimpleenumerator readonly: returns an enumerator containing a list of nsimsgfolder
items that are subfolders of the instance this is called on.
...rtychanged(in nsiatom property, in long oldvalue, in long newvalue); notifyboolpropertychanged() void notifyboolpropertychanged(in nsiatom property, in boolean oldvalue, in boolean newvalue); notifypropertyflagchanged() void notifypropertyflagchanged(in nsimsgdbhdr
item, in nsiatom property, in unsigned long oldvalue, in unsigned long newvalue); notifyunicharpropertychanged() void notifyunicharpropertychanged(in nsiatom property, in astring oldvalue, in astring newvalue); notify
itemadded() v...
...oid notify
itemadded(in nsisupports
item); notify
itemremoved() void notify
itemremoved(in nsisupports
item); notifyfolderevent() void notifyfolderevent(in nsiatom event); listdescendents() ists all descendents, not just first level children.
nsINavHistoryContainerResultNode
1.0 66 introduced gecko 1.9 inherits from: nsinavhistoryresultnode last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsinavhistoryresultnode findnodebydetails(in autf8string auristring, in prtime atime, in long long a
itemid, in boolean arecursive); nsinavhistoryresultnode getchild(in unsigned long aindex); unsigned long getchildindex(in nsinavhistoryresultnode anode); attributes attribute type description childcount unsigned long the number of child nodes; accessing this throws an ns_error_not_available exception of containeropen is false.
...this value is intended to be used to see if the "+" should be drawn next to a tree
item, indicating that the
item can be opened.
...nsinavhistoryresultnode findnodebydetails( in autf8string auristring, in prtime atime, in long long a
itemid, in boolean recursive ); parameters auristring the uri attribute value to match on.
...a
itemid the
item id to match on.
nsIPromptService
aoutselection contains the index of the selected
item in the list when this method returns true.
... var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var
items = ["hello", "welcome", "howdy", "hi", ":)"]; // list
items var selected = {}; var result = prompts.select(null, "title", "what greeting do you want?",
items.length,
items, selected); // result is true if ok was pressed, false if cancel.
... selected is the index of the
item array // that was selected.
... get the
item using
items[selected.value].
nsIWebNavigation
methods goback() tells the object to navigate to the previous session history
item.
... void goback( ); goforward() tells the object to navigate to the next session history
item.
... void goforward( ); gotoindex() tells the object to navigate to the session history
item at a given index.
... void gotoindex( in long index ); parameters index the index of the session history
item to go to.
Performance
some
items in databases are privacy sensitive, such as deleted history
items.
... users have the expectation that deleting
items in their history will remove the traces of that from the database.
...this flag causes deleted
items to be filled with 0s on disk.
...for example, the history service used to delete many database
items at shutdown when expiring old history
items.
Using nsIDirectoryService
this is done by passing a directory to ns_initxpcom or, for embedding, as the first parameter to ns_in
itembedding.
...it is also installed by default by ns_in
itembedding.
...just construct it, pass it to ns_in
itembedding, and it will be installed.
... if you are not using ns_in
itembedding, you will have to construct it and register it yourself using nsidirectoryservice.registerprovider().
Introduction to DOM Inspector - Firefox Developer Tools
the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamonkey, or by selecting the dom inspector menu
item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application.
... inspecting arbitrary urls you may also inspect the dom of arbitrary urls by using the inspect a url menu
item in the file menu, or by just entering a url into the dom inspector's address bar and clicking inspect or pressing enter.
...the javascript object viewer also allows javascript to be evaluated by selecting the appropriate menu
item in the context menu.
...you can perform actions on the individual
items in this list from the context menu and the edit menu, both of which contain menutimes that allow you edit the values of those attributes.
Index - Firefox Developer Tools
this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menu
items placed via overlay).
... 9 introduction to dom inspector dom_inspector the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamonkey, or by selecting the dom inspector menu
item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application.
... 110 local storage / session storage dev tools, firefox, guide, local storage, session storage, storage, storage inspector, tools, l10n:priority when an origin corresponding to local storage or session storage is selected within the storage inspector, the names and values of all the
items corresponding to local storage or session storage will be listed in a table.
... 118 access debugging in add-ons the following
items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul): 119 breaking on exceptions when an exception occurs, the line where it occurs is highlighted in the source pane, with a squiggly red line under the problematic code.
The JavaScript input interpreter - Firefox Developer Tools
the menu
item enable autocompletion has a checkmark next to it when the feature is enabled, which is missing when it is disabled.
... select the menu
item to change the state.
...the menu
item instant evaluation has a checkmark next to it when the feature is enabled, which is missing when it is disabled.
... select the menu
item to change the state.
Clipboard.write() - Web APIs
syntax var promise = navigator.clipboard.write(data) parameters data an array of clipboard
item objects containing data to be written to the clipboard.
... function setclipboard(text) { let data = [new clipboard
item({ "text/plain": text })]; navigator.clipboard.write(data).then(function() { /* success */ }, function() { /* failure */ }); } the code begins by creating a new clipboard
item object into which the text will be placed for sending to the clipboard.
... the key of the object passed to the clipboard
item constructor indicates the content type, the value indicates the content.
... example of copying canvas contents to the clipboard function copycanvascontentstoclipboard(canvas, ondone, onerror) { canvas.toblob(function (blob) { let data = [new clipboard
item({ [blob.type]: blob })]; navigator.clipboard.write(data).then(function () { ondone(); }, function (err) { onerror(err); }) }); } note: you can only pass in one clipboard
item at a time.
DataTransfer.mozTypesAt() - Web APIs
the datatransfer.moztypesat() method returns a list of the format types that are stored for an
item at the specified index.
... if the index is not in the range from 0 to the number of
items minus one, an empty string list is returned.
...if the index is not in the range from 0 to the number of
items minus one, an empty string list is returned.
... function drop_handler(event) { var dt = event.datatransfer; var count = dt.moz
itemcount; output("
items: " + count + "\n"); for (var i = 0; i < count; i++) { output("
item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex); } } } } specifications this method is not defined in any web standard.
DataTransfer.types - Web APIs
example this example shows the use of the types and
items properties.
... <!doctype html> <html lang=en> <title>examples of datatransfer.{types,
items} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document...
...types[" + i + "] = " + ev.datatransfer.types[i]); } } // print each
item's "kind" and "type" if (ev.datatransfer.
items != null) { for (var i=0; i < ev.datatransfer.
items.length; i++) { console.log("...
...
items[" + i + "].kind = " + ev.datatransfer.
items[i].kind + " ; type = " + ev.datatransfer.
items[i].type); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>
items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag
item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag
item 2 to the drop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html ...
HTMLElement - Web APIs
htmlelement.
itemscope is a boolean representing the
item scope.
... htmlelement.
itemtype read only returns a domsettabletokenlist… htmlelement.
itemid is a domstring representing the
item id.
... htmlelement.
itemref read only returns a domsettabletokenlist… htmlelement.
itemprop read only returns a domsettabletokenlist… htmlelement.
itemvalue returns a object representing the
item value.
... living standard added the following properties: translate,
itemscope,
itemtype,
itemid,
itemref,
itemprop, properties, and
itemvalue.
HTMLSelectElement.add() - Web APIs
syntax collection.add(
item[, before]); parameters
item is an htmloptionelement or htmloptgroupelement before is optional and an element of the collection, or an index of type long, representing the
item item should be inserted before.
... exceptions a domerror of the type hierarchyrequesterror if the
item passed to the method is an ancestor of the htmlselectelement.
...it throws a domerror of the type hierarchyrequesterror if the passed
item is an ancestor of the htmlselectelement and no longer throws if the before parameter is not found.
... obsolete the method now throws an not_found_err exception if the
item of the before parameter is not a child of this element.
HTMLSelectElement.selectedOptions - Web APIs
example in this example, a <select> element with a number of options is used to let the user order various food
items.
...ect id="foods" name="foods" size="7" multiple> <option value="1">burrito</option> <option value="2">cheeseburger</option> <option value="3">double bacon burger supreme</option> <option value="4">pepperoni pizza</option> <option value="5">taco</option> </select> <br> <button name="order" id="order"> order now </button> <p id="output"> </p> the <select> element is set to allow multiple
items to be selected, and it is 7 rows tall.
... javascript the javascript code that establishes the event handler for the button, as well as the event handler itself, looks like this: let orderbutton = document.getelementbyid("order"); let
itemlist = document.getelementbyid("foods"); let outputbox = document.getelementbyid("output"); orderbutton.addeventlistener("click", function() { let collection =
itemlist.selectedoptions; let output = ""; for (let i=0; i<collection.length; i++) { if (output === "") { output = "your order for the following
items has been placed: "; } output += collection[i].label; if (i === (collection.length - 2) && (collection.length < 3)) { output +=...
...a string is constructed to list the ordered
items, with logic to build the list using proper english grammar rules (including a serial comma).
The HTML DOM API - Web APIs
ement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefontelement htmlfontelement htmlframeelement htmlframesetelement htmlisindexelement htmlmenu
itemelement web app and browser integration interfaces these interfaces offer access to the browser window and document that contain the html, as well as to the browser's state, available plugins (if any), and various configuration options.
... audiotrack audiotracklist mediaerror texttrack texttrackcue texttrackcuelist texttracklist timeranges trackevent videotrack videotracklist drag and drop interfaces these interfaces are used by the html_drag_and_drop_api to represent individual draggable (or dragged)
items, groups of dragged or draggable
items, and to handle the drag and drop process.
... datatransfer datatransfer
item datatransfer
itemlist dragevent page history interfaces the history api interfaces let you access information about the browser's history, as well as to shift the browser's current tab forward and backward through that history.
...
items marked with "*" are required.</p> <form action="" method="get"> <p> <label for="username" required>your name:</label> <input type="text" id="username"> (*) </p> <p> <label for="email">email:</label> <input type="email" id="useremail"> </p> <input type="submit" value="send" id="sendbutton"> </form> result specifications specification status comment ...
File drag and drop - Web APIs
one api is the datatransfer interface and the second api is the datatransfer
item and datatransfer
itemlist interfaces.
...in the following drop handler, if the browser supports datatransfer
itemlist interface, the getasfile() method is used to access each file; otherwise the datatransfer interface's files property is used to access each file.
... note that in this example, any drag
item that is not a file is ignored.
... function drophandler(ev) { console.log('file(s) dropped'); // prevent default behavior (prevent file from being opened) ev.preventdefault(); if (ev.datatransfer.
items) { // use datatransfer
itemlist interface to access the file(s) for (var i = 0; i < ev.datatransfer.
items.length; i++) { // if dropped
items aren't files, reject them if (ev.datatransfer.
items[i].kind === 'file') { var file = ev.datatransfer.
items[i].getasfile(); console.log('...
Recommended Drag Types - Web APIs
multiple files will be received during a drop as multiple
items in the data transfer.
... see dragging and dropping multiple
items for more details about this.
...eturn checkdrag(event)" ondragover="return checkdrag(event)" ondrop="dodrop(event)"/> <script> function checkdrag(event) { return event.datatransfer.types.contains("application/x-moz-file"); } function dodrop(event) { var file = event.datatransfer.mozgetdataat("application/x-moz-file", 0); if (file instanceof components.interfaces.nsifile) { event.currenttarget.append
item(file.leafname); } } </script> in this example, the event returns false only if the data transfer contains the application/x-moz-file type.
... var file = cc['@mozilla.org/file/local;1'].createinstance(components.interfaces.nsilocalfile); file.initwithpath(dir.path); file.appendrelativepath(name); console.log("output final path is =" + file.path); // now you can write or copy the file yourself… } } } see also html drag and drop api (overview) drag operations dragging and dropping multiple
items html5 living standard: drag and drop ...
IDBDatabase: error event - Web APIs
n (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const ...
...new
item = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.addeventlistener('error', () => { console.log(`error adding new
item: ${new
item.tasktitle}`); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(new
item); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.c...
...reateobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const new
item = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.onerror = () => { console.log(`error adding new
item: ${new
item.tasktitle}`); }; // open a read/write db transaction, ready for adding the data const transaction = db.tra...
...nsaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(new
item); }; ...
IDBObjectStore.put() - Web APIs
the put() method of the idbobjectstore interface updates a given record in a database, or inserts a new record if the given
item does not already exist.
... syntax let request = objectstore.put(
item); let request = objectstore.put(
item, key); parameters
item the
item you wish to update (or insert).
...in such cases, calling put(
item) will always insert a new record, because it doesn't know what existing record you might want to modify.
...'todolist'); // get the to-do list object that has this title as it's title const objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = () => { // grab the data object returned as the result const data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the
item back into the database const updatetitlerequest = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.transaction); // when this new request succeeds, run the displaydata() function again to update the display updatetitlerequest.onsuccess = () => { displaydata(); }; }; spe...
IDBObjectStore - Web APIs
example this example shows a variety of different uses of object stores, from updating the data structure with idbobjectstore.createindex inside an onupgradeneeded function, to adding a new
item to our object store with idbobjectstore.add.
... number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data
items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified",...
... { unique: false }); note.innerhtml += '<li>object store created.</li>'; }; // create a new
item to add in to the object store var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: 'december', year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { note.innerhtml += '<li>request successful .</li>'; } specifications specification status comment indexed database api 2.0the definition of 'idbobjectstore' in that specification.
IDBRequest: error event - Web APIs
: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); dbopenrequest.addeventlistener('success', even...
...t => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const new
item = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(new
item); objectstorerequest.addeventlistener('error', () => { console.log(`error adding new
item: ${new
item.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('e...
...rror creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); con...
...st new
item = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(new
item); objectstorerequest.onerror = () => { console.log(`error adding new
item: ${new
item.tasktitle}`); }; }; ...
IDBTransaction: complete event - Web APIs
deventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db...
... = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.addeventlistener('complete', event => { console.log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const new
item = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(new
item); }; using the oncomplete property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an...
... objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.oncomplete = event => { console.log('transaction was com...
...peted'); }; const objectstore = transaction.objectstore('todolist'); const new
item = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(new
item); }; ...
IDBTransaction: error event - Web APIs
n (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const ...
...db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.addeventlistener('error', () => { console.log(`error adding new
item: ${new
item.tasktitle}`); }); const objectstore = transaction.objectstore('todolist'); const new
item = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(new
item); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objects...
...tore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.onerror = () => { console.log(`error adding new
item: ${new
item.tasktitle}`); }; const objectstore = transaction.objectstore('to...
...dolist'); const new
item = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(new
item); }; ...
Using IndexedDB - Web APIs
first, you can limit the range of
items that are retrieved by using a key range object that we'll get to in a minute.
...for example, suppose that you are using indexeddb to store a list of
items that you allow the user to edit.
... var i = 0; req = store.opencursor(); req.onsuccess = function(evt) { var cursor = evt.target.result; // if the cursor is pointing at something, ask for the data if (cursor) { console.log("displaypublist cursor:", cursor); req = store.get(cursor.key); req.onsuccess = function (evt) { var value = evt.target.result; var list_
item = $('<li>' + '[' + cursor.key + '] ' + '(biblioid: ' + value.biblioid + ') ' + value.title + '</li>'); if (value.year != null) list_
item.append(' - ' + value.year); if (value.hasownproperty('blob') && typeof value.blob != 'undefined') { ...
... var link = $('<a href="' + cursor.key + '">file</a>'); link.on('click', function() { return false; }); link.on('mouseenter', function(evt) { setinviewer(evt.target.getattribute('href')); }); list_
item.append(' / '); list_
item.append(link); } else { list_
item.append(" / no attached file"); } pub_list.append(list_
item); }; // move on to the next object in store cursor.continue(); // this counter serves only to create distinct ids i++; } else { console.log("no more entries"); } }; } function newviewerframe() { var viewer = $('#pub-viewer'); viewer.empty(); var iframe = $('<iframe />'); viewer...
PaymentDetailsUpdate - Web APIs
display
items optional an array of payment
item objects, each describing one line
item for the payment request.
... these represent the line
items on a receipt or invoice.
... total optional a payment
item providing an updated total for the payment.
... make sure this equals the sum of all of the
items in display
items.
PaymentRequestUpdateEvent.updateWith() - Web APIs
syntax paymentrequestupdateevent.updatewith(details); parameters details a paymentdetailsupdate object specifying the changes applied to the payment request: display
items optional an array of payment
item objects, each describing one line
item for the payment request.
... these represent the line
items on a receipt or invoice.
... total optional a payment
item providing an updated total for the payment.
... make sure this equals the sum of all of the
items in display
items.
TouchList.identifiedTouch() - Web APIs
the identifiedtouch() method returns the first touch
item in the touchlist that matches the specified identifier.
... it is recommended that you use touchlist.
item() instead.
... syntax var touch
item = touchlist.identifiedtouch(id); parameters id an integer value identifying the touch object to retrieve from the list.
... return value touch
item a touch object matching the specified id.
WebGLRenderingContext.getParameter() - Web APIs
dst_alpha glenum gl.blend_dst_rgb glenum gl.blend_equation glenum gl.blend_equation_alpha glenum gl.blend_equation_rgb glenum gl.blend_src_alpha glenum gl.blend_src_rgb glenum gl.blue_bits glint gl.color_clear_value float32array (with 4 values) gl.color_wr
itemask sequence<glboolean> (with 4 values) gl.compressed_texture_formats uint32array returns the compressed texture formats.
... gl.depth_bits glint gl.depth_clear_value glfloat gl.depth_func glenum gl.depth_range float32array (with 2 elements) gl.depth_test glboolean gl.depth_wr
itemask glboolean gl.dither glboolean gl.element_array_buffer_binding webglbuffer gl.framebuffer_binding webglframebuffer or null null corresponds to a binding to the default framebuffer.
...cissor_test glboolean gl.shading_language_version domstring gl.stencil_back_fail glenum gl.stencil_back_func glenum gl.stencil_back_pass_depth_fail glenum gl.stencil_back_pass_depth_pass glenum gl.stencil_back_ref glint gl.stencil_back_value_mask gluint gl.stencil_back_wr
itemask gluint gl.stencil_bits glint gl.stencil_clear_value glint gl.stencil_fail glenum gl.stencil_func glenum gl.stencil_pass_depth_fail glenum gl.stencil_pass_depth_pass glenum gl.stencil_ref glint gl.stencil_test glboolean gl.stencil_value_mask gluint ...
... gl.stencil_wr
itemask gluint gl.subpixel_bits glint gl.texture_binding_2d webgltexture or null gl.texture_binding_cube_map webgltexture or null gl.unpack_alignment glint gl.unpack_colorspace_conversion_webgl glenum gl.unpack_flip_y_webgl glboolean gl.unpack_premultiply_alpha_webgl glboolean gl.vendor domstring gl.version domstring gl.viewport int32array (with 4 elements) webgl 2 you can query the following pname parameters when using a webgl2renderingcontext.
WebGLRenderingContext.stencilMaskSeparate() - Web APIs
the webglrenderingcontext.stencilmask() method can set both, the front and back stencil wr
itemasks to one value at the same time.
... syntax void gl.stencilmaskseparate(face, mask); parameters face a glenum specifying whether the front and/or back stencil wr
itemask is updated.
... examples gl.stencilmaskseparate(gl.front, 110101); to get the current stencil masks, query the stencil_wr
itemask, stencil_back_wr
itemask, or stencil_bits constants.
... gl.getparameter(gl.stencil_wr
itemask); // 110101 gl.getparameter(gl.stencil_back_wr
itemask); // 110101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status comment webgl 1.0the definition of 'stencilmaskseparate' in that specification.
Using IIR filters - Web APIs
both of these parameters are arrays, neither of which can be larger than 20
items.
... // arrays for our frequency response const totalarray
items = 30; let myfrequencyarray = new float32array(totalarray
items); let magresponseoutput = new float32array(totalarray
items); let phaseresponseoutput = new float32array(totalarray
items); let's fill our first array with frequency values we want data to be returned on: myfrequencyarray = myfrequencyarray.map(function(
item, index) { return math.pow(1.4, index); }); we could go for a linear ap...
...proach, but it's far better when working with frequencies to take a log approach, so let's fill our array with frequency values that get larger further on in the array
items.
...hz', width/2, height-spacing+fontsize); canvasctx.filltext('20k', width-spacing, height-spacing+fontsize); // loop over our magnitude response data and plot our filter canvasctx.beginpath(); for(let i = 0; i < magresponseoutput.length; i++) { if (i === 0) { canvasctx.moveto(spacing, height-(magresponseoutput[i]*100)-spacing ); } else { canvasctx.lineto((width/totalarray
items)*i, height-(magresponseoutput[i]*100)-spacing ); } } canvasctx.stroke(); summary that's it for our iirfilter demo.
XRInputSourceArray - Web APIs
each
item returned is an array whose first value is the index and whose second value is the xrinputsource at that index.
... foreach() iterates over each
item in the list, in order from first to last.
...each
item is a single xrinputsource object.
... in addition to these methods, you may use array notation to access
items in the list by index for example, the snippet of code below calls a function handleinput(), passing into it the first
item in the input source list, if the list isn't empty.
WAI-ARIA Roles - Accessibility
it is usually set on related content
items such as comments, forum posts, newspaper articles or other
items grouped together on one page.aria: banner rolea banner role represents general and informative content frequently placed at the beginning of the page.
...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 list
item 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: list
item rolethe aria list
item role can be used to identify an
item inside a list of
items.
... alertdialog banner combobox command columnheader (estelle) complementary composite definition directory feed gridcell (eric e) group input landmark link - old page listbox log - old page marquee math menu menubar menu
item menu
itemcheckbox menu
itemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator slider - old page spinbutton status - old page structure tab tablist (michiel) tabpanel (michiel) term timer toolbar tooltip tree treegrid tree
item widget...
:nth-last-child() - CSS: Cascading Style Sheets
/* selects every fourth element among any group of siblings, counting backwards from the last one */ :nth-last-child(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-child, except it counts
items backwards from the end, not forwards from the beginning.
...r> <tr> <td>second line</td> </tr> <tr> <td>third line</td> </tr> <tr> <td>fourth line</td> </tr> <tr> <td>fifth line</td> </tr> </tbody> </table> css table { border: 1px solid blue; } /* selects the last three elements */ tr:nth-last-child(-n+3) { background-color: pink; } /* selects every element starting from the second to last
item */ tr:nth-last-child(n+2) { color: blue; } /* select only the last second element */ tr:nth-last-child(2) { font-weight: 600; } result quantity query a quantity query styles elements depending on how many of them there are.
... in this example, list
items turn red when there are at least three of them in a given list.
... html <h4>a list of four
items (styled):</h4> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <h4>a list of two
items (unstyled):</h4> <ol> <li>one</li> <li>two</li> </ol> css /* if there are at least three list
items, style them all */ li:nth-last-child(n+3), li:nth-last-child(n+3) ~ li { color: red; } result specifications specification status comment selectors level 4the definition of ':nth-last-child' in that specification.
Spanning and Balancing Columns - CSS: Cascading Style Sheets
spanning the columns to cause an
item to span across columns use the property column-span with a value of all.
...the value none is the initial value and means the
item does not span, remaining within a column.
... the value all means the
item spans all of the columns.
... you cannot cause an
item to span two out of three columns for example.
Block and inline layout in normal flow - CSS: Cascading Style Sheets
the flex
items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display type of flex, establishing the flex formatting context for the direct children.
...the flex
items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context.
...
items nested inside our flex
item lay themselves out as block and inline elements unless something changes their display type.
... changing the formatting context an element participates in browsers display
items as part of a block or inline formatting context in terms of what normally makes sense for that element.
Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
therefore we describe boxes as having a width and height, position
items from the top and left, float things left, assign borders, margin, and padding to the top, right, bottom, left, etc.
...i have a layout using css grid, the grid container has a width applied and i am using the align-self and justify-self properties to align the
items.
... these properties are flow relative — justify-self: start aligns the
item to the start on the inline dimension, align-self: start does the same on the block dimension.
...as we saw above, newer css layout methods such as flexbox and grid layout use the concepts of block and inline rather than right and left/top and bottom when aligning
items.
Overview of CSS Shapes - CSS: Cascading Style Sheets
they are, in level 1 of the specification, designed to be applied to floated
items.
... you could for example float an
item left, which would cause the text to wrap round the right and bottom of the
item in a rectangular fashion.
... using generated content as the floated
item in the examples above we have used images or a visible element to define the shape, meaning that you can see the shape on the page.
...you can do this with shapes, however you will still need a floated
item, which you can then make invisible.
Grid wrapper - CSS: Cascading Style Sheets
the grid wrapper pattern is useful for aligning grid content within a central wrapper, while also allowing
items to break out and align to the edge of the containing element or page when desired.
... requirements
items placed on the grid should be able to align to a horizontally-centered max-width wrapper and/or the outer edges of the grid.
...along with left and right auto margins to center the content horizontally: .grid { max-width: 1200px; margin: 0 auto; // horizontally centers the container } /* remove the max-width and margins if the browser supports grid */ @supports (display: grid) { .grid { display: grid; /* other grid code goes here */ max-width: none; margin: 0; } } to “break out” a full-width
item to the edge of the viewport you can then use this trick (courtesy of una kravets): .
item { width: 100vw; margin-left: 50%; transform: translate3d(-50%, 0, 0); } this gives a good approximation of the layout, only without the benefit of being able to align
items easily on an exact grid.
... accessibility concerns although grid enables us to position
items anwhere (within reason), it is important when placing
items using css grid that your underlying markup follows a logical order (see css grid layout and accessibility for more details).
background-position - CSS: Cascading Style Sheets
a position defines an x/y coordinate, to place an
item relative to the edges of an element's box.
...this specifies an edge against which to place the
item.
... the other dimension is then set to 50%, so the
item is placed in the middle of the edge specified.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetscomputed valuea list, each
item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentageanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-position>#where <bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-perc...
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
only when the value of display is changed do the children become flex or grid
items and begin to respond to the other properties in the grid or flexbox specifications.
...you can now use justify-content: space-between; to put this space between the two flex
items.
... in the example below we have a floated
item inside a container.
...the reason we tend to use it is to allow padding to push inline
items away from an element, when creating navigation
items for example, or when wanting to add a background with padding to an inline element as in the example below.
flex-basis - CSS: Cascading Style Sheets
the flex-basis css property sets the initial main size of a flex
item.
... syntax /* specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically size based on the flex
item’s content */ flex-basis: content; /* global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the keyword content or a <'width'>.
... content indicates automatic sizing, based on the flex
item’s content.
... formal definition initial valueautoapplies toflex
items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main sizecomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax content | <'width'> examples setting flex
item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li cl...
Event reference
clipboard events event name fired when cut the selection has been cut and copied to the clipboard copy the selection has been copied to the clipboard paste the
item from the clipboard has been pasted keyboard events event name fired when keydown any key is pressed keypress any key (except shift, fn, or capslock) is in a pressed position (fired continuously).
... svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenu
itemactive dommenu
iteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call events alerting busy callschanged cfstatechange connecting dialing disconnected disconnecting error held, holding incoming resuming statechange voicechange sensor...
... dommenu
itemactive xul a menu or menu
item has been hovered or highlighted.
... dommenu
iteminactive xul a menu or menu
item is no longer hovered or highlighted.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties: .box { width: 290px; height: 100px; margin: 0; padding: 4px 6px; font: 28px "marker felt", "zapfino", cursive; display: flex; justify-content: center; align-
items: center; } in brief, .box establishes the size of each box, as well as the configuration of the font used within.
...we enable flex mode using display: flex, and set both justify-content and align-
items to center.
...or perhaps your app lets the user assign colors to folders or
items.
...if you're creating a website about a given
item or product, choose a color that's physically present on that
item.
Microformats - HTML: Hypertext Markup Language
nonical url p-street-address street number + name p-locality city/town/village p-country-name country name nested h-card example <div class="h-card"> <a class="p-name u-url" href="http://blog.lizardwrangler.com/" >mitchell baker</a> (<a class="p-org h-card" href="http://mozilla.org/" >mozilla foundation</a>) </div> parsed json: { "
items": [{ "type": ["h-card"], "properties": { "name": ["mitchell baker"], "url": ["http://blog.lizardwrangler.com/"], "org": [{ "value": "mozilla foundation", "type": ["h-card"], "properties": { "name": ["mozilla foundation"], "url": ["http://mozilla.org/"] } }] } }] } note: the nested h-card has implied 'name' and 'url' properties, just like any ...
...ey thanks for making this microformats resource</p> <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a> published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published" datetime="2019-05-31t14:19:09+0000">31 may 2019</time></a></p> </div> { "
items": [ { "type": [ "h-entry" ], "properties": { "in-reply-to": [ "/docs/web/html/microformats" ], "name": [ "hey thanks for making this microformats resource" ], "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ], "published": [ "2019-05-31t14:19:09+0000" ], "content": [ ...
...</time> </p> <p class="p-summary">in which i extoll the virtues of using microformats.</p> <div class="e-content"> <p>blah blah blah</p> </div> </article> </div> properties property description p-name name of the feed p-author author of the feed, optionally embed an h-card children nested h-entry objects representing the
items of the feed h-event the h-event is for events on the web.
...77"></data> </div> <div class="e-content">come join us </div> <div> <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">aaron parecki</a></span> published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25t18:00:00-07:00">may 5th, 2019</time> </div> </div> { "
items": [ { "type": [ "h-event" ], "properties": { "name": [ "indieweb summit" ], "url": [ "https://aaronparecki.com/2019/06/29/1/" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "aaron parecki" ], "url": [ "https://aaronparecki.com"] }, "lang": "en", ...
Array - JavaScript
common operations create an array let fruits = ['apple', 'banana'] console.log(fruits.length) // 2 access an array
item using the index position let first = fruits[0] // apple let last = fruits[fruits.length - 1] // banana loop over an array fruits.foreach(function(
item, index, array) { console.log(
item, index) }) // apple 0 // banana 1 add an
item to the end of an array let newlength = fruits.push('orange') // ["apple", "banana", "orange"] remove an
item from the end of an array let last = fruits.pop...
...() // remove orange (from the end) // ["apple", "banana"] remove an
item from the beginning of an array let first = fruits.shift() // remove apple from the front // ["banana"] add an
item to the beginning of an array let newlength = fruits.unshift('strawberry') // add to the front // ["strawberry", "banana"] find the index of an
item in the array fruits.push('mango') // ["strawberry", "banana", "mango"] let pos = fruits.indexof('banana') // 1 remove an
item by index position let removed
item = fruits.splice(pos, 1) // this is how to remove an
item // ["strawberry", "mango"] remove
items from an index position let vegetables = ['cabbage', 'turnip', 'radish', 'carrot'] console.log(vegetables) // ["cabbage", "turnip", "radish", "carrot"] let pos = 1 let n = 2 let removed
items = v...
...egetables.splice(pos, n) // this is how to remove
items, n defines the number of
items to be removed, // starting at the index position specified by pos and progressing toward the end of array.
... console.log(vegetables) // ["cabbage", "carrot"] (the original array is changed) console.log(removed
items) // ["turnip", "radish"] copy an array let shallowcopy = fruits.slice() // this is how to make a copy // ["strawberry", "mango"] accessing array elements javascript arrays are zero-indexed.
label - JavaScript
"loop2" if (i === 1 && j === 1) { continue loop1; } console.log('i = ' + i + ', j = ' + j); } } // output is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0" // "i = 2, j = 0" // "i = 2, j = 1" // "i = 2, j = 2" // notice how it skips both "i = 1, j = 1" and "i = 1, j = 2" using a labeled continue statement given an array of
items and an array of tests, this example counts the number of
items that passes all the tests.
... var
itemspassed = 0; var i, j; top: for (i = 0; i <
items.length; i++) { for (j = 0; j < tests.length; j++) { if (!tests[j].pass(
items[i])) { continue top; } }
itemspassed++; } using a labeled break with for loops var i, j; loop1: for (i = 0; i < 3; i++) { //the first for statement is labeled "loop1" loop2: for (j = 0; j < 3; j++) { //the second for statement is labeled "loop2" if (i === 1 && j === 1) { break loop1; } console.log('i = ' + i + ', j = ' + j); } } // output is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0" // notice the difference with the previous continue example using a labeled break statement given an array of
items and an array of tests, this example determines whether ...
...all
items pass all tests.
... var allpass = true; var i, j; top: for (i = 0;
items.length; i++) for (j = 0; j < tests.length; i++) if (!tests[j].pass(
items[i])) { allpass = false; break top; } using a labeled block with break you can use labels within simple blocks, but only break statements can make use of non-loop labels.
Progressive loading - Progressive web apps (PWAs)
here's what the relevant code looks like: if('intersectionobserver' in window) { const observer = new intersectionobserver((
items, observer) => {
items.foreach((
item) => { if(
item.isintersecting) { loadimages(
item.target); observer.unobserve(
item.target); } }); }); imagestoload.foreach((img) => { observer.observe(img); }); } else { imagestoload.foreach((img) => { loadimages(img); }); } if the intersectionobserver object is supported, the app creates a new instance of i...
...the function passed as a parameter is handling the case when one or more
items are intersecting with the observer (i.e.
... we could rewrite the loading process to load not only the images, but the complete
items consisting of full descriptions and links.
... it would work like an infinite scroll — loading the
items on the list only when the user scrolls the page down.
ui/sidebar - Archive of obsolete content
alternatively, the view->sidebar submenu in firefox will contain a new
item which the user can use to show or hide the sidebar: the sidebar generates a show event when it is shown and a hide event when it is hidden.
...r = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html"), onattach: function (worker) { worker.port.on("ping", function() { console.log("add-on script got the message"); worker.port.emit("pong"); }); } }); try running the add-on, and showing the sidebar using the "view->sidebar->my sidebar" menu
item.
...idebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html"), onready: function (worker) { worker.port.emit("ping"); worker.port.on("pong", function() { console.log("add-on script got the reply"); }); } }); try running the add-on, and showing the sidebar using the "view->sidebar->my sidebar" menu
item.
util/list - Archive of obsolete content
: object|string|number functions addlist
item(list,
item) function adds a
item to a list.
... removelist
item(list,
item) function removes an
item from a list list an ordered collection (also known as a sequence) disallowing duplicate elements.
... examples: var { list } = require("sdk/util/list"); var mylist = list.compose({ add: function add(
item1,
item2, /*
item3...*/) { array.slice(arguments).foreach(this._add.bind(this)); }, remove: function remove(
item1,
item2, /*
item3...*/) { array.slice(arguments).foreach(this._remove.bind(this)); } }); mylist('foo', 'bar', 'baz').length == 3; // true new mylist('new', 'keyword').length == 2; // true mylist.apply(null, [1, 2, 3]).length == 3; // true let list = mylist(); list.length...
Creating Event Targets - Archive of obsolete content
then open "index.js" and add the following code: var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { on
itemadded: function(a
itemid, afolder, aindex) { console.log("added ", bookmarkservice.getbookmarkuri(a
itemid).spec); }, on
itemvisited: function(a
itemid, avisitid, time) { console.log("visited ", bookmarkservice.getbookmarkuri(a
itemid).spec); }, queryinterface: xpcomutils.generateqi([ci.nsinavbookmarkobserver]) }; exports.main = function() { bookmarkservice.addobserver(bookmarkobserv...
...ew file in "lib" called "bookmarks.js", and add the following code: var { emit, on, once, off } = require("sdk/event/core"); var {cc, ci} = require("chrome"); var { xpcomutils }= require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { on
itemadded: function(a
itemid, afolder, aindex) { emit(exports, "added", bookmarkservice.getbookmarkuri(a
itemid).spec); }, on
itemvisited: function(a
itemid, avisitid, time) { emit(exports, "visited", bookmarkservice.getbookmarkuri(a
itemid).spec); }, queryinterface: xpcomutils.generateqi([ci.nsinavbookmarkobserver]) }; bookmarkservice.addobserver(bookmarkobserver, false); exports.on = on...
... class } = require("sdk/core/heritage"); var { merge } = require("sdk/util/object"); var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); function createobserver(target) { var bookmarkobserver = { on
itemadded: function(a
itemid, afolder, aindex) { emit(target, "added", bookmarkservice.getbookmarkuri(a
itemid).spec); }, on
itemvisited: function(a
itemid, avisitid, time) { emit(target, "visited", bookmarkservice.getbookmarkuri(a
itemid).spec); }, queryinterface: xpcomutils.generateqi([ci.nsinavbookmarkobserver]) }; bookmarkservice.addobserver(bookmarkobserver, fal...
Customizing the download progress bar - Archive of obsolete content
the myextension.css file will look something like this: richlist
item 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 } richlist
item .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %e...
...in your overlay file, add a javascript file between the <overlay> and </overlay> tags: <script type="application/javascript" src="chrome://myextension/content/downloads-overlay.js" /> the javascript file will look something like this: var mydownloadmanager = { defaultcreatedownload
item : null, init : function fdm_init() { mydownloadmanager.defaultcreatedownload
item = window.createdownload
item; window.createdownload
item = function(aattrs) { var dl = mydownloadmanager.defaultcreatedownload
item(aattrs); if (dl) { if (...whatever condition you use to decide whether to change this download...) { dl.setattribute("myspecialdow...
...nload", "true"); } } return dl; } } }; window.addeventlistener("load", function(e) { mydownloadmanager.init(); }, false); in your css file, change richdownload
item (both occurrences) to richdownload
item[myspecialdownload="true"].
getAttributeNS - Archive of obsolete content
function getattributenswrapper (this
item, ns, nsatt) { if (this
item === null) { return false; } if (this
item.getattributens) { return this
item.getattributens(ns, nsatt); } else if (ns === null) { return this
item.getattribute(nsatt); } else if (ns === 'http://www.w3.org/xml/1998/namespace') { // this is assumed so don't try to get an xmlns for the 'xml' prefix return this
item.ge...
...tattribute('xml:'+nsatt); // prefix must be 'xml' per the specs } var attrs2, result; var attrs = this
item.attributes; var prefixatt = new regexp('^(.*):'+nsatt.replace(/\./g, '\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name being searched (escape period since only character (besides colon) allowed in an xml name which needs escaping) for (var j = 0; j < attrs.length; j++) { // this
item's atts // e.g., abc:href, xlink:href while (((result = prefixatt.exec(attrs[j].nodename)) !== null) && this
item.nodename !== '#document' && this
item.nodename !== '#document-fragment') { var xmlnsprefix = new regexp('^xmlns:'+result[1]+'$'); // e.g., xmnls:xl, xmlns:xlink // check higher up for xmlns:prefix ...
... // check the current node and if necessary, check for the next matching local name up in the hierarchy (until reaching the document root) while (this
item.nodename !== '#document' && this
item.nodename !== '#document-fragment') { attrs2 = this
item.attributes; for (var i = 0; i < attrs2.length; i++) { // search for any prefixed xmlns declaration on this
item which match prefixes found above with desired local name if (attrs2[i].nodename.match(xmlnsprefix) && attrs2[i].nodevalue === ns ) { // e.g., 'xmlns:xlink' and 'http://www.w3.org/1999/xlink' return attrs[j].nodevalue; } } this
item = this
item.parentnode; } } } return ''; ...
CSS3 - Archive of obsolete content
allow the styling of forms according their content using the css :indeterminate, :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write pseudo-classes and the ::value, ::choices, ::repeat-
item, and ::repeat-index pseudo-elements.
... at risk: due to insufficient browser support, standardization of the pseudo-elements ::value, ::choices, ::repeat-
item, and ::repeat-index may be postponed to the next iteration of this module .
... css flexible box layout module candidate recommendation add a flexbox layout to the css display property and several new css properties to control it: flex, flex-align, flex-direction, flex-flow, flex-
item-align, flex-line-pack, flex-order, flex-pack, and flex-wrap.
Index of archived content - Archive of obsolete content
uuid window/utils release notes tools cfx cfx to jpm console jpm jpm-mobile jpmignore package.json tutorials add a context menu
item add a menu
item to firefox adding a button to the toolbar annotator creating annotations displaying annotations implementing the widget overview storing annotations chrome authority crea...
...reating a user interface firefox hub walkthrough initialization and cleanup prerequisites walkthrough webextensions for firefox for android listening to events in firefox extensions migrating from internal linkage to frozen linkage migrating raw components to add-ons multiple
item extension packaging offering a context menu for form controls overlay extensions firefox addons developer guide appendix: what you should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensions ...
... using the w3c dom using workers in extensions web standards choosing standards compliance over proprietary practices community correctly using titles with external stylesheets describing microformats in javascript displaying a graphic with audio samples fixing incorrectly sized list
item markers fixing table inheritance in quirks mode issues arising from arbitrary-element hover mozilla's doctype sniffing parsing microformats in javascript popup window controls rdf in fifty words or less rdf in mozilla faq styling abbreviations and acronyms the business benefits of web standards usi...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
if the user clicks on a link
item, the script will be responsible to load the information from the data source and to apply that into the current document.
... articletitle=article.getelementsbytagname("article").
item(0).firstchild.nodevalue; // inserting the content into the container..
...nner-browsing function here // function calldevedge(loaddata,ele) { var x = new xmlremoterequest(); doc=x.getremotedocument(loaddata); document.getelementbyid("container").innerhtml=""; if(doc!=null) { tagname="article"; // ie fix if(document.all) tagname="nde:"+tagname; articles=doc.getelementsbytagname(tagname); for(i=0;i<articles.length;i++) { article=articles.
item(i); tagname="title"; // ie fix if(document.all) tagname="nde:"+tagname; valuee=article.getelementsbytagname(tagname).
item(0).firstchild.nodevalue; tagname="summary"; // ie fix if(document.all) tagname="nde:"+tagname; paraa=article.getelementsbytagname(tagname).
item(0).first...
Java in Firefox Extensions - Archive of obsolete content
// guid of extension get
itemlocation("test@yoursite"); //the path logic would work if we include em:unpack for ff 4.x, for ff 3.x since things are unpacked by default things work // get path to the jar files (the following assumes your jars are within a // directory called "java" at the root of your extension's folder hierarchy) // you must add this utilities (classloader) jar to give your extension full privileges var ex...
...the following is a somewhat simplified snippet from xquseme: var reflect = java.lang.reflect; // build an array of the class types which are expected by our constructor (in this case, java.io.file and a class from another jar we loaded, com.sleepycat.db.environmentconfig) var paramtypes = reflect.array.newinstance(java.lang.class, 2); // 2nd argument should indicate the number of
items in following array paramtypes[0] = java.io.file; var envconfigclass = loader.loadclass('com.sleepycat.db.environmentconfig'); paramtypes[1] = envconfigclass; // get the constructor var constructor = envclass.getconstructor(paramtypes); // now that we have the constructor with the right parameter types, we can build the specific arguments we wish to pass to it var arglist = reflect.array.newinsta...
...nce(java.lang.object, 2); // 2nd argument should indicate the number of
items in the following array var mydir = new java.io.file(dirurl); // a file url arglist[0] = mydir; var envconfig = envconfigclass.newinstance(); arglist[1] = envconfig; // call our constructor with our arguments var env = constructor.newinstance(arglist); be aware that liveconnect, while now actively supported by sun has only recently been reimplemented for use in mozilla, so there may still be some bugs (though many prior liveconnect bugs, such as try-catch not catching java exceptions, the failure of auto-converting javascript arrays properly, etc., have now been fixed).
jspage - Archive of obsolete content
his[a],a,this); }}},getclean:function(){var b={};for(var a in this){if(this.hasownproperty(a)){b[a]=this[a];}}return b;},getlength:function(){var b=0;for(var a in this){if(this.hasownproperty(a)){b++; }}return b;}});hash.alias("foreach","each");array.implement({foreach:function(c,d){for(var b=0,a=this.length;b<a;b++){c.call(d,this[b],b,this);}}});array.alias("foreach","each"); function $a(b){if(b.
item){var a=b.length,c=new array(a);while(a--){c[a]=b[a];}return c;}return array.prototype.slice.call(b);}function $arguments(a){return function(){return arguments[a]; };}function $chk(a){return !!(a||a===0);}function $clear(a){cleartimeout(a);clearinterval(a);return null;}function $defined(a){return(a!=undefined);}function $each(c,b,d){var a=$type(c); ((a=="arguments"||a=="collection"||a=="array")?ar...
...length;b<a; b++){try{return arguments[b]();}catch(c){}}return null;}function $type(a){if(a==undefined){return false;}if(a.$family){return(a.$family.name=="number"&&!isfinite(a))?false:a.$family.name; }if(a.nodename){switch(a.nodetype){case 1:return"element";case 3:return(/\s/).test(a.nodevalue)?"textnode":"whitespace";}}else{if(typeof a.length=="number"){if(a.callee){return"arguments"; }else{if(a.
item){return"collection";}}}}return typeof a;}function $unlink(c){var b;switch($type(c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]); }break;case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:return c;}return b;}var browser=$merge({engine:{name:"unknown",version:0},platform:{name:(window.orientation!=undefined)?"ipod":(navigator.p...
...;},getscrollheight:function(){return this.getscrollsize().y; },getscrollwidth:function(){return this.getscrollsize().x;},gettop:function(){return this.getposition().y;},getleft:function(){return this.getposition().x; }});native.implement([document,element],{getelements:function(h,g){h=h.split(",");var c,e={};for(var d=0,b=h.length;d<b;d++){var a=h[d],f=selectors.utils.search(this,a,e); if(d!=0&&f.
item){f=$a(f);}c=(d==0)?f:(c.
item)?$a(c).concat(f):c.concat(f);}return new elements(c,{ddup:(h.length>1),cash:!g});}});element.implement({match:function(b){if(!b||(b==this)){return true; }var d=selectors.utils.parsetagandid(b);var a=d[0],e=d[1];if(!selectors.filters.byid(this,e)||!selectors.filters.bytag(this,a)){return false;}var c=selectors.utils.parseselector(b); return(c)?selectors.utils.filter(th...
statusBar - Archive of obsolete content
namespace: jetpack.statusbar methods copybackground embediframe append the append methods adds a new
item to the statusbar.
...syntax jetpack.statusbar.append(options); possible options are: url width (string/length) the width of the panel-
item html (string) the html code which will be used inside the
item onload (event) this event fires when the
item was appended.
...onready (event) occurs when the
item was loaded onunload (event) triggers when the
item was removed.
New Skin Notes - Archive of obsolete content
--nickolay 09:19, 25 aug 2005 (pdt) (moving this to a new
item) on the contrary, the list of categories current page belongs to, should be near the footer (see mdc:policies_and_guidelines page) (dria: fix catlinks style) the arrows that appear if you select "enhanced recent changes" in your preferences have an ugly border around them.
...--beltzner the "+"
item under the "views" menu of a discussion page looks really out of place.
...--dria how about modifying style for the side-bar to have a :hover class added which modifies (to a slightly lighter shade) the background color of the link, this will help to make
items "appear as links" to many users, possibly add a text-decoration: underline as well.
allowevents - Archive of obsolete content
on list
item and titlebar elements, mouse events normally do not get sent to their children; instead they are retargeted to the list
item and titlebar element itself.
... this means that elements placed inside a list
item do not respond to events, and instead clicking the mouse simply selects that
item within the list.
... for menu, menuseparator, menu
item and treecol elements, as well as menu buttons, and the popup datepicker, mouse events are also retargeted to the element itself.
menuactive - Archive of obsolete content
« xul reference home menuactive type: boolean this attribute is set on an
item in a menu when it is being hovered over.
... typcially, the theme will use this to highlight the
item.
... a dommenu
itemactive event will be sent to the
item when the
item is hovered over, and a dommenu
iteminactive event will be sent to the
item when the selection moves away.
Moving, Copying and Deleting Files - Archive of obsolete content
if the
item to copy is a directory, it can be copied in the same manner as above without changes.
... var file = io.newfile("home", "importantdata"); var destination = io.newfile("desktop", ""); destination.append("backups"); file.copyto(destination, ""); this example copies an
item called 'importantdata' into a directory called 'backups' within the desktop directory.
...this causes the
item to be copied without changing its name.
Introduction to XUL - Archive of obsolete content
the menu bar has a menu, file, with a single menu
item that dumps "hello world!" to the debug console when selected.
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menu
item label="hello world!" onclick="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window> the beginning of this example, down through the window tag, is the standard preamble.
...this menu contains a single menu
item that has a simple javascript onclick handler attached to it.
Methods - Archive of obsolete content
« xul reference home acceptdialog add
itemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup append
item appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirs...
...tvisiblerow getindexof
item get
itematindex getnext
item getnotificationbox getnotificationwithvalue getnumberofvisiblerows getpagebyid getprevious
item getresultat getresultcount getresultvalueat getrowcount getsearchat getselected
item getsession getsessionbyname getsessionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insert
item insert
itemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforele...
...ment reload reloadalltabs reloadtab reloadwithflags removeall
items removeallnotifications removealltabsbut removecurrentnotification removecurrenttab remove
itemat remove
itemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall select
item select
itemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggle
itemselection related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent ...
Namespaces - Archive of obsolete content
to quote wikipedia: "in general, a namespace is an abstract container providing context for the
items ...
... it holds and allows disambiguation of
items having the same name." if you are familiar with c++ namespaces, java packages, perl packages, or python module importing, you are already familiar with the namespace concept.
...together, these two
items define a qualified name, or qname.
OpenClose - Archive of obsolete content
here is a complete example which uses a button to open a menu: <button label="open menu" oncommand="document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menu
item label="cut"/> <menu
item label="copy"/> <menu
item label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag.
...when an menu
item is selected, it fires a command event so that code may be used to perform an action.
...once the menu is open, the keyboard can be used to navigate and select
items as usual.
Property - Archive of obsolete content
checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex current
item currentnotification currentpage currentpane currentset currenturi customtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled disablekeynavigation dlgtype docshell documentcharsetinfo editable edi...
...tingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focused
item forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting
itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero...
...on predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selected
item selected
items selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeou...
Additional Navigation - Archive of obsolete content
using a literal as the object of a triple is a common way to filter out specific
items.
... for instance, if
items were identified with a type, the data could be filtered to include only
items of a particular type.
... <query> <content uri="?start"/> <triple subject="?related
item" predicate="http://www.xulplanet.com/rdf/related
item" object="?start"/> </query> the triple is evaluated in the same manner except that the value of the object can be filled in with the value of the ?start variable.
Containment Properties - Archive of obsolete content
it doesn't have any containers, but we may want to iterate over the related
item predicate using the simple query syntax.
...<vbox datasources="template-guide-ex1.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/related
item"> <template> <rule> <label uri="rdf:*" value="rdf:*"/> </rule> </template> </vbox> instead of iterating over a container, this example iterates over a specific predicate.
...<vbox datasources="template-guide-ex3.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/related
item"> <template> <query> <content uri="?start"/> <member container="?start" child="?child"/> </query> <action> <label uri="?child" value="?child"/> </action> </template> </vbox> try this example.
Introduction - Archive of obsolete content
for example: <listbox datasources="http://www.xulplanet.com/ds/sample.xml" querytype="xml"> <template> <list
item 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 list
item will be generated for each child node in the xml data, setting the label to the name attribute for each xml node.
...the local store is a datasource which is usually used to hold state information such as window sizes, which columns in a tree are showing, and which tree
items are open.
SQLite Templates - Archive of obsolete content
<listbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name from myfriends </query> <action> <list
item uri="?" label="?name"/> </action> </template> </listbox> the query returns the list of values from the 'name' column in the table 'myfriends'.
...if the query returns six results, six list
items will be generated.
...<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> <list
item uri="?" label="?name"/> </action> </template> </listbox> here, the age is an integer number, so the type attribute is set to integer.
Special Condition Tests - Archive of obsolete content
here is the same example using the extended template syntax: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <query> <content uri="?start"/> <member container="?start" child="?
item"/> </query> <rule parent="vbox"> <binding subject="?
item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <groupbox uri="?
item"> <caption label="?title"/> </groupbox> </action> </rule> <rule> <binding subject="?
item" predicate="http://www.xulplanet.com/rdf/address" object="?address"/> <action> ...
... <label uri="?
item" value="?address"/> </action> </rule> </template> </vbox> containment tests for rdf sources, the simple rule syntax supports two special conditional tests that are commonly used with multiple rules.
...<button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule iscontainer="true"> <menupopup> <menu uri="rdf:*" label="rdf:http://purl.org/dc/elements/1.1/title"/> </menupopup> </rule> <rule> <menupopup> <menu
item uri="rdf:*" label="rdf:http://www.xulplanet.com/rdf/address"/> </menupopup> </rule> </template> </button> the only difference in the code in this example is that the order of the rules has been switched around, the condition check for house has been removed and the iscontainer attribute has been added.
XML Templates - Archive of obsolete content
here is an example: <listbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <list
item uri="?" label="?name"/> </action> </template> </listbox> the expr attribute is a very simple xpath expression which simply retrieves the person elements from within the datasource.
...the content of the action element will be generated and repeated for each result, which in this case, is a list
item.
...speople" xmlns=""> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> <listbox datasources="#famouspeople" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <list
item uri="?" label="?name"/> </action> </template> </listbox> here, an anchor reference, starting with a number sign (#) is used for the datasources attribute.
Things I've tried to do with XUL - Archive of obsolete content
multi-column listboxes when adding
items to multi-column listboxes, you can't use the append
item api: // auto-create and attach 1st cell var row = mylistbox.append
item( 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 append
item call).
... instead, you must build up your own list
item full of listcells, and then add that list
item to the listbox, using generic dom calls: var row = document.createelement('list
item'); // 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 // ...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
wrap elements other than <toolbarbutton> in <toolbar
item>.
...arpalette chrome://messenger/content/addressbo...ddressbook.xul thunderbird - address book addressbooktoolbarpalette chrome://editor/content/editor.xul kompozer - main window nvutoolbarpalette chrome://calendar/content/calendar.xul sunbird - main window calendartoolbarpalette more information xulplanet.com references: <toolbarbutton>, <toolbar
item>.
... how to adjust toolbar button's label position a forum thread about adding an
item to the toolbar (instead of just adding it to palette) right after an extension is installed.
Advanced Rules - Archive of obsolete content
this should be the content for the rows of the tree, menu
items, or whatever content you want to generate.
... <member container="?list" child="?city"/> <triple subject="?city" predicate="http://www.xulplanet.com/rdf/weather#name" object="?name"/> <triple subject="?city" predicate="http://www.xulplanet.com/rdf/weather#prediction" object="?pred"/> </conditions> <action> <treechildren> <tree
item uri="?city"> <treerow> <treecell label="?name"/> <treecell label="?pred"/> </treerow> </tree
item> </treechildren> </action> </rule> </template> </tree> two columns appear in this tree, one which displays the value of the name for each row and the other which displays the value of the prediction.
... if using the dont-build-content flag on a tree, replace the content element with a tree
item element.
Creating a Window - Archive of obsolete content
orient="horizontal" the orient attribute specifies the arrangement of the
items in the window.
... the value horizontal indicates that
items should be placed horizontally across the window.
... you may also use the value vertical, which means that the
items are placed in a column.
More Button Features - Archive of obsolete content
example 5 : source view <button type="menu" label="device"> <menupopup> <menu
item label="printer"/> <menu
item label="mouse"/> <menu
item label="keyboard"/> </menupopup> </button> in this example, the user may click the button to pop up a menu containing three
items.
... note that selecting one of these menu
items does not change the label on the button, unlike a menulist.
... this type of button is intended to be used like a menu, with scripts attached to each
item to perform a task.
RDF Datasources - Archive of obsolete content
example 1 : source <tree flex="1" datasources="rdf:history" ref="nc:historyroot"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="url" label="url" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <tree
item uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#url"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#date"/> </treerow> </tree
item> </treechildren> </rule> </template> </tree> other datasources the tables below list some of the oth...
...y large and can be viewed separately: source rdf example 2 : source view <tree flex="1" width="200" height="200" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals"> <treecols> <treecol id="name" label="name" primary="true" flex="1"/> <treecol id="species" label="species" flex="1"/> </treecols> <template> <rule> <treechildren> <tree
item uri="rdf:*"> <treerow> <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#species"/> </treerow> </tree
item> </treechildren> </rule> </template> </tree> here, the data has been generated from the file.
...tle="history list" xmlns:animals="http://www.some-fictitious-zoo.com/rdf#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="click here to see the mammals the zoo has" type="menu" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/mammals"> <template> <rule animals:specimens="0"></rule> <rule> <menupopup> <menu
item uri="rdf:*" label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> </menupopup> </rule> </template> </button> </window> in this case only the mammals are desired, so we select the uri of the mammals list.
Trees and Templates - Archive of obsolete content
example 1 : source <tree id="my-tree" flex="1" datasources="rdf:files" ref="nc:filesroot" flags="dont-build-content"> <treecols> <treecol id="name" label="name" primary="true" flex="1"/> <splitter/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <tree
item uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> </treerow> </tree
item> </treechildren> </rule> </template> </tree> here, a tree is created with two columns, for the name and date of a file.
...notice how it has been placed on the tree
item in the example, even though it is not a direct descendant of the rule element.
...instead we put the uri attributes on the tree
item elements.
arrowscrollbox - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
... methods ensureelementisvisible( element ) return type: no return value if the specified element is not currently visible to the user, the displayed
items are scrolled so that it is.
... if the
item is already visible, no scrolling occurs.
button - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
checkbox - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
menubar - Archive of obsolete content
attributes grippyhidden, statusbar properties accessibletype, statusbar examples <menubar id="sample-menubar"> <menu id="action-menu" label="action"> <menupopup id="action-popup"> <menu
item label="new"/> <menu
item label="save" disabled="true"/> <menu
item label="close"/> <menuseparator/> <menu
item label="quit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menu
item label="undo"/> <menu
item label="redo"/> </menupopup> </menu> </menubar> attributes grippyhidden seamonkey only type: b...
... statusbar type: id if you set this attribute to the id of a statusbar element, the label on the statusbar will update to the statustext of the
items on the menu as the user moves the mouse over them.
...ertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements menu, menu
item, menulist, menupopup, menuseparator interfaces nsiaccessibleprovider ...
panel - Archive of obsolete content
example: <menupopup id="top" onpopuphidden="console.log('the onpopuphidden method of id=top was called.');"> <menu
item label="
item 1"/> <menu
item label="
item 2"/> <menu id="submenu1" label="submenu 1"> <menupopup id="submenu1-popup"> <menu
item label="submenu1
item 1"/> <menu
item label="submenu1
item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menu
item label="submenu2
item 1"/> ...
... <menu
item label="submenu2
item 2"/> </menupopup> </menu> <menupopup/> onpopuphiding type: script code this event is sent to a popup when it is about to be hidden.
...it affects menu
item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their
items.
prefpane - Archive of obsolete content
for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
...this property is available for menu
item and menuseparator elements in firefox 3.
...for example, if you are using a listbox and the user changes the contents of the listbox (such as adding or removing an
item) and you want to sync the changes back to a preference, you must write an onsynctopreference handler for your listbox that returns the value to be written to the preference element, and then call the userchangedvalue function every time you edit the list in a way that should cause the preference's value to change.
treerow - Archive of obsolete content
it should be placed inside a tree
item element.
...if child rows are necessary, they should be placed in a treechildren element inside the parent tree
item.
..., isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, tree
item, treecell and treeseparator.
Windows and menus in XULRunner - Archive of obsolete content
lesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup"> <menu
item label="&file.new;" oncommand="dofilenew();"/> <menu
item label="&file.open;" oncommand="dofileopen();"/> <menu
item label="&file.save;" oncommand="dofilesave();"/> <menuseparator/> <menu
item label="&file.exit;" oncommand="dofileexit();"/> </menupopup> </menu> <menu id="edit-menu" label="&edit;"> <menupopup id="edit-popup"> ...
... <menu
item label="&edit.undo;" oncommand="doeditundo();"/> <menu
item label="&edit.redo;" oncommand="doeditredo();"/> </menupopup> </menu> </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;" oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;" oncommand="dofilesave();"/> </toolbar> </toolbox> ...
...<menu
item command="cmd_open"/> <menu
item command="cmd_save"/> ...
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
rss has long had the <description> element that can be used to include the contents of an <
item>.
...content module is shown below: <?xml version="1.0"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <
item> <title>a link in here</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <content:encoded><![cdata[this is a <a href="http://example.com/">link</a>.]]></content:encoded> </
item> ...
... <
item> <title>some italics html</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</pubdate> <link>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <content:encoded><![cdata[this is <i>italics</i>.]]></content:encoded> </
item> <
item> <title>some bold html</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <content:encoded><![cdata[this is <b>bold</b>.]]></content:encoded> </
item> </channel> </rss>...
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
an example using the most popular element of the well-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <
item> <title>i like root beer</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54321</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/article/54321</link> <wfw:commentrss>http://www.example.com/feed/rss/54321/comments</wfw:commentrss> </
item> <
item> <title>rain is wet</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54...
...320</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</pubdate> <link>http://www.example.com/article/54320</link> <wfw:commentrss>http://www.example.com/feed/rss/54320/comments</wfw:commentrss> </
item> <
item> <title>huh?!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54319</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/article/54319</link> <wfw:commentrss>http://www.example.com/feed/rss/54319/comments</wfw:commentrss> </
item> </channel> </rss> the <wfw:commentrss> element is the reason that the well-formed web rss module is popular.
...the uri in the <wfw:commentrss> element must point to an rss feed containing the comments for the <
item> it is contained in.
-ms-filter - Archive of obsolete content
syntax the -ms-filter property is specified as a string that contains a list of one or more
items, separated by spaces, of the following types: filters transitions procedural surfaces formal syntax filter: <-ms-filter-function>+ -ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ] where <-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy> where <-ms-filter-function-progid> = 'progid:' [ <ident-token> '.' ]* [ <ident-toke...
...; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.
item(0).apply(); // 12 is the dissolve filter.
... filterfrom.filters.
item(0).transition=12; imagefrom.style.visibility = "hidden"; filterto.style.visibility = ""; filterfrom.filters.
item(0).play(14); } </script> </body> gradient progid:dximagetransform.microsoft.gradient( <properties> ) where <properties> = [ <enabled> | <endcolor> | <endcolorstr> | <gradienttype> | <startcolor> | <startcolorstr> ]# where <enabled> = 'enabled=' [ true | false ] <endcolor> = 'startcolor=' <color> <endcolorstr> = 'startcolorstr=' <color> <gradienttype> = 'gradienttype=' <integer> <startcolor> = 'startcolor=' <color> <startcolorstr> = 'startcolorstr=' <color> enabled default: true set to false to disable.
Enumerator.moveFirst - Archive of obsolete content
the enumerator.movefirst method resets the current
item in the collection to the first
item.
... if there are no
items in the collection, the current
item is set to undefined.
... example in following example, the movefirst method is used to evaluate members of the drivescollection from the beginning of the list: function showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.
item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); ...
Enumerator.moveNext - Archive of obsolete content
the enumerator.movenext method moves the current
item to the next
item in the collection.
... if the enumerator is at the end of the collection or the collection is empty, the current
item is set to undefined.
... example in following example, the movenext method is used to move to the next drive in the drives collection: function showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.
item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } r...
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
) { // skip if( l != "" ) { str = str + l + "\n"; } } // define the namespaces, first the default, // then additional namespaces default xml namespace = "http://purl.org/rss/1.0/"; var dc = new namespace( "http://purl.org/dc/elements/1.1/" ); var rdf = new namespace( "http://www.w3.org/1999/02/22-rdf-syntax-ns#" ); // use e4x to process the feed var x = new xml( str ); for each( var i in x..
item ) { print( "title: " + i.title + "\n" ); print( "about: " + i.@rdf::about + "\n" ); print( "link: " + i.link + "\n" ); print( "date: " + i.dc::date + "\n" ); } the first half of this script is standard java code used to retrieve the feed data.
...notice during the processing of the
item element where we use the rdf and dc namespace to access the about attribute of the
item element, and the date element respectively.
... btn_comments = new ext.button({ text: "submit", fieldlabel: "", handler: formhandler }); // create the form panel, attach the inputs form_comments = new ext.form.formpanel({ labelalign: "right", width: 400, title: "comments",
items: [ txt_name, txt_email, txt_message, btn_comments ], renderto: "form-comments" }); }); </script> the code in listing 6 starts by hooking in the ext js library which is used to produce the ui elements of the form.
2D maze game with device orientation - Game development
after leveldata, but still in the initlevels function, we're adding the blocks into an array in the for loop using some of the framework-specific methods: for(var i=0; i<this.maxlevels; i++) { var newlevel = this.add.group(); newlevel.enablebody = true; newlevel.physicsbodytype = phaser.physics.arcade; for(var e=0; e<this.leveldata[i].length; e++) { var
item = this.leveldata[i][e]; newlevel.create(
item.x,
item.y, 'element-'+
item.t); } newlevel.setall('body.immovable', true); newlevel.visible = false; this.levels.push(newlevel); } first, add.group() is used to create a new group of
items.
...the newlevel.create method creates new
items in the group with starting left and top positions, and its own image.
... if you don't want to loop through the list of
items again to add a property to every single one explicitly, you can use setall on a group to apply it to all the
items in that group.
Flex - MDN Web Docs Glossary: Definitions of Web-related terms
along with inline-flex it causes the element that it applies to to become a flex container, and the element's children to each become a flex
item.
... the
items then participate in flex layout, and all of the properties defined in the css flexible box layout module may be applied.
... learn more property reference align-content align-
items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide: relationship of flexbox to other layout methods css flexbox guide: aligning
items in a flex container css flexbox guide: ordering flex
items css flexbox guide: controlling ratios of flex
items along the main axis css flexbox guide: mastering wrapping of flex
items css flexbox guide: typical use cases of fl...
Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
grid areas are created when you place an
item using line-based placement or when defining areas using named grid areas.
... in the example below i have a grid container with two grid
items.
....wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 100px 100px; grid-template-areas: "a a b" "a a b"; } .
item1 { grid-area: a; } .
item2 { grid-area: b; } <div class="wrapper"> <div class="
item1">
item</div> <div class="
item2">
item</div> </div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns grid-template-areas grid-area further reading css grid layout guide: basic concepts of grid layout css grid layout guide: grid tem...
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
if you do not place
items using one of the grid placement methods, direct children of the grid container will be placed one into each individual grid cell by the auto-placement algorithm.
... additional row or column tracks will be created to create enough cells to hold all
items.
...the five
items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two.
Main Axis - MDN Web Docs Glossary: Definitions of Web-related terms
on the main axis you can control the sizing of flex
items by adding any available space to the
items themselves, by way of flex properties on the
items.
... or, you can control the space between and around
items by using the justify-content property.
... learn more property reference flex-basis flex-direction flex-grow flex-shrink justify-content flex further reading css flexbox guide: basic concepts of flexbox css flexbox guide: aligning
items in a flex container css flexbox guide: controlling ratios of flex
items along the main axis ...
Cascade and inheritance - Learn web development
if a border were to be inherited by the children of our list, every single list and list
item would gain a border — probably not an effect we would ever want!
... for example: the second list
item has the class my-class-1 applied.
... overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing
items in css images, media, and form elements styling tables debugging css organizing your css ...
Typesetting a community school homepage - Learn web development
lists: make sure the spacing of your lists and list
items works well with the styling of the overall page.
... each list
item should have the same line-height as a paragraph line, and each list should have the same spacing at its top and bottom as you have between paragraphs.
... give your list
items a nice bullet, appropriate for the design of the page.
HTML basics - Learn web development
the most common list types are ordered and unordered lists: unordered lists are for lists where the order of the
items doesn't matter, such as a shopping list.
... ordered lists are for lists where the order of the
items does matter, such as a recipe.
... each
item inside the lists is put inside an <li> (list
item) element.
Debugging HTML - Learn web development
let's look at an example: <a href="https://www.mozilla.org/>link to mozilla homepage</a> </ul> let's review the problems: the paragraph and list
item elements have no closing tags.
... in the dom inspector, you can see what the rendered markup looks like: using the dom inspector, let's explore our code in detail to see how the browser has tried to fix our html errors (we did the review in firefox; other modern browsers should give the same result): the paragraphs and list
items have been given closing tags.
...the last list
item looks like this: <li> <strong>unclosed attributes: another common source of html problems.
HTML text fundamentals - Learn web development
unordered unordered lists are used to mark up lists of
items for which the order of the
items doesn't matter—let's take a shopping list as an example.
... milk eggs bread hummus every unordered list starts off with a <ul> element—this wraps around all the list
items: <ul> milk eggs bread hummus </ul> the last step is to wrap each list
item in a <li> (list
item) element: <ul> <li>milk</li> <li>eggs</li> <li>bread</li> <li>hummus</li> </ul> active learning: marking up an unordered list try editing the live sample below to create your very own html unordered list.
... text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; ordered ordered lists are lists in which the order of the
items does matter—let's take a set of directions as an example: drive to the end of the road turn right go straight across the first two roundabouts turn left at the third roundabout the school is on your right, 300 meters up the road the markup structure is the same as for unordered lists, except that you have to wrap the list
items in an <ol> element, rather than <ul>: <ol> <li>drive to the e...
Graceful asynchronous programming with Promises - Learn web development
the code we provided here for displaying the
items is fairly rudimentary but works as an explainer for now.
... note: if you were improving this code, you might want to loop through a list of
items to display, fetching and decoding each one, and then loop through the results inside promise.all(), running a different function to display each one depending on what the type of code was.
... this would make it work for any number of
items, not just three.
Silly story generator - Learn web development
in addition you've got a function called randomvaluefromarray() that takes an array, and returns one of the
items stored inside the array at random.
... create three new variables called x
item, y
item, and z
item, and make them equal to the result of calling randomvaluefromarray() on your three arrays (the result in each case will be a random
item out of each array it is called on).
... next we want to replace the three placeholders in the newstory string — :insertx:, :inserty:, and :insertz: — with the strings stored in x
item, y
item, and z
item.
Working with JSON - Learn web development
you'd just have to access array
items (in its parsed version) by starting with an array index, for example [0]["powers"][0].
...a3 = 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 list
item = document.createelement('li'); list
item.textcontent = superpowers[j]; mylist.appendchild(list
item); } 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...
... 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 list
item inside the <ul> element (mylist) using appendchild().
Beginning our React todo list - Learn web development
each task is a list
item (<li>), and has buttons to edit and delete it and a checkbox to check it off as done.
... finally, the labels and inputs in our list
items have some attributes unique to jsx: <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> the defaultchecked attribute in the <input/ > tag tells react to check this checkbox initially.
...: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo
item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; ...
Mozilla accessibility architecture
nsxultreeaccessible: which does not have a dom node for each tree
item, a special interface is provided by the tree itself to get the text for each row, column in the tree.
...when there is no dom node for each accessible, as is the case for nshtmlcomboboxaccessible and nsxultree
itemaccessible, we also need to override the shutdown() method, so that the children get removed from memory when the parent is shutdown.
... gecko events (or callback) event type accessibility event focus, select standard html dom event event_focus dommenu
itemactive, dommenubaractive mozilla dom event_focus domnodeinserted w3c dom mutation event event_create (atk) event_reorder (msaa) domsubtreemodified w3c dom mutation event event_reorder domnoderemoved w3c dom mutation event event_destroy (atk) event_reorder (msaa) checkboxstatechange, radi...
Debugging on Mac OS X
in the left-hand pane in xcode you should see a tree
item where the root
item has the project name.
...now, right click on the root
item, select 'add files to "<project-name>"', select all the files and directories in your source directory, untick "copy
items if needed", then click add.
... (these will then be progressively added under the root
item <project-name> in the left-hand pane.
Embedding Tips
how do i copy
items to the clipboard?
... specify a profile directory in your implementation of nsidirectoryserviceprovider passed to xre_in
itembedding.
...methods to hide or show the tool tips will automatically be called upon it when the user hovers over an
item with title text.
Roll your own browser: An embedding how-to
there are two functions that are needed: nsresult ns_in
itembedding(const char *apath); nsresult ns_termembedding(); pretty self-explanatory.
...ns_in
itembedding() must be called from the main thread of your application, otherwise it won't work.
... if you find any missing
item, please send me an email.
Index
the common structure to store such an untyped block is sec
item, which contains a size and an untyped c pointer variable.
...performing an operation often involves allocating many individual data
items, and the code might be required to abort a task at many positions in the logic.
...they must agree on these
items: 352 utility functions nss the public functions listed here perform initialization tasks and other services.
NSS API Guidelines
the library supports base-64 encoding/decoding, reader-writer locks, the sec
item data type, der encoding/decoding, error types and numbers, oid handling, and secure random number generation.
... utility for any layer lib/util base64.h, ciferfam.h, nssb64.h, nssb64t.h, nsslocks.h, nssrwlk.h, nssrwlkt.h, portreg.h, pqgutil.h, secasn1.h, secasn1t.h, seccomon.h, secder.h, secdert.h, secdig.h, secdigt.h, sec
item.h, secoid.h, secoidt.h, secport.h, secrng.h, secrngt.h, secerr.h, watcomfx.h naming conventions this section describes the rules that (ideally) should be followed for naming and identifying new files, functions, and data types.
...for example, in container structures, such as sec
item, or maybe linked list data structures.
NSS Sample Code sample6
should succeed on first run on a fresh db, * should fail on successive runs because key with that id already exists */ genkey(2); /* generate a key with id 1 - this will fail because key with that id * already exists */ genkey(1); } void genkey(int id) { pk11slotinfo* slot = null; pk11symkey* key = null; sec
item keyid
item; int keyid[1]; ck_mechanism_type ciphermech; /* using ckm_aes_cbc_pad mechanism for example */ ciphermech = ckm_aes_cbc_pad; slot = pk11_getinternalkeyslot(); /* slot = pk11_getbestslot(ciphermech, null); didn't work.
... */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_geterror()); return; } keyid[0] = id; keyid
item.type = sibuffer; keyid
item.data = (void *)keyid; keyid
item.len = sizeof(keyid[0]); /* note: keysize must be 0 for fixed key-length algorithms like des.
... * since we're using aes in this example, we're specifying * one of the valid keysizes (16, 24, 32) */ key = pk11_tokenkeygen(slot, ciphermech, 0, 32 /*keysize*/, &keyid
item, pr_true, 0); if (key == null) { fprintf(stderr, "pk11_tokenkeygen failed (err %d)\n", pr_geterror()); pk11_freeslot(slot); return; } fprintf(stderr, "key length of generated key is %d\n", pk11_getkeylength(key)); fprintf(stderr, "mechanism of key is %d (asked for %d)\n", pk11_getmechanism(key), ciphermech); pk11_freesymkey(key); key = pk11_findfixedkey(slot, ciphermech, &keyid
item, 0); if (key == null) { fprintf(stderr, "pk11_findfixedkey failed (err %d)\n", pr_geterror()); pk11_freeslot(sl...
INT_FITS_IN_JSVAL
example the following code snippet illustrates how a c variable,
item, is conditionally tested in an if statement to see if it is a legal jsval integer value.
... if (int_fits_in_jsval(
item)) { /* ...
... */ } else { js_reporterror(cx, "integer out of range: %d",
item); } see also int_to_jsval changeset - 52750:05bd86e3559a ...
Gecko events
is supported: yes event_selection_add an
item within a container object has been added to the selection.
... is supported: yes event_selection_remove an
item within a container object has been removed from the selection.
... is supported: no event_menu_start a menu
item on the menu bar has been selected.
Using the Places livemark service
you can also use it to check whether an
item is a livemark.
... livemarks are bookmark folders that contain the most recent
items from an rss feed.
... getservice(components.interfaces.nsinavbookmarksservice); var root = bmsvc.bookmarksmenufolder; //
item id of the bookmarks menu var newlvmkid = livemarkservice.createlivemarkfolderonly(bmsvc, root, "livemark name", uri("http://example.com/"), uri("http://example.com/rss.xml"), -1); the parameters here are the same as for nsilive...
XPCOM guide
this article details those changes, and provides suggestions for how to update your code.xpcom hashtable guidea hashtable is a data construct that stores a set of
items.
... each
item has a key that identifies the
item.
...
items are found, added, and removed from the hashtable by using the key.
nsIAccessibleEvent
event_selection_add 0x8007 0x0013 0x0010 an
item within a container object has been added to the selection.
... event_selection_remove 0x8008 0x0014 0x0011 an
item within a container object has been removed from the selection.
... event_menu_start 0x0018 0x0015 a menu
item on the menu bar has been selected.
nsICrashReporter
void wr
iteminidumpforexception(in voidptr aexceptioninfo); native code only!
... native code only!wr
iteminidumpforexception write a minidump immediately, with the user-supplied exception information.
...void wr
iteminidumpforexception( in voidptr aexceptioninfo ); parameters aexceptioninfo exception_info* provided by window's seh.
nsIDOMFontFaceList
1.0 66 introduced gecko 7.0 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) method overview nsidomfontface
item(in unsigned long index); attributes attribute type description length unsigned long the number of
items in the list.
... methods
item() returns the nsidomfontface object at the specified index into the list.
... nsidomfontface
item( in unsigned long index ); parameters index the index into the array of the font face object to return.
nsIDOMWindowUtils
to get this interface, use: var domwindowutils = window.windowutils; method overview void activatenativemenu
itemat(in astring indexstring); void clearmozafterpaintevents(); pruint32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long amaxdifference); double computeanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring value2); nsicompositionstringsynthesizer createcompositi...
... methods activatenativemenu
itemat() see nsiwidget.activatenativemenu
itemat().
... void activatenativemenu
itemat( in astring indexstring ); parameters indexstring clearmozafterpaintevents() void clearmozafterpaintevents(); parameters none.
nsIDOMXPathResult
dom/interfaces/xpath/nsidomxpathresult.idlscriptable this interface describes an xpath result returned by nsidomxpathevaluator or document.evaluate inherits from: nsisupports last changed in gecko 1.7 method overview nsidomnode iteratenext(); nsidomnode snapshot
item(in unsigned long index); attributes attribute type description booleanvalue boolean if resulttype is boolean_type, the boolean value.
...snapshot
item() returns the specified node from what is essentially an array of resulting dom nodes.
...nsidomnode snapshot
item( in unsigned long index ); parameters index the index of the dom node to return.
nsIDocShell
obsolete since gecko 1.8 nsisimpleenumerator getdocshellenumerator(in long a
itemtype, in long adirection); nsidomstorage getsessionstorageforprincipal(in nsiprincipal principal, in domstring documenturi, in boolean create); nsidomstorage getsessionstorageforuri(in nsiuri uri, in domstring documenturi); void historypurged(in long numentries); void internalload(in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint32 aflags,...
...nsisimpleenumerator getdocshellenumerator( in long a
itemtype, in long adirection ); parameters a
itemtype only include docshells of this type, or if typeall, include all child shells.
... uses types from nsidocshelltree
item.
nsIMessenger
canundo() queries if there are any undo
items in the transaction manager.
... canredo() queries if there are any redo
items in the transaction manager.
... acount the number of
items in the history.
nsITreeBoxObject
invalidatecell(in long row, in nsitreecolumn col); void invalidaterange(in long startindex, in long endindex); void invalidatecolumnrange(in long startindex, in long endindex, in nsitreecolumn col); long getrowat(in long x, in long y); void getcellat(in long x, in long y, out long row, out nsitreecolumn col, out acstring childelt); void getcoordsforcell
item(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); boolean iscellcropped(in long row, in nsitreecolumn col); void rowcountchanged(in long index, in long count); void beginupdatebatch(); void endupdatebatch(); void clearstyleandimagecaches(); attributes attribute type de...
... getcoordsforcell
item() find the coordinates of an element within a specific cell.
... void getcoordsforcell
item(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); parameters row the index of the row col the nsitreecolumn element the pseudoelement.
nsITreeSelection
currentindex long the current
item (the one with focus).
...this is the first
item the user selected as part of a ranged select.
...this parameter is inclusive; to select one
item, set endindex == startindex.
nsIZipReader
test() tests the integrity of the archive by performing a crc check on each
item expanded into memory.
... if an entry is specified the integrity of only that
item is tested.
... if null (javascript) or emptycstring() (c++) is passed in the integrity of all
items in the archive are tested.
XPCOM Interface Reference by grouping
01, 2010) list of mozilla interfaces as listed on the xpcom interface reference page where that page lists
items by alphabetical sorting, this page attempts to group them by function.
...ositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchromewindow nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtmlformelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorage
item nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler ...
...taskbarpreviewcontroller nsitaskbarprogress nsitaskbartabpreview nsitaskbarwindowpreview nsiwintaskbar nsialertsservice nsiwebprogress nsiwebprogresslistener nsiwebprogresslistener2 update nsiupdate nsiupdatechecker nsiupdatechecklistener nsiupdate
item nsiupdatemanager nsiupdatepatch nsiupdateprompt nsiupdatetimermanager nsiprogramminglanguage thunderbird credentials nsimsgaccountmanagerextension element nsieditormailsupport message nsidbchangeannouncer nsidbchangelistener nsimessenger ...
Address Book examples
use the address book manager to get an nsisimpleenumerator, then progress through the enumerator, looking for nsiab
item, nsiabcollection or nsiabdirectory interfaces as you require.
...org/abmanager;1"] .getservice(components.interfaces.nsiabmanager); let alladdressbooks = abmanager.directories; while (alladdressbooks.hasmoreelements()) { let addressbook = alladdressbooks.getnext() .queryinterface(components.interfaces.nsiabdirectory); if (addressbook instanceof components.interfaces.nsiabdirectory) { // or nsiab
item or nsiabcollection // alert ("directory name:" + addressbook.dirname); ...
...or list"); maillistcard.setproperty("notes", "new list description"); then you need to get the equivalent mailing list object that implements nsiabdirectory: let abmanager = components.classes["@mozilla.org/abmanager;1"] .getservice(components.interfaces.nsiabmanager); let maillistdirectory = abmanager.getdirectory(maillistcard.maillisturi); you can then adjust the
items in the actual mailing list: maillistdirectory.addresslists.appendelement(newcard, false); then save the updated list to the database: maillistdirectory.editmaillisttodatabase(maillistcard); deleting a mailing list there are two ways to delete a mailing list.
Creating a gloda message query
let mylistener = { /* called when new
items are returned by the database query or freshly indexed */ on
itemsadded: function mylistener_on
itemsadded(a
items, acollection) { }, /* called when
items that are already in our collection get re-indexed */ on
itemsmodified: function mylistener_on
itemsmodified(a
items, acollection) { }, /* called when
items that are in our collection are purged from the system */ on
itemsremoved: functio...
...n mylistener_on
itemsremoved(a
items, acollection) { }, /* called when our database query completes */ onquerycompleted: function mylistener_onquerycompleted(acollection) { } }; let collection = query.getcollection(mylistener); message attributes look at the pretty messages!
... the max number of messages which are returned is governed by a preference: "mailnews.database.global.search.msg.limit" although you can deal with the messages as they show up via the listener, the list of messages in the collection is available in collection.
items.
Index
70 thunderbird extensions add-ons, extensions, thunderbird categori 71 adding
items to the folder pane this tutorial examines how to add
items to an existing folder pane view.
...that container will have 3 child-
items, the numbers 1, 2, and 3.
... clicking on those
items will display the number in the main viewing pane of thunderbird.
Main Windows
osx only: macmenuoverlay.xul a special overlay for osx that adds a few
items to the window menu.
... osx only: macmenuoverlay.xul a special overlay for osx that adds a few
items to the window menu.
...
items have the same id’s, and contain the same structure.
Finding the code for a feature
using dom inspector, i find the tag menu
item, and i see that it uses command "cmd_tag".
...i look at the last occurrence, and see it is just an enable
item with no real action involved.
...repeating this process, i see that the submenu
items all call a function togglemessagetagmenu.
DOM Property Viewer - Firefox Developer Tools
up to three properties of an object and
items of an array are displayed.
... refreshing the display if the dom changes you can hit the refresh button to update the display: filtering there is a search box within the toolbar: this filters the list to show only
items which match the search term.
...
items match the search term if their name contains the search term.
Debugger.Memory - Firefox Developer Tools
it can compute a census of
items belonging to the debuggee, categorizing
items in various ways, and yielding
item counts.
... censuses a census is a complete traversal of the graph of all reachable memory
items belonging to a particular debugger‘s debuggees.
... it produces a count of those
items, broken down by various criteria.
Network request details - Firefox Developer Tools
the tabs at the top of this pane enable you to switch between the following pages: headers messages (only for websocket
items) cookies params response cache timings security (only for secure pages) stack trace (only when the request has a stack trace, e.g.
...the resend button opens a menu with two
items: resend: simply resends the request.
...in the above screenshot for example, the highlighted request's server-timing header contains 4
items — data, markup, total, and miss.
Examine and edit HTML - Firefox Developer Tools
the menu contains the following
items — click on the links to find the description of each command in the context menu reference: edit as html create new node duplicate node delete node attributes add attribute copy attribute value edit attribute remove attribute break on ...
... open link in new tab (only when invoked over a link, such as an href attribute) opens the linked
item in a new tab.
... you can access the same functionality using the "create new node" popup menu
item.
Extension Storage - Firefox Developer Tools
this table contains the following columns: key — the name of the stored
item.
... value — the value of the stored
item.
... storage area — the name of the area where the
item is stored.
IndexedDB - Firefox Developer Tools
when an object store is selected in the storage tree, all the
items in that object store are listed in the table.
... all
items have a key and a value associated with them.
... you can delete an indexeddb database using the context menu in the storage tree: if the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the storage inspector: you can use the context menu in the table widget to delete all
items in an object store, or a particular
item: ...
Local Storage / Session Storage - Firefox Developer Tools
when an origin corresponding to local storage or session storage is selected within the storage inspector, the names and values of all the
items corresponding to local storage or session storage will be listed in a table.
... you can edit local and session storage
items by double-clicking inside cells in the table widget and editing the values they contain: you can delete local storage and session storage entries using the context menu: you can also delete local and session storage entries by selecting an
item and pressing the delete or backspace key.
... finally, you can add new storage
items by clicking the "plus" (+) button and then editing the resulting new row to the value you want.
Console messages - Firefox Developer Tools
the context menu for network messages includes a few extra
items in addition the globally-available ones: copy link location acts as you would expect, copying the url into the clipboard open in network panel switches context to the network tab, selects the request and shows you the details resend request sends the network request again.
...for example, -img shows only
items that do not contain the string img.
...for example, -/(cool|rad)/ shows only
items that do not match the expression /(cool|rad)/.
Body.json() - Web APIs
when the fetch 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.
... 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 list
item = document.createelement('li'); list
item.appendchild( document.createelement('strong') ).textcontent = product.name; list
item.append( ` can be found in ${ product.location }.
... cost: ` ); list
item.appendchild( document.createelement('strong') ).textcontent = `£${product.price}`; mylist.appendchild(list
item); } }) .catch(console.error); specifications specification status comment fetchthe definition of 'body.json()' in that specification.
Using the CSS Painting API - Web APIs
example let's create a list of
items with a background image that rotates between three different colors and three widths.
... <ul> <li>
item 1</li> <li>
item 2</li> <li>
item 3</li> <li>
item 4</li> <li>
item 5</li> <li>
item 6</li> <li>
item 7</li> <li>
item 8</li> <li>
item 9</li> <li>
item 10</li> <li>
item 11</li> <li>
item 12</li> <li>
item 13</li> <li>
item 14</li> <li>
item 15</li> <li>
item 16</li> <li>
item 17</li> <li>
item</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/boxbg.js'); li { background-image: paint(boxbg); --boxcolor: hsla(55, 90%, 60%, 1.0); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); --width...
...ould be filled or hollow: li { --boxcolor: hsla(155, 90%, 60%, 0.5); background-image: paint(hollowhighlights, stroke, 5px); } li:nth-of-type(3n) { --boxcolor: hsla(255, 90%, 60%, 0.5); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(355, 90%, 60%, 0.5); background-image: paint(hollowhighlights, stroke, 1px); } <ul> <li>
item 1</li> <li>
item 2</li> <li>
item 3</li> <li>
item 4</li> <li>
item 5</li> <li>
item 6</li> <li>
item 7</li> <li>
item 8</li> <li>
item 9</li> <li>
item 10</li> <li>
item 11</li> <li>
item 12</li> <li>
item 13</li> <li>
item 14</li> <li>
item 15</li> <li>
item 16</li> <li>
item 17</li> <li>
item</li> </ul> in our <script> we register the workle...
ChildNode.before() - Web APIs
with(node) { before("foo"); } // referenceerror: before is not defined polyfill you can polyfill the before() method in internet explorer 9 and higher with the following code: // from: https://github.com/jserz/js_piece/blob/master/dom/childnode/before()/before().md (function (arr) { arr.foreach(function (
item) { if (
item.hasownproperty('before')) { return; } object.defineproperty(
item, 'before', { configurable: true, enumerable: true, writable: true, value: function before() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (arg
item) { var isnode = arg...
...
item instanceof node; docfrag.appendchild(isnode ?
... arg
item : document.createtextnode(string(arg
item))); }); this.parentnode.insertbefore(docfrag, this); } }); }); })([element.prototype, characterdata.prototype, documenttype.prototype]); specification specification status comment domthe definition of 'childnode.before()' in that specification.
DataTransfer.dropEffect - Web APIs
the possible values are: copy a copy of the source
item is made at the new location.
... move an
item is moved to a new location.
... none the
item may not be dropped.
DataTransfer.effectAllowed - Web APIs
the possible values are: none the
item may not be dropped.
... copy a copy of the source
item may be made at the new location.
... move an
item may be moved to a new location.
DataTransfer.mozSetDataAt() - Web APIs
a data transfer may store multiple
items, each at a given zero-based index.
... mozsetdataat() may only be called with an index argument less than moz
itemcount in which case an existing
item is modified, or equal to moz
itemcount in which case a new
item is added, and the moz
itemcount is incremented by one.
... function dragstart_handler(event) { var dt = event.datatransfer; var idx = dt.moz
itemcount; // add two new
items to the drag transfer if (idx >= 0) { dt.mozsetdataat("text/uri-list","http://www.example.com/", idx); dt.mozsetdataat("text/html", "hello world", idx+1); } } specifications this method is not defined in any web standard.
DeprecationReportBody - Web APIs
the report details are displayed via the displayreports() fuction, which takes the observer callback's 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 list
item = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); list
item.appendchild(textnode); let innerlist = document.createelement('ul'); list
item.appendchild(innerlist); list.appendchild(list
item); for (let key in reports[i].body) { let innerlist
item = document.createelement('li'); let keyvalue =...
... reports[i].body[key]; innerlist
item.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlist
item); } } } the reports parameter contains an array of all the reports in the observer's report queue.
... we loop over each report using a basic for loop, then iterate over each entry of in the report's body (a deprecationreportbody instance) using a for...in structure, displaying each key/value pair inside a list
item.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
these elements behave like inline elements on the outside, and blocks on the inside, and are often used to display more complex pieces of ui than just text, side-by-side on the same line, for example navigation menu
items.
... there are a few ways of getting around this problem: use flexbox to create the horizontal list of
items instead of trying an inline-block solution.
...} or you could set negative margin on the list
items: li { display: inline-block; width: 2rem; height: 2rem; margin-right: -0.25rem; } you can also solve this problem by putting your list
items all on the same line in the source, which causes the whitespace nodes to not be created in the first place: <li></li><li></li><li></li><li></li><li></li> dom traversal and whitespace when trying to do dom manipulation in javascript, you can als...
Element.getElementsByClassName() - Web APIs
ame('test'); this example finds all elements that have a class of test, which are also a descendant of the element that has the id of main: document.getelementbyid('main').getelementsbyclassname('test'); matching multiple classes to find elements whose class lists include both the red and test classes: element.getelementsbyclassname('red test'); examining the results you can use either the
item() method on the returned htmlcollection or standard array syntax to examine individual elements in the collection.
... var matches = element.getelementsbyclassname('colorbox'); for (var i=0; i<matches.length; i++) { matches[i].classlist.remove('colorbox'); matches.
item(i).classlist.add('hueframe'); } instead, use another method, such as: var matches = element.getelementsbyclassname('colorbox'); while (matches.length > 0) { matches.
item(0).classlist.add('hueframe'); matches[0].classlist.remove('colorbox'); } this code finds descendant elements with the "colorbox" class, adds the class "hueframe", by calling
item(0), then removes "colorbox" (using array notation).
... another element (if any are left) will then become
item(0).
Element: mouseenter event - Web APIs
it then adds an
item to the list with the number of the mouseenter or mouseleave event.
...mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlist
item('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlist
item('this is mouseleave event ' + leaveeventcount + '.'); }); function addlist
item(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a ne...
...w li element var newlist
item = document.createelement("li"); // add the text node to the li element newlist
item.appendchild(newtextnode); // add the newly created list
item to list unorderedlist.appendchild(newlist
item); } result specifications specification status ui eventsthe definition of 'mouseenter' in that specification.
Element: mouseleave event - Web APIs
it then adds an
item to the list with the number of the mouseenter or mouseleave event.
...mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlist
item('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlist
item('this is mouseleave event ' + leaveeventcount + '.'); }); function addlist
item(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a ne...
...w li element var newlist
item = document.createelement("li"); // add the text node to the li element newlist
item.appendchild(newtextnode); // add the newly created list
item to list unorderedlist.appendchild(newlist
item); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.
FileSystemEntry.copyTo() - Web APIs
receives a single input parameter: a filesystementry based object providing the copied
item's new details.
... errorcallback optional an optional callback which is executed if an error occurs while copying the
items.
... errors fileerror.invalid_modification_err the requested operation involves an impossible change, such as moving a directory inside itself or one of its own child directories, or copying an
item within the same directory without renaming it.
FileSystemEntry.moveTo() - Web APIs
receives a single input parameter: a filesystementry based object providing the moved
item's new details.
... errorcallback optional an optional callback which is executed if an error occurs while moving the
items.
... errors fileerror.invalid_modification_err the requested operation involves an impossible change, such as moving a directory inside itself or one of its own child directories, or copying an
item within the same directory without renaming it.
HTMLFormControlsCollection - Web APIs
htmlformcontrolscollection.named
item() returns the radionodelist or the element in the collection whose name or id matches the specified name, or null if no nodes match.
... note that this version of named
item() hide the one inherited from htmlcollection.
... like that one, in javascript, using the array bracket syntax with a string, like collection["value"] is equivalent to collection.named
item("value").
MimeTypeArray - Web APIs
properties mimetypearray.length the number of
items in the array.
... methods mimetypearray.
item() returns the mimetype object with the specified index.
... mimetypearray.named
item() returns the mimetype object with the specified name.
NavigatorPlugins.plugins - Web APIs
syntax var plugins = navigator.plugins; plugins is pluginarray object used to access plugin objects either by name or as a list of
items.
... the returned value is not a javascript array, but has the length property and supports accessing individual
items using bracket notation (plugins[2]), as well as via
item(index) and named
item("name") methods.
... function getflashversion() { var flash = navigator.plugins.named
item('shockwave flash'); if (typeof flash != 'object') { // flash is not present return undefined; } if(flash.version){ return flash.version; } else { //no version property (e.g.
NodeList.length - Web APIs
the nodelist.length property returns the number of
items in a nodelist.
... syntax num
items = nodelist.length num
items is an integer value representing the number of
items in a nodelist.
... // all the paragraphs in the document var
items = document.getelementsbytagname("p"); // for each
item in the list, // append the entire element as a string of html var gross = ""; for (var i = 0; i <
items.length; i++) { gross +=
items[i].innerhtml; } // gross is now all the html for the paragraphs specifications specification status comment domthe definition of 'nodelist: length' in that specification.
NodeList - Web APIs
it's good to keep this distinction in mind when you choose how to iterate over the
items in the nodelist, and whether you should cache the list's length.
... methods nodelist.
item() returns an
item in the list by its index, or null if the index is out-of-bounds.
... example it's possible to loop over the
items in a nodelist using a for loop: for (let i = 0; i < mynodelist.length; i++) { let
item = mynodelist[i]; } don't use for...in to enumerate the
items in nodelists, since they will also enumerate its length and
item properties and cause errors if your script assumes it only has to deal with element objects.
ParentNode.append() - Web APIs
let parent = document.createelement("div") with(parent) { append("foo") } // referenceerror: append is not defined polyfill you can polyfill the append() method in internet explorer 9 and higher with the following code: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/append()/append().md (function (arr) { arr.foreach(function (
item) { if (
item.hasownproperty('append')) { return; } object.defineproperty(
item, 'append', { configurable: true, enumerable: true, writable: true, value: function append() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (arg
item) { var isnode = arg...
...
item instanceof node; docfrag.appendchild(isnode ?
... arg
item : document.createtextnode(string(arg
item))); }); this.appendchild(docfrag); } }); }); })([element.prototype, document.prototype, documentfragment.prototype]); specification specification status comment domthe definition of 'parentnode.append()' in that specification.
ParentNode.prepend() - Web APIs
var parent = document.createelement("div"); with(parent) { prepend("foo"); } // referenceerror: prepend is not defined polyfill you can polyfill the prepend() method if it's not available: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/prepend()/prepend().md (function (arr) { arr.foreach(function (
item) { if (
item.hasownproperty('prepend')) { return; } object.defineproperty(
item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (arg
item) { var isnode = ...
...arg
item instanceof node; docfrag.appendchild(isnode ?
... arg
item : document.createtextnode(string(arg
item))); }); this.insertbefore(docfrag, this.firstchild); } }); }); })([element.prototype, document.prototype, documentfragment.prototype]); specification specification status comment domthe definition of 'parentnode.prepend()' in that specification.
Using the Payment Request API - Web APIs
the required object parameters: function buildsupportedpaymentmethoddata() { // example supported payment methods: return [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard'], supportedtypes: ['debit', 'credit'] } }]; } function buildshoppingcartdetails() { // hardcoded for demo purposes: return { id: 'order-123', display
items: [ { label: 'example
item', amount: {currency: 'usd', value: '1.00'} } ], total: { label: 'total', amount: {currency: 'usd', value: '1.00'} } }; } starting the payment process once the paymentrequest object has been created, you call the paymentrequest.show() method on it to initiate the payment request.
... checking before all prices are known if the checkout flow needs to know whether paymentrequest.canmakepayment() will return true even before all line
items and their prices are known, you can instantiate paymentrequest with dummy data and pre-query .canmakepayment().
...function oncheckoutbuttonclicked(line
items) { callservertoretrievecheckoutdetails(line
items); } // the server has constructed the `checkout` object.
PluginArray - Web APIs
the pluginarray is not a javascript array, but has the length property and supports accessing individual
items using bracket notation (plugins[2]), as well as via
item(index) and named
item("name") methods.
... methods pluginarray.
item returns the plugin at the specified index into the array.
... pluginarray.named
item returns the plugin with the specified name.
Range.extractContents() - Web APIs
syntax documentfragment = range.extractcontents(); example basic example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").
item(0)); var documentfragment = range.extractcontents(); document.body.appendchild(documentfragment); moving
items between containers this example lets you move
items between two containers.
... select one or more
item, and then click "swap" to move them to the opposite container.
... html <p id="list1">123456</p> <button id="swap">swap selected
item(s)</button> <p id="list2">abcdef</p> css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.getelementbyid('swap'); button.addeventlistener('click', e => { selection = window.getselection(); for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); if (range.commonancestorcontainer === list1 || range.commonancestorcontainer.parentnode === list1) { const documentfragment = range.extractcontents(); list2.appendchil...
Report - Web APIs
the report details are displayed via the displayreports() fuction, which takes the observer callback's 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 list
item = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); list
item.appendchild(textnode); let innerlist = document.createelement('ul'); list
item.appendchild(innerlist); list.appendchild(list
item); for (let key in reports[i].body) { let innerlist
item = document.createelement('li'); let keyvalue =...
... reports[i].body[key]; innerlist
item.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlist
item); } } } the reports parameter contains an array of all the reports in the observer's report queue.
... we loop over each report using a basic for loop, then iterate over each entry of in the report's body using a for...in structure, displaying each key/value pair inside a list
item.
Storage.length - Web APIs
the length read-only property of the storage interface returns the number of data
items stored in a given storage object.
... syntax length = storage.length; return value the number of
items stored in the storage object.
... example the following function adds three data
items to the local storage for the current domain, then returns the number of
items in the storage: function populatestorage() { localstorage.set
item('bgcolor', 'yellow'); localstorage.set
item('font', 'helvetica'); localstorage.set
item('image', 'cats.png'); return localstorage.length; // should return 3 } note: for a real world example, see our web storage demo.
Using readable streams - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let list
item = document.createelement('li'); list
item.textcontent = string; list1.appendchild(list
item); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // ...
... if (done) { console.log("stream complete"); para.textcontent = result; return; } charsreceived += value.length; const chunk = value; let list
item = document.createelement('li'); list
item.textcontent = 'read ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(list
item); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } closing and cancelling streams we’ve already shown examples of using readablestreamdefaultcontroller.close() to close a reader.
TouchList.length - Web APIs
the length read-only property indicates the number of
items (touch points) in a given touchlist.
... example this code example illustrates the use of the touchlist interface's
item method and the length property.
... target = document.getelementbyid("target"); target.addeventlistener('touchstart', function(ev) { // if this touchstart event started on element target, // set touch to the first
item in the targettouches list; // otherwise set touch to the first
item in the touches list var touch; if (ev.targettouches.length >= 1) touch = ev.targettouches.
item(0); else touch = ev.touches.
item(0); }, false); specifications specification status comment touch events – level 2 draft non-stable version.
WebGLRenderingContext.stencilMask() - Web APIs
the webglrenderingcontext.stencilmaskseparate() method can set front and back stencil wr
itemasks to different values.
... examples gl.stencilmask(110101); to get the current stencil masks, query the stencil_wr
itemask, stencil_back_wr
itemask, or stencil_bits constants.
... gl.getparameter(gl.stencil_wr
itemask); // 110101 gl.getparameter(gl.stencil_back_wr
itemask); // 110101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status comment webgl 1.0the definition of 'stencilmask' in that specification.
WebGL constants - Web APIs
depth_wr
itemask 0x0b72 passed to getparameter to determine if the depth write mask is enabled.
... stencil_value_mask 0x0b93 stencil_wr
itemask 0x0b98 stencil_back_func 0x8800 stencil_back_fail 0x8801 stencil_back_pass_depth_fail 0x8802 stencil_back_pass_depth_pass 0x8803 stencil_back_ref 0x8ca3 stencil_back_value_mask 0x8ca4 stencil_back_wr
itemask 0x8ca5 viewport 0x0ba2 returns an int32array wi...
... color_clear_value 0x0c22 color_wr
itemask 0x0c23 unpack_alignment 0x0cf5 pack_alignment 0x0d05 max_texture_size 0x0d33 max_viewport_dims 0x0d3a subpixel_bits 0x0d50 red_bits 0x0d52 green_bits 0x0d53 blue_bits 0x0d54 alpha_bits 0x0d55 depth_bits 0x0d56 stencil_bits 0x0d57 polygon_offset_units 0x2a00 polygon_offset_factor 0x8038 texture_binding_2d 0x8069 ...
Signaling and video calling - Web APIs
function handleuserlistmsg(msg) { var i; var listelem = document.queryselector(".userlistbox"); while (listelem.firstchild) { listelem.removechild(listelem.firstchild); } msg.users.foreach(function(username) { var
item = document.createelement("li");
item.appendchild(document.createtextnode(username));
item.addeventlistener("click", invite, false); listelem.appendchild(
item); }); } after getting a reference to the <ul> which contains the list of user names into the variable listelem, we empty the list by removing each of its child elements.
...next, we set a handler for the click event on the list
item, that clicking on a user name calls our invite() method, which we'll look at in the next section.
... finally, we append the new
item to the <ul> that contains all of the user names.
Window.sessionStorage - Web APIs
example the following snippet accesses the current origin's session storage object and adds data to it with storage.set
item().
... sessionstorage.set
item('mycat', 'tom'); the following example autosaves the contents of a text field, and if the browser is refreshed, restores the text field content so that no writing is lost.
... // get the text field that we're going to track let field = document.getelementbyid("field"); // see if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionstorage.get
item("autosave")) { // restore the contents of the text field field.value = sessionstorage.get
item("autosave"); } // listen for changes in the text field field.addeventlistener("change", function() { // and save the results into the session storage object sessionstorage.set
item("autosave", field.value); }); note: please refer to the using the web storage api article for a full example.
Window: storage event - Web APIs
bubbles no cancelable no interface storageevent event handler property onstorage examples log the samplelist
item to the console when the storage event fires: window.addeventlistener('storage', () => { // when local storage changes, dump the list to // the console.
... console.log(json.parse(window.localstorage.get
item('samplelist'))); }); the same action can be achieved using the onstorage event handler property: window.onstorage = () => { // when local storage changes, dump the list to // the console.
... console.log(json.parse(window.localstorage.get
item('samplelist'))); }; specifications specification status html living standardthe definition of 'storage' in that specification.
Using XMLHttpRequest - Web APIs
plainescape : escape; for (var n
item = 0; n
item < otarget.elements.length; n
item++) { ofield = otarget.elements[n
item]; if (!ofield.hasattribute("name")) { continue; } sfieldtype = ofield.nodename.touppercase() === "input" ?
...s () { console.log(this.responsetext); } function ajaxsubmit (oformelement) { if (!oformelement.action) { return; } var oreq = new xmlhttprequest(); oreq.onload = ajaxsuccess; if (oformelement.method.tolowercase() === "post") { oreq.open("post", oformelement.action); oreq.send(new formdata(oformelement)); } else { var ofield, sfieldtype, nfile, ssearch = ""; for (var n
item = 0; n
item < oformelement.elements.length; n
item++) { ofield = oformelement.elements[n
item]; if (!ofield.hasattribute("name")) { continue; } sfieldtype = ofield.nodename.touppercase() === "input" ?
...*/, "yourpage.html"); oreq.onload = getheadertime; oreq.send(); do something when last modified date changes let's create two functions: function getheadertime () { var nlastvisit = parsefloat(window.localstorage.get
item('lm_' + this.filepath)); var nlastmodif = date.parse(this.getresponseheader("last-modified")); if (isnan(nlastvisit) || nlastmodif > nlastvisit) { window.localstorage.set
item('lm_' + this.filepath, date.now()); isfinite(nlastvisit) && this.callback(nlastmodif, nlastvisit); } } function ifhaschanged(surl, fcallback) { var oreq = new xmlhttprequest(); oreq.open("head" /* use hea...
ARIA: article role - Accessibility
it is usually set on related content
items such as comments, forum posts, newspaper articles or other
items grouped together on one page.
...examples of appropriate uses of the role="article", or preferably <article>, include blog posts, forum posts, a comment to a forum or blog post, a comment to a comment to a forum or blog post, any an
item in a social media feed.
... aria-setsize in the context of a feed, indicates how many article
items there are within that feed.
CSS Layout cookbook - CSS: Cascading Style Sheets
css grid, multicol, flexbox center an element how to center an
item horizontally and vertically.
... flexbox list group with badges a list of
items with a badge to display a count.
... grid layout grid wrapper for aligning grid content within a central wrapper, while also allowing
items to break out.
Mozilla CSS extensions - CSS: Cascading Style Sheets
ixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenu
item dialog groupbox listbox menuarrow menucheckbox menuimage menu
item menu
itemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximiz...
...ed -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenu
item resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox to...
...oltip treeheadercell treeheadersortarrow tree
item treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.
WebKit CSS extensions - CSS: Cascading Style Sheets
a -webkit-align-content -webkit-align-
items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-bor...
...bkit-grid-auto-rows -webkit-grid-column -webkit-grid-column-end -webkit-grid-column-gap -webkit-grid-column-start -webkit-grid-gap -webkit-grid-row -webkit-grid-row-end -webkit-grid-row-gap -webkit-grid-row-start -webkit-grid-template -webkit-grid-template-areas -webkit-grid-template-columns -webkit-grid-template-rows h-l -webkit-hyphens -webkit-justify-content -webkit-justify-
items -webkit-justify-self -webkit-line-break m -webkit-mask -webkit-mask-clip -webkit-mask-composite -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-repeat -webkit-mask-size o-r -webkit-opacity -webkit-order -webkit-perspective -webkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-type -webkit-shape-image-threshold -webkit-shape...
... a -webkit-align-content -webkit-align-
items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function -webkit-appearance* b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-backgro...
cursor - CSS: Cascading Style Sheets
no-drop an
item may not be dropped at the current location.
... col-resize the
item/column can be resized horizontally.
... row-resize the
item/row can be resized vertically.
flex-shrink - CSS: Cascading Style Sheets
the flex-shrink css property sets the flex shrink factor of a flex
item.
... if the size of all flex
items is larger than the flex container,
items shrink to fit according to flex-shrink.
... formal definition initial value1applies toflex
items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex
item shrink factor html <p>the width of content is 500px; the flex-basis of the flex
items is 120px.</p> <p>a, b, c have flex-shrink:1 set.
flex-wrap - CSS: Cascading Style Sheets
the flex-wrap css property sets whether flex
items are forced onto one line or can wrap onto multiple lines.
... values the following values are accepted: nowrap the flex
items are laid out in a single line which may cause the flex container to overflow.
... wrap the flex
items break into multiple lines.
grid-template-columns - CSS: Cascading Style Sheets
max-content is a keyword representing the largest maximal content contribution of the grid
items occupying the grid track.
... min-content is a keyword representing the largest minimal content contribution of the grid
items occupying the grid track.
...as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid
items occupying the grid track.
grid-template-rows - CSS: Cascading Style Sheets
max-content is a keyword representing the largest maximal content contribution of the grid
items occupying the grid track.
... min-content is a keyword representing the largest minimal content contribution of the grid
items occupying the grid track.
...as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid
items occupying the grid track.
margin-left - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-
item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
... block layout mode block, inline, inline-block, block, table, inline-table, list-
item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
... candidate recommendation defines the behavior of margin-left on flex
items.
margin-right - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-
item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
... block layout mode block, inline, inline-block, block, table, inline-table, list-
item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
... candidate recommendation defines the behavior of margin-right on flex
items.
Adding captions and subtitles to HTML5 video - Developer guides
all we need to do is to go through the video's texttracks, reading their properties and building the menu up from there: var subtitlesmenu; if (video.texttracks) { var df = document.createdocumentfragment(); var subtitlesmenu = df.appendchild(document.createelement('ul')); subtitlesmenu.classname = 'subtitles-menu'; subtitlesmenu.appendchild(createmenu
item('subtitles-off', '', 'off')); for (var i = 0; i < video.texttracks.length; i++) { subtitlesmenu.appendchild(createmenu
item('subtitles-' + video.texttracks[i].language, video.texttracks[i].language, video.texttracks[i].label)); } videocontainer.appendchild(subtitlesmenu); } this code creates a documentfragment, which is used to hold an unordered list containing our subtitles menu.
... the creation of each list
item and button is done by the createmenu
item() function, which is defined as follows: var subtitlemenubuttons = []; var createmenu
item = function(id, lang, label) { var list
item = document.createelement('li'); var button = list
item.appendchild(document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.length > 0) button.setattribute('lang', lang); button.value = label; button.setattribute('data-state', 'inactive'); button.appendchild(document.createtextnode(label)); button.addeventlistener('click', function(e) { ...
...er match so all will subtitles be turned off if (video.texttracks[i].language == lang) { video.texttracks[i].mode = 'showing'; this.setattribute('data-state', 'active'); } else { video.texttracks[i].mode = 'hidden'; } } subtitlesmenu.style.display = 'none'; }); subtitlemenubuttons.push(button); return list
item; } this function builds the required <li> and <button> elements, and returns them so they can be added to the subtitles menu list.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
nesting a <samp> element inside a <kbd> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu
items, or the names of buttons displayed on the screen.
... <p>if a syntax error occurs, the tool will output the initial command you typed for your review:</p> <blockquote> <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp> </blockquote> representing onscreen input options nesting a <samp> element inside a <kbd> element represents input which is based on text presented by the system, such as the names of menus and menu
items, or the names of buttons displayed on the screen.
...then, inside that, both the menu and menu
item names are contained within both <kbd> and <samp>, indicating an input which is selected from a screen widget.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
the rel stands for "relationship", and is probably one of the key features of the <link> element — the value denotes how the
item being linked to is related to the containing document.
...if
itemprop is present: flow content and phrasing content.
...if
itemprop is present: any element that accepts phrasing content.
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
if the
itemprop attribute is present: flow content, phrasing content.
... if the
itemprop attribute is set, the meta element provides user-defined metadata.
... note: the attribute name has a specific meaning for the <meta> element, and the
itemprop attribute must not be set on the same <meta> element that has any existing name, http-equiv or charset attributes.
contextmenu - HTML: Hypertext Markup Language
example html <body contextmenu="share"> <menu type="context" id="share"> <menu label="share"> <menu
item label="twitter" onclick="shareviatwitter()"></menu
item> <menu
item label="facebook" onclick="shareviafacebook()"></menu
item> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu.
... </li> <li contextmenu="changefont" id="fontsizing"> on this specific list element, you can change the size of the text by using the "increase/decrease font" actions from your context menu </li> <menu type="context" id="changefont"> <menu
item label="increase font" onclick="incfont()"></menu
item> <menu
item label="decrease font" onclick="decfont()"></menu
item> </menu> <li contextmenu="changeimage" id="changeimage"> on the image below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menu
item label="change image" onclick="changeimage()"></m...
...enu
item> </menu> </li> </ol> </body> javascript function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray!
Array.prototype.filter() - JavaScript
let arr = [ { id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }, { }, { id: null }, { id: nan }, { id: 'undefined' } ] let invalidentries = 0 function filterbyid(
item) { if (number.isfinite(
item.id) &&
item.id !== 0) { return true } invalidentries++ return false; } let arrbyid = arr.filter(filterbyid) console.log('filtered array\n', arrbyid) // filtered array // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] console.log('number of invalid entries = ', invalidentries) // number of invalid entries = 5 searching in array following example use...
... let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'] /** * filter array
items based on search criteria (query) */ function filter
items(arr, query) { return arr.filter(function(el) { return el.tolowercase().indexof(query.tolowercase()) !== -1 }) } console.log(filter
items(fruits, 'ap')) // ['apple', 'grapes'] console.log(filter
items(fruits, 'an')) // ['banana', 'mango', 'orange'] es2015 implementation const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'] /** * filter array
items based on search criteria (query) */ const filter
items = (arr, query) => { return arr.filter(el => el.tolowercase().indexof(query.tolowercase()) !== -1) } console.log(filter
items(fruits, 'ap')) // ['apple', 'grapes'] ...
...console.log(filter
items(fruits, 'an')) // ['banana', 'mango', 'orange'] affecting initial array (modifying, appending and deleting) the following examples tests the behavior of the filter method when the array is modified.
Array.prototype.flatMap() - JavaScript
for adding and removing
items during a map() flatmap can be used as a way to add and remove
items (modify the number of
items) during a map.
... in other words, it allows you to map many
items to many
items (by handling each input
item separately), rather than always one-to-one.
...simply return a 1-element array to keep the
item, a multiple-element array to add
items, or a 0-element array to remove the
item.
Array.prototype.splice() - JavaScript
syntax let arrdeleted
items = array.splice(start[, deletecount[,
item1[,
item2[, ...]]]]) parameters start the index at which to start changing the array.
...in this case, no element will be deleted but the method will behave as an adding function, adding as many element as
item[n*] provided.
...
item1,
item2, ...
Introduction to using XPath in JavaScript - XPath
; thisnode = iterator.iteratenext(); } } catch (e) { alert( 'error: document tree modified during iteration ' + e ); } snapshots when the specified result type in the resulttype parameter is either: unordered_node_snapshot_type ordered_node_snapshot_type the xpathresult object returned is a static node-set of matched nodes, which allows us to access each node through the snapshot
item(
itemnumber) method of the xpathresult object, where
itemnumber is the index of the node to be retrieved.
... snapshot example var nodessnapshot = document.evaluate('//phonenumber', documentnode, null, xpathresult.ordered_node_snapshot_type, null ); for ( var i=0 ; i < nodessnapshot.snapshotlength; i++ ) { alert( nodessnapshot.snapshot
item(i).textcontent ); } first node when the specified result type in the resulttype parameter is either: any_unordered_node_type first_ordered_node_type the xpathresult object returned is only the first found node that matched the xpath expression.
...eing confined to predefined prefixes in a namespace resolver), one could obtain them as follows: var xpathels = 'someelements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // grabs elements with any single attribute that has both the local name 'href' and the xlink namespace var thislevel = xml.evaluate(xpathels, xml, null, xpathresult.any_type, null); var this
itemel = thislevel.iteratenext(); xpathresult defined constants result type defined constant value description any_type 0 a result set containing whatever type naturally results from the evaluation of the expression.
Content Scripts - Archive of obsolete content
the following add-on shows a content script added by page-mod receiving a customevent sent from a context-menu
item when the context menu
item is clicked.
...mod.pagemod({ include: "*.mozilla.org", contentscript: 'function contextmenualert(href) {' + ' window.alert("the context menu was clicked on url:\\n" + href);' + '};' + 'window.addeventlistener("myaddonid-contextmenu-clicked",' + ' function(event){contextmenualert(event.detail);});' }); let cm = require("sdk/context-menu"); cm.
item({ label: "alert url", context: [ cm.urlcontext(["*.mozilla.org"]), cm.selectorcontext("a[href]") ], contentscript: 'self.on("click", function (node, data) {' + ' var event = new customevent("myaddonid-contextmenu-clicked",' + ' {detail:node.href});' + ' window.dispatchevent(even...
l10n - Archive of obsolete content
if you're supplying different localizations for a string depending on the number of
items (that is, whether to use a singular or plural form) then get() takes a second integer parameter which indicates the number of
items there are.
...if you're supplying different localizations for a string for singular or plural forms, this parameter is the number of
items there are in this case.
places/history - Archive of obsolete content
options : object optional options: name type count number the number of bookmark
items to return.
... events data the data event is emitted for every
item returned from a search.
Using XPCOM without chrome - Archive of obsolete content
below is an example, where we extend the xpcom module's unknown class with an nsinavbookmarkobserverinterface and one of its optional interface methods (on
itemchanged).
... // this removes the need to import ci and the xpcomutils const { class } = require("sdk/core/heritage"); const { unknown } = require('sdk/platform/xpcom'); const { placesutils } = require("resource://gre/modules/placesutils.jsm"); let bmlistener = class({ extends: unknown, interfaces: [ "nsinavbookmarkobserver" ], //this event most often handles all events on
itemchanged: function(bid, prop, an, nv, lm, type, parentid, aguid, aparentguid) { console.log("on
itemchanged", "bid: "+bid, "property: "+prop, "isanno: "+an, "new value: "+nv, "lastmod: "+lm, "type: "+type, "parentid:"+parentid, "aguid:"+aguid);0 // code to handle the event here } }); //we just have a class, but need an object.
Localization - Archive of obsolete content
plural forms in the sdk in the code, you supply an extra parameter alongside the identifier, describing how many
items there are: var _ = require("sdk/l10n").get; console.log(_("tomato_id")); console.log(_("tomato_id", 1)); console.log(_("tomato_id", 2)); console.log(_("tomato_id", 5)); console.log(_("tomato_id", .5)); in the .properties file for each language you can define a different localization for each plural form possible in that language, using the cldr keywords.
... "type": "string", "name": "monster_name", "value": "gerald", "title": "name" } ], "name": "monster-builder", "license": "mpl 2.0", "author": "me", "version": "0.1", "title": "monster builder", "id": "monster-builder@me.org", "description": "build your own monster" } in your "en-us.properties" file, include these two
items: monster_name_title= name monster_name_description= what is the monster's name?
Miscellaneous - Archive of obsolete content
var focusedcontrol; window.addeventlistener("load", function(e) { onwindowload(e); }, false); function onwindowload() { gbrowser.addeventlistener("load", onpageload, true); } function onpageload() { pagedoc = document.commanddispatcher.focusedwindow.document; var inputlist = pagedoc.getelementsbytagname('input'); for (var i=1; i<inputlist.length; i++) { inputlist.
item(i).
... addeventlistener("focus", function(e) {onfocusinput(e);}, false); inputlist.
item(i).
Sidebar - Archive of obsolete content
to open a page in the "viewwebpanelssidebar" from chrome code (browser/addon/extension) such as from menu
item, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a document separate from the main browser document (the sidebar is actually implemented as a xul browser element).
... resizing the sidebar programmatically in case you need to change the width of the sidebar, use the following code: function setsidebarwidth(newwidth) { var mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltree
item) .roottree
item .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.document.getelementbyid("sidebar-box").width=newwidth; } or function setsidebarwidth(newwidth) { window.top.document.getelementbyid("sidebar-box").width=newwidth; } you can also disable the ability to resize it manually, using the mouse, by hiding th...
XPath - Archive of obsolete content
emo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your browser does't support this script!"); return; } var fields = [];//store the results if(window.activexobject) { var tobj = obj.documentelement.selectnodes("/root/field/
item"); for(var i=0;i<tobj.length; i++) { fields.push(tobj[i].text); } } else { var tobj = obj.evaluate("/root/field/
item",obj.documentelement,null, xpathresult.any_type, null); var tmp = tobj.iteratenext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <f...
...ield> <
item>art_id</
item> <
item>psection</
item> <
item>qkind</
item> <
item>qtitle</
item> <
item>question</
item> <
item>pic</
item> <
item>answer1</
item> <
item>answer2</
item> <
item>answer3</
item> <
item>answer4</
item> </field> </root> //add by mooring 2008-11-15 16:16 china ...
Extension Versioning, Update and Compatibility - Archive of obsolete content
it varies depending on what type of add-on you are providing information for: for an extension or plugin bundle it must be urn:mozilla:extension:<id> for a theme it must be urn:mozilla:theme:<id> for any other type of add-on it must be urn:mozilla:
item:<id> note: prior to gecko 2.0 (firefox 4.0), the ordering of the versions within the <rdf:seq> is significant.
... within lists use the usual li tag for each list
item.
Inline options - Archive of obsolete content
boolint checkbox integer (use the attributes on and off to specify what values to store) integer textbox integer string textbox string color colorpicker string (in the #123456 format) file browse button and label string directory browse button and label string menulist menulist dependent on the menu
item values radio radio buttons dependent on the radio values control button no pref stored the pref attribute should have the full name of the preference to be stored.
...e="color" title="color"/> <!-- file and directory examples --> <setting pref="extensions.myaddon.file" type="file" title="file"/> <setting pref="extensions.myaddon.directory" type="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon.options1" type="menulist" title="options 1"> <menulist> <menupopup> <menu
item value="500" label="small"/> <menu
item value="800" label="medium"/> <menu
item value="1200" label="large"/> </menupopup> </menulist> </setting> <!-- radio button example (this example would be stored as a boolean) --> <setting pref="extensions.myaddon.options2" type="radio" title="options 2"> <radiogroup> <radio value="false" label="disabled"/> <radio value="true" label...
Extensions support in SeaMonkey 2 - Archive of obsolete content
seamonkey also uses different ids for the menu
items.
...ow menu popup menu_helppopup helppopup helppopup help menu popup urlbar icons to display a button with a menupopup in the urlbar-icons for both firefox and seamonkey 2.0, use this code: <hbox id="urlbar-icons"> <image popup="myext-menu"/> </hbox> <window id="main-window"> <menupopup id="myext-menu"> <menu
item label="menu
item"/> <menu
item label="menu
item"/> </menupopup> </window> instead of <hbox id="urlbar-icons"> <button type="menu"> <menupopup> <menu
item label="menu
item"/> <menu
item label="menu
item"/> <menu
item label="menu
item"/> </menupopup> </button> </hbox> technica...
Add-ons - Archive of obsolete content
some
items mentioned are strict guidelines, meaning that if you don't follow them then your add-on will not be approved on mozilla add-ons.
... other
items are recommendations.
Adding preferences to an extension - Archive of obsolete content
all we need to do is add a popupset describing the menu to the statusbar, as follows: <popupset> <menupopup id="stockmenu"> <menu
item label="refresh now" default="true" oncommand="stockwatcher.refreshinformation()"/> <menuseparator/> <menu
item label="apple (aapl)" oncommand="stockwatcher.watchstock('aapl')"/> <menu
item label="google (goog)" oncommand="stockwatcher.watchstock('goog')"/> <menu
item label="microsoft (msft)" oncommand="stockwatcher.watchstock('msft')"/> <menu
item label="yahoo!
... (yhoo)" oncommand="stockwatcher.watchstock('yhoo')"/> </menupopup> </popupset> each
item in the menu has a label property, which specifies the text displayed in the menu, as well as an oncommand property, which indicates the javascript code to execute when the user selects that
item.
Creating a status bar extension - Archive of obsolete content
our overlay file, status-bar-sample-1.xul, looks like this: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay > <overlay id="status-bar-sample-1-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="status-bar-sample-1" label="hello world" tooltiptext="sample status bar
item" /> </statusbar> </overlay> the first order of business in the status-bar-sample-1.xul file is to establish that this is in fact a xul file, and to set up a unique id for the overlay.
...we include properties to configure our new status bar panel the way we want, setting its text label to "hello world" and establishing a tool tip with the message "sample status bar
item" in it.
Install.js - Archive of obsolete content
install.js install.rdf (optional -- see above) code // install.js // xpiinstaller // by pike (heavily inspired by code from henrik gemal and stephen clavering) var xpiinstaller = { // --- editable
items begin --- extfullname: 'sample extension', // the name displayed to the user (don't include the version) extshortname: 'sampleext', // the leafname of the jar file (without the .jar part) extversion: '1.0', extauthor: 'insert-your-name-here', extlocalenames: null, // e.g.
...['classic', 'modern'] extpostinstallmessage: null, // set to null for no post-install message // --- editable
items end --- profileinstall: true, silentinstall: false, install: function() { var jarname = this.extshortname + '.jar'; var profiledir = install.getfolder('profile', 'chrome'); // parse http arguments this.parsearguments(); // check if extension is already installed in profile if (file.exists(install.getfolder(profiledir, jarname))) { if (!this.silentinstall) { install.alert('updating existing profile install of ' + this.extfullname + ' to version ' + this.extversion + '.'); } this.profileinstall = true; } else if (!this.silentinstall) { // ask user for install location, profile or...
How Mozilla finds its configuration files - Archive of obsolete content
you may use the following
items: a program to convert registry.dat file into a readable (and editable) xml file.
...usage: ./wr
itemozprofile.pl < registry.xml >registry.dat a ready-to-use registry.dat file pointing to h:\mozilla a registry.xml file pointing to h:\mozilla an example of a prefs.js file (to put into the user's h:\mozilla directory).
Finding the file to modify - Archive of obsolete content
to access it, go to the "tools" menu, select the "web development" submenu, then select the "dom inspector"
item.
... in the dom inspector window, go to the file menu, select the inspect a window submenu, then select the mozilla browser window
item (named after the page currently loaded in the browser).
Editor Embedding Guide - Archive of obsolete content
getcommandstate "state_enabled"(boolean) docommand no parameters note see also cmd_removelist cmd_dt inserts list
item (dt element).
... getcommandstate "state_enabled"(boolean) docommand no parameters note see also cmd_removelist cmd_dd inserts list
item (dd element).
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
must find a suitable xulrunner installation: mozilla mozilla = mozilla.getinstance(); greversionrange[] range = new greversionrange[1]; range[0] = new greversionrange("1.8.0", true, "1.9", false); // work with trunk nightly version 1.9a1 ^^ try { file grepath = mozilla.getgrepathwithproperties(range, null); locationprovider locprovider = new locationprovider(grepath); mozilla.in
itembedding(grepath, grepath, locprovider); } catch (filenotfoundexception e) { // this exception is thrown if gregrepathwithproperties cannot find a gre } catch (xpcomexception e) { // this exception is thrown if in
itembedding failed } locationprovider is a class provided by the java application.
... if your code cannot find the gre and keeps throwing filenotfoundexceptions during the getgrepathwithproperties(...) call, check whether you already registered the gre on your system: gre registration the in
itembedding method kicks off the embedding process, allowing the java application to work with xpcom and mozilla.
Creating a Help Content Pack - Archive of obsolete content
generally, each
item in the list will be a uri to an rdf file, but if you're more familiar with rdf you can also refer to a specific node within the rdf file using its rdf:id attribute.
...to have the help viewer search through these additional data sources, define another rdf:li element like so: <rdf:li> <rdf:description nc:panelid="search" nc:datasources="" nc:emptysearchtext="[no matching
items found.]" nc:emptysearchlink="chrome://foo/locale/bar.html"/> </rdf:li> nc:panelid should be set to search.
Simple Storage - Archive of obsolete content
if there are no notes, we'll show a// disabled "(empty)" menu
item.function updatejetpackmenu() { jetpack.menu.set({ label: "notes", menu: new jetpack.menu(notes.length > 0 ?
... if there's// a selection, add a note menu
item that makes a new note.
Proxy UI - Archive of obsolete content
right-click a menu is displayed that has the following
items: online (proxy: none) online (proxy: auto discover) online (proxy: auto url) online (proxy: manual) --- proxy configuration...
...selecting an enabled
item sets the menu selection and the proxy mode (network.proxy.type) selecting a disabled
item is not allowed.
RDF Datasource How-To - Archive of obsolete content
stantiate a tree control whose body is "rooted" to a resource (http://foo.bar.com/) that your datasource describes: <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/tr/wd-rdf-syntax#" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <tree datasources="rdf:my-datasource" ref="http://foo.bar.com/"> <template> <treechildren> <tree
item uri="..."> <treerow> <treecell> <text value="rdf:http://home.netscape.com/nc-rdf#name" /> </treecell> <treecell> <text value="rdf:http://home.netscape.com/nc-rdf#url" /> </treecell> </treerow> </tree
item> </treechildren> </template> <treehead> <tree
item> <treecell>n...
...ame</treecell> <treecell>url</treecell> </tree
item> </treehead> <!-- treechildren built _here_ --> </tree> </window> the important "magic attributes" have been called out in bold, above: datasources="rdf:my-datasource".
Space Manager Detailed Design - Archive of obsolete content
the caller also provides a collection of banddata objects (an array) and the number of
items that the collection can handle.
... check the size of the collection again, if there is no room left then estimate the number of
items requires as the current count + twice the number of bands below the band in question plus one.
Creating XPI Installer Modules - Archive of obsolete content
since we are not updating the mozilla ui to provide special access to this window (e.g., an
item in the tasks menu or elsewhere), the measure of the success of the installation of the barley package is that the user can, as before, invoke our software by using a special startup option: mozilla -chrome chrome://barley/content this option tells mozilla to load a chrome other than the default, which is the main browser window.
...in the following listing, the
items in red are particular to the barley package and can be edited for your own distribution: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the packages being supplied --> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:barley"/> </rdf:seq> <!-- package ...
closemenu - Archive of obsolete content
« xul reference home closemenu type: one of the values below indicates if the menu closes when the menu
item is activated.
... single the menu the
item is contained within is closed, but the parent menus remain open.
current - Archive of obsolete content
« xul reference home current type: boolean this attribute will be set to true if the list
item is the current
item.
...to change the currently selected
item in a listbox, use the listbox property selected
item.
currentset - Archive of obsolete content
« xul reference home currentset not in seamonkey 1.x type: comma-separated string the current set of displayed
items on the toolbar.
...the value of this attribute should be a comma-separated list of
item ids from the toolbarpalette or, additionally, any of the following strings: "separator", "spring", "spacer".
defaultset - Archive of obsolete content
« xul reference home defaultset not in seamonkey 1.x type: comma-separated list of
item ids the default set of displayed
items on the toolbar.
... this should be set to a comma-separated list of
item ids from the toolbarpalette.
disableKeyNavigation - Archive of obsolete content
« xul reference home disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific
items within the element by pressing keys corresponding to letters in the
item's label.
... this is done incrementally, so typing more letters with select more specific
items.
disableautoselect - Archive of obsolete content
« xul reference home disableautoselect type: boolean if this attribute is true or omitted, the selected
item on the menu will update to match what the user entered in the textbox.
... if the text does not match any of the
items in the list, the menu selection is cleared.
label - Archive of obsolete content
for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
... see also tree
item.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="alert(document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="document.getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click" oncommand="document.getelementbyid('mycheckbox').setattribute('label','still not checked');"/> <button label="show label of checkbox" oncommand="alert( document.getelementbyid('mycheckbox').getattribute('label') )"/> ...
onpopuphidden - Archive of obsolete content
example: <menupopup id="top" onpopuphidden="console.log('the onpopuphidden method of id=top was called.');"> <menu
item label="
item 1"/> <menu
item label="
item 2"/> <menu id="submenu1" label="submenu 1"> <menupopup id="submenu1-popup"> <menu
item label="submenu1
item 1"/> <menu
item label="submenu1
item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menu
item label="submenu2
item 1"/> <menu
item label="submenu2...
...
item 2"/> </menupopup> </menu> <menupopup/> with the above structure, the onpopuphidden method of <menupopup id="top"> will be called every time either <menupopup id="submenu1-popup"> or <menupopup id="submenu2-popup"> are hidden.
Menus - Archive of obsolete content
to do this, the new menu will need to be laid over the existing menu which the
item should be displayed upon.
... spell-no-suggestions the no spelling suggestions
item - notable as it is the first
item on the context menu.
How to implement a custom XUL query processor component - Archive of obsolete content
ber for the id this._id = math.random(100000).tostring(); } templateresult.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsixultemplateresult]), // private storage _data: null, // right now our results are flat lists, so no containing/recursion take place iscontainer: false, isempty: true, mayprocesschildren: false, resource: null, type: "simple-
item", get id() { return this._id; }, // return the value of that bound variable such as ?name getbindingfor: function(avar) { // strip off the ?
... from the beginning of the name var name = avar.tostring().slice(1); return this._data[name]; }, // return an object instead of a string for convenient comparison purposes // or null to say just use string value getbindingobjectfor: function(avar) { return null; }, // called when a rule matches this
item.
ensureElementIsVisible - Archive of obsolete content
« xul reference home ensureelementisvisible( element ) return type: no return value if the specified element is not currently visible to the user, the displayed
items are scrolled so that it is.
... if the
item is already visible, no scrolling occurs.
ensureIndexIsVisible - Archive of obsolete content
« xul reference home ensureindexisvisible( index ) return type: no return value if the
item at the specified index is not currently visible to the user the displayed
items are scrolled so that it is.
... if the
item is already visible, no scrolling occurs.
getResultAt - Archive of obsolete content
« xul reference home getresultat( index ) obsolete since gecko 26 return type: nsiautocomplete
item returns the result
item at the specified index.
... the
item will be a value of type nsiautocomplete
item.
invertSelection - Archive of obsolete content
« xul reference home invertselection() return type: no return value reverses the selected state of all
items.
... selected
items become deselected, and deselected
items become selected.
timedSelect - Archive of obsolete content
« xul reference home timedselect(
item, timeout ) return type: no return value selects the
item specified by the argument
item after the number of milliseconds given by the timeout argument.
... all other
items are deselected.
MoveResize - Archive of obsolete content
for instance, the size of a menu will be large enough to fit all of the
items within the menu.
...arrows will appear on the ends of the menu to allow a user to scroll through the
items.
accessibleType - Archive of obsolete content
xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xullisthead 1024 xullistheader 1025 xullist
item 100c xulmenubar 100d xulmenu
item 100e xulmenupopup 100f xulmenuseparator 1010 xulpane 1011 xulprogressmeter 1012 xulscale 1013 xulstatusbar 1014 ...
... 1016 xultab 1017 xultabbox 1018 xultabs 1019 xultext 101a xultextbox 101b xulthumb 101c xultree 101d xultreecolumns 101e xultreecolumn
item 101f xultoolbar 1020 xultoolbarseparator 1021 xultooltip 1022 xultoolbarbutton 1023 ...
currentSet - Archive of obsolete content
« xul reference currentset not in seamonkey 1.x type: comma-separated list of strings holds a comma-separated list of the ids of the
items currently on the toolbar.
... you may change the current set of
items by setting this property.
RDF Modifications - Archive of obsolete content
this type of statement can only cause a change when an
item is being added or removed from a container.
...now, the potential result so far is: (?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?description = 'one of the thirty or so egyptian obelisks', ?start = http://www.xulplanet.com/rdf/myphotos, ?title = 'obelisk') as you can see, the result looks to have all the information necessary to create a new
item in the output.
Using Multiple Queries to Generate More Results - Archive of obsolete content
<template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?
item"/> </query> <rule> <binding subject="?
item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <label uri="?
item" value="?title" class="header"/> </action> </rule> </queryset> <queryset> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/people" object="?people"/> ...
... <member container="?people" child="?
item"/> </query> <rule> <binding subject="?
item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <label uri="?
item" value="?title"/> </action> </rule> </queryset> </template> you can view the example.
Adding more elements - Archive of obsolete content
<hbox> <menulist id="searchtype"> <menupopup> <menu
item label="name"/> <menu
item label="size"/> <menu
item label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menu
item label="is"/> <menu
item label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down b...
...<spacer style="height: 10px"/> <hbox> <menulist id="searchtype"> <menupopup> <menu
item label="name"/> <menu
item label="size"/> <menu
item label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menu
item label="is"/> <menu
item label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> <spacer...
Anonymous Content - Archive of obsolete content
for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menu
item label="1000"/> <menu
item label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
...the resulting content would be: <menu class="dropbox"> <menupopup> <menu
item label="1000"/> <menu
item label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others.
Broadcasters and Observers - Archive of obsolete content
in the former case, menu
items and toolbar buttons would need to be disabled when there was no page to go back to, or no text to cut or delete.
...below, some additional observers are defined: <broadcaster id="offline_command" label="offline" accesskey="f"/> <keyset> <key id="goonline_key" observes="offline_command" modifiers="accel" key="o"/> </keyset> <menu
item id="offline_menu
item" observes="offline_command"/> <toolbarbutton id="offline_toolbarbutton" observes="offline_command"/> in this example, both the label and the accesskey will be forwarded from the broadcaster to the key, menu
item and the toolbar button.
Custom Tree Views - Archive of obsolete content
for instance, 5000 rows of tree
items would load too slowly.
...naturally, since a custom tree view is being used, the content tree view will not be used, so the tree
item, treerow, and treecell elements will have no purpose since the custom view will get its data from elsewhere.
Scrolling Menus - Archive of obsolete content
creating a large menu you might wonder what happens if you create a menu with a lot of commands on it, such that all the
items won't fit on the screen at once.
... mozilla will provide a scrolling mechanism that will allow you to scroll through the
items.
Skinning XUL Files by Hand - Archive of obsolete content
re info); css2 also provides some new ways to group elements for styling, which we summarize briefly here, because they appear in mozilla with some frequency, but reserve for another article: pseudo-class parent-child element:pseudo-class { attribute: value; } parent > child { attribute: value; } button:hover { border: 1px; } menu#file > menu
item { font-weight: bold; } pseudo-classes reflect states of the element: when the mouse moves over a button, for example, the appropriate pseudo-class stylesheet rules are applied.
...similarly, the next
item uses the id selector to apply style information to a single xul element.
Toolbars - Archive of obsolete content
toolbar a single toolbar that contains toolbar
items such as buttons.
...inside it are placed the individual toolbar
items, usually buttons, but they can be other elements.
XUL Parser in Python/source - Archive of obsolete content
def strip(snip): t = re.sub('http://.*?\s', '', snip) return t class xulparser(xmllib.xmlparser): def unknown_starttag(self, t, a): name = strip(t) if name not in el_list: el_list[name] = {} for attr,val in a.
items(): el_list[name][strip(attr)] = strip(val) def syntax_error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic table of xul e...
...lements</h3>') w.write('<table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_list.keys() elements.sort() for
item in elements: w.write('<tr><td class="head">' +
item + '</td></tr>\n') for a in el_list[
item]: w.write('<tr><td class="at">' + a + '</td>') w.write('</table></html>\n') w.close() ...
caption - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
colorpicker - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected
item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
content - Archive of obsolete content
cuando use un árbol con los atributos flags ("banderas"), establezca dont-build-content, ("no almacenar contenido"), use tree
item en su lugar.
...thus, nested elements will not match because they are directly inside a tree
item.
description - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
elements - Archive of obsolete content
ding 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 list
item m member menu menubar menu
item menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlist
item resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar...
... statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton toolbargrippy toolbar
item toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols tree
item treerow treeseparator triple v vbox w window wizard wizardpage ...
label - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not.
... visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
listcol - Archive of obsolete content
examples example <!-- a two column listbox with one column flexible --> <listbox> <listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="1"/> <listcol/> </listcols> <list
item> <listcell label="buck"/> <listcell label="rogers"/> </list
item> <list
item> <listcell label="john"/> <listcell label="painter"/> </list
item> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex,...
...e, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcols, listhead, listheader, list
item ...
listcols - Archive of obsolete content
example <!-- creates a two column listbox --> <listbox> <listcols> <listcol flex="1"/> <listcol flex="1"/> </listcols> <list
item> <listcell label="buck"/> <listcell label="rogers"/> </list
item> <list
item> <listcell label="john"/> <listcell label="painter"/> </list
item> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex,...
...de, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listhead, listheader, list
item ...
listhead - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...de, 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, list
item ...
notificationbox - Archive of obsolete content
the notification element is used for each notification, and will be created automatically for each
item.
... removenotification(
item ) return type: element remove a notification, displaying the next one if the removed
item is the current one.
preference - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
...a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected
item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
<statusbarpanel> - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
...for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
toolbarseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] creates a separator between groups of toolbar
items.
..., issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbar
item, toolbarpalette, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarspacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a space between toolbar
items.
...sequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbar
item, toolbarpalette, toolbarseparator, toolbarset, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarspring - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a flexible space between toolbar
items.
..., issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbar
item, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbox interfaces nsiaccessibleprovider ...
toolbox - Archive of obsolete content
you can supply a comma-separated list of toolbar
item ids as the second argument to add some
items by default.
... related elements toolbar, toolbarbutton, toolbargrippy, toolbar
item, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring interfaces nsiaccessibleprovider ...
treecell - Archive of obsolete content
for an editable menu
item element the value of this attribute is copied to the menulist.value property upon user selection of the menu
item.
..., isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, tree
item, treerow and treeseparator.
Debugging a XULRunner Application - Archive of obsolete content
add ui to open venkman to your window (it could be a menu
item or a toolbar button).
... if your pages are not in the loaded script window, uncheck the menu
item "debug\exclude browser files" and find them in open windows tab when opening a js file in venkman, the code is unformatted and i get the following error in the jsconsole...
MacFAQ - Archive of obsolete content
for command-line work, you would call on: /applications/(vendor)/(name).app/contents/macos/xulrunner ui notes menus to enable your application quit command to work with the application menu (the one to the right of the blue apple), you need to give your quit menu
item an id of "menu_filequit
item".
... to enable the mac "about" menu make sure that you use "aboutname" as the id for your menu
item to enable the mac "preferences" menu make sure that you use "menu_preferences" as the id for your options/preferences menu
item toolbars mac windows have a small "jelly bean" button in the top right corner.
Archived Mozilla and build documentation - Archive of obsolete content
calicalendarviewcontroller a calicalendarviewcontroller provides a way for a calicalendarview to create, modify, and delete
items.
... creating a mozilla extension a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an
item to the context menu for opening multiple links in a document or selection).
Proposal - Archive of obsolete content
draft exists icbm let's you add latitude and longitude info to an
item.
...draft exists source guid when an rss
item is posted in response to a previous
item (called the source
item) rss 2.0 offers the source element which allows the
item to refer to the rss feed which contains the source
item.
0.90 - Archive of obsolete content
9/" > <channel> <title>mozilla dot org</title> <link>http://www.mozilla.org</link> <description>the mozilla organization web site</description> </channel> <image> <title>mozilla</title> <url>http://www.mozilla.org/images/moz.gif</url> <link>http://www.mozilla.org</link> </image> <
item> <title>new status updates</title> <link>http://www.mozilla.org/status/</link> </
item> <
item> <title>bugzilla reorganized</title> <link>http://www.mozilla.org/bugs/</link> </
item> <
item> <title>mozilla party, 2.0!</title> <link>http://www.mozilla.org/party/1999/</link> </
item> ...
... <
item> <title>unix platform parity</title> <link>http://www.mozilla.org/build/unix.html</link> </
item> <
item> <title>npl 1.0m published</title> <link>http://www.mozilla.org/npl/npl-1.0m.html</link> </
item> </rdf:rdf> note that here, rss is being used to list sections of the web site.
E4X for templating - Archive of obsolete content
d}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} sorting /* @param {xmllist} xmllist the xmllist to sort @param {function} h the sorting handler */ function sort (xmllist, h) { var k, arr=[], ret = <></>; for (k in xmllist) { if (xmllist.hasownproperty(k)) { arr.push(xmllist[k]); } } arr.sort(h).foreach(function (
item) { if (typeof
item === 'xml') { ret +=
item; } else if (typeof
item === 'string') { ret += new xml(
item); } else { var ser = (new xmlserializer()).serializetostring(
item); ret += new xml(ser); } }); return ret; } example: var fruits = <fruits> <
item>pear</
item> <
item>banana</
item> ...
... <
item>grapes</
item> </fruits>; alert( // using a javascript 1.8 expression closure <output> {sort(fruits.*, function (a, b) a.text() > b.text() /* text() call may not be necessary */ )} </output>.toxmlstring() ); /* <output> <
item>banana</
item> <
item>grapes</
item> <
item>pear</
item> </output> */ the above utility also works if the input is an htmlcollection, an array of strings, an array of dom objects, or an array of e4x objects (assuming the comparison function is changed or adapted accordingly).
Iterator - Archive of obsolete content
methods iterator.prototype.next returns next
item in the [property_name, property_value] format or property_name only.
... it throws stopiteration if there are no more
items.
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
the debug.msupdateasynccallbackrelation function updates the relationship status between a synchronous work
item and the associated asynchronous operation.
... remarks the synchronous work
item is typically the callback function for the asynchronous operation.
Enumerator.atEnd - Archive of obsolete content
the atend method returns true if the current
item is the last one in the collection, the collection is empty, or the current
item is undefined.
... example in following code, the atend method is used to determine if the end of a list of drives has been reached: function showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.
item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); ...
Mozilla XForms Specials - Archive of obsolete content
(limitation tracked in bug 313111)pseudo element support there is no support for the pseudo elements (::value, ::repeat-
item, and ::repeat-index ).
... instead you will have to use the following normal classes instead: xf-value xf-repeat-
item xf-repeat-index for example, to target the value element of an input control use: @namespace xf url("http://www.w3.org/2002/xforms"); xf|input .xf-value { ...
XUL Parser in Python - Archive of obsolete content
the xml namespace support in xmllib was resolving the xul and html namespaces in a very annoying way, so i have an additional function, strip(), that takes off the whole namespace that xmllib is trying to tack onto the front of each
item it finds in the xml.
... or, since the dictionary is already storing the values of all the attributes it finds, you can write the values of a particular attribute (e.g., id) to the results file by checking the attribute in sys.argv[1]: for attr in a.keys(): if strip(attr) == sys.argv[1]: el_list[name][strip(attr)] = strip(a[attr]) and writing thevalues to the html results file instead of thekeys: for
item in elements: w.write('<tr><td class="head">' +
item + '</td></tr>\n') for a in el_list[
item].values(): w.write('<tr><td class="at">' + a + '</td>') with these modifications, the script creates an output more like a periodic table of xul elements.
Mobile touch controls - Game development
input events instead of using the pointers directly it is also possible to listen for this.game.input events, like ondown, onup, ontap and onhold: this.game.input.ondown.add(
itemtouched, this); function
itemtouched(pointer) { // do something } the
itemtouched() function will be executed when the ondown event is dispatched by touching the screen.
... this approach uses the generally available this.game.input object, but you can also detect the actions on any game objects like sprites or buttons by using oninputover, oninputout, oninputdown, oninputup, ondragstart, or ondragstop: this.button.events.oninputover.add(
itemtouched, this); function
itemtouched(button, pointer) { // do something } that way you'll be able to attach an event to any object in the game, like the player's ship, and react to the actions performed by the user.
Cross Axis - MDN Web Docs Glossary: Definitions of Web-related terms
alignment of
items on the cross axis is achieved with the align-
items property on the flex container or align-self property on individual
items.
... learn more property reference align-content align-
items align-self flex-wrap flex-direction flex further reading css flexbox guide: basic concepts of flexbox css flexbox guide: aligning
items in a flex container css flexbox guide: mastering wrapping of flex
items ...
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
if you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column tracks to hold grid
items, then extra tracks will be created in the implicit grid.
...the third row on the grid is an implicit grid row track, formed due to their being more than the six
items which fill the explicit tracks.
Grid container - MDN Web Docs Glossary: Definitions of Web-related terms
using the value grid or inline-grid on an element turns it into a grid container using css grid layout, and any direct children of this element become grid
items.
...the direct children can now lay themselves out on any explicit grid defined using grid-template-columns and grid-template-rows, or on the implicit grid created when an
item is placed outside of the explicit grid.
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
should become: var href = getxmlbaselink (/* xlink sans xml:base */ xinclude.getattribute('href'), /* element to query from */ xinclude); function resolvexincludes(docu) { // http://www.w3.org/tr/xinclude/#xml-included-
items var xincludes = docu.getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'include'); if (xincludes) { for (i=0; i < xincludes.length; i++) { var xinclude = xincludes[i]; var href = xinclude.getattribute('href'); var parse = xinclude.getattribute('parse'); var xpointer = xinclude.getattribute('xpointer'); var encodi...
... xpathresult.ordered_node_snapshot_type, null ); var a = []; for(var k = 0; k < xpathresult.snapshotlength; k++) { a[k] = xpathresult.snapshot
item(k); } responsenodes = a; } else { // otherwise, the response must be a single well-formed document response responsenodes = [response.documentelement]; // put in array so can be treated the same way as the above } ...
Advanced styling effects - Learn web development
thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four
items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
... note: there is another
item that can be set in the box-shadow value — another length value can be optionally set just before the color value, which is a spread radius.
Overflowing content - Learn web development
in addition, some of the methods discussed in sizing
items in css may help you create boxes that scale better with varying amounts of content.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing
items in css images, media, and form elements styling tables debugging css organizing your css ...
Combinators - Learn web development
for example if we want to select list
items with a class of "a", which are direct children of a <ul>, i could use the following.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing
items in css images, media, and form elements styling tables debugging css organizing your css ...
Pseudo-classes and pseudo-elements - Learn web development
::marker matches the marker box of a list
item, which typically contains a bullet or number.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing
items in css images, media, and form elements styling tables debugging css organizing your css ...
Styling tables - Learn web development
we've set some padding on the <th> and <td> elements — this gives the data
items some space to breathe, making the table look a lot more legible.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing
items in css images, media, and form elements styling tables debugging css organizing your css ...
CSS building blocks - Learn web development
the sub-articles are as follows: type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align
items with other
items.
... sizing
items in css in the various lessons so far you have come across a number of ways to size
items on a web page using css.
Practical positioning examples - Learn web development
the unordered list contains three list
items with links inside, which will become the actual tabs to click on for displaying our content panels.
... next, we'll style the horizontal tabs — the list
items are all floated left to make them sit in a line together, their list-style-type is set to none to get rid of the bullets, and their width is set to 150px so they will comfortably fit across the info-box.
CSS layout - Learn web development
flexbox flexbox is a one-dimensional layout method for laying out
items in rows or columns.
...
items flex to fill additional space and shrink to fit into smaller spaces.
How to build custom form controls - Learn web development
adding: 0 4px; margin: 0 -4px 0 4px; } .styledselect:focus-within { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:focus-within input:checked + label { background-color: #333; color: #fff; width: 100%; } with no javascript, and just a little bit of css, we are able to style the list of radio buttons to display only the checked
item.
... when the focus is within the <ul> in the <fieldset>, the list opens up, and the up and down (and left and right) arrows work to select the previous and next
items.
Your first form - Learn web development
forms allow users to enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another
item to a list, or show or hide a ui feature).
... on the server side, the script at the url "/my-handling-form-page" will receive the data as a list of 3 key/value
items contained in the http request.
Advanced text formatting - Learn web development
the purpose of these lists is to mark up a set of
items and their associated descriptions, such as terms and definitions, or questions and answers.
...ul> <li>tel: 01234 567 890</li> <li>email: me@grim-north.co.uk</li> </ul> </address> note that something like this would also be ok, if the linked page contained the contact information: <address> <p>page written by <a href="../authors/chris-mills/">chris mills</a>.</p> </address> superscript and subscript you will occasionally need to use superscript and subscript when marking up
items like dates, chemical formulae, and mathematical equations so they have the correct meaning.
Introduction to events - Learn web development
in the case of the web, events are fired inside the browser window, and tend to be attached to a specific
item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire browser window.
... a good example is a series of list
items — if you want each one to pop up a message when selected, you can set the click event listener on the parent <ul>, and events will bubble from the list
items to the <ul>.
Making decisions in your code — conditionals - Learn web development
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 list
item = document.createelement('li'); list
item.textcontent = i; list.appendchild(list
item); } } 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;...
...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 list
item = document.createelement(\'li\');\n list
item.textcontent = i;\n list.appendchild(list
item);\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...
JavaScript First Steps - Learn web development
arrays in the final article of this module, we'll look at arrays — a neat way of storing a list of data
items under a single variable name.
... here we look at why this is useful, then explore how to create an array, retrieve, add, and remove
items stored in an array, and more besides.
Server-side web frameworks - Learn web development
on each iteration the template displays the team's team_name value in a list
item.
... many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on express, including feathers,
itemsapi, keystonejs, kraken, loopback, mean, and sails.
Command line crash course - Learn web development
for example, if you wanted to go to a directory called src, located inside a directory called project, located on the desktop, you could type these three commands to get there from your home folder: cd desktop cd project cd src but this a waste of time — instead, you can type one command, with the different
items in the path separated by forward slashes, just like you do when specifying paths to images or other assets in css, html, or javascript code: cd desktop/project/src note that including a leading slash on your path makes the path absolute, for example /users/your-user-name/desktop.
... try running this now in your terminal: ls this gives you a list of the files and directories in your present working directory, but the information is really basic — you only get the name of each
item present, not whether it is a file or a directory, or anything else.
Chrome registration
for example, the order of the "ok" and "cancel" buttons in a dialog is different, as well as the names of some
items.
... structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-
item extension packaging: specific information about multiple-
item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration ...
The Firefox codebase: CSS Guidelines
using descendant selectors is good practice for performance when possible: for example: .autocomplete-
item[selected] > .autocomplete-
item-title would be more efficient than .autocomplete-
item[selected] .autocomplete-
item-title overriding css before overriding any css rules, check whether overriding is really needed.
... graytext: used on disabled
items as text color.
Limitations of frame scripts
it looks something like this: window.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltree
item) .roottree
item .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindow); this will no longer work.
... in the content process the root tree
item is an nsitabchild, that cannot be converted to an nsidomwindow, so the second getinterface call here will fail.
Limitations of frame scripts
it looks something like this: window.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltree
item) .roottree
item .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindow); this will no longer work.
... in the content process, the root tree
item is an nsitabchild, that cannot be converted to an nsidomwindow, so the second getinterface call here will fail.
Getting from Content to Layout
"frame construction
items" are queued for each change.
... these
items are then examined in relation to the location in the content tree that is being modified and either the relevant frames are created/destroyed or the logic moves up to the parent frame.
How to implement a custom autocomplete search component
() { return this._searchstring; }, /** * @return {number} the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure) * result_nomatch (no matches found) * result_success (matches found) */ get searchresult() { return this._searchresult; }, /** * @return {number} the index of the default
item that should be entered if * none is selected */ get defaultindex() { return this._defaultindex; }, /** * @return {string} description of the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * @return {number} the number of matches */ get matchcount() { return this._results.length; }, /** * @return {...
...t searchstring() { return this._searchstring; }, /** * the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure) * result_nomatch (no matches found) * result_success (matches found) */ get searchresult() { return this._searchresult; }, /** * index of the default
item that should be entered if none is selected */ get defaultindex() { return this._defaultindex; }, /** * a string describing the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * the number of matches */ get matchcount() { return this._results.length; }, /** * get the value of the result at the given inde...
Localization content best practices
for example, if you're adding a new menu
item in settings on android, don't use the same string for the menu
item and the following screen header.
...therefore, for both correctness and consistency within en-us, please leave out the trailing periods for these
items.
Mozilla DOM Hacking Guide
indeed, it will forward the call history[1] to history.
item(1), which is defined in the idl and easily coded.
...the array uses two macros to define its
items: ns_define_classinfo_data and ns_define_classinfo_data_with_name.
An overview of NSS Internals
the common structure to store such an untyped block is sec
item, which contains a size and an untyped c pointer variable.
...performing an operation often involves allocating many individual data
items, and the code might be required to abort a task at many positions in the logic.
nss tech note7
struct myrsapublickey { sec
item m_modulus; sec
item m_exponent; } inpubkey; sec
item derpubkey; seckeypublickey *pubkey; const sec_asn1template myrsapublickeytemplate[] = { { sec_asn1_sequence, 0, null, sizeof(myrsapublickey) }, { sec_asn1_integer, offsetof(myrsapublickey,m_modulus), }, { sec_asn1_integer, offsetof(myrsapublickey,m_exponent), }, { 0, } }; prarenapool *arena; /* * point inpubkey.m_modulus...
... */ inpubkey.m_modulus.type = siunsignedinteger; inpubkey.m_exponent.type = siunsignedinteger; arena = port_newarena(der_default_chunksize); sec_asn1encode
item(arena, &derpubkey, &inpubkey, myrsapublickeytemplate); pubkey = seckey_importderpublickey(&derpubkey, ckk_rsa); port_freearena(arena, pr_false); public keys may be extracted from certificates.
PKCS 7 functions
and later sec_pkcs7createcertsonly mxr 3.3 and later sec_pkcs7createdata mxr 3.2 and later sec_pkcs7createencrypteddata mxr 3.2 and later sec_pkcs7createenvelopeddata mxr 3.2 and later sec_pkcs7createsigneddata mxr 3.2 and later sec_pkcs7decode
item mxr 3.2 and later sec_pkcs7decoderabort mxr 3.9 and later sec_pkcs7decoderfinish mxr 3.2 and later sec_pkcs7decoderstart mxr 3.2 and later sec_pkcs7decoderupdate mxr 3.2 and later sec_pkcs7decryptcontents mxr 3.2 and later sec_pkcs...
...7destroycontentinfo mxr 3.2 and later sec_pkcs7encode mxr 3.3 and later sec_pkcs7encode
item mxr 3.9.3 and later sec_pkcs7encoderabort mxr 3.9 and later sec_pkcs7encoderfinish mxr 3.2 and later sec_pkcs7encoderstart mxr 3.2 and later sec_pkcs7encoderupdate mxr 3.2 and later sec_pkcs7getcertificatelist mxr 3.2 and later sec_pkcs7getcontent mxr 3.2 and later sec_pkcs7getencryptionalgorithm mxr 3.2 and later sec_pkcs7getsignercommonname mxr 3.4 and later sec_pkcs7getsigneremailaddress mxr ...
OLD SSL Reference
types and structures certcertdbhandle certcertificate pk11slotinfo sec
item seckeyprivatekey secstatus managing sec
item memory sec
item_free
item sec
item_zfree
item chapter 4 ssl functions this chapter describes the core ssl functions.
...icates cert_dupcertificate cert_destroycertificate getting certificate information cert_findcertbyname cert_getcertnicknames cert_freenicknames cert_getdefaultcertdb nss_findcertkeatype comparing sec
item objects sec
item_compare
item chapter 6 key functions this chapter describes two functions used to manipulate private keys and key databases such as the key3.db database provided with communicator.
Index
353 js_idarrayget jsapi reference, reference, référence(2), spidermonkey js_idarrayget gets the
item in the specified index of the id array pointed to by ida.
... 387 js_lockgcthing jsapi reference, obsolete, spidermonkey js_lockgcthing is a deprecated function that protects a specified
item, thing, associated with an executable script context, cx, from garbage collection.
JSVAL_IS_DOUBLE
example the following code snippet illustrates how a javascript variable, my
item, is conditionally tested in an if statement to see if it is a js double data type.
... if (jsval_is_double(my
item)) { .
JSVAL_IS_INT
example the following code snippet illustrates how a javascript variable, my
item, is conditionally tested in an if statement to see if it is a js integer data type.
... if (jsval_is_int(my
item)) { .
JSVAL_IS_NULL
(note: jsval_is_object(jsval_null) is also true.) example the following code snippet illustrates how a javascript variable, my
item, is conditionally tested in an if statement to see if it contains a null value.
... if (jsval_is_null(my
item)) { ...
JSVAL_IS_NUMBER
example the following code snippet illustrates how a javascript variable, my
item, is conditionally tested in an if statement to see if it is a js integer or double value.
... if (jsval_is_number(my
item)) { ...
JSVAL_IS_STRING
example the following code snippet illustrates how a javascript variable, my
item, is conditionally tested in an if statement to see if it is a string.
... if (jsval_is_string(my
item)) { ...
JSVAL_IS_VOID
example the following code snippet illustrates how a javascript variable, my
item, is conditionally tested in an if statement to see if it is void.
... if (jsval_is_void(my
item)) { ...
JS_IdArrayGet
this article covers features introduced in spidermonkey 17 get the
item of a jsidarray.
... description js_idarrayget gets the
item in the specified index of the id array pointed to by ida.
TPS Tests
every sync should have a log and every
item synced should have a record.
...for example, most errors involving bookmarks look like "places
item not found in expected index", which could mean a number of issues.
XUL Accessibility
name the following rules to generate accessible name are applied: check aria-labelledby attribute, name is generated from elements pointed by aria-labelledby attribute <description id="descr1">label1</description> <description id="descr2">label2</description> <textbox aria-labelledby="descr1 descr2" /> if the element implements nsidomxullabeledcontrolelement or nsidomxulselectcontrol
itemelement interface then it is used label property if the element doesn't implement nsidomxulselectcontrolelement then label attribute is used if neighbour of the element has label element pointing to this element by the control attribute, if the label element is found then use value attribute or its content.
... <label value="it's label for control" control="control" /> <hbox role="grouping" id="control" /> get tooltiptext attribute if the element is anonymous child of the element that is the direct child of toolbar
item element or the element is direct child of toolbar
item element then title attribute of toolbar
item element is used (currently it's used in firefox ui only) if the element has aria role and the role allows to aggregate name from subtree of element then generate name from subtree of the element description the following rules to generate accessible description are applied: check aria-describedby attribute, description is generated from elements pointed by aria-describedby attribute <description id="descr1">label1</description> <description id="descr2">label2</description> <textbo...
imgIContainer
nsiframe getrootlayoutframe(); violates the xpcom interface guidelines pruint16 gettype(); violates the xpcom interface guidelines void init(in print32 awidth, in print32 aheight, in imgicontainerobserver aobserver); obsolete since gecko 2.0 void lockimage(); void removeframe(in gfxiimageframe
item); obsolete since gecko 1.9.2 void requestdecode(); void requestdiscard(); void requestrefresh([const] in timestamp atime); violates the xpcom interface guidelines void resetanimation(); void restoredatadone(); native code only!
...exceptions thrown missing exception missing description removeframe() obsolete since gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) void removeframe( in gfxiimageframe
item ); parameters
item missing description exceptions thrown missing exception missing description requestdecode() void requestdecode(); parameters none.
GroupPosition
used for tree
items, list
items, tab panel labels, radio buttons, etc.
... void groupposition( out long agrouplevel, out long asimilar
itemsingroup, out long apositioningroup ); parameters agrouplevel 1-based, similar to aria aria-level property asimilar
itemsingroup 1-based, similar to aria aria-setsize property, inclusive of the current
item.
nsIAccessible
used for tree
items, list
items, tab panel labels, radio buttons, etc.
...usually alt+letter, or just the letter alone for menu
items.
nsIBlocklistService
isaddonblocklisted() determine if an
item is blocklisted.
... return value true if the
item is blocklisted, otherwise false.
nsICategoryManager
var categorymanager = components.classes["@mozilla.org/categorymanager;1"] .getservice(components.interfaces.nsicategorymanager); var enumerator = categorymanager.enumeratecategories(); var categories = []; while (enumerator.hasmoreelements()) { var
item = enumerator.getnext(); var category =
item.queryinterface(components.interfaces.nsisupportscstring) categories.push(category.tostring()); } categories.sort(); var categoriesstring = categories.join("\n"); dump(categoriesstring + "\n"); print out a list of app-startup entries this example prints out a list of entries of "app-startup" category.
... var categorymanager = components.classes["@mozilla.org/categorymanager;1"] .getservice(components.interfaces.nsicategorymanager); var enumerator = categorymanager.enumeratecategory("app-startup"); var entries = []; while (enumerator.hasmoreelements()) { var
item = enumerator.getnext(); var entry =
item.queryinterface(components.interfaces.nsisupportscstring) entries.push(entry.tostring()); } entries.sort(); var entriesstring = entries.join("\n"); dump(entriesstring + "\n"); disable currently loaded plugins by type this snippet here shows how to disable plugins that are currently loaded for the file type of pdf.
nsIDOMStorageList
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview nsidomstorage named
item(in domstring domain); methods named
item() called when the list of available access points changes.
... nsidomstorage named
item( in domstring domain ); parameters domain the name of the domain for whom to return the storage object.
nsIDOMXULSelectControlElement
inherits from: nsidomxulcontrolelement last changed in gecko 1.9 (firefox 3) method overview nsidomxulselectcontrol
itemelement append
item(in domstring label, in domstring value); long getindexof
item(in nsidomxulselectcontrol
itemelement
item); nsidomxulselectcontrol
itemelement get
itematindex(in long index); nsidomxulselectcontrol
itemelement insert
itemat(in long index, in domstring label, in domstring value); nsidomxulselectcontrol
itemelement remove
itemat(in long index); attributes attribute type description
itemcount unsigned long read only.
... selectedindex long selected
item nsidomxulselectcontrol
itemelement value domstring methods append
item() nsidomxulselectcontrol
itemelement append
item( in domstring label, in domstring value ); parameters label value return value getindexof
item() long getindexof
item( in nsidomxulselectcontrol
itemelement
item ); parameters
item return value get
itematindex() nsidomxulselectcontrol
itemelement get
itematindex( in long index ); parameters index return value insert
itemat() nsidomxulselectcontrol
itemelement insert
itemat( in long index, in domstring label, in domstring value ); parameters index label value return value remove
itemat() nsidomxulselectcontrol
itemelement remove
itemat( in long index ); parameters index return value ...
nsIFeed
it includes attributes that provide information about the feed, as well as access to the
items or entries in the feed.
...
items nsiarray specifies an array of the
items or entries on the feed.
nsIMsgIdentity
if this is set, the return receipt menu
item on the compose window will be checked.
...if this is set, the dsn menu
item on the compose window will be checked.
nsINavHistoryResultTreeViewer
method overview nsinavhistoryresultnode nodefortreeindex(in unsigned long aindex); unsigned long treeindexfornode(in nsinavhistoryresultnode anode); attributes attribute type description collapseduplicates boolean controls whether duplicate adjacent elements are collapsed into a single
item in the tree.
...obsolete since gecko 1.9 flat
itemcount pruint32 this tells you how many
items are in the flattened list of results, that is how many rows are in this tree right now.
nsIPlacesView
ableselection(); nsinavhistoryresultnode[][] getremovableselectionranges(); nsinavhistoryresult getresult(); nsinavhistorycontainerresultnode getresultnode(); nsinavhistoryresultnode[] getselectionnodes(); void selectall(); attributes attribute type description hasselection boolean whether or not there are selected
items.
... insertionpoint insertionpoint the insertionpoint at which new
items will be inserted upon drop, paste, or creation.
nsISHEntry
to create an instance, use: var shentry = components.classes["@mozilla.org/browser/session-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview void addchildshell(in nsidocshelltree
item shell); nsidocshelltree
item childshellat(in long index); void clearchildshells(); nsishentry clone(); void create(in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation); native code only!
...void addchildshell( in nsidocshelltree
item shell ); parameters shell childshellat() nsidocshelltree
item childshellat( in long index ); parameters index the child shell at index; null if index is out of bounds.
nsISessionStore
the list is in last in/first out (lifo) order, so that the first
item in the list is the last tab that was closed.
...the list is in last in/first out (lifo) order, so that the first
item in the list is the last window that was closed.
nsISound
event_menu_execute 5 a menu
item is executed.
... _moz_menucommand the system sound when a menu
item is executed.
nsIZipWriter
processqueue() processes all queued
items until the entire queue has been processed or an error occurs.
...in the event of an early failure, the remaining
items stay in the queue; calling processqueue() again will continue where operations left off.
nsIAbCard/Thunderbird3
ny _aimscreenname dates: anniversaryyear, anniversarymonth, anniversaryday birthyear, birthmonth, birthday webpage1 (work), webpage2 (home) custom1, custom2, custom3, custom4 notes integral properties: lastmodifieddate popularityindex prefermailformat (see nsiabprefermailformat) boolean properties: allowremotecontent inherits from: nsiab
item method overview nsivariant getproperty(in autf8string name, in nsivariant defaultvalue); [noscript] astring getpropertyasastring(in string name); [noscript] autf8string getpropertyasautf8string(in string name); [noscript] pruint32 getpropertyasuint32(in string name); [noscript] boolean getpropertyasbool(in string name); void setproperty(in a...
...the following types are supported: base64xml xml vcard autf8string translateto(in autf8string atype); parameters atype the type of
item to translate the card into.
Building a Thunderbird extension 5: XUL
therefore it becomes an
item owned by the id called "status-bar".
...in the example above we have defined a new <statusbarpanel>
item (that can be referred to as my-panel) which will create a new instance of this widget type and add it at the end of the statusbar.
Demo Addon
let query = gloda.newquery(gloda.noun_message); query.subjectmatches(searchterm); let mylistener = { /* called when new
items are returned by the database query or freshly indexed */ on
itemsadded: function mylistener_on
itemsadded(a
items, acollection) { }, /* called when
items that are already in our collection get re-indexed */ on
itemsmodified: function mylistener_on
itemsmodified(a
items, acollection) { }, /* called when
items that are in our collection are purged from the system */ on
itemsre...
...moved: function mylistener_on
itemsremoved(a
items, acollection) { }, /* called when our database query completes */ onquerycompleted: function mylistener_onquerycompleted(acollection) { let
items = acollection.
items; let data = { messages: [], }; for (let i in
items) { data.messages.push({ subject:
items[i].subject, date:
items[i].date, author:
items[i].from.value, }); // ...
Using js-ctypes
i type */ ctypes.int16_t, /* return type */ ctypes.int16_t, /* alert type */ ctypes.char.ptr, /* primary text */ ctypes.char.ptr, /* secondary text */ ctypes.uint32_t, /* alert param */ ctypes.int16_t); /*
item hit */ var hit = 0; var msgerr = makestr("carbon says..."); var msgexp = makestr("we just called the standardalert carbon function from javascript!"); var err = stdalert(1, msgerr, msgexp, 0, hit); carbon.close(); the makestr() function is a utility routine that takes as input a standard javascript string and returns a carbon-style "pascal" string, which is a length byte followed by the chara...
...it uses the default abi, returns a 16-bit integer (which is a carbon oserr value), and accepts an integer (the alert type), two strings, a pointer to a parameter block, which we aren't using, and another integer, which is used to return the hit
item.
Browser Console - Firefox Developer Tools
on windows, the following code will add a new
item to the browser's main menu: var parent = window.document.getelementbyid("appmenuprimarypane"); var makethetea = gbrowser.ownerdocument.defaultview.document.createelementns("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menu
item"); makethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); on macos, this similar code will add a new
item to the "too...
...ls" menu: var parent = window.document.getelementbyid("menu_toolspopup"); var makethetea = gbrowser.ownerdocument.defaultview.document.createelementns("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menu
item"); makethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); ...
Highlight and inspect DOM nodes - Firefox Developer Tools
hover over the target to highlight the
item on the page, click on the target to switch to the page inspector with the
item highlighted.
...you can click any one of these targets to switch to the page inspector with this
item highlighted.
Aggregate view - Firefox Developer Tools
on the right-hand side is a pane that just says "select an
item to view its retaining paths".
... if you select an
item, you'll see the retaining paths panel for that
item: call stack the call stack shows you exactly where in your code you are making heap allocations.
View Source - Firefox Developer Tools
for example view-source:https://www.mozilla.org/#line100 view selection source if you select part of a web page and conext-click, you'll see a context menu
item labeled "view selection source", that behaves just like "view page source", except you only see the source for the selection.
... view mathml source if you context-click while the mouse is over some mathml, you'll see a context menu
item labeled "view mathml source": click it to see the mathml source.
AddressErrors - Web APIs
let supportedhandlers = [ { supportedmethods: "basic-card", data: { supportednetworks: ["visa", "mastercard", "amex", "discover"], supportedtypes: ["credit", "debit"] } } ]; let defaultpaymentdetails = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, display
items: [ { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; supportedhandlers describes the supported payment handlers and the details for those.
...a description of the total amount being requested (including a label and the currency used), a list of the line
items (in this case only one, "original donation amount"), and a list of shipping options available; in this case only one.
AnalyserNode.getByteFrequencyData() - Web APIs
each
item in the array represents the decibel value for a specific frequency.
...for example, for 48000 sample rate, the last
item of the array will represent the decibel value for 24000 hz.
AnalyserNode.getFloatFrequencyData() - Web APIs
each
item in the array represents the decibel value for a specific frequency.
...for example, for 48000 sample rate, the last
item of the array will represent the decibel value for 24000 hz.
BasicCardRequest - Web APIs
those are: amex cartebancaire diners discover jcb mastercard mir unionpay visa examples in the following example, the paymentrequest() constructor is used to create a new payment request, which takes three objects as parameters — one containing details of the payment methods that can be used for the payment, one containing details of the actual order (such as
items bought and shipping options), and an optional object that describes what data is needed to fullfil the payment (e.g., a shipping address).
... var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }]; var details = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, display
items: [ { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); ...
BasicCardResponse - Web APIs
examples in the following example, the paymentrequest() constructor is used to create a new payment request, which takes three objects as parameters — one containing details of the payment methods that can be used for the payment, one containing details of the actual order (such as
items bought and shipping options), and an optional object containing further options.
... var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'], supportedtypes: ['credit', 'debit'] } }]; var details = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, display
items: [ { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); ...
CSSPositionValue - Web APIs
properties csspositionvalue.x returns the
item's position along the web page's horizontal axis.
... csspositionvalue.y returns the
item's position along the vertical axis.
CSSStyleDeclaration - Web APIs
see the
item() method below.
... cssstyledeclaration.
item() returns a css property name by its index, or the empty string if the index is out-of-bounds.
CSSValueList - Web APIs
the
items in the cssvaluelist are accessible via an integral index, starting from 0.
... methods cssvaluelist.
item() this method is used to retrieve a cssvalue by ordinal index.
Using channel messaging - Web APIs
e in the iframe over in the iframe, we have the following javascript: var list = document.queryselector('ul'); var port2; // listen for the initial port transfer message window.addeventlistener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessage = onmessage; } // handle messages received on port2 function onmessage(e) { var list
item = document.createelement('li'); list
item.textcontent = e.data; list.appendchild(list
item); port2.postmessage('message received by iframe: "' + e.data + '"'); } when the initial message is received from the main page via the window.postmessage method, we run the initport function.
... when a message is received from the main page we create a list
item and insert it in the unordered list, setting the textcontent of the list
item equal to the event's data attribute (this contains the actual message).
ChildNode.after() - Web APIs
with(node) { after("foo"); } // referenceerror: after is not defined polyfill you can polyfill the after() method in internet explorer 9 and higher with the following code: // from: https://github.com/jserz/js_piece/blob/master/dom/childnode/after()/after().md (function (arr) { arr.foreach(function (
item) { if (
item.hasownproperty('after')) { return; } object.defineproperty(
item, 'after', { configurable: true, enumerable: true, writable: true, value: function after() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (arg
item) { var isnode = argite...
...arg
item : document.createtextnode(string(arg
item))); }); this.parentnode.insertbefore(docfrag, this.nextsibling); } }); }); })([element.prototype, characterdata.prototype, documenttype.prototype]); another polyfill // from: https://github.com/fabiovergani/js-polyfill_element.prototype.after/blob/master/after.js (function(x){ var o=x.prototype,p='after'; if(!o[p]){ o[p]=function(){ var e, m=arguments, l=m.length, i=0, t=this, p=t.parentnode, n=node, s=string, d=document; if(p!==null){ while(i<l){ e=m[i]; if(e instanceof n){ t=t.nextsibling; if(t!==null){ p.insertbefore(e,t); }else{ p.appendchild(e)...
Clipboard.read() - Web APIs
if (result.state == "granted" || result.state == "prompt") { navigator.clipboard.read().then(data => { for (let i=0; i<data.
items.length; i++) { if (data.
items[i].type != "image/png") { alert("clipboard contains non-image data.
... unable to access it."); } else { const blob = data.
items[i].gettype("image/png"); imgelem.src = url.createobjecturl(blob); } } }); } }); note: at this time, while firefox does implement read(), it does not recognize the "clipboard-read" permission, so attempting to use the permissions api to manage access to the api will not work.
ContentIndex.delete() - Web APIs
the delete() method of the contentindex interface unregisters an
item from the currently indexed content.
... examples below is an asynchronous function, that removes an
item from the content index.
CustomElementRegistry.whenDefined() - Web APIs
<nav id="menu-container"> <div class="menu-placeholder">loading...</div> <nav-menu> <menu-
item>
item 1</menu-
item> <menu-
item>
item 2</menu-
item> ...
... <menu-
item>
item n</menu-
item> </nav-menu> </nav> const container = document.getelementbyid('menu-container'); const placeholder = container.queryselector('.menu-placeholder'); // fetch all the children of menu that are not yet defined.
Document.cookie - Web APIs
31 dec 9999 23:59:59 gmt"; } } <button onclick="doonce()">only do something once</button> example #4: reset the previous cookie function resetonce() { document.cookie = "dosomethingonlyonce=; expires=thu, 01 jan 1970 00:00:00 gmt"; } <button onclick="resetonce()">reset only once cookie</button> example #5: check a cookie existence //es5 if (document.cookie.split(';').some(function(
item) { return
item.trim().indexof('reader=') == 0 })) { console.log('the cookie "reader" exists (es5)') } //es2016 if (document.cookie.split(';').some((
item) =>
item.trim().startswith('reader='))) { console.log('the cookie "reader" exists (es6)') } example #6: check that a cookie has a specific value //es5 if (document.cookie.split(';').some(function(
item) { return
item.indexof(...
...'reader=1') >= 0 })) { console.log('the cookie "reader" has "1" for value') } //es2016 if (document.cookie.split(';').some((
item) =>
item.includes('reader=1'))) { console.log('the cookie "reader" has "1" for value') } security it is important to note that the path attribute does not protect against unauthorized reading of the cookie from a different path.
Document.getElementsByTagNameNS() - Web APIs
opera returns a nodelist, but with a named
item method implemented, which makes it similar to a htmlcollection.
...on getelementsbytagnamenswrapper (ns, elname, doc, context) { if (!doc) { doc = document; } if (!context) { context = doc; } var result = doc.evaluate('//*[local-name()="'+elname+'" and namespace-uri() = "'+ns+'"]', context, null, xpathresult.ordered_node_snapshot_type, null); var a = []; for(var i = 0; i < result.snapshotlength; i++) { a[i] = result.snapshot
item(i); } return a; } specifications specification status comment domthe definition of 'document.getelementsbytagnamens' in that specification.
Document.images - Web APIs
usage notes you can use either javascript array notation or the
item() method on the returned collection to access the
items in the collection.
... the following are equivalent: firstimage = imagecollection.
item(0); firstimage = imagecollection[0]; example this example looks through the list of images and finds one whose name is "banner.gif".
Document.mozSyntheticDocument - Web APIs
example this can be useful if you have a contextual menu
item you only want to display for synthetic documents (or, conversely, for documents that aren't synthetic).
... var issynthetic = document.mozsyntheticdocument; if (issynthetic) { /* insert your menu
item here */ } specifications not part of any specification.
Document.querySelectorAll() - Web APIs
var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list
items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
...you can use any common looping statement, such as: var highlighted
items = userlist.queryselectorall(".highlighted"); highlighted
items.foreach(function(user
item) { deleteuser(user
item); }); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results.
Example - Web APIs
<html> <head> <title>my document</title> <script type="text/javascript"> function change() { // document.getelementsbytagname("h1") returns a nodelist of the h1 // elements in the document, and the first is number 0: var header = document.getelementsbytagname("h1").
item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic document"; // now the header is "a dynamic document".
... var para = document.getelementsbytagname("p").
item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } </script> </head> <body> <input type="button" value="change this document." onclick="change()"> <h1>header</h1> <p>paragraph</p> </body> </head> ...
Using the W3C DOM Level 1 Core - Web APIs
ollowing script would do the job: html content <body> <input type="button" value="change this document." onclick="change()"> <h2>header</h2> <p>paragraph</p> </body> javascript content function change() { // document.getelementsbytagname("h2") returns a nodelist of the <h2> // elements in the document, and the first is number 0: var header = document.getelementsbytagname("h2").
item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic document"; // now the header is "a dynamic document".
... var para = document.getelementsbytagname("p").
item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } you can see this script as a complete example.
Element: mouseout event - Web APIs
when you try this out, you'll find that mouseout is delivered to the individual list
items, while mouseleave goes to the overall list, courtesy of the hierarchy of the
items and the fact that list
items obscure the underlying <ul>.
... html <ul id="test"> <li>
item 1</li> <li>
item 2</li> <li>
item 3</li> </ul> javascript let test = document.getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.addeventlistener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result ...
Element: mouseover event - Web APIs
html <ul id="test"> <li>
item 1</li> <li>
item 2</li> <li>
item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() {...
... event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list
item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseover' in that specification.
Element.querySelectorAll() - Web APIs
var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the iframe elements in the document that contain an attribute named "data-src": var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list
items contained within a list whose id is "userlist" which have a "data-active" attribute whose value is "1": var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
...you can use any common looping statement, such as: var highlighted
items = userlist.queryselectorall(".highlighted"); highlighted
items.foreach(function(user
item) { deleteuser(user
item); }); note: nodelist is not a genuine array, that is to say it doesn't have the array methods like slice, some, map etc.
HTMLImageElement.alt - Web APIs
body { margin: 0; padding: 0; } p { margin-block-start: 0; margin-block-end: 1em; margin-top: 0; margin-bottom: 1em; } .container { width: 100vh; height: 95vh; font: 16px arial,helvetica,sans-serif; } .left-margin { background-color: rgb(241, 240, 237, 255); width: 9em; height: 100%; float: left; margin-right: 5px; padding-right: 1em; display: flex; align-
items: center; justify-content: center; } .left-margin img { width: 6em; } .contents { background-color: rgb(241, 240, 235, 255); height: 100%; margin-left: 2em; padding-top: 1em; padding-left: 2em; padding-right: 1em; } result images used as buttons when using an image as a button (by using it as the only visible child of an <a> element representing a hyperlink), the alt attri...
... for a chart, the text could describe the
items in the chart and their values.
HTMLImageElement.loading - Web APIs
example the addimagetolist() function shown below adds a photo thumbnail to a list of
items, using lazy-loading to avoid loading the image from the network until it's actually needed.
... function addimagetolist(url) { const list = document.queryselector("div.photo-list"); let new
item = document.createelement("div"); new
item.classname = "photo-
item"; let newimg = document.createelement("img"); newimg.loading = "lazy"; newimg.width = 320; newimg.height = 240; newimg.src = url; new
item.appendchild(newimg); list.appendchild(new
item); } specifications specification status comment html living standardthe definition of 'htmlimageelement.loading' in that specification.
HTMLInputElement.webkitdirectory - Web APIs
when a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected
items.
... html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let
item = document.createelement("li");
item.innerhtml = files[i].webkitrelativepath; output.appendchild(
item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
HTMLInputElement - Web APIs
possible values are: on: the browser can autocomplete the value using previously stored value off: the user must explicity enter a value max string: returns / sets the element's max attribute, containing the maximum (numeric or date-time) value for this
item, which must not be less than its minimum (min attribute) value.
...(if you set this to a negative number, an exception will be thrown.) min string: returns / sets the element's min attribute, containing the minimum (numeric or date-time) value for this
item, which must not be greater than its maximum (max attribute) value.
IDBCursor.continue() - Web APIs
the continue() method of the idbcursor interface advances the cursor to the next position along its direction, to the
item whose key matches the optional key parameter.
...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 list
item = document.createelement('li'); list
item.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'continue()' in that specification.
IDBCursor - Web APIs
idbcursor.continue() advances the cursor to the next position along its direction, to the
item whose key matches the optional key parameter.
...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 list
item = document.createelement('li'); list
item.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'cursor' in that specification.
IDBDatabase: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const ...
...ort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const ...
IDBDatabase: close event - Web APIs
nerror examples this example opens a database and listens for the close event: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const...
... }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const...
IDBDatabase: versionchange event - Web APIs
ples this example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event...
...ged'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db...
IDBObjectStore.add() - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>tr...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'add()' in that specification.
IDBObjectStore.autoIncrement - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>tr...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'autoincrement' in that specification.
IDBObjectStore.indexNames - Web APIs
// this is used a lot below db = this.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>tr...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.indexnames); // make a request to add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'indexnames' in that specification.
IDBObjectStore.keyPath - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>tr...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification.
IDBObjectStore.name - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>tr...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBObjectStore.transaction - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>tr...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.transaction); // make a request to add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'transaction' in that specification.
IDBOpenDBRequest: blocked event - Web APIs
ventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let...
...ocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let...
IDBOpenDBRequest: upgradeneeded event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); this is the same example, but uses the onupgra...
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; ...
IDBRequest: success event - Web APIs
addeventlistener(): // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event)...
...t handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.onsuccess = (event) => { console.
IDBTransaction.abort() - Web APIs
this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: databas...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // abort the transaction we just did transaction.abort(); }; specification specification status comment index...
IDBTransaction: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db...
...onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data
items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db...
IDBTransaction.db - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: databas...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the database (idbdatabase) connection with which this transaction is associated transaction.db; }; specification ...
IDBTransaction.error - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: databas...
...e modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'error' in that specificati...
IDBTransaction.mode - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: databas...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the mode this transaction has been opened in (should be "readwrite" in this case) transaction.mode; }; specification ...
IDBTransaction.objectStore() - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: databas...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; specification specification status comment indexed database api 2.0the definition of 'objectstore()' in that ...
IDBTransaction.onabort - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: databas...
...e modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; transaction.onabort = function() { // report when the transaction was successfully aborted console.log("transaction aborted!"); }...
IDBTransaction.oncomplete - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: databas...
...e modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for that you need transaction.oncomplete) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'oncomplete' in that specif...
IDBTransaction.onerror - Web APIs
// this is used a lot below db = dbopenrequest.result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: databas...
...e modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'onerror' in that specifica...
IDBTransaction - Web APIs
this is used a lot below db = dbopenrequest.result; // add the data to the database adddata(); }; function adddata() { // create a new object to insert into the idb var new
item = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready to add data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modifi...
...duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for that you need transaction.oncomplete) note.innerhtml += '<li>request successful.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'idbtransaction' in that spe...
Intersection Observer API - Web APIs
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('#list
item'); 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.
... #box { background-color: rgba(40, 40, 190, 255); border: 4px solid rgb(20, 20, 120); transition: background-color 1s, border 1s; width: 350px; height: 350px; display: flex; align-
items: center; justify-content: center; padding: 20px; } .vertical { color: white; font: 32px "arial"; } .extra { width: 350px; height: 350px; margin-top: 10px; border: 4px solid rgb(20, 20, 120); text-align: center; padding: 20px; } javascript finally, let's take a look at the javascript code that uses the intersection observer api to make things happen.
Key Values - Web APIs
keycode_navigate_in "navigatenext" navigates to the next
item.
... keycode_navigate_out "navigateprevious" navigates to the previous
item.
MutationObserverInit.attributeFilter - Web APIs
break; } break; } }); } var userlistelement = document.queryselector("#userlist"); var observer = new mutationobserver(callback); observer.observe(userlistelement, { attributefilter: [ "status", "username" ], attributeoldvalue: true, subtree: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each
item in the list of mutationrecord objects.
... for any
items representing an attribute change (which can be detected by the value of mutationrecord.type being "attributes"), we use the attribute's name, obtained using mutationrecord.attributename, to identify the type of change that occurred and then dispatch to the appropriate handler function.
MutationObserverInit.attributeOldValue - Web APIs
tation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.queryselector("#target"); var observer = new mutationobserver(callback); observer.observe(targetnode, { attributes: true, attributeoldvalue: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each
item in the list of mutationrecord objects.
... for any
items representing an attribute change (which can be detected by the value of mutationrecord.type being "attributes"), a function called notifyuser() is used to tell the user the name of the attribute that changed as well as the attribute's new value (mutation.target[mutation.attributename]) and its old value (mutation.oldvalue).
MutationObserverInit.attributes - Web APIs
tation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.queryselector("#target"); var observer = new mutationobserver(callback); observer.observe(targetnode, { attributes: true, attributeoldvalue: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each
item in the list of mutationrecord objects.
... for any
items representing an attribute change (which can be detected by the value of mutationrecord.type being "attributes"), a function called notifyuser() is used to tell the user the name of the attribute that changed as well as the attribute's new value (mutation.target[mutation.attributename]) and its old value (mutation.oldvalue).
NonDocumentTypeChildNode.previousElementSibling - Web APIs
syntax prevnode = elementnodereference.previouselementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <li>this is a list
item</li> <li>this is another list
item</li> <div id="div-03">here is div-03</div> <script> let el = document.getelementbyid('div-03').previouselementsibling; document.write('<p>siblings of div-03</p><ol>'); while (el) { document.write('<li>' + el.nodename + '</li>'); el = el.previouselementsibling; } document.write('</ol>'); </script> this example outputs the following into the page ...
...iouselementsibling", { get: function(){ var e = this.previoussibling; while(e && 1 !== e.nodetype) e = e.previoussibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/previouselementsibling/previouselementsibling.md (function (arr) { arr.foreach(function (
item) { if (
item.hasownproperty('previouselementsibling')) { return; } object.defineproperty(
item, 'previouselementsibling', { configurable: true, enumerable: true, get: function () { let el = this; while (el = el.previoussibling) { if (el.nodetype === 1) { return el; } } return null; }, set...
PaymentAddress - Web APIs
examples in the following example, the paymentrequest() constructor is used to create a new payment request, which takes three objects as parameters — one containing details of the payment methods that can be used for the payment, one containing details of the actual order (such as
items bought and shipping options), and an optional object containing further options.
... const supportedinstruments = [ { supportedmethods: "basic-card", }, ]; const details = { total: { label: "donation", amount: { currency: "usd", value: "65.00" } }, display
items: [ { label: "original donation amount", amount: { currency: "usd", value: "65.00" }, }, ], shippingoptions: [ { id: "standard", label: "standard shipping", amount: { currency: "usd", value: "0.00" }, selected: true, }, ], }; const options = { requestshipping: true }; async function dopaymentrequest() { const request = new paymentrequest(supportedinstruments, details, opti...
PaymentDetailsBase - Web APIs
properties display
itemsoptional an array of payment
item objects, each describing one line
item for the payment request.
... these represent the line
items on a receipt or invoice.
Plugin - Web APIs
methods plugin.
item returns the mime type of a supported content type, given the index number into a list of supported types.
... plugin.named
item returns the mime type of a supported
item.
ReadableStream.getReader() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = value; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let list
item = document.createelement('li'); list
item.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(list
item); 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.
ReadableStream.tee() - Web APIs
if (done) { console.log("stream complete"); return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let list
item = document.createelement('li'); list
item.textcontent = 'read ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list.appendchild(list
item); // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'tee()' in that specification.
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let list
item = document.createelement('li'); list
item.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(list
item); 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.
ReadableStreamDefaultReader.cancel() - Web APIs
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 list
item = document.createelement('li'); list
item.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(list
item); 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.
ReadableStreamDefaultReader.read() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let list
item = document.createelement('li'); list
item.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(list
item); 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.
SVGAnimationElement: endEvent event - Web APIs
<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 list
item = document.createelement('li'); list
item.textcontent = 'beginevent fired'; list.appendchild(list
item); }) animateelem.addeventlistener('endevent', () => { let list
item = document.createelement('li'); list
item.textcontent = 'endevent fired'; list.appendchild(list
item); }) animateelem.addeventlistener('repeatevent', (e) => { let list
item = document.createelement('li'); let msg = 're...
...peatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } list
item.textcontent = msg; list.appendchild(list
item); }) 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 specification status comment scalable vector graphics (svg) 2the definition of 'endevent' in that specification.
ServiceWorkerGlobalScope: contentdelete event - Web APIs
the contentdelete event of the serviceworkerglobalscope interface is fired when an
item is removed from the indexed content via the user agent.
... bubbles no cancelable no interface contentindexevent event handler property oncontentdelete examples the following example uses a contentdelete event handler to remove cached content related to the deleted index
item.
ServiceWorkerGlobalScope.oncontentdelete - Web APIs
the oncontentdelete property of the serviceworkerglobalscope interface is an event handler fired when an
item is removed from the indexed content via the user agent.
...}; examples the following example uses a contentdelete event handler to remove cached content related to the deleted index
item.
Using Service Workers - Web APIs
if you just passed in the url, and then tried to access the other
items in the json separately when the for() loop is being iterated through later on, it wouldn’t work, as the promise wouldn’t resolve at the same time as the iterations are being done (that is a synchronous process.) we actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits an...
... note: your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with
items from its own cache, and more.
Touch.radiusX - Web APIs
syntax var xradius = touch
item.radiusx; return value xradius the x radius of the ellipse that most closely circumscribes the area of contact with the touch surface.
...</div> var src = document.getelementbyid("src"); src.addeventlistener('touchstart', rotate); src.addeventlistener('touchmove', rotate); src.addeventlistener('touchend', rotate); function rotate (e) { var touch = e.changedtouches.
item(0); // turn off default event handling e.preventdefault(); // rotate element 'src'.
TouchList - Web APIs
methods touchlist.identifiedtouch() returns the first touch
item in the list whose identifier matches a specified value.
... touchlist.
item() returns the touch object at the specified index in the list.
Using Touch Events - Web APIs
thus, if the user activated the touch surface with one finger, the list would contain one
item, and if the user touched the surface with three fingers, the list length would be three.
... changedtouches - a list of the touch points whose
items depends on the associated event type: for the touchstart event, it is a list of the touch points that became active with the current event.
WebGLRenderingContext.colorMask() - Web APIs
examples gl.colormask(true, true, true, false); to get the current color mask, query the color_wr
itemask constant which returns an array.
... gl.getparameter(gl.color_wr
itemask); // [true, true, true, false] specifications specification status comment webgl 1.0the definition of 'colormask' in that specification.
WebGLRenderingContext.depthMask() - Web APIs
examples gl.depthmask(false); to get the current depth mask, query the depth_wr
itemask constant which returns a boolean.
... gl.getparameter(gl.depth_wr
itemask); // false specifications specification status comment webgl 1.0the definition of 'depthmask' in that specification.
Web Storage API - Web APIs
these mechanisms are available via the window.sessionstorage and window.localstorage properties (to be more precise, in supporting browsers the window object implements the windowlocalstorage and windowsessionstorage objects, which the localstorage and sessionstorage properties hang off) — invoking one of these will create an instance of the storage object, through which data
items can be set, retrieved and removed.
...a new
item is stored.) storageevent the storage event is fired on a document's window object when a storage area changes.
Window.frames - Web APIs
it is similar to an array in that it has a length property and its
items can be accessed using the [i] notation.
... each
item in the window.frames pseudo-array represents the window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame dom element (i.e., window.frames[0] is the same thing as document.getelementsbytagname("iframe")[0].contentwindow).
Window.localStorage - Web APIs
example the following snippet accesses the current domain's local storage object and adds a data
item to it using storage.set
item().
... localstorage.set
item('mycat', 'tom'); the syntax for reading the localstorage
item is as follows: const cat = localstorage.get
item('mycat'); the syntax for removing the localstorage
item is as follows: localstorage.remove
item('mycat'); the syntax for removing all the localstorage
items is as follows: localstorage.clear(); note: please refer to the using the web storage api article for a full example.
Privileged features - Web APIs
dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu
item in the command system menu.
... close when set to no or 0, this feature removes the system close command icon and system close menu
item.
Window - Web APIs
however, the window interface is a suitable place to include these
items that need to be globally available.
... window.getselection() returns the selection object representing the selected
item(s).
XRInputSourceArray.keys() - Web APIs
the keys() method in the xrinputsourcearray interface returns a javascript iterator which can then be used to iterate over the keys used to reference each
item in the array of input sources.
...the values returned by the iterator are the indexes of each entry in the list; that is, the numbers 0, 1, 2, and so forth through the index of the last
item in the list.
msthumbnailclick - Web APIs
example function thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mss
itemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mss
itemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay = window.external.mss
itemodeaddthumbbarbutton(iconuri, ...
...tooltip); // refresh the taskbar window.external.mss
itemodeshowthumbbar(); // call a javascript function when the button is pressed function onbuttonclicked(e) { switch (e.buttonid) { case btnplay: play(); break;} } see also microsoft api extensions ...
Using the aria-labelledby attribute - Accessibility
</div> example 3: radio groups in the example below, the container of a radiogroup is associated with its label using the aria-labelledby attribute: <div id="radio_label">my radio label</div> <ul role="radiogroup" aria-labelledby="radio_label"> <li role="radio">
item #1</li> <li role="radio">
item #2</li> <li role="radio">
item #3</li> </ul> example 4: dialog label in the example below, the header element that labels the dialog is referred to by the aria-labelledby attribute: <div role="dialog" aria-labelledby="dialogheader"> <h2 id="dialogheader">choose a file</h2> ...
...ion : cursor</dd> <dt id="homily">homily</dt> <dd role="definition" aria-labelledby="homily">a usually short sermon</dd> <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd> </dl> example 7: menus in the example below, a popup menu is associated with its label using the aria-labelledby attribute: <div role="menubar"> <div role="menu
item" aria-haspopup="true" id="filemenu">file</div> <div role="menu" aria-labelledby="filemenu"> <div role="menu
item">open</div> <div role="menu
item">save</div> <div role="menu
item">save as ...</div> ...
Using ARIA: Roles, states, and properties - Accessibility
roles widget roles button checkbox gridcell link menu
item menu
itemcheckbox menu
itemradio option progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox tree
item composite roles the techniques below describe each composite role as well as their required and optional child roles.
... combobox grid (including row, gridcell, rowheader, columnheader roles) listbox (including option role) menu menubar radiogroup (see radio role) tablist (including tab and tabpanel roles) tree treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list list
item math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage...
ARIA: button role - Accessibility
if(name.length > 0) { list
item = document.createelement('li'); list
item.appendchild(document.createtextnode(name)); // add the new name to the list.
... let list = document.getelementbyid('namelist'); list.appendchild(list
item); } } toggle button example in this snippet a <span> element is converted to a toggle button using the button role and the aria-pressed attribute.
HTML To MSAA - Accessibility
egend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible has children for each map
item input @type=button, submit, reset role_system_ pushbutton from @value attribute, @alt attribute, default label, @src attribute, @data attribute n/a state_system_ default if @type attribute has value "submit" n/a "press" n/a input @type=text, textarea role_system_ text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input ...
...tton 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_ list
item 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_ list
item 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...
Operable - Accessibility
2.4.8 location within site (aaa) when on a page inside a complex site or set of steps, the user should be given an indicator of where they are in the site, for example a breadcrumb trail, s
itemap or text such as "form page 2 of 10".
... understanding motion actuation 2.5.5 target size (aaa) added in 2.1 the size of an actionable
item's touch target must be at least 44 css pixels in both width and height.
Text labels and names - Accessibility
the caption describes the purpose of the figure in the document, which may be different from a simple description of a visual
item, as provided by the alternative text.
...this applies to all types of <input>
items, as well as <button>, <output>, <select>, <textarea>, <progress> and <meter> elements, as well as any element with the switch aria role.
::-moz-list-bullet - CSS: Cascading Style Sheets
the ::-moz-list-bullet css pseudo-element is a mozilla extension that represents the marker (typically a bullet) of a list
item (<li>) in an unordered list (<ul>).
... syntax li::-moz-list-bullet examples html <ul> <li>
item 1</li> <li>
item 2</li> <li>
item 3</li> </ul> css ::-moz-list-bullet { color: red; font-size: 1.5em; } result specifications not part of any standard.
::-moz-list-number - CSS: Cascading Style Sheets
the ::-moz-list-number css pseudo-element is a mozilla extension that represents the marker (typically a number) of a list
item (<li>) in an ordered list (<ol>).
... syntax li::-moz-list-number examples html <ol> <li>first
item</li> <li>second
item</li> <li>third
item</li> </ol> css li::-moz-list-number { font-style: italic; font-weight: bold; } result screenshotlive sample specifications not part of any standard.
:-moz-ui-invalid - CSS: Cascading Style Sheets
required
items have the pseudo-class applied only if the user changes them or attempts to submit an unchanged valid value.
... by default, gecko applies a style that creates a red "glow" (using the box-shadow property) around
items, which have this pseudo-class applied.
::marker - CSS: Cascading Style Sheets
the ::marker css pseudo-element selects the marker box of a list
item, which typically contains a bullet or number.
... it works on any element or pseudo-element set to display: list-
item, such as the <li> and <summary> elements.
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
'='<attr-modifier> = i | s examples cross-browser example <header> <p>this is my header paragraph</p> </header> <main> <ul> <li><p>this is my first</p><p>list
item</p></li> <li><p>this is my second</p><p>list
item</p></li> </ul> </main> <footer> <p>this is my footer paragraph</p> </footer> :-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } :is(header, main, footer) ...
...p:hover { color: red; cursor: pointer; } let matched
items; try { matched
items = document.queryselectorall(':is(header, main, footer) p'); } catch(e) { try { matched
items = document.queryselectorall(':matches(header, main, footer) p'); } catch(e) { try { matched
items = document.queryselectorall(':-webkit-any(header, main, footer) p'); } catch(e) { try { matched
items = document.queryselectorall(':-moz-any(header, main, footer) p'); } catch(e) { console.log('your browser doesn\'t support :is(), :matches(), or :any()'); } } } } matched
items.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simp...
:target - CSS: Cascading Style Sheets
quisque quis neque arcu, nec gravida magna.</figcaption> </figure> </div> css /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-
items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; ...
...align-
items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status comment html living standardthe definition of ':target' in that specification.
@supports - CSS: Cascading Style Sheets
the following example returns true if and only if the two shorter expressions are simultaneously true: @supports (display: table-cell) and (display: list-
item) {} multiple conjunctions can be juxtaposed without the need of more parentheses.
... the following are both equivalent: @supports (display: table-cell) and (display: list-
item) and (display:run-in) {} @supports (display: table-cell) and ((display: list-
item) and (display:run-in)) {} the or operator the or operator creates a new expression from the disjunction of two shorter expressions.
Using feature queries - CSS: Cascading Style Sheets
once a floated
item becomes a grid
item, the float is removed — something you can read more about in supporting older browsers.
... we have a problem however, caused by the width property we used on our floated
items to make them display as three columns.
CSS Display - CSS: Cascading Style Sheets
reference css properties display css data types <display-outside> <display-inside> <display-list
item> <display-box> <display-internal> <display-legacy> guides css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning
items in a flex container controlling ratios of flex
items along the main axis cross-browser flexbox mixins mastering wrapping of flex
items ordering flex
items relationship of flexbox to other layo...
...basic values: none, block, inline and list-
item.
Using CSS counters - CSS: Cascading Style Sheets
} li::before { counter-increment: section; /* increments only this instance of the section counter */ content: counters(section, ".") " "; /* combines the values of all instances of the section counter, separated by a period */ } html <ol> <li>
item</li> <!-- 1 --> <li>
item <!-- 2 --> <ol> <li>
item</li> <!-- 2.1 --> <li>
item</li> <!-- 2.2 --> <li>
item <!-- 2.3 --> <ol> <li>
item</li> <!-- 2.3.1 --> <li>
item</li> <!-- 2.3.2 --> </ol> <ol> <li>
item</li> <!-- 2.3.1 --> <li>
item</li> <!-- 2.3.2 --> ...
... <li>
item</li> <!-- 2.3.3 --> </ol> </li> <li>
item</li> <!-- 2.4 --> </ol> </li> <li>
item</li> <!-- 3 --> <li>
item</li> <!-- 4 --> </ol> <ol> <li>
item</li> <!-- 1 --> <li>
item</li> <!-- 2 --> </ol> result specifications specification status comment css lists module level 3the definition of 'css counters' in that specification.
Logical properties for floating and positioning - CSS: Cascading Style Sheets
if you change the writing-mode to vertical-rl or the direction to rtl you will see that the left-floated box always sticks to the left, whereas the inline-start-floated
item follows the direction and writing-mode.
... example: inset properties for positioned layout positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the
item relative to where it would fall based on normal flow.
Logical properties for sizing - CSS: Cascading Style Sheets
when specifying the size of an
item, the logical properties and values specification gives you the ability to indicate sizing as it relates to the flow of text (inline and block) rather than physical sizing which relates to the physical dimensions of horizontal and vertical (e.g.
... logical keywords for resize the resize property sets whether or not an
item can be resized and has physical values of horizontal and vertical.
Basic Shapes - CSS: Cascading Style Sheets
inset() the inset() type defines a rectangle, which may not seem very useful as simply floating an
item will give you a rectangular shape around it.
... in the below example i have created a circle on an
item with a width of 100 pixels, plus a margin of 20 pixels.
CSS values and units - CSS: Cascading Style Sheets
for example, the value of grid-area can be a <custom-ident>, so if we had a grid area named content we would use it without quotes: .
item { grid-area: content; } in comparison, a data type that is a <string>, such as a string value of the content property, must be quoted: .
item::after { content: "this is my content."; } while you can generally create any name you want, including using emojis, the identifier can't be none, unset, initial, or inherit, start with a digit or two dashes, and generally you don't want it to be ...
...(but see notes regarding whitespace within pages for min(), max() and clamp() functions.) some legacy functional notations such as rgba() use commas, but generally commas are only used to separate
items in a list.
Descendant combinator - CSS: Cascading Style Sheets
/* list
items that are descendants of the "my-things" list */ ul.my-things li { margin: 2em; } the descendant combinator is technically one or more css white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator.
... syntax selector1 selector2 { /* property declarations */ } examples css li { list-style-type: disc; } li li { list-style-type: circle; } html <ul> <li> <div>
item 1</div> <ul> <li>sub
item a</li> <li>sub
item b</li> </ul> </li> <li> <div>
item 2</div> <ul> <li>sub
item a</li> <li>sub
item b</li> </ul> </li> </ul> result specifications specification status comment selectors level 4the definition of 'descendant combinator' in that specification.
Card - CSS: Cascading Style Sheets
useful fallbacks or alternative methods flexbox could be used to lay out the card, in which case you should make the content area grow, and other
items not grow.
... this would be a reasonable way to lay out the card, although i have a slight preference for being able to control the tracks from the container rather than needing to add rules to the
items.
Center an element - CSS: Cascading Style Sheets
requirements to place an
item into the center of another box horizontally and vertically.
...then set align-
items to center to perform centering on the block axis, and justify-content to center to perform centering on the inline axis.
Recipe: Media objects - CSS: Cascading Style Sheets
download this example once floated elements become grid
items the float no longer applies so you don’t need to do anything special to clear the float.
... what you will need to do is remove any margins applied to the
item, and any widths which we don’t need in a grid context (we have the gap property to control it in grids, and the track takes control of the sizing).
Layout mode - CSS: Cascading Style Sheets
normal flow includes block layout, designed for laying out boxes such as paragraphs and inline layout, which lays out inline
items such as text.
... float layout, designed to cause an
item to position itself left or right with the rest of the content in normal flow wrapping around it.
Shorthand properties - CSS: Cascading Style Sheets
for example: the second list
item has the class my-class-1 applied.
... shorthand properties: animation, background, border, border-bottom, border-color, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, offset, outline, overflow, padding, place-content, place-
items, place-self, text-decoration, transition ...
background-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valuea list, each
item consisting of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting background-repeat html <ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three"></div> </li> <li>re...
....five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list
item is matched with a different value of background-repeat.
fit-content() - CSS: Cascading Style Sheets
examples sizing grid columns with fit-content html <div id="container"> <div>
item as wide as the content.</div> <div>
item with more text in it.
... </div> <div>flexible
item</div> </div> css #container { display: grid; grid-template-columns: fit-content(300px) fit-content(300px) 1fr; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; } result specifications specification status comment css box sizing module level 3the definition of 'fit-content()' in that specification.
image() - CSS: Cascading Style Sheets
examples directionally-sensitive images <ul> <li dir="ltr">bullet is a right facing arrow on the left</li> <li dir="rtl">bullet is the same arrow, flipped to point left.</li> </ul> ul { list-style-image: image(ltr 'https://mdn.mozillademos.org/files/16412/rightarrow.png'); } in the left-to-right list
items — those with dir="ltr" set on the element itself or inheriting the directionality from an ancestor or default value for the page — the image will be used as-is.
... list
items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as documents set to arabic or hebrew, will have the bullet display on the right, horizontally flippled, as if transform: scalex(-1) had been set.
paint() - CSS: Cascading Style Sheets
in this example, we passed two arguments: whether the background-image on a group of list
items is filled or just has a stroke outline, and the width of that outline: <ul> <li>
item 1</li> <li>
item 2</li> <li>
item 3</li> <li>
item 4</li> <li>
item 5</li> <li>
item 6</li> <li>
item 7</li> <li>
item 8</li> <li>
item 9</li> <li>
item 10</li> <li>
item 11</li> <li>
item 12</li> <li>
item 13</li> <li>
item 14</li> <li>
item 15</li> <li>
item 16...
...</li> <li>
item 17</li> <li>
item 18</li> <li>
item 19</li> <li>
item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
position - CSS: Cascading Style Sheets
the "b" heading will appear just below the
items that begin with "a" until they are scrolled offscreen.
... rather than sliding offscreen with the rest of the content, the "b" heading will then remain fixed to the top of the viewport until all the "b"
items have scrolled offscreen, at which point it will be covered up by the "c" heading, and so on.
visibility - CSS: Cascading Style Sheets
collapsed flex
items are hidden, and the space they would have occupied is removed.
... candidate recommendation defines the collapse value as it applies to flex
items.
Getting Started - Developer guides
then in alertcontents(), we need to replace the line alert(httprequest.responsetext); with: var xmldoc = httprequest.responsexml; var root_node = xmldoc.getelementsbytagname('root').
item(0); alert(root_node.firstchild.data); this code takes the xmldocument object given by responsexml and uses dom methods to access some of the data contained in the xml document.
... simple timed xhr example another simple example follows — here we are loading a text file via xhr, the structure of which is assumed to be like this: time: 312.05 time: 312.07 time: 312.10 time: 312.12 time: 312.14 time: 312.15 once the text file is loaded, we split() the
items into an array at each newline character (\n — basically where each line break is in the text file), and then print the complete list of timestamps, and the last timestamp, onto the page.
Block formatting context - Developer guides
flex
items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
... grid
items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.
Challenge solutions - Developer guides
you see two
items listed, one that references an internal resource and one that references your stylesheet file.
... solution define a rule for list
items to use the lower-roman list style: li { list-style: lower-roman; } capital letters challenge change your stylesheet to identify the headings with capital letters in parentheses.
Content categories - Developer guides
a few other elements belong to this category, but only if a specific condition is fulfilled: <area>, if it is a descendant of a <map> element <link>, if the
itemprop attribute is present <meta>, if the
itemprop attribute is present <style>, if the scoped attribute is present sectioning content elements belonging to the sectioning content model create a section in the current outline that defines the scope of <header> elements, <footer> elements, and heading content.
... a few other elements belong to this category, but only if a specific condition is fulfilled: <a>, if it contains only phrasing content <area>, if it is a descendant of a <map> element <del>, if it contains only phrasing content <ins>, if it contains only phrasing content <link>, if the
itemprop attribute is present <map>, if it contains only phrasing content <meta>, if the
itemprop attribute is present embedded content embedded content imports another resource or inserts content from another mark-up language or namespace into the document.
HTML attribute: multiple - HTML: Hypertext Markup Language
keyboard users can select multiple contiguous
items by focusing on the <select> element, selecting an
item at the top or bottom of the range they want to select using the up and down cursor keys to go up and down the options.
... the selection of non-contiguous is not as well supported:
items should be able to be selected and deselected by pressing space , but support varies between browsers.
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
he image the code that handles the newly-downloaded image is found in the imagereceived() method: function imagereceived() { let canvas = document.createelement("canvas"); let context = canvas.getcontext("2d"); canvas.width = downloadedimg.width; canvas.height = downloadedimg.height; context.drawimage(downloadedimg, 0, 0); imagebox.appendchild(canvas); try { localstorage.set
item("saved-image-example", canvas.todataurl("image/png")); } catch(err) { console.log("error: " + err); } } imagereceived() is called to handle the "load" event on the htmlimageelement that receives the downloaded image.
...the canvas method todataurl() is used to convert the image into a data:// url representing a png image, which is then saved into local storage using set
item().
<img>: The Image Embed element - HTML: Hypertext Markup Language
this must be omitted for the last
item in the list.
... implicit aria role with non-empty alt attribute or no alt attribute: img with empty alt attribute: no corresponding role permitted aria roles with non-empty alt attribute: button checkbox link menu
item menu
itemcheckbox menu
itemradio option progressbar scrollbar separator slider switch tab tree
item with empty alt attribute, none or presentation with no alt attribute, no role permitted dom interface htmlimageelement specifications specification status comment referrer policy...
<input type="radio"> - HTML: Hypertext Markup Language
additional attributes in addition to the common attributes shared by all <input> elements, radio inputs support the following attributes: attribute description checked a boolean indicating whether or not this radio button is the currently-selected
item in the group value the string to use as the value of the radio when submitting the form, if the radio is currently toggled on checked a boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.
... the css involved is a bit more significant: html { font-family: sans-serif; } div:first-of-type { display: flex; align-
items: flex-start; margin-bottom: 5px; } label { margin-right: 15px; line-height: 32px; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right: 5px; position: relative; top: 4px; } input:checked { border: 6px solid black; } button, ...
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
results the maximum number of
items that should be displayed in the drop-down list of previous search queries.
... attribute: combobox type=text with no list attribute: textbox with list attribute: combobox type=url with no list attribute: textbox with list attribute: combobox type=color|date|datetime-local|file|hidden|month|password|time|week: no corresponding role permitted aria roles type=button: link, menu
item, menu
itemcheckbox, menu
itemradio, option, radio, switch, tab type=checkbox: button when used with aria-pressed, menu
itemcheckbox, option, switch type=image: link, menu
item, menu
itemcheckbox, menu
itemradio, radio, switch type=radio: menu
itemradio type=text with no list attribute: combobox, searchbox, spinbutton type=color|date|datetime|datetime-local|email|file|hidden|month|num...
Want-Digest - HTTP
examples want-digest: sha-256 want-digest: sha-512;q=0.3, sha-256;q=1, md5;q=0 basic operation the sender provides a list of digests which it is prepared to accept, and the server uses one of them: request: get /
item want-digest: sha-256;q=0.3, sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= unsupported digests the server does not support any of the requested digest algorithms, so uses a different algorithm: request: get /
item want-digest: sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= the ser...
...ver does not support any of the requested digest algorithms, so responds with a 400 error and includes another want-digest header, listing the algorithms that it does support: request: get /
item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-256, sha-512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for
items referenced by the document, including images, css, javascript, and so forth.
... this prefetching is performed in the background, so that the dns is likely to have been resolved by the time the referenced
items are needed.
Iterators and generators - JavaScript
« previousnext » processing each of the
items in a collection is a very common operation.
... function* makeiterator() { yield 1; yield 2; } const it = makeiterator(); for (const it
item of it) { console.log(it
item); } console.log(it[symbol.iterator]() === it) // true; // this example show us generator(iterator) is iterable object, // which has the @@iterator method return the it (itself), // and consequently, the it object can iterate only _once_.
The arguments object - JavaScript
the function's only formal argument is a string containing the characters that separate the
items to concatenate.
...the function is defined as follows: function list(type) { var html = '<' + type + 'l><li>'; var args = array.prototype.slice.call(arguments, 1); html += args.join('</li><li>'); html += '</li></' + type + 'l>'; // end list return html; } you can pass any number of arguments to this function, and it adds each argument as a list
item to a list of the type indicated.
Array.prototype.reduce() - JavaScript
1, 2, 3].reduce(function (accumulator, currentvalue) { return accumulator + currentvalue }, 0) // sum is 6 alternatively written with an arrow function: let total = [ 0, 1, 2, 3 ].reduce( ( accumulator, currentvalue ) => accumulator + currentvalue, 0 ) sum of values in an object array to sum up, the values contained in an array of objects, you must supply an initialvalue, so that each
item passes through your function.
...books - list which will contain all friends' books + // additional list contained in initialvalue let allbooks = friends.reduce(function(accumulator, currentvalue) { return [...accumulator, ...currentvalue.books] }, ['alphabet']) // allbooks = [ // 'alphabet', 'bible', 'harry potter', 'war and peace', // 'romeo and juliet', 'the lord of the rings', // 'the shining' // ] remove duplicate
items in an array note: if you are using an environment compatible with set and array.from(), you could use let orderedarray = array.from(new set(myarray)) to get an array where duplicate
items have been removed.
Array.prototype.every() - JavaScript
// --------------- // modifying
items // --------------- let arr = [1, 2, 3, 4]; arr.every( (elem, index, arr) => { arr[index+1] -= 1 console.log(`[${arr}][${index}] -> ${elem}`) return elem < 2 }) // loop runs for 3 iterations, but would // have run 2 iterations without any modification // // 1st iteration: [1,1,3,4][0] -> 1 // 2nd iteration: [1,1,2,4][1] -> 1 // 3rd iteration: [1,1,2,3][2] -> 2 // --------------- // append...
...ing
items // --------------- arr = [1, 2, 3]; arr.every( (elem, index, arr) => { arr.push('new') console.log(`[${arr}][${index}] -> ${elem}`) return elem < 4 }) // loop runs for 3 iterations, even after appending new
items // // 1st iteration: [1, 2, 3, new][0] -> 1 // 2nd iteration: [1, 2, 3, new, new][1] -> 2 // 3rd iteration: [1, 2, 3, new, new, new][2] -> 3 // --------------- // deleting
items // --------------- arr = [1, 2, 3, 4]; arr.every( (elem, index, arr) => { arr.pop() console.log(`[${arr}][${index}] -> ${elem}`) return elem < 4 }) // loop runs for 2 iterations only, as the remaining //
items are `pop()`ed off // // 1st iteration: [1,2,3][0] -> 1 // 2nd iteration: [1,2][1] -> 2 specifications specification ecmascript (ecma-262)the definition o...
Array.prototype.flat() - JavaScript
note that depth control is hard/inefficient as we will need to tag each value with its own depth // also possible w/o reversing on shift/unshift, but array ops on the end tends to be faster function flatten(input) { const stack = [...input]; const res = []; while(stack.length) { // pop value from stack const next = stack.pop(); if(array.isarray(next)) { // push back array
items, won't modify the original input stack.push(...next); } else { res.push(next); } } // reverse to restore input order return res.reverse(); } const arr = [1, 2, [3, 4, [5, 6]]]; flatten(arr); // [1, 2, 3, 4, 5, 6] use generator function function* flatten(array, depth) { if(depth === undefined) { depth = 1; } for(const
item of array) { if(arr...
...ay.isarray(
item) && depth > 0) { yield* flatten(
item, depth - 1); } else { yield
item; } } } const arr = [1, 2, [3, 4, [5, 6]]]; const flattened = [...flatten(arr, infinity)]; // [1, 2, 3, 4, 5, 6] please do not add polyfills on this article.
Array.prototype.forEach() - JavaScript
converting a for loop to foreach const
items = ['
item1', '
item2', '
item3'] const copy
items = [] // before for (let i = 0; i <
items.length; i++) { copy
items.push(
items[i]) } // after
items.foreach(function(
item){ copy
items.push(
item) }) printing the contents of an array note: in order to display the content of an array in the console, you can use console.table(), which prints a formatted version of the array.
... the following code logs a line for each element in an array: function logarrayelements(element, index, array) { console.log('a[' + index + '] = ' + element) } // notice that index 2 is skipped, since there is no
item at // that position in the array...
Array.prototype.sort() - JavaScript
var
items = [ { name: 'edward', value: 21 }, { name: 'sharpe', value: 37 }, { name: 'and', value: 45 }, { name: 'the', value: -12 }, { name: 'magnetic', value: 13 }, { name: 'zeros', value: 37 } ]; // sort by value
items.sort(function (a, b) { return a.value - b.value; }); // sort by name
items.sort(function(a, b) { var namea = a.name.touppercase(); // ignore upper and lowercase var na...
... var
items = ['réservé', 'premier', 'communiqué', 'café', 'adieu', 'éclair'];
items.sort(function (a, b) { return a.localecompare(b); }); //
items is ['adieu', 'café', 'communiqué', 'éclair', 'premier', 'réservé'] sorting with map the comparefunction can be invoked multiple times per element within the array.
Map - JavaScript
size the number of
items in a map is easily retrieved from its size property.
... the number of
items in an object must be determined manually.
Set - JavaScript
'.tolowercase()) // true myset.has(o) // true myset.size // 5 myset.delete(5) // removes 5 from the set myset.has(5) // false, 5 has been removed myset.size // 4, since we just removed one value console.log(myset) // logs set(4) [ 1, "some text", {…}, {…} ] in firefox // logs set(4) { 1, "some text", {…}, {…} } in chrome iterating sets // iterate over
items in set // logs the
items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let
item of myset) console.log(
item) // logs the
items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let
item of myset.keys()) console.log(
item) // logs the
items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let
item of myset.values()) console.log(
item...
...) // logs the
items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} // (key and value are the same here) for (let [key, value] of myset.entries()) console.log(key) // convert set object to an array object, with array.from let myarr = array.from(myset) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}] // the following will also work if run in an html document myset.add(document.body) myset.has(document.queryselector('body')) // true // converting between set and array myset2 = new set([1, 2, 3, 4]) myset2.size // 4 [...myset2] // [1, 2, 3, 4] // intersect can be simulated via let intersection = new set([...set1].filter(x => set2.has(x))) // difference can be simulated via let difference = new set([...set1].filter(x => !set2.has(...
Spread syntax (...) - JavaScript
without spread syntax, this is done as: const arr1 = [0, 1, 2]; const arr2 = [3, 4, 5]; // append all
items from arr2 onto arr1 arr1 = arr1.concat(arr2); with spread syntax this becomes: let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; // arr1 is now [0, 1, 2, 3, 4, 5] // note: not to use const otherwise, it will give typeerror (invalid assignment) array.prototype.unshift() is often used to insert an array of values at the start of an existing array.
... without spread syntax, this is done as: const arr1 = [0, 1, 2]; const arr2 = [3, 4, 5]; // prepend all
items from arr2 onto arr1 array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2] with spread syntax, this becomes: let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] note: unlike unshift(), this creates a new arr1, and does not modify the original arr1 array in-place.
display - SVG: Scalable Vector Graphics
t x="20" y="20" width="60" height="60" fill="yellow"></rect> <!-- here the yellow rectangle is not displayed --> <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect> <rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect> </svg> usage notes default value inline value [ <display-outside> | <display-inside> ] | <display-list
item> | <display-internal> | <display-box> | <display-legacy>where <display-outside> = block | inline | run-in<display-inside> = flow | flow-root | table | flex | grid | ruby<display-list
item> = <display-outside>?
...&& list-
item<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-
item | inline-table | inline-flex | inline-grid animatable yes for a description of the values, please refer to the css display property.
SVG element reference - SVG: Scalable Vector Graphics
nts <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use> text content elements <altglyph>, <altglyphdef>, <altglyph
item>, <glyph>, <glyphref>, <textpath>, <text>, <tref>, <tspan> text content child elements <altglyph>, <textpath>, <tref>, <tspan> uncategorized elements <clippath>, <color-profile>, <cursor>, <filter>, <foreignobject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <style>, <view> obsolete and deprecated elements warning: these are old svg elements which are deprecated and should not be used.
... a <altglyph>, <altglyphdef>, <altglyph
item>, <animatecolor> c <cursor> f <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri> g <glyph>, <glyphref> h <hkern> m <missing-glyph> t <tref> v <vkern> ...
SVG documentation index - SVG: Scalable Vector Graphics
224 transform-origin svg, svg attribute the transform-origin svg attribute sets the origin for an
item’s transformations.
... 297 <altglyph
item> deprecated, element, needsexample, reference, svg, svg text content the <altglyph
item> element provides a set of candidates for glyph substitution by the <altglyph> element.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
general change notes length attribute and indexed property for list interfaces implementation status unknown <script> element in content model of all elements implementation status unknown initialize(), append
item(), replace
item(), and insert
itembefore() on list objects making a copy of any list
item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 1240357) rendering model change notes svg root and <foreignobject> not overflow:hid...
...eference basic shapes to <textpath> implementation status unknown side attribute for <textpath> implemented (bug 1446650) render characters for one loop of a single closed path, effected by the startoffset attribute and text-anchor property implementation status unknown <tref> removed implementation status unknown <altglyph>, <altglyphdef>, <altglyph
item> and <glyphref> removed <altglyph>, <altglyphdef> and <altglyph
item> removed (bug 1260032), <glyphref> never really implemented (bug 1302693) svgtextcontentelement.selectsubstring() deprecated implementation status unknown getcomputedtextlength() not including dx and dy values implementation status unknown text in non-rendered elements not included in addressab...
XPath snippets - XPath
context.ownerdocument : document); resolver = resolver || null; context = context || doc; result = doc.evaluate(expr, context, resolver, xpathresult.ordered_node_snapshot_type, null); for(i = 0; i < result.snapshotlength; i++) { a[i] = result.snapshot
item(i); } return a; } getxpathforelement the following function allows one to pass an element and an xml document to find a unique string xpath expression leading back to that element.
... example: defining a getxpathforelement() utility function function getxpathforelement(el, xml) { var xpath = ''; var pos, temp
item2; while(el !== xml.documentelement) { pos = 0; temp
item2 = el; while(temp
item2) { if (temp
item2.nodetype === 1 && temp
item2.nodename === el.nodename) { // if it is element_node of the same name pos += 1; } temp
item2 = temp
item2.previoussibling; } xpath = "*[name()='"+el.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']["+pos+']'+'/'+xpath; el = el.parentnode; } xpath = '/*'+"[name()='"+xml.documentelement.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']"+'/'+xpath; xpath = xpath.replace(/\/$/, ''); return xpath; } resources xpath forum discussion...
Understanding WebAssembly text format - WebAssembly
the local.get/local.set commands refer to the
item to be got/set by its numeric index: parameters are referred to first, in order of their declaration, followed by locals in order of their declaration.
... there is another issue here — using numeric indices to refer to
items can be confusing and annoying, so the text format allows you to name parameters, locals, and most other
items simply by including a name prefixed by a dollar symbol ($) just before the type declaration.
private-browsing - Archive of obsolete content
the windows module will not list any private browser windows, generate any events for private browser windows, or let the add-on open any private browser windows the tabs module will not list any tabs that belong to private browser windows, and the add-on won't receive any events for such tabs any ui components will not be displayed in private browser windows any menus or menu
items created using the context-menu will not be shown in context menus that belong to private browser windows the page-mod module will not attach content scripts to documents belonging to private browser windows any panel objects will not be shown if the active window is a private browser window the selection module will not include any selections made in private browser windows ...
ui - Archive of obsolete content
; var previous = ui.actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = ui.actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = ui.actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = ui.frame({ url: "./frame-player.html" }); var toolbar = ui.toolbar({ title: "player",
items: [previous, next, play, frame] }); the toolbar appears just above the content window: sidebar a sidebar gives you a vertical strip of space for presenting complex user interfaces.
core/promise - Archive of obsolete content
for example grouping promises to observe single resolution of all of them is as simple as this: var group = promised(array); var abc = group(aasync, basync, casync).then(function(
items) { return
items[0] +
items[1] +
items[2]; }); all the all function is provided to consume an array of promises and return a promise that will be accepted upon the acceptance of all the promises in the initial array.
io/file - Archive of obsolete content
const fileio = require("sdk/io/file"); let path = "/users/work/"; let list = fileio.list(path); for (i = 0; i < list.length; i++) { let
item = fileio.join(path, list[i]); if (fileio.isfile(
item)) { console.log(
item + " is a file"); } else { console.log(
item + " is a directory"); } } parameters path : string the path of the object.
Drag & Drop - Archive of obsolete content
rvice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var _ios = components.classes['@mozilla.org/network/io-service;1'].getservice(components.interfaces.nsiioservice); var uris = new array(); // if sourcenode is not null, then the drop was from inside the application if (dragsession.sourcenode) return; // setup a transfer
item to retrieve the file data var trans = components.classes["@mozilla.org/widget/transferable;1"].createinstance(components.interfaces.nsitransferable); trans.adddataflavor("text/x-moz-url"); trans.adddataflavor("application/x-moz-file"); for (var i=0; i<dragsession.numdrop
items; i++) { var uri = null; dragsession.getdata(trans, i); var flavor = {}, data = {}, len...
Forms related code snippets - Archive of obsolete content
ace(rbgnandend, "")]; othiscal.target.value = (this.innerhtml / 100).tofixed(2).substr(-2) + "\/" + (othiscal.current.getmonth() + 1) + "\/" + othiscal.current.getfullyear(); othiscal.container.parentnode.removechild(othiscal.container); return false; } function buildcalendars () { const afields = document.getelementsbyclassname(sdpclass), nlen = afields.length; for (var n
item = 0; n
item < nlen; new datepicker(afields[n
item++])); } const /* customizable by user */ sprefs = "zdp"; sdpclass = "date-picker", smonthsnames = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31...
Preferences - Archive of obsolete content
another caveat you should be aware of is that nsiprefbranch.getchildlist("",{}) returns an array of preference names that start with that branch's root, for example var branch = prefs.getbranch("accessibility."); var children = branch.getchildlist("", {}); will return these
items (for the example tree above): "typeaheadfind.autostart", "typeaheadfind.enablesound", and "usebrailledisplay", not just direct children ("typeaheadfind" and "usebrailledisplay"), as you might have expected.
Tabbox - Archive of obsolete content
rectly remove the current tab and tab panel for the onclosetab tabs event: function removetab(){ var tabbox = document.getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.remove
itemat(currentindex); /*work around if last tab is removed, widget fails to advance to next tab*/ if(-1 == tabbox.selectedindex && tabs.childnodes.length>0){ tabbox.selectedindex=0; } } creating a close tab button to have a tab close button, you must configure the style.
Toolbar - Archive of obsolete content
@optional */ function installbutton(toolbarid, id, afterid) { if (!document.getelementbyid(id)) { var toolbar = document.getelementbyid(toolbarid); // if no afterid is given, then append the
item to the toolbar var before = null; if (afterid) { let elem = document.getelementbyid(afterid); if (elem && elem.parentnode == toolbar) before = elem.nextelementsibling; } toolbar.insert
item(id, before); toolbar.setattribute("currentset", toolbar.currentset); document.persist(toolbar.id, "currentset"); ...
Tree - Archive of obsolete content
g the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree
item from the focused row assuming <tree id="my-tree">, you can use the following to get the tree
item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var tree
item = view.get
itematindex(sel); note that the current index may be unselected (for example, a multi-select tree).
Extension Theming Guidelines - Archive of obsolete content
branding certain
items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package.
Interaction between privileged and non-privileged pages - Archive of obsolete content
var mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltree
item) .roottree
item .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); if you need to to pass lots of data, consider using cdata sections instead of the simple attributes o...
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
rfaces.nsifileinputstream); filestream.init(file, 1, 0, false); var binarystream = components.classes['@mozilla.org/binaryinputstream;1'] .createinstance(components.interfaces.nsibinaryinputstream); binarystream.setinputstream(filestream); var array = binarystream.readbytearray(filestream.available()); binarystream.close(); filestream.close(); alert(array.map( function(a
item) {return a
item.tostring(16); } ).join(' ').touppercase( )); when we initialized nsifileinputstream, we set the second and third parameters to initialize it in read-only mode.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
nt.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow) { var new
item = doc.createelement("menu
item"); new
item.setattribute("value", "testvalue"); new
item.setattribute("label", "another popup menu
item"); menupopup.appendchild(new
item); }; var jsontemplatebtn = ["xul:toolbarbutton", { id: "mytestbutton", class: "toolbarbutton-1", type: "menu", label: "test button label", tooltiptex...
Handling Preferences - Archive of obsolete content
in order to have this button enabled in your extension you need to add the following line to install.rdf: <em:optionsurl>chrome://xulschoolhello/content/preferenceswindow.xul</em:optionsurl> if you want to open this window from a different place in the ui, such as a menu
item or a button in a toolbar, you need to take into account that the opening behavior of a preferences window is different depending on the operating system.
Firefox addons developer guide - Archive of obsolete content
there should be some introductory text on the table of contents page at https://developer.mozilla.org/en/firefox_addons_developer_guide obviously there are a number of fixme
items in the content that need dealing with, but those are already known.
Localizing an extension - Archive of obsolete content
for example, in stockwatcher2.xul, we change this line: <menu
item label="refresh now" oncommand="stockwatcher.refreshinformation()"/> to <menu
item label="&menu_refresh_now.label;" oncommand="stockwatcher.refreshinformation()"/> do this for every string used in each xul file.
No Proxy For configuration - Archive of obsolete content
filter comparison notable bugs bug 172083 - [meta] proxy: "no proxy for"
items bug 80917 - proxy: "no proxy" w/ form based ui bug 91587 - proxy: "no proxy for" default domain filtering fails w/ non-fqdn (e.g., http://web/) bug 201685 - no proxy for: support ipv6 address literals bug 136789 - proxy: no proxy ip entries do not block dns resolved ips bug 314712 - no proxy for: "hostname.domain.com" should block only "hostname.domain.com" bug 72444 - proxy: "bypass proxy...
Widget Cheatsheet - Archive of obsolete content
menu <menu value="menu widget"> <menupopup> <menu
item value="foo" /> <menu
item value="shoo" /> <menu value="sub"> <menupopup> <menu
item value="sub
item" /> </menupopup> </menu> </menupopup> </menu> <menulist value="menulist element"> <menupopup> <menu
item value="foo" /> <menu
item value="shoo" /> <menu
item value="boo" /> </menupopup> </menulist> <menubutton src="back.gif"> <menupopup> <menu
item value="foo" /> <menu
item value="shoo" /> <menu
item value="boo" /> </menupopup> </menubutton> ...
browser - Archive of obsolete content
droppedlinkhandler(event, uri, name) -- firefox 51 or older droppedlinkhandler(event, links) -- firefox 52 or newer event -- drop event, or null if no event is available uri -- uri string of the dropped link name -- name string of the dropped link links -- array of the dropped
items with nsidroppedlink
item interface homepage type: url this attribute allows you to set a homepage for the browser element.
datepicker - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
dialogheader - Archive of obsolete content
for example, for a menu
item in a menu you can add the following css rule when you want to use the value none: menupopup > menu
item, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title.
grid - Archive of obsolete content
the second column is twice as big as the first column --> <groupbox> <caption label="details"/> <grid> <columns> <column flex="1"/> <column flex="2"/> </columns> <rows> <row> <label value="user name"/> <textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menu
item label="accounts"/> <menu
item label="sales" selected="true"/> <menu
item label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, e...
iframe - Archive of obsolete content
attributes showcaret, src, type, transparent properties accessibletype, contentdocument, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menulist oncommand="donav(this);"> <menupopup> <menu
item label="mozilla" value="http://mozilla.org" /> <menu
item label="slashdot" value="http://slashdot.org"/> <menu
item label="sourceforge" value="http://sf.net" /> <menu
item label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myframe" flex="1"/> <script> function donav(obj) { var url = obj.selected
item.value; // note the firstchild is the menupopup...
keyset - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
popupset - Archive of obsolete content
examples <popupset> <menupopup id="clipmenu"> <menu
item label="cut"/> <menu
item label="copy"/> <menu
item label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheig...
scale - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
textbox - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
timepicker - Archive of obsolete content
visible controls have a disabled property which, except for menus and menu
items, is normally preferred to use of the attribute, as it may need to update additional state.
toolbargrippy - Archive of obsolete content
tnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbar
item, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarset - Archive of obsolete content
, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbar
item, toolbarpalette, toolbarseparator, toolbarspacer, toolbox ...
treechildren - Archive of obsolete content
ll(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata example <tree flex="1"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <tree
item> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </tree
item> <tree
item> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </tree
item> </treechildren> </tree> related elements tree, treecols, treecol, tree
item, treerow, treecell an...
treecols - Archive of obsolete content
amespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecol, treechildren, tree
item, treerow, treecell and treeseparator.
treeseparator - Archive of obsolete content
, isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, tree
item, treerow and treecell.
What XULRunner Provides - Archive of obsolete content
extension manager file picker (uses native os filepicker as appropriate) find toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_in
itembedding) javaxpcom embedding gtkmozembed (linux only) activex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if developer time permits and code size is controlled: ldap support spellchecking support (with or without dictionaries pr...
ant script to assemble an extension - Archive of obsolete content
this ant script helps to package an extension <?xml version="1.0"?> this build file was written by régis décamps <decamps@users.sf.net> <project name="blogmark" default="createxpi"> <property name="version" value="1.3-rc1"/> <property name="description" value="new context-menu
item to add the current page in your blogmarks"/> xpi file is created after "chrome/blogmark.jar" is created, which is then stuffed into "blogmark.xpi" <target name="createxpi" depends="createjar" description="assemble the final build blogmark.xpi"> <zip destfile="blogmark-${version}.xpi"> <zipfileset dir="." includes="chrome/blogmark.jar" /> <zipfi...
React interactivity: Editing, filtering, conditional rendering - Learn web development
update the "cancel" button in the edittemplate like so: <button type="button" classname="btn todo-cancel" onclick={() => setediting(false)} > cancel <span classname="visually-hidden">renaming {props.name}</span> </button> with this code in place, you should be able to press the "edit" and "cancel" buttons in your todo
items to toggle between templates.
Getting started with Vue - Learn web development
with a basic introduction out of the way, we'll now go further and build up our sample app, a basic todo list application that allows us to store a list of
items, check them off when done, and filter the list by all, complete, and incomplete todos.
Learn web development
we'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with
items you don't understand, or any other questions or concerns.
Multiprocess on Windows
we will now further detail each of these
items: generating typelibs for all com interfaces you first need to include a library statement in your idl.
Mozilla’s UAAG evaluation report
(p1) vg mozilla implements standard keyboard bindings there are a few missing pieces, such as support in xul comboboxes (menulist) for selecting
items by typing alphanumeric keystrokes 7.3 operating environment conventions.
Accessibility and Mozilla
all accessibility apis to date define a list of possible object roles, or general types, such as button, menu
item, text, etc.
Adding a new CSS property
(note that when the longhand property css_property_parse_value_list, the shorthand property parser would be assumed to be reusing the longhand parser once per
item, not for a whole list, as for properties like background-image or transform-timing-function.) if the property takes a list of keywords other than inherit/initial/etc., auto, none, or normal (which can be expressed using the variant_* flags), you should use variant_keyword and add a keyword table to the nscssprops class.
ESLint
my script is a frame-script, or includes
items that loaded into content scripts: add a line to tell eslint to use the frame-script environment: /* eslint-env mozilla/frame-script */ my script is a worker: add a line to tell eslint to use the worker environment: /* eslint-env worker */ or, to use a chrome worker environment: /* eslint-env mozilla/chrome-worker */ ...
Eclipse CDT
either set those, or else refresh the project (or an individual directory/file) manually using the refresh
item from the context menu in the project explorer tab.
Multiple Firefox profiles
once you get to the point of adding a new
item, you can have the profile dialog show up every time or set the launcher to launch a specific profile.
Process scripts
this can be achieved by traversing the docshell tree up to the top window and then retrieving its content message manager, as follows: function contentmmfromcontentwindow(window) { let tree = window.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidocshelltree
item); let top = tree.sametyperoottree
item; let iface = queryinterface(ci.nsidocshell).queryinterface(ci.nsiinterfacerequestor); return iface.getinterface(ci.nsicontentframemessagemanager); } this is intended for unprivileged pages running in a content process.
Blocked: All storage access requests
the permission can be changed or removed by: going to preferences > content blocking in the custom content blocking section, selecting a value other than all cookies for the cookies
item if the resource that is being blocked doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to your element.
Using the Browser API
then, we disable the "previous" and "next" search
item buttons so that they don't run anything unless there are search
items to cycle between.
Webapps.jsm
checkforupdate: function(adata, amm) doinstall: function doinstall(adata, amm) doinstallpackage: function doinstallpackage(adata, amm) pushcontentaction: function(windowid) popcontentaction: function(windowid) actioncancelled: function(windowid) denyinstall: function(adata) _setupapp: function(adata, aid) _cloneapp: function(adata, anewapp, alocalemanifest, amanifest, aid, alocalid) _wr
itemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appidformanifesturl: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownloadsize: function(afreebytes, anewapp) _getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent:...
JavaScript code modules
customizableui.jsm allows you to interact with customizable buttons and
items in firefox's main window ui.
Localizing with Pontoon
only the toolbar on top belongs to pontoon, containing the following
items (from left to right): list of strings opens a sidebar with a list of all strings to localize.
Localization technical reviews
more intl.properties checkpoints, cont we also check the plural rule for the locale, that the general.useragent.locale is set to the locale code, that accept-lang shows the locale code(s) (like ab, ab-cd,...) and is followed by en and en-us, and finally that intl.menu
items.insertseparatorbeforeaccesskeys = true, where "true" should be left untranslated.
MathML In Action
your feedback can be manifested by putting mathml content on the web, reporting bugs in bugzilla, and, if you can help with code, inspecting/improving the current code, and/or picking up an
item in the todo list.
Leak And Bloat Tests
aim to provide a continuous check within mailnews and its sub-components for the following
items: total memory leaks.
About NSPR
while the object is not declared as opaque, the api provides methods that allow and encourage clients to treat the addresses as polymorphic
items.
PLHashAllocOps
syntax #include <plhash.h> typedef struct plhashallocops { void *(pr_callback *alloctable)(void *pool, prsize size); void (pr_callback *freetable)(void *pool, void *
item); plhashentry *(pr_callback *allocentry)(void *pool, const void *key); void (pr_callback *freeentry)(void *pool, plhashentry *he, pruintn flag); } plhashallocops; #define ht_free_value 0 /* just free the entry's value */ #define ht_free_entry 1 /* free value and entire entry */ description users of the hash table functions can provide their own memory allocation functions.
PL_strlen
returns the length of a specified string (not including the trailing '\0') syntax pruint32 pl_strlen(const char *str); parameter the function has these parameter: str size in bytes of
item to be allocated.
Function_Name
syntax #include <headers.h> returntype function_name( paramtype paramname, paramtype paramname, ); parameters paramname sample: in pointer to a certcertdbhandle representing the certificate database to look in paramname sample: in pointer to an sec
item whose type must be sidercertbuffer and whose data contains a der-encoded certificate description long description of this function, what it does, and why you would use it.
CERT_FindCertByDERCert
syntax #include <cert.h> certcertificate *cert_findcertbydercert( certcertdbhandle *handle, sec
item *dercert ); parameters handle in pointer to a certcertdbhandle representing the certificate database to look in dercert in pointer to an sec
item whose type must be sidercertbuffer and whose data contains a der-encoded certificate description this function looks in the ?nsscryptocontext?
NSS Certificate Download Specification
between those two lines, there must be exactly one
item of any of the supported binary formats described above, and that one
item must be base64 encoded.
Cryptography functions
sec_dersigndata mxr 3.2 and later sec_destroycrl mxr 3.2 and later sec_findcrlbydercert mxr 3.2 and later sec_findcrlbyname mxr 3.2 and later sec_lookupcrls mxr 3.2 and later sec_newcrl mxr 3.2 and later sec_quickderdecode
item mxr 3.6 and later seckey_cachestaticflags mxr 3.10 and later seckey_converttopublickey mxr 3.2 and later seckey_copyprivatekey mxr 3.2 and later seckey_copypublickey mxr 3.6 and later seckey_copysubjectpublickeyinfo mxr 3.4 and later ...
NSS_3.12.1_release_notes.html
bug 439123: assertion failure in libpkix at shutdown bug 440062: incorrect list element count in pkix_list_append
item function bug 442618: eliminate dead function cert_certpackagetype bug 443755: extra semicolon in pkm_tlskeyandmacderive makes conditional code unconditional bug 443760: extra semicolon in seqdatabase makes static analysis tool suspicious bug 448323: certutil -k doesn't report the token and slot names for found keys bug 448324: ocsp checker returns incorrect error code on request with in...
NSS 3.16.2 release notes
it is the same as cert_addextension except that the oid is represented by a sec
item instead of a secoidtag.
NSS 3.24 release notes
items allocated from the arena are still created on the heap, only the arena itself is stack-allocated.
NSS 3.38 release notes
new functions in sec
item.h sec
item_make
item - allocate and make an
item with the requested contents new macros in ssl.h ssl_record_size_limit - used to control the tls record size limit extension notable changes in nss 3.38 fixed cve-2018-0495 in bug 1464971.
NSS Sample Code sample3
2 -- hashing with included secret key" << endl; /* initialize data */ memset(data, 0xbc, sizeof data); /* create a key */ key = pk11_keygen(slot, ckm_generic_secret_key_gen, 0, 128, 0); if (!key) { cout << "create key failed" << endl; goto done; } cout << (void *)key << endl; /* create parameters for crypto context */ /* note: params must be provided, but may be empty */ sec
item noparams; noparams.type = sibuffer; noparams.data = 0; noparams.len = 0; /* create context using the same slot as the key */ // context = pk11_createdigestcontext(sec_oid_md5); context = pk11_createcontextbysymkey(ckm_md5, cka_digest, key, &noparams); if (!context) { cout << "createdigestcontext failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) {...
PKCS11 FAQ
what are "generic crypto svcs" (the first
item listed when you click the view/edit button for the nss internal pkcs #11 module under security devices under options/security in firefox)?
NSS reference
rt cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames manipulating certificates cert_dupcertificate cert_destroycertificate sec_deletepermcertificate __cert_closepermcertdb getting certificate information cert_findcertbyname cert_getcertnicknames cert_freenicknames cert_getdefaultcertdb nss_findcertkeatype comparing sec
item objects sec
item_compare
item key functions key functions seckey_getdefaultkeydb seckey_destroyprivatekey digital signatures this api consists of the routines used to perform signature generation and the routines used to perform signature verification.
TLS Cipher Suite Discovery
they must agree on these
items: key establishment algorithm (such as rsa, dh, or ecdh) peer authentication algorithm (such as rsa, dsa, ecdsa) bulk data encryption algorithm (such as rc4, des, aes) and key size digest algorithm for message authentication checking (sha1, sha256) there are numerous available choices for each of those categories, and the number of possible combinations of all those choices is large.
Creating JavaScript jstest reftests
it is easy to make a test silently pass; anyone who has written js code for the web has written this kind of if-statement: if (typeof gc === 'function') { var arr = []; arr[10000] = '
item'; gc(); asserteq(arr[10000], '
item', 'gc must not wipe out sparse array elements'); } else { print('test skipped: no gc function'); } reportcompare(0, 0, 'ok'); handling abnormal test terminations some tests can terminate abnormally even though the test has technically passed.
How to embed the JavaScript engine
and say: ok = js_definefunctions(cx, global, my_functions); how to call javascript functions from c first, create arguments for the call, here i create arguments with 2
items: // [spidermonkey 24] js::autovaluearray is not defined.
JSAPI User Guide
the rest of the
items in this list talk about security issues that arise within javascript itself, even if the engine is working properly.
ROLE_CELL
interfaces nsiaccessible nsisupports nsiaccessibletext nsiaccessiblehypertext nsiaccessibleeditabletext nsiaccessiblehyperlink nsiaccessibleselectable nsiaccessiblevalue nsiaccessnode mapped to at-spi: atk_role_table_cell atk: atk_role_list_
item ua: nsaccessibilitygrouprole msaa/ia2: role_system_cell used by aria: gridcell xul: <listcell/> html: <td> ...
ROLE_ROW
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:<list
item/> ...
XForms Accessibility
state it is formed as well from model
item properties (mips) of instance node that xforms element is bound to as from valid/invalid or in-range/out-of-range states of instance node.
Embedded Dialog API
the default dialog-posing library is a component (promptservice for instance is part of the embedding component), registered as a component during gecko initialization (by ns_in
itembedding).
FUEL
objects extiapplication objects extiapplication exticonsole extievent
item extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
SMILE
objects extiapplication objects exticonsole extievent
item extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
STEEL
objects extiapplication objects extiapplication exticonsole extievent
item extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
Toolkit API
e management application update service safe mode printing official references structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-
item extension packaging: specific information about multiple-
item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration printing in xul apps see also the following developer pages contain examples and discussions of particular topics: xul xul overlays developing extensions xulrunner developing themes dom ...
Fun With XBL and XPConnect
i could apply a trick similar to what i did for the xpcom object: <property name="autocompletelistener"> <![cdata[ ({ onautocompleteresult: function(a
item, aoriginalstring, amatch) { if ( a
item ) { anonymouscontent[0].value = amatch; } } }) ]]> </property> as long as the js for the value of autocompletelistener evaluates to an object (and wrapping the expression with a set of parens like i did, does this), then the value of autocompletelistener is an object th...
An Overview of XPCOM
xpcom not only supports component software development, it also provides much of the functionality that a development platform provides, such as: component management file abstraction object message passing memory management we will discuss the above
items in detail in the coming chapters, but for now, it can be useful to think of xpcom as a platform for component development, in which features such as those listed above are provided.
Receiving startup notifications
what happens next once you've registered with the category manager, at mozilla startup time (or when the embedding application's ns_in
itembedding() function is called), the appstartupnotifier component is instantiated, and its observe() method is called; this in turn enumerates all components in the app-startup category and sends them the appropriate notifications.
nsIRegistry
try { st.first(); do { var data = st.current
item(); if( data instanceof ci.nsiregistrynode ) print("nsiregistrynode: " + data.nameutf8 + " (" + data.key + ")"); st.next(); } while( components.lastresult == 0 ); } catch(e) {} now, the output is something like: profiles (344) profiles/default (530) profiles/foo (1046) profiles/bar (1518) the number inside the parenthesis is the "key." you can use this key with the rest of the ns...
XPCshell Test Manifest Expressions
there are a fixed set of variables provided by the test harness via mozinfo.py, with many of the values initialized at configure time by wr
itemozinfo.py which writes mozinfo.json into the root of the build directory.
mozIStorageStatementParams
for example, say you create a statement like so: var statement = dbconn.createstatement("select * from table_name where id = :
item_id"); this object would have one property,
item_id, that you can use to bind a value to that named parameter like so: statement.params.
item_id = 2; for more details on why you should bind parameters as opposed to hard-coding them into your statement, please see the overview document about binding parameters.
nsIMenuBoxObject
the box object for a given menu, use code like this: var boxobject = xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject); method overview boolean handlekeypress(in nsidomkeyevent keyevent); void openmenu(in boolean openflag); attributes attribute type description activechild nsidomelement the currently active menu or menu
item child of the menu box.
nsIMsgDBViewCommandUpdater
(for the standalone message window) nsmsgdbviewcommandupdater (for the threadpane message window) nsmsgsearchcommandupdater (for search dialogs) method overview void updatecommandstatus(); void displaymessagechanged(in nsimsgfolder afolder, in astring asubject, in acstring akeywords); void updatenextmessageafterdelete(); methods updatecommandstatus() called when the number of selected
items changes.
nsIMutableArray
void removeelementat( in unsigned long index ); parameters index the position of the
item.
nsINavHistoryObserver
atransitiontype the type of the
item that is about to be removed; this is one of the nsinavbookmarksservice.constants defined in the nsinavbookmarksservice interface.
nsINavHistoryQueryResultNode
method overview void getqueries([optional] out unsigned long querycount, [retval,array,size_is(querycount)] out nsinavhistoryquery queries); attributes attribute type description folder
itemid long long for both simple folder nodes and simple-folder-query nodes, this is set to the concrete
itemid of the folder.
nsINavHistoryService
this is much better than using browserhistory.count since that can be very slow if there is a lot of history (it must enumerate each
item).
nsIWinTaskbar
org/windows-taskbar;1"].getservice(components.interfaces.nsiwintaskbar); // get the docshell for the browser var navigator2 = top.queryinterface(components.interfaces.nsiinterfacerequestor).getinterface(components.interfaces.nsiwebnavigation); var docshell = navigator2.queryinterface(components.interfaces.nsidocshell); // get the parent docshell; this is the top-level docshell var docshelltree
item = docshell.queryinterface(components.interfaces.nsidocshelltree
item); var parent = docshelltree
item.parent; var ds = parent.queryinterface(components.interfaces.nsidocshell); // create the preview taskbar.createtaskbartabpreview(ds, {}); gettaskbarprogress() gets the taskbar progress for a window.
nsIWindowMediator
win.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltree
item).treeowner .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsixulwindow) enumerating windows the following code can be used if you need to do something for each open window of a particular type.
nsIXULTemplateBuilder
the ns
itemplatebuilder interface controls the display of elements using a xul template element and is automatically attached to an element containing a datasources attribute.
XPCOM reference
01, 2010) list of mozilla interfaces as listed on the xpcom interface reference page where that page lists
items by alphabetical sorting, this page attempts to group them by function.
XPCOM tasks
5.1 3rd party code that doesn't use any services from our tree should be below xpcom; particularly, code xpcom could exploit, e.g., expat berkeley db changes to apis, functionality, and implementations the following
items are listed (very) roughly in their order of importance, i.e., fixing observers is the first thing i want to do.
Mail composition back end
an important
item to note is the fact that this interface should also implement the nsimsgcopyservicelistener interface if it wants to be notified of the progress and completion of the copy operation.
Building a Thunderbird extension 3: install manifest
<em:name>my first extension</em:name> <em:version>1.0</em:version> <em:creator>jenzed</em:creator> <em:targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>5.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> the following
items (shown in bold) should be customized for your application: <em:id>myfirstext@jen.zed</em:id>: this is the id of the extension.
Add Option to Context Menu
for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menu
item id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menu
item id="my_option" label="my option concise...
CSSRuleList - Web APIs
description each cssrule can be accessed as rules.
item(index), or simply rules[index], where rules is an object implementing the cssrulelist interface (such as cssstylesheet.cssrules), and index is the 0-based index of the rule, in the order as it appears in the style sheet css.
CSSStyleDeclaration.setProperty() - Web APIs
">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-
items: center; } div button { flex: 1; margin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-
items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition:...
CSSStyleSheet.addRule() - Web APIs
if index is not specified, the next index after the last
item currently in the list is used (that is, the value of cssstylesheet.cssrules.length).
CSSStyleSheet - Web APIs
this is normally used to access individual rules like this: stylesheet.cssrules[i] // where i = 0..cssrules.length-1 to add or remove
items in cssrules, use the cssstylesheet's insertrule() and deleterule() methods.
CSS Painting API - Web APIs
ockwidth + (start * 10) + 10, y); ctx.lineto( blockwidth + (start * 10) + 20, y); ctx.lineto( blockwidth + (start * 10) + 20 + blockheight, blockheight); ctx.lineto( blockwidth + (start * 10) + 10 + blockheight, blockheight); ctx.lineto( blockwidth + (start * 10) + 10, y); ctx.closepath(); ctx.fill(); ctx.stroke(); } } }); we then include the paintworklet: <ul> <li>
item 1</li> <li>
item 2</li> <li>
item 3</li> <li>
item 4</li> <li>
item 5</li> <li>
item 6</li> <li>
item 7</li> <li>
item 8</li> <li>
item 9</li> <li>
item 10</li> <li>
item 11</li> <li>
item 12</li> <li>
item 13</li> <li>
item 14</li> <li>
item 15</li> <li>
item 16</li> <li>
item 17</li> <li>
item 18</li> <li>
item 19</li> <li>
item 20</li> <...
Cache - Web APIs
items in a cache do not get updated unless explicitly requested; they don’t expire unless deleted.
Basic animations - Web APIs
div#selector>div { flex-basis: 30% } @keyframes diss { from { opacity: 1 } to { opacity: 0 } } .keypress>div { border: dashed 3px #fff; height: 48%; width: 48%; display: flex; align-content: center; justify-content: center; align-self: center; align-
items: center; font-size: -webkit-xxx-large; font-weight: 900; color: #fff; transition: .5s; opacity: .1; border-radius: 7px } .keypress { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; opacity: 1...
ChildNode.remove() - Web APIs
with(node) { remove(); } // referenceerror: remove is not defined polyfill you can polyfill the remove() method in internet explorer 9 and higher with the following code: // from:https://github.com/jserz/js_piece/blob/master/dom/childnode/remove()/remove().md (function (arr) { arr.foreach(function (
item) { if (
item.hasownproperty('remove')) { return; } object.defineproperty(
item, 'remove', { configurable: true, enumerable: true, writable: true, value: function remove() { this.parentnode.removechild(this); } }); }); })([element.prototype, characterdata.prototype, documenttype.prototype]); specifications specification stat...
Clipboard API - Web APIs
clipboard
item secure context represents a single
item format, used when reading or writing data.
Element: auxclick event - Web APIs
html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-
items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left mouse buttons are clicked (usually including any "special" buttons on gaming mice).
Element.classList - Web APIs
patch in unsupported methods in domtokenlist (function(domtokenlistproto, testclass){ if (!domtokenlistproto.
item) domtokenlistproto.
item = function(i){ function nullcheck(n) {return n===void 0 ?
Element.className - Web APIs
example let el = document.getelementbyid('
item'); if (el.classname === 'active'){ el.classname = 'inactive'; } else { el.classname = 'active'; } notes the name classname is used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the dom.
Element.closest() - Web APIs
if (window.element && !element.prototype.closest) { element.prototype.closest = function(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i, el = this; do { i = matches.length; while (--i >= 0 && matches.
item(i) !== el) {}; } while ((i < 0) && (el = el.parentelement)); return el; }; } specifications specification status comment domthe definition of 'element.closest()' in that specification.
Element: error event - Web APIs
ml <div class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-
items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { l...
Element.getClientRects() - Web APIs
<h3>a list</h3> <p>note that the border box doesn't include the number, so neither do the client rects.</p> <div> <strong>original</strong> <ol> <li>
item 1</li> <li>
item 2</li> </ol> </div> <div> <strong>ol's rect</strong> <ol class="withclientrectsoverlay"> <li>
item 1</li> <li>
item 2</li> </ol> </div> <div> <strong>each li's rect</strong> <ol> <li class="withclientrectsoverlay">
item 1</li> <li class="withclientrectsoverlay">
item 2</li> </ol> </div> example 3: this html creates two tables with captions.
Element.matches() - Web APIs
es = element.prototype.matchesselector || element.prototype.mozmatchesselector || element.prototype.msmatchesselector || element.prototype.omatchesselector || element.prototype.webkitmatchesselector || function(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i = matches.length; while (--i >= 0 && matches.
item(i) !== this) {} return i > -1; }; } however, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (i.e.
Element.releasePointerCapture() - Web APIs
html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-
items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementb...
Element.setPointerCapture() - Web APIs
html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-
items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementb...
Element: show event - Web APIs
bubbles no cancelable no interface event event handler property onshow examples <div contextmenu="test"></div> <menu type="context" id="test"> <menu
item label="alert" onclick="alert('the alert label has been clicked')" /> </menu> <script> document.getelementbyid("test").addeventlistener("show", function(e){ alert("the context menu will be displayed"); }, false); </script> specifications specification status html5the definition of 'show event' in that specification.
Element: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-
items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); e...
Event.explicitOriginalTarget - Web APIs
function mycommand(ev) { alert(ev.explicitoriginaltarget.nodename); // returns 'menu
item' } <xul:command id="my-cmd-anaction" oncommand="mycommand(event);"/> <xul:menulist> <xul:menupopup> <xul:menu
item label="get my element name!" command="my-cmd-anaction"/> </xul:menupopup> </menulist> specifications this is a mozilla-specific property.
File.webkitRelativePath - Web APIs
html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let
item = document.createelement("li");
item.innerhtml = files[i].webkitrelativepath; output.appendchild(
item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.
FileReader.result - Web APIs
var fileinput = document.queryselector('input[type="file"]'); function read(callback) { var file = fileinput.files.
item(0); var reader = new filereader(); reader.onload = function() { callback(reader.result); } reader.readastext(file); } specifications specification status comment file apithe definition of 'result' in that specification.
FileSystem - Web APIs
7alternate name alternate name uses the non-standard name: domfilesystemedge full support ≤18prefixed notes full support ≤18prefixed notes prefixed implemented with the vendor prefix: webkitnotes edge only supports this api in drag-and-drop scenarios using the the datatransfer
item.webkitgetasentry() method.
File and Directory Entries API - Web APIs
getting access to a file system there are two ways to get access to file systems defined in the current specification draft: when handling a drop event for drag and drop, you can call datatransfer
item.webkitgetasentry() to get the filesystementry for a dropped
item.
Using FormData Objects - Web APIs
eholder="email" required size="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.named
item("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ...
GlobalEventHandlers.oncontextmenu - Web APIs
html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-
items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.set...
GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-
items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, ...
HTMLDetailsElement: toggle event - Web APIs
</details> </section> css body { display: flex; flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript function log
item(e) { const
item = document.queryselector(`[data-id=${e.target.id}]`);
item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', log
item); }); result specifications specification status comment html living standardthe definition of 'toggle event' in that specifi...
HTMLInputElement.multiple - Web APIs
example // fileinput is a <input type=file multiple> let fileinput = document.getelementbyid('myfileinput'); if (fileinput.multiple == true) { for (let i = 0; i < fileinput.files.length; i++) { // loop fileinput.files } // only one file available } else { let file = fileinput.files.
item(0); } ...
HTMLMediaElement.controls - Web APIs
the htmlmediaelement.controls property reflects the controls html attribute, which controls whether user interface controls for playing the media
item will be displayed.
HTMLMediaElement - Web APIs
htmlmediaelement.controls is a boolean that reflects the controls html attribute, indicating whether user interface
items for controlling the resource should be displayed.
HTMLOListElement - Web APIs
� 'a' meaning that the lowercase latin alphabet is used: a, b, c, d, e, … 'a' meaning that the uppercase latin alphabet is used: a, b, c, d, e, … 'i' meaning that the lowercase latin numerals are used: i, ii, iii, iv, v, … 'i' meaning that the uppercase latin numerals are used: i, ii, iii, iv, v, … htmlolistelement.compact is a boolean indicating that spacing between list
items should be reduced.
HTMLOptionsCollection - Web APIs
the htmloptionscollection interface represents a collection of <option> html elements (in document order) and offers methods and properties for selecting from the list as well as optionally altering its
items.
HTMLTableElement.rows - Web APIs
example myrows = mytable.rows; firstrow = mytable.rows[0]; lastrow = mytable.rows.
item(mytable.rows.length-1); this demonstrates how you can use both array syntax (line 2) and the htmlcollection.
item() method (line 3) to obtain individual rows in the table.
HTMLTableRowElement.rowIndex - Web APIs
html <table> <thead> <tr><th>
item</th> <th>price</th></tr> </thead> <tbody> <tr><td>bananas</td> <td>$2</td></tr> <tr><td>oranges</td> <td>$8</td></tr> <tr><td>top sirloin</td> <td>$20</td></tr> </tbody> <tfoot> <tr><td>total</td> <td>$30</td></tr> </tfoot> </table> javascript let rows = document.queryselectorall('tr'); rows.foreach((row) => { let z = document.createelement("td"...
IDBCursor.advance() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function advanceresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(list
item); cursor.advance(2); } else { console.log('every other entry displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'advance()' in th...
IDBCursor.continuePrimaryKey() - Web APIs
the continueprimarykey() method of the idbcursor interface advances the cursor to the to the
item whose key matches the key parameter as well as whose primary key matches the primary key parameter.
IDBCursor.delete() - Web APIs
even power windows is better.'); }; } else { var list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(list
item); } cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'delete()' in t...
IDBCursor.direction - Web APIs
for a complete working example, see our idbcursor 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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(list
item); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed backwards.'); } }; }; specifications specification status comment indexed...
IDBCursor.key - Web APIs
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 list
item = document.createelement('li'); list
item.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(list
item); console.log(cursor.key); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'key' in that...
IDBCursor.primaryKey - Web APIs
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 list
item = document.createelement('li'); list
item.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(list
item); console.log(cursor.primarykey); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'prima...
IDBCursor.request - Web APIs
for example: function displaydata() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(list
item); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database ...
IDBCursor.source - Web APIs
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 list
item = document.createelement('li'); list
item.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(list
item); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' i...
IDBCursor.update() - Web APIs
nsuccess = 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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(list
item); cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'update()' in that specific...
IDBCursorSync - Web APIs
methods continue() advances the cursor to the next position along its direction, to the
item whose key matches the optional key parameter.
IDBCursorWithValue.value - Web APIs
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 list
item = document.createelement('li'); list
item.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(list
item); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in...
IDBCursorWithValue - Web APIs
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 list
item = document.createelement('li'); list
item.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'idbcursorwithvalue' in that specification.
IDBDatabase.createObjectStore() - Web APIs
request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data
items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified",...
IDBDatabase.onabort - Web APIs
gradeneeded = function(event) { var db = event.target.result; db.onerror = function() { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function() { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data
items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified",...
IDBDatabase.onerror - Web APIs
adeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data
items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified",...
IDBDatabase.onversionchange - Web APIs
d = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data
items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified",...
IDBDatabase.transaction() - Web APIs
duplicate
items not allowed.</li>'; }; // you would then go on to do something to this database // via an object store var objectstore = transaction.objectstore("todolist"); // etc.
IDBDatabase - Web APIs
ow.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database using // idbdatabase.createobjectstore var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data
items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified",...
IDBIndex.multiEntry - Web APIs
syntax var ismultientry = myindex.multientry; value a boolean: value effect true there is one record in the index for each
item in an array of keys.
IDBIndex - Web APIs
if true, there is one record in the index for each
item in an array of keys.
IDBKeyRange.bound() - Web APIs
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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'bound(...
IDBKeyRange.lower - Web APIs
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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowe...
IDBKeyRange.lowerBound() - Web APIs
t 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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowe...
IDBKeyRange.lowerOpen - Web APIs
e 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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowerop...
IDBKeyRange.only() - Web APIs
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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(list
item); 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
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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'uppe...
IDBKeyRange.upperBound() - Web APIs
t 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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'u...
IDBKeyRange.upperOpen - Web APIs
e 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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'uppe...
IDBKeyRange - Web APIs
ok 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 list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(list
item); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'idbkeyrange' in that sp...
IDBObjectStore.createIndex() - Web APIs
dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data
items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notifie...
IDBObjectStore.deleteIndex() - Web APIs
// window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data
items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notifie...
IDBOpenDBRequest - Web APIs
e window.indexeddb.open line above // it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data
items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notifie...
IDBRequest.error - Web APIs
").objectstore('todolist'); // get the do-do list with the specified title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the
item // back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; objectstoretitlerequest.onerror = function() { // if an error occurs with the request, log what it is console.log("there has been an error wi...
IDBRequest.onerror - Web APIs
todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the
item back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; objectstoretitlerequest.onerror = function() { // if an error occurs with the request, log what it is console.log("there has been an error wi...
IDBRequest.onsuccess - Web APIs
todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the
item back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'onsuccess' in that specification.
IDBRequest.readyState - Web APIs
todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the
item // back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the readystate of this request is " + updatetitlerequest.readystate); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications ...
IDBRequest.result - Web APIs
todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the
item // back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'result' in that specification.
IDBRequest.source - Web APIs
'todolist'); // get the to-do list object that has this title as its title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the
item // back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the source of this request is " + updatetitlerequest.source); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specificati...
IDBRequest.transaction - Web APIs
todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the
item back // into the database var updatetitlerequest = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.transaction); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata();...
IDBTransaction.commit() - Web APIs
duplicate
items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("myobjstore"); // add our new
item object to the object store var objectstorerequest = objectstore.add(new
item[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the
item // has been stored successfully in the db - for tha...
IIRFilterNode.getFrequencyResponse() - Web APIs
function calcfrequencyresponse() { iirfilter.getfrequencyresponse(myfrequencyarray, magresponseoutput, phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var list
item = document.createelement('li'); list
item.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(list
item); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' i...
Range.cloneContents() - Web APIs
syntax documentfragment = range.clonecontents(); example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").
item(0)); documentfragment = range.clonecontents(); document.body.appendchild(documentfragment); specifications specification status comment domthe definition of 'range.clonecontents()' in that specification.
Range.cloneRange() - Web APIs
syntax clone = range.clonerange(); example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").
item(0)); clone = range.clonerange(); specifications specification status comment domthe definition of 'range.clonerange()' in that specification.
Range.collapse() - Web APIs
example var range = document.createrange(); referencenode = document.getelementsbytagname("div").
item(0); range.selectnode(referencenode); range.collapse(true); specifications specification status comment domthe definition of 'range.collapse()' in that specification.
Range.compareNode() - Web APIs
example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").
item(0)); returnvalue = range.comparenode(document.getelementsbytagname("p").
item(0)); notes this method is obsolete; you should use the w3c dom range.compareboundarypoints() method.
Range.comparePoint() - Web APIs
example range = document.createrange(); range.selectnode(document.getelementsbytagname('div').
item(0)); returnvalue = range.comparepoint(document.getelementsbytagname('p').
item(0), 1); specification specification status comment domthe definition of 'range.comparepoint()' in that specification.
Range.createContextualFragment() - Web APIs
example var tagstring = "<div>i am a div node</div>"; var range = document.createrange(); // make the parent of the first div in the document becomes the context node range.selectnode(document.getelementsbytagname("div").
item(0)); var documentfragment = range.createcontextualfragment(tagstring); document.body.appendchild(documentfragment); specification specification status comment dom parsing and serializationthe definition of 'range.createcontextualfragment()' in that specification.
Range.deleteContents() - Web APIs
syntax range.deletecontents() example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").
item(0)); range.deletecontents(); specifications specification status comment domthe definition of 'range.deletecontents()' in that specification.
Range.detach() - Web APIs
syntax range.detach(); example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").
item(0)); range.detach(); specifications specification status comment domthe definition of 'range.detach()' in that specification.
Range.getBoundingClientRect() - Web APIs
the bounding client rectangle contains everything selected in the range.</p> css #highlight { background: yellow; position: absolute; z-index: -1; } p { width: 200px; } javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').
item(0), 0); range.setendafter(document.getelementsbytagname('b').
item(1), 0); const clientrect = range.getboundingclientrect(); const highlight = document.getelementbyid('highlight'); highlight.style.left = `${clientrect.x}px`; highlight.style.top = `${clientrect.y}px`; highlight.style.width = `${clientrect.width}px`; highlight.style.height = `${clientrect.height}px`; result specification ...
Range.getClientRects() - Web APIs
syntax rectlist = range.getclientrects() example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").
item(0)); rectlist = range.getclientrects(); specification specification status comment css object model (cssom) view modulethe definition of 'range.getclientrects()' in that specification.
Range.insertNode() - Web APIs
example range = document.createrange(); newnode = document.createelement("p"); newnode.appendchild(document.createtextnode("new node inserted here")); range.selectnode(document.getelementsbytagname("div").
item(0)); range.insertnode(newnode); specifications specification status comment domthe definition of 'range.insertnode()' in that specification.
Range.intersectsNode() - Web APIs
example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").
item(0)); var bool = range.intersectsnode(document.getelementsbytagname("p").
item(0)); specification specification status comment domthe definition of 'range.intersectnode()' in that specification.
Range.isPointInRange() - Web APIs
example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").
item(0)); bool = range.ispointinrange(document.getelementsbytagname("p").
item(0),1); specification specification status comment domthe definition of 'range.ispointinrange()' in that specification.
Range.selectNode() - Web APIs
example let range = document.createrange(); let referencenode = document.getelementsbytagname('div').
item(0); range.selectnode(referencenode); specifications specification status comment domthe definition of 'range.selectnode()' in that specification.
Range.setEnd() - Web APIs
example const range = document.createrange(); const endnode = document.getelementsbytagname('p').
item(3); const endoffset = endnode.childnodes.length; range.setend(endnode, endoffset); setend() is commonly used in conjunction with setstart() to fully configure a range.
Range.setEndAfter() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname('div').
item(0); range.setendafter(referencenode); specifications specification status comment domthe definition of 'range.setendafter()' in that specification.
Range.setEndBefore() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").
item(0); range.setendbefore(referencenode); specifications specification status comment domthe definition of 'range.setendbefore()' in that specification.
Range.setStartAfter() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").
item(0); range.setstartafter(referencenode); specifications specification status comment domthe definition of 'range.setstartafter()' in that specification.
Range.setStartBefore() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").
item(0); range.setstartbefore(referencenode); specifications specification status comment domthe definition of 'range.setstartbefore()' in that specification.
Range.toString() - Web APIs
look at the output below.</p> <p id="log"></p> javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').
item(0), 0); range.setendafter(document.getelementsbytagname('b').
item(1), 0); document.getelementbyid('log').textcontent = range.tostring(); result specifications specification status comment domthe definition of 'range.tostring()' in that specification.
ReadableStream.ReadableStream() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let list
item = document.createelement('li'); list
item.textcontent = string; list1.appendchild(list
item); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, /...
ReadableStreamDefaultController.close() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let list
item = document.createelement('li'); list
item.textcontent = string; list1.appendchild(list
item); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, /...
ReadableStreamDefaultController.enqueue() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let list
item = document.createelement('li'); list
item.textcontent = string; list1.appendchild(list
item); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, /...
ReadableStreamDefaultController - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let list
item = document.createelement('li'); list
item.textcontent = string; list1.appendchild(list
item); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, /...
Using the Resource Timing API - Web APIs
performance data buffer not cleared (still have `" + p.length + "`
items"); } function set_resource_timing_buffer_size(n) { if (performance === undefined) { console.log("= performance.setresourcetimingbuffersize(): peformance not supported"); return; } // check if performance.setresourcetimingbuffersize() is supported console.log ("= performance.setresourcetimingbuffersize()"); var supported = typeof performance.setresourcetimingbuffersize == "func...
SVGAnimationElement: beginEvent event - Web APIs
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 list
item = document.createelement('li'); list
item.textcontent = 'beginevent fired'; list.appendchild(list
item); }) animateelem.addeventlistener('repeatevent', (e) => { let list
item = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } list
item.textcontent = msg; list.appendchild(list
item); }) event handler property e...
SVGAnimationElement: repeatEvent event - Web APIs
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 list
item = document.createelement('li'); list
item.textcontent = 'beginevent fired'; list.appendchild(list
item); }) animateelem.addeventlistener('repeatevent', (e) => { let list
item = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } list
item.textcontent = msg; list.appendchild(list
item); }) event handler property e...
Selection.getRangeAt() - Web APIs
example let ranges = []; sel = window.getselection(); for(let i = 0; i < sel.rangecount; i++) { ranges[i] = sel.getrangeat(i); } /* each
item in the ranges array is now * a range object representing one of the * ranges in the current selection */ specifications specification status comment selection apithe definition of 'selection: getrangeat()' in that specification.
SpeechGrammarList - Web APIs
methods speechgrammarlist.
item() standard getter — allows individual speechgrammar objects to be retrieved from the speechgrammarlist using array syntax.
SpeechRecognition.onnomatch - Web APIs
note: the onnomatch handler does not yet work properly in firefox — the speech recognition system always returns a positive match, and then guesses at what
item in the grammar it found.
SpeechRecognitionResult - Web APIs
speechrecognitionresult.length read only returns the length of the "array" — the number of speechrecognitionalternative objects contained in the result (also referred to as "n-best alternatives".) methods speechrecognitionresult.
item a standard getter that allows speechrecognitionalternative objects within the result to be accessed via array syntax.
Storage.clear() - Web APIs
function populatestorage() { localstorage.set
item('bgcolor', 'red'); localstorage.set
item('font', 'helvetica'); localstorage.set
item('image', 'migato.png'); localstorage.clear(); } note: for a real world example, see our web storage demo.
Storage.key() - Web APIs
examples the following function iterates over the local storage keys: function foreachkey(callback) { for (var i = 0; i < localstorage.length; i++) { callback(localstorage.key(i)); } } the following function iterates over the local storage keys and gets the value set for each key: for(var i =0; i < localstorage.length; i++){ console.log(localstorage.get
item(localstorage.key(i))); } note: for a real world example, see our web storage demo.
Using the Storage Access API - Web APIs
// let's access some
items from the first-party cookie jar document.cookie = "foo=bar"; // set a cookie localstorage.set
item("username", "john"); // access a localstorage entry }).catch(_ => { // error obtaining storage access.
Using writable streams - Web APIs
; 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 list
item = document.createelement('li'); list
item.textcontent = "chunk decoded: " + decoded; list.appendchild(list
item); result += decoded; resolve(); }); }, close() { var list
item = document.createelement('li'); list
item.textcontent = "[message received] " + result; list.appendchild(list
item); }, abort(err) { console.log("sink error:", err); } }, queu...
StylePropertyMapReadOnly.keys() - Web APIs
the stylepropertymapreadonly.keys() method returns a new array iterator containing the keys for each
item in stylepropertymapreadonly syntax stylepropertymapreadonly.keys() parameters none.
Text - Web APIs
however, if the element contains markup, it is parsed into information
items and text nodes that form its children.
Touch() - Web APIs
"target", required, of type eventtarget, the
item at which the touch point started when it was first placed on the surface.
Web Workers API - Web APIs
but you can use a large number of
items available under window, including websockets, and data storage mechanisms like indexeddb.
Window.back() - Web APIs
the obsolete and non-standard method back() on the window interface returns the window to the previous
item in the history.
Window: error event - Web APIs
<div class="controls"> <button id="script-error" type="button">generate script error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-
items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); window.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: ...
Window.history - Web APIs
the closest available solution is the location.replace() method, which replaces the current
item of the session history with the provided url.
Window: load event - Web APIs
ge is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-
items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { wind...
Window.updateCommands() - Web APIs
notes this enables or disables
items (setting or clearing the "disabled" attribute on the command node as appropriate), or ensures that the command state reflects the state of the selection by setting current state information in the "state" attribute of the xul command nodes.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
ild = 0; nchild < this.parts.length; nchild++) { onode.removechild(this.parts[nchild]); this.parts[nchild] = new sheet(this.parts[nchild]); } } var nintervid, ocurrent = null, btyping = false, bstart = true, nidx = 0, spart = "", asheets = [], amap = []; this.rate = nrate || 100; this.play = function () { if (btyping) { return; } if (bstart) { var a
items = document.queryselectorall(sselector); if (a
items.length === 0) { return; } for (var n
item = 0; n
item < a
items.length; n
item++) { asheets.push(new sheet(a
items[n
item])); /* uncomment the following line if you have previously hidden your elements via css: */ // a
items[n
item].style.visibility = "visible"; } bstart = false; } nintervid = s...
WritableStream.WritableStream() - Web APIs
; 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 list
item = document.createelement('li'); list
item.textcontent = "chunk decoded: " + decoded; list.appendchild(list
item); result += decoded; resolve(); }); }, close() { var list
item = document.createelement('li'); list
item.textcontent = "[message received] " + result; list.appendchild(list
item); }, abort(err) { console.log("sink error:", err); } }, queu...
WritableStream.getWriter() - Web APIs
; 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 list
item = document.createelement('li'); list
item.textcontent = "chunk decoded: " + decoded; list.appendchild(list
item); result += decoded; resolve(); }); }, close() { var list
item = document.createelement('li'); list
item.textcontent = "[message received] " + result; list.appendchild(list
item); }, abort(err) { console.log("sink error:", err); } }, queu...
WritableStream - Web APIs
; 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 list
item = document.createelement('li'); list
item.textcontent = "chunk decoded: " + decoded; list.appendchild(list
item); result += decoded; resolve(); }); }, close() { var list
item = document.createelement('li'); list
item.textcontent = "[message received] " + result; list.appendchild(list
item); }, abort(err) { console.log("sink error:", err); } }, queu...
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
; 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 list
item = document.createelement('li'); list
item.textcontent = "chunk decoded: " + decoded; list.appendchild(list
item); result += decoded; resolve(); }); }, close() { var list
item = document.createelement('li'); list
item.textcontent = "[message received] " + result; list.appendchild(list
item); }, abort(err) { console.log("sink error:", err); } }, queu...
WritableStreamDefaultWriter.close() - Web APIs
; 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 list
item = document.createelement('li'); list
item.textcontent = "chunk decoded: " + decoded; list.appendchild(list
item); result += decoded; resolve(); }); }, close() { var list
item = document.createelement('li'); list
item.textcontent = "[message received] " + result; list.appendchild(list
item); }, abort(err) { console.log("sink error:", err); } }, queu...
WritableStreamDefaultWriter.write() - Web APIs
; 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 list
item = document.createelement('li'); list
item.textcontent = "chunk decoded: " + decoded; list.appendchild(list
item); result += decoded; resolve(); }); }, close() { var list
item = document.createelement('li'); list
item.textcontent = "[message received] " + result; list.appendchild(list
item); }, abort(err) { console.log("sink error:", err); } }, queu...
WritableStreamDefaultWriter - Web APIs
euingstrategy = 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 list
item = document.createelement('li'); list
item.textcontent = "chunk decoded: " + decoded; list.appendchild(list
item); result += decoded; resolve(); }); }, close() { var list
item = document.createelement('li'); list
item.textcontent = "[message received] " + result; list.appendchild(list
item); }, abort(err) { console.log("sink error:", err)...
XPathResult - Web APIs
xpathresult.snapshot
item() returns an
item of the snapshot collection or null in case the index is not within the range of nodes.
Understandable - Accessibility
3.2.3 consistent navigation (aa) navigation menu/control style and positioning should be consistent between different pages or views of a web page, and the existing
items should appear in the same order, even if for example new iteam are added.
:disabled - CSS: Cascading Style Sheets
</fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billing
items = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billing
items.length; i++) { billing
items[i].disabled = !billing
items[i].disabled; } } result specifications specification status comment html living standardthe definition of ':disabled' in that specification.
:first-child - CSS: Cascading Style Sheets
syntax :first-child examples basic example html <div> <p>this text is selected!</p> <p>this text isn't selected.</p> </div> <div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </div> css p:first-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>
item 1</li> <li>
item 2</li> <li>
item 3 <ul> <li>
item 3.1</li> <li>
item 3.2</li> <li>
item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:first-child { color: red; font-weight: bold; } result specifications specification status comment selectors level 4the definition of ':first-child' in that specification.
:last-child - CSS: Cascading Style Sheets
syntax :last-child examples basic example html <div> <p>this text isn't selected.</p> <p>this text is selected!</p> </div> <div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </div> css p:last-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>
item 1</li> <li>
item 2</li> <li>
item 3 <ul> <li>
item 3.1</li> <li>
item 3.2</li> <li>
item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; } result specifications specification status comment selectors level 4the definition of ':last-child' in that specification.
:nth-last-of-type() - CSS: Cascading Style Sheets
/* selects every fourth <p> element among any group of siblings, counting backwards from the last one */ p:nth-last-of-type(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-of-type, except it counts
items backwards from the end, not forwards from the beginning.
fallback - CSS: Cascading Style Sheets
when the fixed system is used and there are not enough symbols to cover all the list
items, the fallback style will be used for the rest of the list
items.
@counter-style - CSS: Cascading Style Sheets
: <speak-as>; ] | [ fallback: <counter-style-name>; ] }where <counter-style-name> = <custom-ident> examples specifying symbols with counter-style @counter-style circled-alpha { system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; suffix: " "; } the above counter style rule can be applied to lists like this: .
items { list-style: circled-alpha; } which will produce lists like this: Ⓐ one Ⓑ two Ⓒ three Ⓓ four Ⓔ five ...
src - CSS: Cascading Style Sheets
path/to/font.woff) format("woff"); /* explicit format */ src: url('path/to/font.woff'); /* quoted url */ src: url(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple
items */ src: local(font), url(path/to/font.svg) format("svg"), url(path/to/font.woff) format("woff"), url(path/to/font.otf) format("opentype"); values <url> [ format( <string># ) ]?
Implementing image sprites in CSS - CSS: Cascading Style Sheets
implementation suppose an image is given to every
item with class toolbtn: .toolbtn { background: url(myfile.png); display: inline-block; height: 20px; width: 20px; } a background position can be added either as two x, y values after the url()() in the background, or as background-position.
Using CSS transitions - CSS: Cascading Style Sheets
rly, if any property's value list is longer than that for transition-property, it's truncated, so if you have the following css: div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; } this gets interpreted as: div { transition-property: opacity, left; transition-duration: 3s, 5s; } using transitions when highlighting menus a common use of css is to highlight
items in a menu as the user hovers the mouse cursor over them.
Child combinator - CSS: Cascading Style Sheets
/* list
items that are children of the "my-things" list */ ul.my-things > li { margin: 2em; } elements matched by the second selector must be the immediate children of the elements matched by the first selector.
Layout and the containing block - CSS: Cascading Style Sheets
identifying the containing block the process for identifying the containing block depends entirely on the value of the element's position property: if the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-
item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).
Sticky footers - CSS: Cascading Style Sheets
grid auto-placement will place our
items in source order and so the header goes into the first auto sized track, the main content into the 1fr track and the footer into the final auto sized track.
Value definition syntax - CSS: Cascading Style Sheets
exclamation point (!) the exclamation point multiplier after a group indicates that the group is required, and must produce at least one value; even if the grammar of the
items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.
backdrop-filter - CSS: Cascading Style Sheets
: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-
items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result specifications specification status comment filter effects module level 2the definition of 'backdrop-filter' in that specification.
background-position-x - CSS: Cascading Style Sheets
formal definition initial valueleftapplies toall elementsinheritednopercentagesrefer to width of background positioning area minus height of background imagecomputed valuea list, each
item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ left | right | x-start | x-end ]?
background-position-y - CSS: Cascading Style Sheets
formal definition initial valuetopapplies toall elementsinheritednopercentagesrefer to height of background positioning area minus height of background imagecomputed valuea list, each
item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ top | bottom | y-start | y-end ]?
background - CSS: Cascading Style Sheets
-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetsbackground-size: relative to the background positioning areacomputed valueas each of the properties of the shorthand:background-image: as specified, but with <url> values made absolutebackground-position: a list, each
item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentagebackground-size: as specified, but with relative lengths converted into absolute lengthsbackground-repeat: a list, each
item consisting of two keywords, one per dimensionbackground-origin: as specifiedbackground-clip: as specifiedbac...
color-adjust - CSS: Cascading Style Sheets
css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-
items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> <p>need more contrast!</p> </div> result specifications specification status comment css color adjustment module level 1the definition of 'color-adjust' in that specification.
content - CSS: Cascading Style Sheets
html <a href="http://www.mozilla.org/">mozilla home page</a> css a::before { content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " mozilla: "; font: x-small arial, sans-serif; color: gray; } result targeting classes this example inserts additional text after special
items in a list.
<display-legacy> - CSS: Cascading Style Sheets
html <div class="container"> <div>flex
item</div> <div>flex
item</div> </div> not a flex
item css .container { display: inline-flex; } result in the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.
<easing-function> - CSS: Cascading Style Sheets
height: 100px; } div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-
items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); const startbtn = document.queryselector('button'); const divelem = document.queryselector('div > div'); startbtn.addeventlistener('click', () => { if(startbtn.textcontent === 'start animation') { divelem.style.animationname = 'move-right'; startbtn.textcontent...
<filter-function> - CSS: Cascading Style Sheets
ption> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-
items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); const slider = document.queryselector('input'); const output = document.queryselector('output'); const curv...
flex-flow - CSS: Cascading Style Sheets
flex
items are laid out in multiple lines */ flex-flow: column-reverse wrap; } specifications specification status comment css flexible box layout modulethe definition of 'flex-flow' in that specification.
float - CSS: Cascading Style Sheets
phasellus feugiat est vel leo finibus congue.</p> </section> css section { border: 1px solid blue; width: 100%; float: left; } div { margin: 5px; width: 50px; height: 150px; } .left { float: left; background: pink; } .right { float: right; background: cyan; } result clearing floats sometimes you may want to force an
item to move below any floated elements.
font-stretch - CSS: Cascading Style Sheets
"container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> </div> css /* this example uses the league mono variable font, developed by tyler finck (https://www.tylerfinck.com/) and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?
item_id=ofl_web */ @font-face { src: url('https://mdn.mozillademos.org/files/16014/leaguemonovariable.ttf'); font-family:'leaguemonovariable'; font-style: normal; font-stretch: 1% 500%; /* required by chrome */ } .container { border: 10px solid #f5f9fa; padding: 0 1rem; font: 1.5rem 'leaguemonovariable', sans-serif; } .condensed { font-stretch: 50%; } .normal { font-stretch: 100%...
font-variant-numeric - CSS: Cascading Style Sheets
[ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples setting ordinal numeric forms html <p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p> css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?
item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status comment css fonts module level 3th...
grid-template-areas - CSS: Cascading Style Sheets
those areas are not associated with any particular grid
item, but can be referenced from the grid-placement properties grid-row-start, grid-row-end, grid-column-start, grid-column-end, and their shorthands grid-row, grid-column, and grid-area.
<length> - CSS: Cascading Style Sheets
ee; position: relative; } .inner { height: 50px; background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); } .result { height: 20px; background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); background-color: orange; display: flex; align-
items: center; margin-top: 10px; } .result code { position: absolute; margin-left: 20px; } .results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-
items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector(...
mask-composite - CSS: Cascading Style Sheets
es compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compos
itemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compos
itemode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; }); result ...
object-fit - CSS: Cascading Style Sheets
2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.3em; } div { display: flex; flex-direction: column; flex-wrap: wrap; align-
items: flex-start; height: 940px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification sta...
scroll-behavior - CSS: Cascading Style Sheets
-container> css a { display: inline-block; width: 50px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center; } nav { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-
items: center; justify-content: center; height: 100%; font-size: 5em; } result specifications specification status comment css object model (cssom) view modulethe definition of 'scroll-behavior' in that specification.
scroll-margin-inline-end - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-
items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin-inline-start - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-
items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-margin-inline - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-
items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-
items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-snap-stop - CSS: Cascading Style Sheets
css /* setup */ :root, body { height: 100%; display: flex; align-
items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* definite scroll snap */ .mandatory-scroll-sna...
scroll-snap-type - CSS: Cascading Style Sheets
rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div> css /* setup */ html, body, .holster { height: 100%; } .holster { display: flex; align-
items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* scroll-snap */ .x.mandatory-scroll-snapping ...
matrix3d() - CSS: Cascading Style Sheets
<div class="face bottom">6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-
items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90de...
<transform-function> - CSS: Cascading Style Sheets
d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-
items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90de...
transform-style - CSS: Cascading Style Sheets
div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </div> css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-
items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90de...
Content Security Policy (CSP) - HTTP
there are specific directives for a wide variety of types of
items, so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers.
Index - HTTP
117 x-dns-prefetch-control dns, http, header the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for
items referenced by the document, including images, css, javascript, and so forth.
HTTP headers - HTTP
x-dns-prefetch-control controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for
items referenced by the document, including images, css, javascript, and so forth.
HTTP Index - HTTP
199 x-dns-prefetch-control dns, http, x-dns-prefetch-control, header the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for
items referenced by the document, including images, css, javascript, and so forth.
Control flow and error handling - JavaScript
openmyfile(); try { wr
itemyfile(thedata); // this may throw an error } catch(e) { handleerror(e); // if an error occurred, handle it } finally { closemyfile(); // always close the resource } if the finally block returns a value, this value becomes the return value of the entire try…catch…finally production, regardless of any return statements in the try and catch blocks: function f() { try { console.log(0)...
Functions - JavaScript
the only formal argument for the function is a string that specifies the characters that separate the
items to concatenate.
Keyed collections - JavaScript
let myset = new set(); myset.add(1); myset.add('some text'); myset.add('foo'); myset.has(1); // true myset.delete('foo'); myset.size; // 2 for (let
item of myset) console.log(
item); // 1 // "some text" converting between array and set you can create an array from a set using array.from or the spread operator.
Regular expressions - JavaScript
for example, to match a single "a" followed by zero or more "b"s followed by "c", you'd use the pattern /ab*c/: the * after "b" means "0 or more occurrences of the preceding
item." in the string "cbbabbbbcdebc", this pattern will match the substring "abbbbc".
JavaScript technologies overview - JavaScript
the html specification also defines restrictions on documents; for example, it requires all children of a <ul> element, which represents an unordered list, to be <li> elements, as those represent list
items.
getter - JavaScript
examples defining a getter on new objects in object initializers this will create a pseudo-property latest for object obj, which will return the last array
item in log.
Array.prototype.length - JavaScript
console.log(arr); // [ 1, 2, <3 empty
items> ] arr.foreach(element => console.log(element)); // 1 // 2 as you can see, the length property does not necessarily indicate the number of defined values in the array.
Array.prototype.slice() - JavaScript
the slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of
items in that array.
JSON.stringify() - JavaScript
{ 'name': 'screenc', 'width': 750, 'height': 120 }); session.screens.push({ 'name': 'screend', 'width': 250, 'height': 60 }); session.screens.push({ 'name': 'screene', 'width': 390, 'height': 120 }); session.screens.push({ 'name': 'screenf', 'width': 1240, 'height': 650 }); // converting the json string with json.stringify() // then saving with localstorage in the name of session localstorage.set
item('session', json.stringify(session)); // example of how to transform the string generated through // json.stringify() and saved in localstorage in json object again var restoredsession = json.parse(localstorage.get
item('session')); // now restoredsession variable contains the object that was saved // in localstorage console.log(restoredsession); well-formed json.stringify() engines implementi...
Object.getOwnPropertyNames() - JavaScript
items on the prototype chain are not listed: function parentclass() {} parentclass.prototype.inheritedmethod = function() {}; function childclass() { this.prop = 5; this.method = function() {}; } childclass.prototype = new parentclass; childclass.prototype.prototypemethod = function() {}; console.log( object.getownpropertynames( new childclass() // ["prop", "method"] ) ); get non-enum...
Object.prototype.hasOwnProperty() - JavaScript
note that the for...in loop is already only iterating enumerable
items, so one should not assume based on the lack of non-enumerable properties shown in the loop that hasownproperty itself is confined strictly to enumerable
items (as with object.getownpropertynames()).
RegExp.prototype[@@split]() - JavaScript
the [@@split]() method still splits on every match of this regexp pattern (or, in the syntax above, regexp), until the number of split
items match the limit or the string falls short of this pattern.
String.prototype.localeCompare() - JavaScript
let
items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
items.sort( (a, b) => a.localecompare(b, 'fr', {ignorepunctuation: true})); // ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] check browser support for extended arguments the locales and options arguments are not supported in all browsers yet.
Optional chaining (?.) - JavaScript
tional chaining with expressions you can also use the optional chaining operator when accessing properties with an expression using the bracket notation of the property accessor: let nestedprop = obj?.['prop' + 'name']; optional chaining not valid on the left-hand side of an assignment let object = {}; object?.property = 1; // uncaught syntaxerror: invalid left-hand side in assignment array
item access with optional chaining let array
item = arr?.[42]; examples basic example this example looks for the value of the name property for the member bar in a map when there is no such member.
const - JavaScript
my_object = {'other_key': 'value'}; // however, object keys are not protected, // so the following statement is executed without problem my_object.key = 'othervalue'; // use object.freeze() to make object immutable // the same applies to arrays const my_array = []; // it's possible to push
items into the array my_array.push('a'); // ["a"] // however, assigning a new array to the variable throws an error // uncaught typeerror: assignment to constant variable.
try...catch - JavaScript
openmyfile(); try { // tie up a resource wr
itemyfile(thedata); } finally { closemyfile(); // always close the resource } examples nested try-blocks first, let's see what happens with this: try { try { throw new error('oops'); } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // output: // "finally" // "outer" "oops" now, if we already caught the exception in the inner try-blo...
<mi> - MathML
that is, although the names suggest the typographic style for the class, semantically,
items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
<mn> - MathML
that is, although the names suggest the typographic style for the class, semantically,
items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
<mo> - MathML
that is, although the names suggest the typographic style for the class, semantically,
items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
<ms> - MathML
that is, although the names suggest the typographic style for the class, semantically,
items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
<mtext> - MathML
that is, although the names suggest the typographic style for the class, semantically,
items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography.
OpenSearch description format
to support autodiscovery, add a <link> element for each plugin to the <head> of your web page: <link rel="search" type="application/opensearchdescription+xml" title="searchtitle" href="pluginurl"> replace the bolded
items as explained below: searchtitle the name of the search to perform, such as "search mdc" or "yahoo!
Progressive web app structure - Progressive web apps (PWAs)
ode block requests permission for notifications when a button is clicked: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); the last block creates notifications that display a randomly-selected
item from the games list: function randomnotification() { var random
item = math.floor(math.random()*games.length); var notiftitle = games[random
item].name; var notifbody = 'created by '+games[random
item].author+'.'; var notifimg = 'data/img/'+games[random
item].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notift...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
create a notification the example app creates a notification out of the available data — a game is picked at random, and the chosen one feeds the notification with the content: it sets the game's name as the title, mentioning the author in the body, and showing the image as an icon: function randomnotification() { var random
item = math.floor(math.random()*games.length); var notiftitle = games[random
item].name; var notifbody = 'created by '+games[random
item].author+'.'; var notifimg = 'data/img/'+games[random
item].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notiftitle, options); settimeout(randomnotification, 30000); } a new rando...
Media - Progressive web apps (PWAs)
place your mouse over the
items in this list to see the actual pointer shapes in your browser: selector selects pointer indicating a link wait indicating that the program cannot accept input progress indicating that the program is working, but can still accept input default the default (usually an arrow) an outline property creates an outline that is often...
Structural overview of progressive web apps - Progressive web apps (PWAs)
var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if (result === 'granted') { randomnotification(); } }); }); the randomnotification() function follows, rounding out the last of the code in the file: function randomnotification() { var random
item = math.floor(math.random()*games.length); var notiftitle = games[random
item].name; var notifbody = 'created by '+games[random
item].author+'.'; var notifimg = 'data/img/'+games[random
item].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notiftitle, options); settimeout(randomnotification, 30000); } the service worker the last f...
<altGlyphDef> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contenteither: one or more <glyphref> elements, or one or more <altglyph
item> elements attributes global attributes core attributes specific attributes none dom interface this element implements the svgaltglyphdefelement interface.
Namespaces crash course - SVG: Scalable Vector Graphics
dom1 (don't use) dom2 (use these instead!) createattribute createattributens createelement createelementns getattributenode getattributenodens getattribute getattributens getelementsbytagname getelementsbytagnamens (also added to element) getnamed
item getnamed
itemns hasattribute hasattributens removeattribute removeattributens removenamed
item removenamed
itemns setattribute setattributens setattributenode setattributenodens setnamed
item setnamed
itemns the first parameter for all the dom2 namespace aware methods must be the namespace name (also known as the namespa...
Same-origin policy - Web security
(a "tuple" is a set of
items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.) the following table gives examples of origin comparisons with the url http://store.company.com/dir/page.html: url outcome reason http://store.company.com/dir2/other.html same origin only the path differs http://store.company.com/dir/inner/another.html same ori...