Ordering Flex Items - CSS: Cascading Style Sheets
new layout methods such as flexbox and grid bring with them the possibility of controlling the order of content. in this article we will take a look at ways in which you can change the visual order of your content when using flexbox. 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. remember that the start line relates to writing modes. the row-related examples abov...
... remember that the start line relates to writing modes. the row-related examples above demonstrate how row and row-reverse work in a left-to-right language such as english. if you are working in a right-to-left language like arabic then row would start on the right, row-reverse on the left. this can seem like a neat way to display things in reverse order however you should be mindful that the items are only visually displayed in reverse order. the specification says the following on this matter: “note: the reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. this allows authors to manipulate the visual presentation while leaving the source order intact for non-css uas and for linear models ...
...ng on this matter: “note: the reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. this allows authors to manipulate the visual presentation while leaving the source order intact for non-css uas and for linear models such as speech and sequential navigation.” - ordering and orientation if your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order. if you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source. the specification continues with a warning not to use reorder...
...And 13 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. as a consequence, these packages are no longer accepted by amo. 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. there is currently no feature to prevent or warn the user when installing an older version of an extension. ...
...xpi file extension) and themes (e.g. jar file extension). ...
...xpi file extension) and themes (e.g. jar file extension). ...
...And 12 more matches

DataTransferItem.webkitGetAsEntry() - Web APIs
this will be either filesystemfileentry or filesystemdirectoryentry. ...
...this will be either filesystemfileentry or filesystemdirectoryentry. ...
...this will be either filesystemfileentry or filesystemdirectoryentry. example in this example, a drop zone is created, which responds to the drop event by scanning through the dropped files and directories, outputting a hierarchical directory listing. ...
...And 12 more matches

DataTransferItemList.remove() - Web APIs
example this example shows the use of the remove() method. ...
... example this example shows the use of the remove() method. ...
... example this example shows the use of the remove() method. ...
...And 10 more matches

Add a Context Menu Item - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm. 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. ...
...rial you'll need to have learned the basics of jpm. 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. ...
... have learned the basics of jpm. 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 9 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 datatransferitemlist object containing datatransferitem objects representing the items being dragged in a drag operation, one list item for each object being dragged. if the drag operation had no data, the list is empty. example this example shows the use of the items and types properties. ...
...tatransfer.items; return value a datatransferitemlist object containing datatransferitem objects representing the items being dragged in a drag operation, one list item for each object being dragged. if the drag operation had no data, the list is empty. example this example shows the use of the items and types properties. ...
...ult(); // 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.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("... ...
...And 9 more matches

listitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single row in a listbox. the text of the listitem is specified either using listcell elements, or by placing a label attribute directly on the listitem element. by default it contains a single listcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. ...
...gle listcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. ...
... side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. ...
...And 8 more matches

appendItem - Archive of obsolete content
« xul reference home appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items. you may optionally set a value. the function returns the newly created element. ...
... « xul reference home appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items. you may optionally set a value. the function returns the newly created element. ...
... « xul reference home appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items. you may optionally set a value. the function returns the newly created element. ...
...And 7 more matches

<menuitem> - HTML: Hypertext Markup Language
permitted content none, it is an empty element. ...
...rough a popup menu. this includes context menus, as well as menus that might be attached to a menu button. a command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an indirect command whose behavior is defined by a separate element. commands can also optionally include a checkbox or be grouped to share radio buttons. (menu items for indirect commands gain checkboxes or radio buttons when defined against elements <input type="checkbox"> and <input type="radio">.) content categories none. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents the <menu> element, where that element is in the popup me...
... omission must have a start tag and must not have an end tag. permitted parents the <menu> element, where that element is in the popup menu state. (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 htmlmenuitemelement attributes this element includes the global attributes; in particular title can be used to describe the command, or provide usage hints. checked boolean attribute which indicates whether the command is selected. may only be used when the type attribute is checkbox or radio. command specifies the id of a separate element, indicating a command to be invoked indirectly. may not ...
...And 7 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. it is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells. ...
...ified. note: the itemref attribute is not part of the microdata data model. it is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells. ...
...ref attribute is not part of the microdata data model. it is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells. ...
...And 7 more matches

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 toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...ey'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 toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...you're placing in the toolbar to be customized then it doesn't need to be in a toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...And 6 more matches

nsIUpdateItem
1.0 66 introduced gecko 1.8 obsolete gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface is obsolete; instead of using the extension manager, you should use the addon manager. ...
...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. read only. id astring the guid of the item. read only. installlocationkey astring the name of the install location where this item is installed. read only. maxappversion astring the maximum version of the application that this item works with, in fvf format. read only. minappversion astring the minimum version of the application that th...
...ead only. id astring the guid of the item. read only. installlocationkey astring the name of the install location where this item is installed. read only. maxappversion astring the maximum version of the application that this item works with, in fvf format. read only. minappversion astring the minimum version of the application that this item works with, in fvf format. read only. name astring the name of this item. read only. objectsource astring returns a js object source representing an nsiupdateitem. read only. targetappid astring the target application id used for checking compatibility for this item. note: add-ons can specify a targetapplication id of toolkit@mozilla.org in th...
...And 6 more matches

insertItemAt - Archive of obsolete content
« xul reference home insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. ...
... « xul reference home insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. ...
... « xul reference home insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. ...
...And 5 more matches

Adding items to the Folder Pane
first, some necessary background on how the folder pane constructs the data it displays. the folder pane tracks modifications to a user's folders and accounts. each time the folder pane determines that it is necessary to invalidate all its data (because of too many changes, or more commonly because the folder pane's "mode" (aka view) has changed), a "rebuild" occurs. ...
...ines that it is necessary to invalidate all its data (because of too many changes, or more commonly because the folder pane's "mode" (aka view) has changed), a "rebuild" occurs. when this happens, the folder pane consults the map-generator for the current mode, and that generator returns the necessary data for the folder pane's display. this data is returned in the form of an array of folder-tree-items. listening for folder pane rebuilds every time the folder pane rebuilds, it fires a "maprebuild" event, which is the ideal opportunity for extensions to step in and modify the display data. the following code snippet listens for that event: let gnumbersext = { load: function gne_load() { window.removeeventlistener("load", gnumbersext.load, false); let tree = document.getelementbyid(...
... function gne_load() { window.removeeventlistener("load", gnumbersext.load, false); let tree = document.getelementbyid("foldertree"); tree.addeventlistener("maprebuild", gnumbersext._insert, false); }, _insert: function gne__insert() { // this function is called when a rebuild occurs } }; window.addeventlistener("load", gnumbersext.load, true); the structure of folder-tree-items the folder pane stores its current display data in a property called _rowmap. this property is an array of folder-tree-items. each item in this array satisfies the following interface: id (attribute) a unique string for this object. must persist over sessions text (attribute) the text to display in the tree level (attribute) the level in the tree to display the item at open (rw, at...
...And 5 more matches

removeItemAt - Archive of obsolete content
« xul reference home removeitemat( index ) return type: element removes the child item in the element at the specified index. the method returns the removed item. ...
... « xul reference home removeitemat( index ) return type: element removes the child item in the element at the specified index. the method returns the removed item. ...
... « xul reference home removeitemat( index ) return type: element removes the child item in the element at the specified index. the method returns the removed item. ...
...And 4 more matches

selectItemRange - Archive of obsolete content
this method does nothing for single-selection list boxes. ...
...this method does nothing for single-selection list boxes. ...
...this method does nothing for single-selection list boxes. ...
...And 4 more matches

Enumerator.item - Archive of obsolete content
non-standard. do not use! ...
... non-standard. do not use! ...
... non-standard. do not use! ...
...And 4 more matches

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. interfaces nsiaccessnode nsiaccessible children no children. ...
... « 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. interfaces nsiaccessnode nsiaccessible children no children. ...
... « 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. interfaces nsiaccessnode nsiaccessible children no children. ...
...And 4 more matches

DataTransferItemList.add() - Web APIs
the datatransferitemlist.add() method creates a new datatransferitem 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 datatransferitem object is returned. syntax datatransferitem = datatransferitemlist.add(data, type); datatransferitem = datatransferitemlist.add(file); parameters data a string representing the drag item's data. type a string of the drag item's type. some example types are text/html and text/plain. file a file object. no type needs to be given in this case. return value a datatransferitem containing the specified data. ...
... example this example shows the use of the add() method. ...
... example this example shows the use of the add() method. ...
...And 4 more matches

DataTransferItemList.clear() - Web APIs
return value undefined example this example shows the use of the clear() method. ...
... return value undefined example this example shows the use of the clear() method. ...
... return value undefined example this example shows the use of the clear() method. ...
...And 4 more matches

DataTransferItemList.length - Web APIs
the read-only length property of the datatransferitemlist interface returns the number of items currently in the drag item list. syntax length = datatransferitemlist.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. example this example shows the use of the length property. ...
...m list is considered to be disabled if the item list's datatransfer object is not associated with a drag data store. example this example shows the use of the length property. 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>... ...
... 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 4 more matches

insertItem - Archive of obsolete content
usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. ...
...usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. ...
...usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. ...
...And 3 more matches

ROLE_OUTLINEITEM
« gecko roles page represents an item in an outline or tree structure. ...
... « gecko roles page represents an item in an outline or tree structure. ...
... « gecko roles page represents an item in an outline or tree structure. ...
...And 3 more matches

ClipboardItem - Web APIs
access to the contents of the clipboard is gated behind the permissions api: the clipboard-write permission is granted automatically to pages when they are in the active tab. the clipboard-read permission must be requested, which you can do by trying to read data from the clipboard. note: to work with text see the clipboard.readtext() and clipboard.writetext() methods of the clipboard interface. ...
...ted behind the permissions api: the clipboard-write permission is granted automatically to pages when they are in the active tab. the clipboard-read permission must be requested, which you can do by trying to read data from the clipboard. note: to work with text see the clipboard.readtext() and clipboard.writetext() methods of the clipboard interface. note: you can only pass in one clipboard item at a time. constructor clipboarditem.clipboarditem() creates a new clipboarditem object, with the mime type as the key and blob as the value properties this interface provides the following properties. types read only returns an array of mime types available within the clipboarditem. methods this interface defines the following methods. gettype() returns a promise that resolv...
...erties this interface provides the following properties. types read only returns an array of mime types available within the clipboarditem. methods this interface defines the following methods. gettype() returns a promise that resolves with a blob of the requested mime type, or an error if the mime type is not found. examples writing to clipboard here we're writing a new clipboarditem.clipboarditem() to the clipboard by requesting a png image using the fetch api, and in turn, the responses' blob() method, to create the new clipboarditem. ...
...And 3 more matches

MSSiteModeEvent - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. mssitemodeevent provides event properties that are specific to pinned site events. this proprietary method is specific to internet explorer and microsoft edge. dom information inheritance hierarchy event mssitemodeevent methods method description initevent initializes a new generic event that the createevent method created. *note that as of microsoft edge, the createevent()/initevent() constructor pattern for synthetic events is deprecated. preventdefa...
...constructor pattern for synthetic events is deprecated. preventdefault cancels the default action of an event. stopimmediatepropagation prevents any further propagation of an event. stoppropagation prevents propagation of an event beyond the current target. properties property description actionurl gets the url of a jump list item that is removed. *this property is not supported for windows store apps using javascript. bubbles gets a value that indicates whether an event propagates up from the event target. buttonid gets the thumbnail toolbar button id that is clicked. *this property is not supported for windows store apps using javascript. cancelable gets a value that indicates whether ...
... gets the element that the event was originally dispatched to. compare to target. target gets the element that is the target of the event. timestamp gets the time, in milliseconds, when an event occurred. ...
...And 3 more matches

getNextItem - Archive of obsolete content
« xul reference home getnextitem( startitem, delta ) return type: element this method returns the item a given distance (delta) after the specified startitem, or null if no such item exists. ...
... « xul reference home getnextitem( startitem, delta ) return type: element this method returns the item a given distance (delta) after the specified startitem, or null if no such item exists. ...
... « xul reference home getnextitem( startitem, delta ) return type: element this method returns the item a given distance (delta) after the specified startitem, or null if no such item exists. ...
...And 2 more matches

getPreviousItem - Archive of obsolete content
« xul reference home getpreviousitem( startitem, delta ) return type: element this method returns the item a given distance (delta) before the specified startitem, or null if no such item exists. ...
... « xul reference home getpreviousitem( startitem, delta ) return type: element this method returns the item a given distance (delta) before the specified startitem, or null if no such item exists. ...
... « xul reference home getpreviousitem( startitem, delta ) return type: element this method returns the item a given distance (delta) before the specified startitem, or null if no such item exists. ...
...And 2 more matches

richlistitem - Archive of obsolete content
attributes disabled, searchlabel, selected, tabindex, value properties accessible, control, disabled, label, selected, tabindex, value examples (example needed) attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. ...
...est you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. searchlabel type: string text used for 'find-as-you-type' (fayt) searching. in situations where the search text is ambiguous or missing, searchlabel can be used to give context to fayt. if searchlabel is not present, fayt falls back to use the label property. selected type: boolean ind...
...ed for 'find-as-you-type' (fayt) searching. in situations where the search text is ambiguous or missing, searchlabel can be used to give context to fayt. if searchlabel is not present, fayt falls back to use the label property. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, ...
...And 2 more matches

treeitem - Archive of obsolete content
set the uri attribute to the variable name to bind to a content node during matching. more information is available in the xul tutorial. ...
...set the uri attribute to the variable name to bind to a content node during matching. more information is available in the xul tutorial. ...
...set the uri attribute to the variable name to bind to a content node during matching. more information is available in the xul tutorial. ...
...And 2 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). while this bug was corrected shortly after 0.9.4 was finished, the bug still affects all netscape 6.2.x versions, as well as compuserve 7.0. the problem in affected browsers, list item markers will very often appear to be too big compared to the text in the list item itself. ...
...(such as the numbers in an ordered list). while this bug was corrected shortly after 0.9.4 was finished, the bug still affects all netscape 6.2.x versions, as well as compuserve 7.0. the problem in affected browsers, list item markers will very often appear to be too big compared to the text in the list item itself. this is most obvious in ordered lists, where the number that precedes each list item may be obviously different than the content that follows it. in fact, the markers were set to be a uniform size that did not change to match the content of the list items, so in rare cases the marker might actually appear to be smaller. see bug 110360, which explains the problem and shows when the fix was applied. in addition, when a document is displayed in "quirks" mode in mozilla 0.9.4 and la...
...see bug 97351 for more details. the solution fortunately, there are mozilla-specific css-like rules that can be used to correct both problems. ...
...And 2 more matches

Storage.getItem() - Web APIs
the getitem() 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.getitem(keyname); parameters keyname a domstring containing the name of the key you want to retrieve the value of. return value a domstring containing the value of the key. if the key does not exist, null is returned. example the following function retrieves three data items from local storage, then uses them to set custom styles on a page. ...
...); parameters keyname a domstring containing the name of the key you want to retrieve the value of. return value a domstring containing the value of the key. if the key does not exist, null is returned. example the following function retrieves three data items from local storage, then uses them to set custom styles on a page. ...
...e name of the key you want to retrieve the value of. return value a domstring containing the value of the key. if the key does not exist, null is returned. 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

Storage.setItem() - Web APIs
particularly, in mobile safari (since ios 5) it always throws when the user enters private mode. ...
...particularly, in mobile safari (since ios 5) it always throws when the user enters private mode. ...
...sed 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.setitem(keyname, keyvalue); parameters keyname a domstring containing the name of the key you want to create/update. keyvalue a domstring containing the value you want to give the key you are creating/updating. return value undefined. exceptions setitem() may throw an exception if the storage is full. particularly, in mobile safari (since ios 5) it always throws when the user enters private mode. (safari sets the quota to 0 bytes in private mode, unlike other browsers, which allow storage in private mode using separate data containers.) hence developers should make sure to always catch possible exceptions from setitem(). example the following ...
...And 2 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. the exact meaning of an itemtype's global identifier is provided by the definition of that identifier within the specified vocabulary. the vocabulary defines whether several items with the same global identifier can coexist and, if so, how items with the same identifier are handled. note: the whatwg definition specifies that an itemid must be a url. however, the following example correctly illustrates that a u...
...ocabulary defines whether several items with the same global identifier can coexist and, if so, how items with the same identifier are handled. note: the whatwg definition specifies that an itemid must be a url. however, the following example correctly illustrates that a urn may also be used. this inconsistency may reflect the incomplete nature of the microdata specification. example html <dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8"> <dt>title <dd itemprop="title">the reality dysfunction <dt>author <dd itemprop="author">peter f. ...
...lowing example correctly illustrates that a urn may also be used. this inconsistency may reflect the incomplete nature of the microdata specification. example html <dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8"> <dt>title <dd itemprop="title">the reality dysfunction <dt>author <dd itemprop="author">peter f. ...
...And 2 more matches

menuitem.name - Archive of obsolete content
« xul reference home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
... « xul reference home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
... « xul reference home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
...s with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...

addItemToSelection - Archive of obsolete content
...
... ...
... ...
... ...

removeItemFromSelection - Archive of obsolete content
...
... ...
... ...
... ...

VBArray.getItem - Archive of obsolete content
dimension1, ..., dimensionn specifies the exact location of the desired element of the vbarray. n equals the number of dimensions in the vbarray. example the following example consists of three parts. the first part is vbscript code to create a visual basic safe array. ...
...> section to run the other two parts. ...
...not supported in windows 8.
...not supported in windows 8.x store apps. see version information. applies to: vbarray object ...

nsIJumpListItem
widget/public/nsijumplistitem.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 winjumplistitem, and add support to addlistbuild and removed items processing. method overview boolean equals(in nsijumplistitem item); attributes attribute type description type short retrieves the jump list item type. read only. ...
... email message, etc.). to add types, create the specific interface here, add an implementation class to winjumplistitem, and add support to addlistbuild and removed items processing. method overview boolean equals(in nsijumplistitem item); attributes attribute type description type short retrieves the jump list item type. read only. constants constant value description jumplist_item_empty 0 empty list item. jumplist_item_separator 1 separator. jumplist_item_link 2 web link item. jumplist_item_shortcut 3 application shortcut. methods equals() compare this item to another. ...
...tribute type description type short retrieves the jump list item type. read only. constants constant value description jumplist_item_empty 0 empty list item. jumplist_item_separator 1 separator. jumplist_item_link 2 web link item. jumplist_item_shortcut 3 application shortcut. methods equals() compare this item to another. compares the type and other properties specific to this item's type: separator - type link - type, uri, title shortcut - type, handler application boolean equals( in nsijumplistitem item ); parameters item another nsijumplistitem to compare to. ...
..._item_link 2 web link item. jumplist_item_shortcut 3 application shortcut. methods equals() compare this item to another. compares the type and other properties specific to this item's type: separator - type link - type, uri, title shortcut - type, handler application boolean equals( in nsijumplistitem item ); parameters item another nsijumplistitem to compare to. ...

DataTransferItem.getAsFile() - Web APIs
if the item is a file, the datatransferitem.getasfile() method returns the drag data item's file object. if the item is not a file, this method returns null. syntax file = datatransferitem.getasfile(); parameters none. return value file if the drag data item is a file, a file object is returned; otherwise null is returned. example this example shows the use of the getasfile() method in a drop event handler. ...
...le, this method returns null. syntax file = datatransferitem.getasfile(); parameters none. return value file if the drag data item is a file, a file object is returned; otherwise null is returned. example this example shows the use of the getasfile() method in a drop event handler. ...
...ile, a file object is returned; otherwise null is returned. example this example shows the use of the getasfile() method in a drop event handler. function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.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("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // dra...
... 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("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("... drop: file "); } } } specifications specification status comment html living standardthe definition of 'getasfile()' in that specification.

DataTransferItem.getAsString() - Web APIs
the datatransferitem.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. kind is string). syntax datatransferitem.getasstring(callback); parameters callback a callback function that has access to the data transfer item's string data. see callback below for details. return value undefined callback the callback parameter is a callback function which accepts one parameter: domstring the drag data item's string data. the callback return value is undefined. example this example shows the use of the getasstring() method as an inline function in a drop event handler. ...
... undefined callback the callback parameter is a callback function which accepts one parameter: domstring the drag data item's string data. the callback return value is undefined. example this example shows the use of the getasstring() method as an inline function in a drop event handler. ...
...the callback return value is undefined. example this example shows the use of the getasstring() method as an inline function in a drop event handler. 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("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // dra...
... 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("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("... drop: file "); } } } specifications specification status comment html living standardthe definition of 'getasstring()' in that specificatio...

DataTransferItem.type - Web APIs
the read-only datatransferitem.type property returns the type (format) of the datatransferitem object representing the drag data item. the type is a unicode string generally given by a mime type, although a mime type is not required. some example types are: text/plain and text/html. syntax dataitem.type; return value a domstring representing the drag data item's type. example this example shows the use of the type property. ...
...e type is a unicode string generally given by a mime type, although a mime type is not required. some example types are: text/plain and text/html. syntax dataitem.type; return value a domstring representing the drag data item's type. example this example shows the use of the type property. ...
... syntax dataitem.type; return value a domstring representing the drag data item's type. example this example shows the use of the type property. 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("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // dra...
... 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("... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("... drop: file "); } } } specifications specification status comment html living standardthe definition of 'type' in that specification. liv...

SVGAltGlyphItemElement - Web APIs
the svgaltglyphitemelement interface corresponds to the <altglyphitem> element. ...
...interface corresponds to the <altglyphitem> element. ...
...0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgaltglyphitemelement" 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">svgaltglyphitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification. properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement. methods this interface doesn't implement any specific methods, but inherits methods from its parent inter...
... recommendation initial definition ...

currentItem - Archive of obsolete content
...
... ...
... ...

selectedItems - Archive of obsolete content
...
... ...
... ...

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. ...
... 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. ...
...nts 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. ...

ClipboardItem() - Web APIs
the clipboarditem() constructor of the clipboard api creates a new clipboarditem object which represents data to be stored or retrieved via the clipboard api, that is clipboard.write() and clipboard.read() respectively. note: image format support varies by browser. see the browser compatibility table for the clipboard interface. syntax var clipboarditem = new clipboarditem(clipboarditemdata); parameters clipboarditemdata an object with the mime type as the key and blob as the value. note: to work with text see the clipboard.readtext() and clipboard.writetext() methods of the clipboard interface. ...
...item = new clipboarditem(clipboarditemdata); parameters clipboarditemdata an object with the mime type as the key and blob as the value. note: to work with text see the clipboard.readtext() and clipboard.writetext() methods of the clipboard interface. examples the below example requests a png image using the fetch api, and in turn, the responses' blob() method, to create a new clipboarditem and write it to the clipboard, using the clipboard api. note: you can only pass in one clipboard item at a time. ...
...i, and in turn, the responses' blob() method, to create a new clipboarditem and write it to the clipboard, using the clipboard api. note: you can only pass in one clipboard item at a time. async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification. working draft initial definition. ...

ClipboardItem.getType() - Web APIs
the gettype() method of the clipboarditem 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 = clipboarditem.gettype(type); parameters type a valid mime type. return value a promise that resolves with a blob object. exceptions domexception the type does not match a known mime type. typeerror no parameter is specified or the type is not that of the clipboarditem. examples in the following example, we're returning all items on the clipboard via the clipboard.read() method. then utilizing the clipboarditem.types property to set the gettype() argument and return the corresponding blob object. ...
...wn mime type. typeerror no parameter is specified or the type is not that of the clipboarditem. examples in the following example, we're returning all items on the clipboard via the clipboard.read() method. then utilizing the clipboarditem.types property to set the gettype() argument and return the corresponding blob object. ...
...not that of the clipboarditem. examples in the following example, we're returning all items on the clipboard via the clipboard.read() method. then utilizing the clipboarditem.types property to set the gettype() argument and return the corresponding blob object. async function getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.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 'clipboarditem' in that specification. ...

ClipboardItem.types - Web APIs
the read-only types property of the clipboarditem interface returns an array of mime types available within the clipboarditem syntax var types = clipboarditem.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 clipboarditem.gettype() method to return the blob object. if no clipboards contents is found for the specified type, an error is returned. ...
...me 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 clipboarditem.gettype() method to return the blob object. if no clipboards contents is found for the specified type, an error is returned. ...
...s on the clipboard via the clipboard.read() method. then checking the types property for available types before utilizing the clipboarditem.gettype() method to return the blob object. if no clipboards contents is found for the specified type, an error is returned. async function getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.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 'clipboarditem' in that specification. ...

DataTransferItem.kind - Web APIs
the read-only datatransferitem.kind property returns a datatransferitem representing the drag data item kind: some text or some file. syntax var itemkind = datatransferitem.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. 'string' if the kind of drag data item is a plain unicode string. example this example shows the use of the kind property. ...
...nsferitem.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. 'string' if the kind of drag data item is a plain unicode string. example this example shows the use of the kind property. ...
...data item is a file. 'string' if the kind of drag data item is a plain unicode string. example this example shows the use of the kind property. function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.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("... drop: html"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data it...

DataTransferItem - Web APIs
the datatransferitem 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 datatransferitem object. this interface has no constructor. properties datatransferitem.kind read only the kind of drag data item, string or file. datatransferitem.type read only the drag data item's type, typically a mime type. methods datatransferitem.getasfile() returns the file object associated with the drag data item (or null if the drag item is not a file). datatransferitem.getasstring() invokes the specified callback with the drag data item string as its argument. ...
...this will generally be either a filesystemfileentry or filesystemdirectoryentry object. example all of this interface's methods and properties have their own reference page, and each reference page has an example of its usage. ...
...ng the selected file's entry in its file system. this will generally be either a filesystemfileentry or filesystemdirectoryentry object. example all of this interface's methods and properties have their own reference page, and each reference page has an example of its usage. specifications specification status comment html living standardthe definition of 'datatransferitem' in that specification. living standard initial definition. html 5.1the definition of 'datatransferitem' in that specification. recommendation w3c snapshot of whatwg file and directory entries apithe definition of 'datatransferitem.webkitgetasentry()' in that specification. draft definition of webkitgetasentry() as part of the file and directory entries api. ...

HTMLCollection.item - Web APIs
the htmlcollection method item() returns the node located at the specified offset into the collection. note: because the contents of an htmlcollection are live, changes to the underlying dom can and will cause the position of individual nodes in the collection to change, so the index value will not necessarily remain constant for a given node. syntax var element = htmlcollection.item(index) parameters index the position of the node to be returned. elements appear in an htmlcollection in the same order in which they appear in the document's source. return value the node at the specified index, or null if index is less than zero or greater than or equal to the length property. usage notes the item() method returns a numbered element from an htmlcollection. in javascript, it is ea...
...e at the specified index, or null if index is less than zero or greater than or equal to the length property. usage notes the item() method returns a numbered element from an htmlcollection. in javascript, it is easier to treat the htmlcollection as an array and to index it using array notation. see the example below. ...
...l if index is less than zero or greater than or equal to the length property. usage notes the item() method returns a numbered element from an htmlcollection. in javascript, it is easier to treat the htmlcollection as an array and to index it using array notation. see the example below. ...

HTMLMenuItemElement - Web APIs
the htmlmenuitemelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating <menuitem> elements. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eve...
...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/htmlmenuitemelement" 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">htmlmenuitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis inte...
... recommendation snapshot of the html living standard. ...

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

Storage.removeItem() - Web APIs
the removeitem() method of the storage interface, when passed a key name, will remove that key from the given storage object if it exists. the storage interface of the web storage api provides access to a particular domain's session or local storage. if there is no item associated with the given key, this method will do nothing. syntax storage.removeitem(keyname); parameters keyname a domstring containing the name of the key you want to remove. return value undefined. example the following function creates three data items inside local storage, then removes the image data item. ...
...age. if there is no item associated with the given key, this method will do nothing. syntax storage.removeitem(keyname); parameters keyname a domstring containing the name of the key you want to remove. return value undefined. example the following function creates three data items inside local storage, then removes the image data item. function populatestorage() { localstorage.setitem('bgcolor', 'red'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'mycat.png'); localstorage.removeitem('image'); } we can do the same for the session storage. ...
...he following function creates three data items inside local storage, then removes the image data item. function populatestorage() { localstorage.setitem('bgcolor', 'red'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'mycat.png'); localstorage.removeitem('image'); } we can do the same for the session storage. function populatestorage() { sessionstorage.setitem('bgcolor', 'red'); sessionstorage.setitem('font', 'helvetica'); sessionstorage.setitem('image', 'mycat.png'); sessionstorage.removeitem('image'); } note: to see this used within a real world example, see our web storage demo. specifications specification status comment html living standardthe definition of 'storage.removeitem' in that specification. livi...

treeitem.label - Archive of obsolete content
además label ...
... además label ...

menulist.appendItem - Archive of obsolete content
« xul reference home appenditem( label, value, description ) return type: element creates a new menuitem element and adds it to the end of the menulist. you may optionally set a value and description. the function returns the new item. ...
... « xul reference home appenditem( label, value, description ) return type: element creates a new menuitem element and adds it to the end of the menulist. you may optionally set a value and description. the function returns the new item. ...

removeAllItems - Archive of obsolete content
...
... ...

itemCount - Archive of obsolete content
« xul reference itemcount type: integer read only property holding the number of child items. ...
... « xul reference itemcount type: integer read only property holding the number of child items. ...

Sizing items in CSS - Learn web development
understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via css and define a few terms around sizing that will help you in the future. ...
...th understanding the concepts here before moving on. ...

nsIDOMStorageItem
dom/interfaces/storage/nsidomstorageitem.idlscriptable this interface represents an object in dom storage. this is for session storage. 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) gecko 1.9.1 note starting in gecko 1.9.1 (firefox 3.5), this is only used for session storage; previously, it was also used for global 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. however, http pages can only see items stored from http pages, and will not see items stored from https pages. as such, this at...
...e, 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. however, http pages can only see items stored from http pages, and will not see items stored from https pages. as such, this attribute is irrelevant for storage that is bound to an origin. value domstring the value associated with the item. see also dom storage structured client-side storage (html 5 specification) nsidomstorage nsidomstorage2 ...

CSSStyleDeclaration.item() - Web APIs
the cssstyledeclaration.item() method interface returns a css property name from a cssstyledeclaration by index. this method doesn't throw exceptions as long as you provide arguments; the empty string is returned if the index is out of range and a typeerror is thrown if no argument is provided. syntax var propertyname = style.item(index); parameters index is the index of the node to be fetched. the index is zero-based. return value propertyname is a domstring that is the name of the css property at the specified index. ...
...ring is returned if the index is out of range and a typeerror is thrown if no argument is provided. syntax var propertyname = style.item(index); parameters index is the index of the node to be fetched. the index is zero-based. return value propertyname is a domstring that is the name of the css property at the specified index. 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. working draft ...

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. it returns null if the number is greater than or equal to the length of the list. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then retrieve the last item in the list using item(tokenlist.length - 1), and write it into the <span>'s node.textcontent. ...
...es in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then retrieve the last item in the list using item(tokenlist.length - 1), and write it into the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let item = classes.item(classes.length-1); span.textcontent = item; the output looks like this: specifications specification status comment domthe definition of 'item()' in that specification. living standard initial definition ...

DataTransferItemList - Web APIs
the datatransferitemlist object is a list of datatransferitem objects representing items being dragged. during a drag operation, each dragevent has a datatransfer property and that property is a datatransferitemlist. this interface has no constructor. properties datatransferitemlist.length read only an unsigned long that is the number of drag items in the list. methods datatransferitemlist.add() adds an item (either a file object or a string) to the drag item list and returns a datatransferitem object for the new item. datatransferitemlist.remove() removes the drag item from the list at the given index. datatransferitemlist.clear() removes all of the drag items from the list. datatransferitemlist.datatransferitem() getter that returns a datatransferitem at the given index. ...
...emoves all of the drag items from the list. datatransferitemlist.datatransferitem() getter that returns a datatransferitem at the given index. example each of this interface's methods and properties has a reference page, and each reference page has an example of its usage. specifications specification status comment html living standardthe definition of 'datatransferitemlist' in that specification. living standard html 5.1the definition of 'datatransferitemlist' in that specification. recommendation not included in w3c html5 recommendation ...

HTMLFormControlsCollection.namedItem() - Web APIs
the htmlformcontrolscollection.nameditem() 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 nameditem() 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.nameditem("value"). syntax var item = collection.nameditem(str); var item = collection[str]; parameters str is a domstring return value item is a radionodelist , element, or null. example html <form> <input id="my-form-control" type="textarea"> </form> javascript // returns the htmlinputelement representing #my-form-control elem1 = document.forms[0]['my-form-control']; specifications ...
... living standard html5the definition of 'htmlformcontrolscollection' in that specification. ...

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

NamedNodeMap.getNamedItem() - Web APIs
the getnameditem() method of the namednodemap interface returns the attr corresponding to the given name, or null if there is no corresponding attribute. ...
... the getnameditem() method of the namednodemap interface returns the attr corresponding to the given name, or null if there is no corresponding attribute. ...

NodeList.item() - Web APIs
returns a node from a nodelist by index. this method doesn't throw exceptions as long as you provide arguments. a value of null is returned if the index is out of range, and a typeerror is thrown if no argument is provided. syntax nodeitem = nodelist.item(index) nodelist is a nodelist. this is usually obtained from another dom property or method, such as childnodes. index is the index of the node to be fetched. the index is zero-based. nodeitem is the indexth node in the nodelist returned by the item method. ...
... provided. syntax nodeitem = nodelist.item(index) nodelist is a nodelist. this is usually obtained from another dom property or method, such as childnodes. index is the index of the node to be fetched. the index is zero-based. nodeitem 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: nodeitem = 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. living standard ...

PaymentItem - Web APIs
the paymentitem 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. label secure context a string specifying a human-readable name or description of the item or service being charged for. this may be displayed to the user by the user agent, depending on the design of the interface. pending secure context a boolean value which is true if the specified amount has not yet been finalized. this can be used to show items such as shipping or tax amounts that depend upon the selection of shipping address, shipping option, or so forth. the user agent may show this i...
...e which is true if the specified amount has not yet been finalized. this can be used to show items such as shipping or tax amounts that depend upon the selection of shipping address, shipping option, or so forth. the user agent may show this information but is not required to do so. specifications specification status comment payment request apithe definition of 'paymentitem' in that specification. candidate recommendation initial definition. ...

SpeechGrammarList.item() - Web APIs
syntax var myfirstgrammar = speechgrammarlistinstance[0]; returns a speechgrammar object. ...
... draft ...

SpeechRecognitionResult.item() - Web APIs
syntax var myalternative = speechrecognitionresultinstance[0]; returns a speechrecognitionalternative object. examples this code is excerpted from our speech color changer example. recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. ...
... draft ...

SpeechRecognitionResultList.item() - Web APIs
syntax var myresult = speechrecognitionresultlistinstance[0]; returns a speechrecognitionresult object. examples this code is excerpted from our speech color changer example. recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects. // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0. ...
... draft ...

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. the index is a number in the range of 0 to one less than the length of the touchlist. return value touchpoint the requested touch object from the touchlist. returns null if the index is not less than the length of the list. example this code example illustrates the use of the touchlist interface's item method and the length property. ...
...touch object from the touchlist. returns null if the index is not less than the length of the list. 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. touch events recommendation ...

XPathResult.snapshotItem() - Web APIs
the snapshotitem() 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. unlike the iterator result, the snapshot does not become invalid, but may not correspond to the current document if it is mutated. syntax var node = result.snapshotitem(i); return value the node at the given index within the node set of the xpathresult. exceptions type_err in case xpathresult.resulttype is not unordered_node_snapshot_type or ordered_node_snapshot_type, an xpathexception of type type_err is thrown. example the following example shows the use of the snapshotitem() method. html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result = do...
...owing example shows the use of the snapshotitem() 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.snapshotitem(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.snapshotitem()' in that specification. recommendation initial definition ...

<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. this can be used together with list-style-type and list-style-position. list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. if no outer value is specified, the principal box will have an outer display type of block. ...
...-position. list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. if no outer value is specified, the principal box will have an outer display type of block. 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-listitem' in that specification. candidate recommendation ...

Add a Menu Item to Firefox - Archive of obsolete content
the sdk doesn't provide a built-in api to add new menu items to firefox. but it's extensible by design, so anyone can build and publish modules for add-on developers to use. to see how to use third-party modules to add a new menu item, see the tutorial on using third-party modules with jpm. ...

listitem.type - Archive of obsolete content
...

menuitem.key - Archive of obsolete content
...

menuitem.type - Archive of obsolete content
« xul reference home type type: one of the values below can be used to create checkable menuitems or for radio button menuitems. checkbox the menuitem is checked. the checked attribute determines whether the menuitem is checked or not. radio the menuitem becomes part of a radio group. other menuitems that have the same value for their name attributes are part of the same radio group. only one menuitem in the same radio group can be checked at once. more information on adding checkmarks to menus in the xul tutorial ...

DOMMenuItemActive - Archive of obsolete content
general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...

DOMMenuItemInactive - Archive of obsolete content
general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...

getIndexOfItem - Archive of obsolete content
« xul reference home getindexofitem( 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. ...

getItemAtIndex - Archive of obsolete content
...

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

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

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

focusedItem - Archive of obsolete content
« xul reference focuseditem type: radio element holds the currently focused item in the radiogroup, which may or may not be the same as the selected item. you can change the focused item by setting this property. ...

menuitem.control - Archive of obsolete content
...

selectedItem - Archive of obsolete content
« xul reference selecteditem type: element holds the currently selected item. if no item is currently selected, this value will be null. you can select an item by setting this value. a select event will be sent to the controlling container (i.e. 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. ...

listitem-iconic - Archive of obsolete content
« xul reference home listitem-iconic use this class to have an image appear on the listitem. specify the image using the image attribute. ...

menuitem-iconic - Archive of obsolete content
« xul reference home menuitem-iconic use this class to have an image appear on the menuitem. specify the image using the image attribute. ...

menuitem-non-iconic - Archive of obsolete content
« xul reference home menuitem-non-iconic normally, menuitems have a margin to the left for an image or checkmark. this class may be used to remove this margin so that the menuitem appears on the left edge of the menupopup. ...

nsIDOMXULSelectControlItemElement
inherits from: nsidomxulelement last changed in gecko 1.7 attributes attribute type description accesskey domstring command domstring control nsidomxulselectcontrolelement read only. crop domstring disabled boolean image domstring label domstring selected boolean read only. ...

CSSValueList.item() - Web APIs
the item() method of the cssvaluelist interface is used to retrieve a cssvalue by ordinal index. the order in this collection represents the order of the values in the css style property. if the index is greater than or equal to the number of values in the list, this method returns null. syntax var cssvalue = cssvaluelist.item(index); parameters index an unsigned long representing the index of the css value within the collection. return value a cssvalue object at the index position in the cssvaluelist, or null if that is not a valid index. specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvaluelist.item' in that specification. obsolete initial definition ...

DataTransfer.mozItemCount - Web APIs
the datatransfer.mozitemcount property returns the number of items being dragged. this can be used, for example, to get the number of files being dragged. note: this property is gecko-specific. this property is read only . syntax datatransfer.mozitemcount; return value a number representing the number of items being dragged. example this example shows the use of the mozitemcount property. function drop_handler(event) { var files = []; var dt = event.datatransfer; for (var i = 0; i < dt.mozitemcount; i++) files.push(dt.mozgetdataat("application/x-moz-file", i)); } specifications this property is not defined in any web standard. ...

<altGlyphItem> - SVG: Scalable Vector Graphics
the <altglyphitem> 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 svgaltglyphitemelement interface. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<altglyphitem>' in that specification. recommendation initial definition ...

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. when the user invokes the context menu, all of the items bound to the current context are automatically added to the menu. if no items are bound, none are added. likewise, any items that were previously in the menu but are not bound to the current context are automatically removed from the menu. you never need to manually remove your items from the menu unless you want them to never appear again. for example, if your add-...
...bound to the current context are automatically added to the menu. if no items are bound, none are added. likewise, any items that were previously in the menu but are not bound to the current context are automatically removed from the menu. you never need to manually remove your items from the menu unless you want them to never appear again. for example, if your add-on needs to add a context menu item whenever the user visits a certain page, don't create the item when that page loads, and don't remove it when the page unloads. rather, create your item only once and supply a context that matches the target url. context menu items are displayed in the order created or in the case of sub menus the order added to the sub menu. menu items for each add-on will be grouped together automatically. if ...
... a certain page, don't create the item when that page loads, and don't remove it when the page unloads. rather, create your item only once and supply a context that matches the target url. context menu items are displayed in the order created or in the case of sub menus the order added to the sub menu. menu items for each add-on will be grouped together automatically. if the total number of menu items in the main context menu from all add-ons exceeds a certain number (normally 10 but configurable with the extensions.addon-sdk.context-menu.overflowthreshold preference) all of the menu items will instead appear in an overflow menu to avoid making the context menu too large. specifying contexts as its name implies, the context menu should be reserved for the occurrence of specific contexts. co...
...And 71 more matches

Index - Web APIs
al, houdini, reference the csspositionvalue constructor creates a new csspositionvalue object which represents values for properties that take a position, for example object-position. 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. 439 cssprimitivevalue api, cssprimitivevalue, interface, reference the cssprimitivev...
...styledeclaration.getpropertypriority() method interface returns a domstring that provides all explicitly set priorities on the css property. 459 cssstyledeclaration.getpropertyvalue() api, cssom, method, reference the cssstyledeclaration.getpropertyvalue() method interface returns a domstring containing the value of a specified css property. 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. 462 cssstyledeclaration.pare...
...keys() the cssunparsedvalue.keys() method returns a new array iterator object that contains the keys for each index in the array. 490 cssunparsedvalue.length api, css typed object model api, cssunparsedvalue, constructor, experimental, houdini, needsexample, property, reference, length the length read-only property of the cssunparsedvalue interface returns the number of items in the object. 491 cssunparsedvalue.values() api, css typed object model api, cssunparsedvalue, constructor, experimental, houdini, method, needsexample, reference, values() the cssunparsedvalue.values() method returns a new array iterator object that contains the values for each index in the cssunparsedvalue object. 492 cssvalue api, cssvalue, dom, interface,...
...And 66 more matches

Index - Archive of obsolete content
41 addon-page add-on sdk, add-ons, extensions, obsolete, reference create a page that does not contain navigational elements. 42 base64 add-on sdk no summary! 43 clipboard add-on sdk interact with the system clipboard, setting and getting its contents. 44 context-menu add-on sdk, add-ons, extensions, firefox, sdk adds items, submenus, and menu separators to the page's context menu. 45 hotkeys add-on sdk assign hotkey combinations to functions in your add-on. 46 indexed-db add-on sdk exposes the indexeddb api to add-ons. 47 l10n add-on sdk localize strings appearing in the add-on's javascript code. 48 notifications add-on sdk, notification...
... jpm no summary! 140 package.json commonjs, jpm, sdk, add-on, package.json the package.json file contains manifest data for your add-on, providing not only descriptive information about the add-on for presentation in the add-ons manager, but other metadata required of add-ons. ...
...d-on, package.json the package.json file contains manifest data for your add-on, providing not only descriptive information about the add-on for presentation in the add-ons manager, but other metadata required of add-ons. ...
...And 65 more matches

nsIAnnotationService
["@mozilla.org/browser/annotation-service;1"] .getservice(components.interfaces.nsiannotationservice); note: the annotation service is not thread-safe. you should only use it from the main thread. ...
...tion-service;1"] .getservice(components.interfaces.nsiannotationservice); note: the annotation service is not thread-safe. you should only use it from the main thread. ...
...n autf8string aname, in nsivariant avalue, in long aflags, in unsigned short aexpiration); void setitemannotation(in long long aitemid, 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 setitemannotationstring(in long long aitemid, 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 setitemannotationint32(in long long aitemid, in autf8string aname, in long avalue, in long aflags, in unsigned short ae...
...And 65 more matches

nsINavBookmarksService
bookmarks consist of a set of user-customizable folders. a uri in history can be contained in one or more such folders. 1.0 67 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: @mozilla.org/browser/nav-bookmarks-service;1. ...
...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 aitemid, 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...
... only! obsolete since gecko 1.9 void getbookmarkidsforuri(in nsiuri auri, [optional] out unsigned long count, [array, retval, size_is(count)] out long long bookmarks); note: renamed from getbookmarkfolders in gecko 1.9 void getbookmarkidsforuritarray(in nsiuri auri, in print64array aresult); native code only! ...
...And 60 more matches

Enhanced Extension Installation - Archive of obsolete content
ication directory. aside from the work of locating the firefox executable in the first place (which varies from platform to platform), this is very limiting because: it forces the third party application to package its firefox integration hooks as a xpi. it forces it to have write access to the firefox directory in order to be installed, which may not always be the case. 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. the system for in...
...ugh. when a newer version fo an existing extension is installed, files for the newer version are copied into the folder used by the older version, and obsolete files are not cleaned up. this can lead to incompatibilities, mysterious crashes and other problems. there are not enough guards in the upgrade and uninstall process to handle failure and abort the operation, restoring the previous state. 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. extension installation and registration is also prohibitively difficult/annoying for developers, who are forced to either dangerously hand-edit all the appropriate manifest files, or package their code as a xpi and install it that...
...tem, chrome registry etc to locate files during the startup process). in the profile directory, the file compatibility.ini stores information about the version of the application (build info) that last started this profile - during startup this file is checked and if the version info held by the running app disagrees with the info held by this file, a compatibility check is run on all installed items. when changes are made to the extensions datasource - new items are installed, old items uninstalled, enabled or disabled, a .autoreg file is written to the profile directory as well, which tells the startup code that the system has been modified, so that it destroys the component registries, finishes pending transactions and regenerates metadata appropriately. datasource structure the extens...
...And 54 more matches

Index - Archive of obsolete content
image but not both. this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages. 3 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment. ...
...ate status, for instance whether the user is online or whether there are new messages. 3 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment. the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms. ...
...nt environment. 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. 4 accessibility/xul accessibility reference accessibility, xul this table is designed to show how to expose text properly for various xul element types. sections in bold are to ...
...And 50 more matches

nss tech note5
p for ckf_en_de_. ...
... 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 secitem */ secitem keyitem; keyitem.data = /* ptr to an array of key bytes */ keyitem.len = /* length of the array of key bytes */ /* turn the secitem into a key object */ pk11symkey* symkey = pk11_importsymkey(slot, ciphermech, pk11_originunwrap, cka_encrypt, &keyitem, null); ...
... cka_encrypt, &keyitem, null); if generating the key - see section generate a symmetric key <big>prepare the parameter for crypto context. iv is relevant only when using cbc mode of encryption. ...
...And 49 more matches

Encrypt 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, secitem* 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_mech...
...1_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, secitem *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. *...
...er); 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. ...
...And 47 more matches

JXON - Archive of obsolete content
are interested to address only some parts of an xml document (and are not starting in javascript/json for templating purposes), use xpath instead of converting the whole document into json. ...
...nly some parts of an xml document (and are not starting in javascript/json for templating purposes), use xpath instead of converting the whole document into json. ...
...xml document (and are not starting in javascript/json for templating purposes), use xpath instead of converting the whole document into json. ...
...And 46 more matches

Menu - Archive of obsolete content
is still under development, the api currently lives in the future and must be imported before it is used: jetpack.future.import("menu"); menus all menus in jetpack are jetpack.menu objects, including both built-in firefox menus and menus that features create. to create a new menu, use one of the jetpack.menu constructors below. constructors jetpack.menu() creates an empty menu. jetpack.menu(menuitems) creates a menu with the given items. parameters menuitems an array of menuitems. jetpack.menu(properties) creates a menu with specific properties. parameters properties an object defining any of the properties below. the items property may be used to define an array of menuitems. properties property type description befo...
...nu, context) and otherwise as beforeshow(menu). menu is the menu object to which beforeshow is attached. context is an object describing the context in which the menu was shown. beforeshow may modify the menu, and when the menu is shown, it will reflect the changes. isshowing boolean true if the menu is currently visible and false otherwise. read-only. ...
...menu). menu is the menu object to which beforeshow is attached. context is an object describing the context in which the menu was shown. beforeshow may modify the menu, and when the menu is shown, it will reflect the changes. isshowing boolean true if the menu is currently visible and false otherwise. read-only. items array an array of menuitems in the menu. read-only. ...
...And 39 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. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for in...
... some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn how to do conditional rendering in vue. creating an editing component we can start by creating a separate component to handle the editing functionality. in your components directory, create a new file called todoitemeditform.vue. copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for &quot;{{label}}&quot;</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> ...
...r {{label}}</span> </button> </div> </form> </template> <script> export default { props: { label: { type: string, required: true }, id: { type: string, required: true } }, data() { return { newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height:...
...And 37 more matches

places/bookmarks - Archive of obsolete content
create, modify, and retrieve bookmarks. 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. save() and search() are both asynchronous functions: they synchronously return a placesemitter object, which then asynchronously emits events as the operation progresses and completes. ...
...ks 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. save() and search() are both asynchronous functions: they synchronously return a placesemitter object, which then asynchronously emits events as the operation progresses and completes. 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. examples creating a new bookmark let { bookmark, save } = require("sdk/places/bookmarks"); // create a new bookmark instance, unsaved let bookmark = bookmark({ title: "mozilla",...
.... ...
...And 33 more matches

Places Developer Guide
fox 3. it provides code samples for many common use-cases, such as crud operations, searching, and observing. overview places is the umbrella term for a set of apis for managing browsing history and uri metadata first introduced in firefox 3. it encompasses history, bookmarks, tags, favicons, and annotations. 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. the api signature and context usually make clear which is required. 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...
... in the bookmark system. some of the apis are uri-centric, some use item ids. the api signature and context usually make clear which is required. 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. ...
...ure and context usually make clear which is required. 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 33 more matches

nsINavBookmarkObserver
toolkit/components/places/nsinavbookmarksservice.idlscriptable this interface is an observer for bookmark changes. ...
... toolkit/components/places/nsinavbookmarksservice.idlscriptable this interface is an observer for bookmark changes. ...
... toolkit/components/places/nsinavbookmarksservice.idlscriptable this interface is an observer for bookmark changes. ...
...And 33 more matches

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
this specification details how alignment should work in all the different layout methods. layout methods will conform to the specification where possible and implement individual behavior based on their differences (features and constraints). while the specification currently specifies alignment details for all layout methods, browsers have not fully implemented all of the specification; however, the css grid layout method has been widely adopted. ...
... which blocks are laid out in block layout. if you have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis. the inline axis runs across the block axis, it is the direction in which text in regular inline flow runs. we are able to align the content inside grid areas, and the grid tracks themselves on these two axes. ...
... have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis. the inline axis runs across the block axis, it is the direction in which text in regular inline flow runs. we are able to align the content inside grid areas, and the grid tracks themselves on these two axes. aligning items on the block axis the align-self and align-items properties control alignment on the block axis. ...
...And 33 more matches

Menus - Archive of obsolete content
ted. this type of menu would be used when you want to have a set of commands yet don't want to use a menu bar, for example in a dialog box. see menu buttons for more information. toolbarbutton toolbar buttons can also support menus. this works just like it does for other buttons. see menu buttons for more information. 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. other user interfaces call this type of widget a combobox. you may also see a popup tag used in place of the menupopup tag. the popup tag is deprecated but is equivalent to the menupopup tag. menu tag overview the following shows a simple m...
... this type of widget a combobox. you may also see a popup tag used in place of the menupopup tag. the popup tag is deprecated but is equivalent to the menupopup tag. menu tag overview the following shows a simple menu example, containing a menubar with a single menu labeled 'file'. <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> there are five tags used in this example, described briefly here: menubar a row of menus that appears along the top of the window or screen. it should contain menu elements. menu a label of a menu on a menubar, for insta...
...enuitem label="exit"/> </menupopup> </menu> </menubar> there are five tags used in this example, described briefly here: menubar a row of menus that appears along the top of the window or screen. it should contain menu elements. menu a label of a menu on a menubar, for instance 'file' or 'tools'. a menu can also be used as the label of a submenu. menupopup a popup containing items to appear on a menu. the menupopup in the example above is a child of the 'file' menu and will appear when the menu label is clicked. menuitem a single item to appear on a menu. when the user moves the mouse over a menuitem, it will highlight the item. the cursor keys can also be used to adjust which menuitem is the current item. a menuitem is associated with a command to carry out. men...
...And 32 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. a listbox may contain multiple columns. there are numerous methods which allow the items in the listbox to be retrieved and modified. you may specify the number of rows to display in the list using the rows attribute. additional rows can be viewed using a scroll bar. a listbox is expected to contain listitem elements. all the rows in the listbox are the same height, which is the height of the tallest item in the list. if you wish to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. attributes ...
...e same height, which is the height of the tallest item in the list. if you wish to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. ...
...the tallest item in the list. if you wish to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. ...
...And 32 more matches

richlistbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of listitems (richlistitems), similar to a listbox, but is designed to be used when the items do not contain simple text content. note: in versions of firefox prior to firefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. ...
... listbox, but is designed to be used when the items do not contain simple text content. note: in versions of firefox prior to firefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. ...
...hen the items do not contain simple text content. note: in versions of firefox prior to firefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. ...
...And 32 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%,...
..."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...
..." 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 ...
...And 32 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, secitem **wrappedkey) { secstatus rv; secitem *data = (secitem *)port_zalloc(sizeof(secitem)); 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...
...->len)*sizeof(unsigned int)); if (!data->data) { pr_fprintf(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) { secitem_freeitem(data, pr_true); } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_false...
...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) { secitem ivitem = { sibuffer, iv, ivlen }; pk11context *ctx = null; secitem *secparam = pk11_paramfromiv(type, &ivitem); 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 30 more matches

nss tech note4
a "level" in a hierarchical namespace), a text description, and some other things. ...
...on, and some other things. ...
...ether the extension is critical value : the value of the extension looping through all extensions certcertextension** extensions =cert->extensions; if (extensions) { while (*extensions) { secitem *ext_oid = &(*extensions)->id; secitem *ext_critical = &(*extensions)->critical; secitem *ext_value = &(*extensions)->value; /* id attribute of the extension */ secoiddata *oiddata = secoid_findoid(ext_oid); if (oiddata == null) { /* oid not found */ /* secitem ext_oid has type (secitemtype), data (unsigned char *) and len (unsigned int) field...
...And 30 more matches

Microdata DOM API - Web APIs
mplemented in some browsers for a long time. nowadays, they have been abandoned and removed from all browsers and are therefore deprecated. you can't use them anymore and this document is kept as information only. microdata becomes even more useful when scripts can use it to expose information to the user, for example offering it in a form that can be used by other applications. ...
...en abandoned and removed from all browsers and are therefore deprecated. you can't use them anymore and this document is kept as information only. microdata becomes even more useful when scripts can use it to expose information to the user, for example offering it in a form that can be used by other applications. the document.getitems(typenames) method provides access to the top-level microdata items. ...
...nd are therefore deprecated. you can't use them anymore and this document is kept as information only. microdata becomes even more useful when scripts can use it to expose information to the user, for example offering it in a form that can be used by other applications. the document.getitems(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. ...
...And 30 more matches

Creating regular expressions for a microsummary generator - Archive of obsolete content
6.0 / seamonkey 2.3) a regular expression is a special kind of string (i.e. a sequence of characters) that matches patterns of characters in other strings. microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages' urls. ...
...tch the urls for ebay auction item pages. by the end of the tutorial, you should know some basics about regular expressions and understand how to create expressions that match urls. for detailed documentation about regular expressions, see core_javascript_1.5_reference:global_objects:regexp. to learn how to create a microsummary generator, see creating a microsummary. 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. ...
...detailed documentation about regular expressions, see core_javascript_1.5_reference:global_objects:regexp. to learn how to create a microsummary generator, see creating a microsummary. 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?viewitem&item=280018439106 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?viewitem&item=280018439106". matching an ebay url to match this url with a regular expression, we need to put characters into the regular expression that match the characters in the url. most of the...
...And 29 more matches

Client-side storage - Learn web development
modern-day web — they are still used commonly to store data related to user personalization and state, e.g. session ids and access tokens. for more information on cookies see our using http cookies article. 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. this is useful when you just need to store some simple data, like the user's name, whether they are logged in, what color to use for the background of the screen, etc. the indexeddb api provides the browser with a complete database system for storing complex data. this can be used for things from complete sets of customer records to even complex d...
...orage data is contained within two object-like structures inside the browser: sessionstorage and localstorage. the first one persists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again. we'll use the second one in this article as it is generally more useful. the storage.setitem() 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.setitem('name','chris'); the storage.getitem() method takes one parameter — the name of a data item you want to retrieve — and returns the item's value. now typ...
...ers: 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.setitem('name','chris'); the storage.getitem() method takes one parameter — the name of a data item you want to retrieve — and returns the item's value. now type these lines into your javascript console: let myname = localstorage.getitem('name'); myname upon typing in the second line, you should see that the myname variable now contains the value of the name data item. the storage.removeitem() method takes one parameter — the name of a data item you want to remove — and removes that item out of web storage. ...
...And 29 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> <h1>main article area</h1> <p>in this layout, we display the areas in source order for any screen less that 500 pixels wide. 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. outside of any media queries i need to name the areas. we name areas using the grid-area property. .main-head { grid-area: header; } .content { grid...
...we are using grid-template-areas to create the layout. outside of any media queries i need to name the areas. we name areas using the grid-area property. .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. staying outside of any media queries i am now going to set up the layout for the mobile width. here i am keeping everything in source order, trying to avoid any disconnect between the source and display as described in the guide grid layout and accessibility. i have not defined any column or row tracks but this layout dictates a single column, and rows will be...
...o. staying outside of any media queries i am now going to set up the layout for the mobile width. here i am keeping everything in source order, trying to avoid any disconnect between the source and display as described in the guide grid layout and accessibility. 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. .wrapper { display: grid; grid-gap: 20px; grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer"; } after setting up a mobile layout we will get this single column at all screen sizes, we can now add a media query and redefine our layout for the circumstance of having enough screen real estate to show two columns. @media (min...
...And 29 more matches

Arrays - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to understand what arrays are and how to manipulate them in javascript. ...
... prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to understand what arrays are and how to manipulate them in javascript. ...
... single objects that contain multiple values stored in a list. array objects can be stored in variables and dealt with in much the same way as any other type of value, the difference being that we can access each value inside the list individually, and do super useful and efficient things with the list, like loop through it and do the same thing to every value. 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. if we didn't have arrays, we'd have to store every item in a separate variable, then call the code that does the printing and adding separately for each item. this would be much longer to write out, les...
...And 28 more matches

Using the Places annotation service
which one to use is usually dictated by the application. ...
...which one to use is usually dictated by the application. uri's are easier to use for services that want to annotate a web page loaded in the browser, while id's are easier to use for services already working with the places database. ...
...which one to use is usually dictated by the application. uri's are easier to use for services that want to annotate a web page loaded in the browser, while id's are easier to use for services already working with the places database. id's also offer the ability to add annotations to containers and queries of the database. ...
...And 27 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
this article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides. when we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. ...
...n the block direction. the cross axis the cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns. if your main axis is column or column-reverse then the cross axis runs along the rows. 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. start and end lines another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. in the past, css was heavily weighted towards horizontal and left-to-right writing modes. modern layout methods encompass the range of writing modes and so we no longer assume ...
...xt will start at the top left of a document and run towards the right hand side, with new lines appearing one under 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. if the flex-direction is row and i am working in english, then the start edge of the main axis will be on the left, the end edge on the right. if i were to work in arabic, then the start edge of my main axis would be on the right and the end edge on the left. in both cases the start edge of the cross axis is at the top of the flex container and the end edge at the bottom, as both...
...And 27 more matches

Manipulating Lists - Archive of obsolete content
« previousnext » the xul listbox provides a number of specialized methods. list manipulation the listbox element provides numerous methods to retrieve and manipulate its items. although listboxes may be manipulated using the standard dom functions as well, it is recommended that the specialized listbox functions be used instead when possible. these functions are bit simpler and will do the right thing. the appenditem() function is used to append a new item to the end a list. ...
...ox functions be used instead when possible. these functions are bit simpler and will do the right thing. the appenditem() function is used to append a new item to the end a list. similar to the dom appendchild() function except that it takes a string label, and you do not have to worry about where to add it in the list structure. here is an example: example 1 : source view <script> function additem(){ document.getelementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'. the two arguments correspond to the label attribute and the value attribute on the listitem element. the value is used only as an extra optional value...
...ementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'. the two arguments correspond to the label attribute and the value attribute on the listitem element. the value is used only as an extra optional value associated with an item which you might wish to use in a script. similarly, there is also an insertitemat() and a removeitemat() function which inserts a new item and removes an existing item respectively. the syntax is as follows: list.insertitemat(3, "thursday", "thu"); list.removeitemat(3); the insertitemat() function takes an additional argument, the position to insert the new item. ...
...And 26 more matches

Rendering a list of Vue components - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...
... prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...
... prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...
...And 26 more matches

Accessibility API cross-reference
they also define a list of possible object states, such as focused, read-only, checked, etc. an interesting problem is that mozilla, safari/khtml, opera, staroffice and other apps are cross-platform, but there is currently no cross-platform accessibility api. ...
... ipc mechanisms used by current generation api's are also not cross-platform, although communication for some cross-platform accessibility api of the future could be done through sockets. these tables describe how various accessibility apis define possible roles of an object, and states. all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc. they also define a list of possible object states, such as focused, read-only, checked, etc. this table is the start of a cross-reference, so we can spot the differences and similarities in the apis. aria is a standard developed as part of the web accessibility initiative, which uses markup syntax quite familiar to users of html, xml, sgml and others. the roles it specifies have alre...
...n that contains mostly site-oriented content, rather than page-specific content. ...
...And 26 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
e time. the two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with grid. one-dimensional vs. two-dimensional layout a simple example can demonstrate the difference between one- and two-dimensional layouts. in this first example, i am using flexbox to lay out a set of boxes. 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. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; backgroun...
...this is where you want a two-dimensional layout method:...
...94d; 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. these items are sharing the available space and not lining up underneath the items above. this is because when you wrap flex items, each new row (or column when working by column) becomes a new flex container. space distribution happens across the row. a common question then is how to make those items line up. this is where you want a two-dimensional layout method: you want to control the alignment by row ...
...And 26 more matches

Creating our first Vue component - Learn web development
along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props, and saving data state. note: if you need to check your code against our version, you can find a finished version of the sample vue app code in our todo-vue repository. ...
...e syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn how to create a vue component, render it inside another component, pass data into it using props, and save its state. creating a todoitem component let's create our first component, which will display a single todo item. we'll use this to build our list of todos. in your moz-todo-vue/src/components directory, create a new file named todoitem.vue. open the file in your code editor. create the component's template section by adding <template></template> to the top of the file. create a <script></script> section below your templ...
... template section by adding <template></template> to the top of the file. create a <script></script> section below your template section. inside the <script> tags, add a default exported object export default {}, which is your component object. your file should now look like this: <template> </template> <script> export default {}; </script> we can now begin to add actual content to our todoitem. vue templates are currently only allowed a single root element — one element needs to wrap everything inside the template section (this will change when vue 3 comes out). we'll use a <div> for that root element. add an empty <div> inside your component template now. inside that <div>, let's add a checkbox and a corresponding label. add an id to the checkbox, and a for attribute map...
...And 25 more matches

ARIA Test Cases - Accessibility
een readers should indicate that this button has an associated menu. screen magnifiers should give indication (if this is not done visually anyway). when the button is pressed, the menu should be tracked like any other menu. 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. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass in non-v-pc-mode. buttons are indicated as menu buttons. menus are tracked, closing menus also results in correct focus tracking. partial fail in v-pc-mode. the fact that a button is a menu button is not indicated with the virtual curs...
...r closed, the new open/closed state should be spoken. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 fail. label and current content as well as role are spoken, also when typing in a new value, that gets reflected. 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. - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - ...
...the groupbox, the description for the entire groupbox should be read by a screen reader. when the button is focused, the description of the button should be read after the button's label and role are read by the screen reader. 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. (al) alternatively, description are not read automatically but may be accessible from a hotkey. however, if the screen reader does not at least indicate that the description exists, users are likely to miss important information. markup used: role="description" and aria-describedby notes: results: at firefox ie opera safari jaws 9 ...
...And 25 more matches

Flexbox - Learn web development
this article explains all the fundamentals. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to use the flexbox layout system to create web layouts. why flexbox? for a long time, the only reliable cross browser-compatible tools available for creating css layouts were things like floats and positioning. ...
...tart with, we need to select which elements are to be laid out as flexible boxes. to do this, we set a special value of display on the parent element of the elements you want to affect. 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. the result of this should be something like so: so, this single declaration gives us everything we need — incredible, right? we have our multiple column layout with equal sized columns, and the columns are all the same height. this is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this. to be clear, let's rei...
... same height. this is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this. to be clear, let's reiterate what is happening here. the element we've given a display value of flex to is acting like a block-level element in terms of how it interacts with the rest of the page, but its children are being laid out as flex items — the next section will explain in more detail what this means. note also that you can use a display value of inline-flex if you wish to lay out an element's children as flex items, but have that element behave like an inline element. ...
...And 24 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, secitem* 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, secitem *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) { secitem ivitem = { sibuffer, iv, ivlen }; pk11context *ctx = null; secitem *secparam = pk11_paramfromiv(ckm_aes_cbc, &ivitem); 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...
...er, iv, ivlen }; pk11context *ctx = null; secitem *secparam = pk11_paramfromiv(ckm_aes_cbc, &ivitem); 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: if (secparam) { secitem_freeitem(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); go...
...And 23 more matches

<ul>: The Unordered List element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, and if the <ul> element's children include at least one <li> element, palpable content. permitted content zero or more <li>, <script> and <template> elements. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. ...
...webtv interface, but not all browsers support it: triangle. if not present and if no css list-style-type property applies to the element, the user agent selects a bullet type depending on the nesting level of the list. warning: do not use this attribute, as it has been deprecated; use the css list-style-type property instead. 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. the bullet style is not defined in the html description of the page, but in its associated css, using the list-style-type property. the <ul> and <ol> elements may be nested as deeply as d...
... which can be of several forms, like a dot, a circle, or a square. the bullet style is not defined in the html description of the page, but in its associated css, using the list-style-type property. the <ul> and <ol> elements may be nested as deeply as desired. moreover, the nested lists may alternate between <ol> and <ul> without restriction. ...
...And 23 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
ion to chrome that probably leaves a lot of unanswered questions. if you keep in mind the following three points at the very least, the next section, developing a simple extension, should help flesh out your understanding. an extension’s gui, or chrome, can consist of three kinds of package: content, locale, and skin. use a cross-package overlay on top of browser.xul to add a button or menu item to the firefox browser window. the chrome manifest plays two important roles: it registers the contents of the chrome packages, and invokes the cross-package overlay. 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 installat...
...wo important roles: it registers the contents of the chrome packages, and invokes the cross-package overlay. 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). fixme: figure 3: menu after phase 1 complete source file structure first set up the work folders you’ll use to organize your extension’s source files. the folder can be wherever you want, but for the purposes of this guide, we’ll assume it’s at c:\extensions\helloworld . create folders and files in your work folder as shown in figure 4. the purpose of each...
...this gives basic information about the extension, and is required in order for the extension to be installed in firefox.. chrome.manifest this is the chrome manifest described in the earlier section. registers packages and invokes cross-package overlays. content/overlay.xul xul file that will be overlaid on the firefox browser window, adding buttons, menu items, etc. content/clock.xul content/clock.js the xul to display a clock in the window, and the javascript to control its operation (these files will be used in phase 2). create install manifest fill in the install.rdf file as shown in listing 1. listing 1: content for install.rdf <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="h...
...And 22 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 secitem */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, secitem *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, secitem *sigitem, 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", ...
...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, sigitem, 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 clean...
...And 22 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, secitem* 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...
...11_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, secitem *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 */...
...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) { secitem ivitem = { sibuffer, iv, ivlen }; pk11context *ctx = null; secitem *secparam = pk11_paramfromiv(ckm_aes_cbc, &ivitem); 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 21 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, secitem* 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...
...11_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, secitem *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 */...
...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) { secitem ivitem = { sibuffer, iv, ivlen }; pk11context *ctx = null; secitem *secparam = pk11_paramfromiv(ckm_aes_cbc, &ivitem); 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 21 more matches

NSS Sample Code Sample_3_Basic Encryption and MACing
the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...11_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, secitem *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 */...
...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) { secitem ivitem = { sibuffer, iv, ivlen }; pk11context *ctx = null; secitem *secparam = pk11_paramfromiv(ckm_aes_cbc, &ivitem); 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 21 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 secitem */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, secitem *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, secitem *sigitem, 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, sigitem, 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, secitem *item, prbool ishexdata) { secstatus rv = secsuccess; prfiledesc* file = null; secitem filedata; secitem 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 21 more matches

Places utilities for JavaScript
d. anode - the bookmark aiid - the return interface wanted. there are several predefined versions of this for common calls. these just take in the node, as the interface is already defined: asvisit(anode) asfullvisit(anode) ascontainer(anode) asquery(anode) annotations a few annotation names are defined here. load_in_sidebar_anno - this annotation is associated with bookmarks or items that should load in the sidebar automatically. description_anno - this annotation stores description information about a bookmark. post_data_anno - i need to clarify here, but i think this is the name of the annotation that stores information for keyword searches from a bookmark. lmanno_feeduri - need to clarify here too, but i think for each livemark, there is an bookmark which contains an a...
...; 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 nodeislivemarkitem(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...
... getindexofnode(nsinavhistoryresultnode anode); string wrapnode(nsinavhistoryresultnode anode, string atype, nsiuri aoverrideuri); array unwrapnodes(string blob, string atype); nsitransaction maketransaction(string data, string type, nsinavhistoryresultnode container, int index, boolean copy); nsinavhistoryresult getfoldercontents(int afolderid, boolean aexcludeitems, 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...
...And 21 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
out: the support for different writing modes that is built into the specification. for this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so. logical and physical properties and values css is full of physical positioning keywords – left and right, top and bottom. ...
...uide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so. logical and physical properties and values css is full of physical positioning keywords – left and right, top and bottom. if we position an item using absolute positioning, we use these physical keywords as offset values to push the item around. ...
...nd other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so. logical and physical properties and values css is full of physical positioning keywords – left and right, top and bottom. 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. there are also physical properties in css.
...And 21 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<button label="button" style="min-width: 10em;"/> listing 7: setting the size of a button using css markup hidden and collapsed the hidden and collapsed attributes act as switches to turn off the display of elements. setting hidden="true" disables display of that element. this has the same effect as setting display: none in css. you would use this to set a hidden or absent state, for example items that aren't displayed in contextual menus. setting collapsed="true" sets an element's height and width to 0, but the element is treated as being present. this is equivalent to setting visibility: collapse in css. use this to "roll up" sidebars that aren't currently in use. disabled while not appropriate for all elements, you can use the disabled attribute to temporarily disable input to an el...
... in an application or web service. in the past, a combination of html and javascript was used to produce this sort of complex ui structure, but in xul, it can be handled easily just by writing tags. creating the menu listing 9 shows how the menu element and its related elements are combined. this produces the output seen in figure 6. ...
...cation or web service. in the past, a combination of html and javascript was used to produce this sort of complex ui structure, but in xul, it can be handled easily just by writing tags. creating the menu listing 9 shows how the menu element and its related elements are combined. this produces the output seen in figure 6. ...
...And 19 more matches

Gecko info for Windows accessibility vendors
ws_to = 0x1006 }; enum { navrelation_flows_from = 0x1007 }; these two relations allow the reading flow to break out of the normal dom flow. both flows_to and flows_from are set in markup from the single dynamic content accessibility aaa:flowsto relation -- the inverse flow_from relation is automatically calculated. ...
...he reading flow to break out of the normal dom flow. both flows_to and flows_from are set in markup from the single dynamic content accessibility aaa:flowsto relation -- the inverse flow_from relation is automatically calculated. these relations can affect the calculation for the next next or previous item of a certain type. ...
...and flows_from are set in markup from the single dynamic content accessibility aaa:flowsto relation -- the inverse flow_from relation is automatically calculated. these relations can affect the calculation for the next next or previous item of a certain type. ...
...And 18 more matches

NSS Sample Code Sample1
e. in particular, this // creates the key pair that is used for wrapping keys int init(); // generates keys for encryption (aes) and macing. the // wrapped keys are stored in data files. int generatekeys(); // gets the server's public key (wrapping key) to // send to another server. this becomes the input to // the exportkeys method on the remote server. ...
...er. this becomes the input to // the exportkeys method on the remote server. int exportpublickey(secitem **pubkeydata); // export the encryption and key using the key // provided. the key should come from another server // in the cluster. (the admin should verify this.) // // in this example, the server must be started to perform // this function (see start()) int exportkeys(secitem *pubkey, secitem **wrappedenckey, secitem **wrappedmackey); // import the keys received from another server in the // cluster. the admin should make sure the keys actually // came from the correct source. ...
...(for completeness) int shutdown(); // compare keys in two server instances. ...
...And 18 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. * {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; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px...
... sizin...
...pper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. the default flow is to arrange items by row. grid will lay an item out into each cell of row 1. if you have created additional rows using the grid-template-rows property then grid will continue placing items in these rows. if the grid does not have enough rows in the explicit grid to place all of the items new implicit rows will be created. sizing rows in the implicit grid the default for automatically created rows in the implici...
...And 18 more matches

Microdata - HTML: Hypertext Markup Language
pages. search engines and web crawlers can extract and process microdata from a web page and use it to provide a richer browsing experience for users. search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more relevant results to users. ...
...nt results to users. microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. microdata is an attempt to provide a simpler way of annotating html elements with machine-readable tags than the similar approaches of using rdfa and classic microformats. at a high level, microdata consists of a group of name-value pairs. the groups are called items, and each name-value pair is a property. items and properties are represented by regular elements. to create an item, the itemscope attribute is used. to add a property to an item, the itemprop attribute is used on one of the item's descendants. vocabularies google and other major search engines support the schema.org vocabulary for structured data. this vocabulary defines a standard set ...
...cendants. vocabularies google and other major search engines support the schema.org vocabulary for structured data. this vocabulary defines a standard set of type names and property names, for example, schema.org music event indicates a concert performance, with startdate and location properties to specify the concert's key details. in this case, schema.org music event would be the url used by itemtype and startdate and location would be itemprop's that schema.org music event defines. note: more about itemtype attributes can be found at http://schema.org/thing microdata vocabularies provide the semantics or meaning of an item. web developers can design a custom vocabulary or use vocabularies available on the web, such as the widely used schema.org vocabulary. a collection of commonly us...
...And 18 more matches

Tree View Details - Archive of obsolete content
« previousnext » this section will describe some more features of tree views. creating a hierarchical custom view in the last section, we created a simple tree view that implemented only a minimum amount of functionality. next, let's look at some additional functions that views may implement. 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. nesting level every row in the tree has a nesting level. the topmost rows are at level 0, the children of those rows are at level 1, their children at level 2 and so on. the tree will query the view for each row by calling its getlevel method to find out the level of that row.
... the nesting lines along the side of the tree. the getparentindex method is expected to return the parent row of a given row, that is, the row before it with a lower nesting value. all of these methods must be implemented by the view for children to be handled properly. containers there are also three functions, iscontainer, iscontainerempty and iscontaineropen that are used to handle a parent item in the tree. the iscontainer method should return true if a row is a container and might contain children. the iscontainerempty method should return true if a row is an empty container, for instance, a directory with no files in it. the iscontaineropen method is used to determine which items are opened and closed. the view is required to keep track of this. the tree will call this method to ...
...this method to determine which containers are open and which are closed. note that the tree will call neither iscontainerempty nor iscontaineropen for rows that are not containers as indicated by the return value of the iscontainer method. a container may be rendered differently than a non-container. for instance, a container may have a folder icon beside it. a style sheet may be used to style items based on various properties such as whether a row is open. this is described in a later section. a non-empty container will be displayed with a twisty next to it so that the user may open and close the row to see child items. empty containers will not have a twisty, but will still be treated like a container. when the user clicks the twisty to open a row, the tree will call the view's toggleope...
...And 17 more matches

tree - Archive of obsolete content
ts, the data to display inside the tree is not specified using tags, but is determined from a view object. the view object implements the nsitreeview interface. the view is queried for the data to appear in the tree. there are several ways in which trees are used, as listed below. the second column lists the interfaces available via the tree's view property. the third column indicates whether treeitem element are used. if you would like to allow the tree to be horizontally scrolled, simply set the width attributes for each column to make the tree wider than its containing object. tree type view interfaces has dom nodes? description content tree nsitreeview, nsitreecontentview yes this tree has treeitem elements placed within the treechildren element. in th...
...make the tree wider than its containing object. tree type view interfaces has dom nodes? description content tree nsitreeview, nsitreecontentview yes this tree has treeitem 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 treeitem elements and their descendants to determine the data to display in the tree. however, the treeitems are not displayed directly; they are used only as data to the content view. however, the content view will automatically update the tree if treeitems are changed. rdf tree nsitreeview, nsixultreebuilder no this tree is generated from an rdf datasource. it is used when a tree has a...
...this is the type that should be used for rdf generated trees with lots of rows. ...
...And 17 more matches

Index
he code you've already created in the first part of the tutorial (see weblock1.cpp in the previous chapter) and uses xpcom tools that make coding a lot easier and more efficient. it also introduces a basic string type that is used with many of the apis in both xpcom and gecko. 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. hashtables may seem like arrays, but there are important differences: 114 how to build an xpcom component in javascript add-ons, extensions, javascript, tutorial, xpcom if you are looking for add-on sdk solution for xpcom javascript components then check ou...
...r multiple objects with a numeric, zero-based index. 121 xpcom changes in gecko 2.0 gecko 2.0, xpcom several changes that affect xpcom component compatibility are taking place in gecko 2. this article details those changes, and provides suggestions for how to update your code. 122 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. hashtables may seem like arrays, but there are important differences: 123 mozilla::services namespace developing mozilla, xpcom the services c++ namespace offers an easy and efficient alternative for obtaining a service as compared to the indirect xpcom app...
... getrelation this method returns accessible relation for this accessible object by index. 271 getrelations this method returns multiple accessible relations for this accessible object. 272 getstate this method retrieves states of the accessible. 273 groupposition this method returns grouping information. used for tree items, list items, tab panel labels, radio buttons, etc. also used for collectons of non-text objects. 274 help help text associated with node. 275 indexinparent the 0-based index of this accessible in its parent's list of children, or -1 if this accessible does not have a parent. 276 keyboardshortcut provides localized string of access...
...And 17 more matches

nsIDOMXULSelectControlElement
dom/interfaces/xul/nsidomxulselectcntrlel.idlscriptable please add a summary to this article. ...
... dom/interfaces/xul/nsidomxulselectcntrlel.idlscriptable please add a summary to this article. ...
... dom/interfaces/xul/nsidomxulselectcntrlel.idlscriptable please add a summary to this article. ...
...And 17 more matches

Using the CSS Painting API - Web APIs
arameters of the paint() function include the drawing context, paint size and properties. to be able to access properties, we include the static inputproperties() method, which provides live access to css properties, including regular properties and custom properties, and returns an array of property names. we'll take a look at inputarguments in the last section. ...
...nd returns an array of property names. we'll take a look at inputarguments in the last section. example let's create a list of items with a background image that rotates between three different colors and three widths. in our css, we provide a different color and a width subtractor for the background box we've created via the --boxcolor and --widthsubtractor custom properties. ...
...of property names. we'll take a look at inputarguments in the last section. example let's create a list of items with a background image that rotates between three different colors and three widths. in our css, we provide a different color and a width subtractor for the background box we've created via the --boxcolor and --widthsubtractor custom properties. ...
...And 17 more matches

Responsive Navigation Patterns - Progressive web apps (PWAs)
are often not the optimal way to present information on small screens because of the reduced screen real estate. therefore, it is necessary to consider the presentation of content and ease of navigation for all screen sizes. note: html/css for the corresponding patterns will be available soon. 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. you could rank the item priorities to ensure the most important items always appear in the top navigation. pros: one button in header maximizes space for ...
...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. you could rank the item priorities to ensure the most important items always appear in the top navigation. ...
...ion 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. you could rank the item priorities to ensure the most important items always appear in the top navigation. ...
...And 17 more matches

Using XML Data Islands in Mozilla - Archive of obsolete content
s not specify an executable script type. when putting xml in a data block, you need to make sure that the xml content you are embedding does not have an end tag that case-insensitively matches "</script>". ...
...utable script type. when putting xml in a data block, you need to make sure that the xml content you are embedding does not have an end tag that case-insensitively matches "</script>". ...
... block, you need to make sure that the xml content you are embedding does not have an end tag that case-insensitively matches "</script>". ...
...And 16 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
in this article we will fully explore how this fundamental feature of the specification works. starting your exploration of grid with numbered lines is the most logical place to begin, as when you use grid layout you always have numbered lines. the lines are numbered for columns and rows, and are indexed from 1. note that grid is indexed according to the writing mode of the document. in a left to right language such as english line 1 is on the left-hand side of the grid. ...
...we will learn more about the interaction between writing modes and grids in a later guide. a basic example as a very simple example we can take a grid with 3 column tracks and 3 row tracks. this gives us 4 lines in each dimension. inside our grid container i have four child elements. 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. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. * {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: #d9480...
...it should also start on the first row line, at the top of the grid and span to the fourth row line. .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } as ...
...And 16 more matches

justify-content - CSS: Cascading Style Sheets
the interactive example below demonstrates some of the values using grid layout. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...lease clone https://github.com/mdn/interactive-examples and send us a pull request. the alignment is done after the lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space. ...
... us a pull request. the alignment is done after the lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space. ...
...And 16 more matches

The Essentials of an Extension - Archive of obsolete content
ding standards are based on mozilla's or other known and used standards. ...
...'s or other known and used standards. ...
... section, moving on to the most important part of the content: <menubar id="main-menubar"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="helpmenu"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menubar> <vbox id="appmenusecondarypane"> <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="appmenu_addons"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item-2" l...
...And 15 more matches

menulist - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that can be used for drop-down choice lists. the user may select one of the elements displayed in the menulist. the currently selected choice is displayed on the menulist element. to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. 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, inpu...
...ent may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
...e information is available in the xul tutorial. ...
...And 15 more matches

SVGPointList - Web APIs
defines a list of svgpoint objects. an svgpointlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...objects. an svgpointlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...ed as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...And 15 more matches

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
lematic, with different parts of css moving on at different speeds. css was therefore modularised, and the various css specifications are different modules that make up css today. these modules relate to each other, and are at different stages of development. 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. these properties started life in the flexbox specification, but are now also part of the box alignment specification. this specification details how alignment works in all layout — not just flexbox. box alignment deals with alignment...
...cement of the spec. these properties apply only to flex layout until css box alignment level 3 is finished and defines their effect for other layout modes. 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. the gap properties a recent addition to the box alignment specification has been the row-gap and column-gap properties, along with the shorthand gap. these properties were initially defined in the css grid specification and named grid-row-gap, grid-column-gap and grid-gap. they have be...
...ng with the shorthand gap. these properties were initially defined in the css grid specification and named grid-row-gap, grid-column-gap and grid-gap. they have been renamed and moved to box alignment in order that they can be used in all layout methods — this will ultimately include flexbox. until browsers implement the gap properties for flexbox, margins have to be used to create gaps between items. writing modes in the basic concepts of flexbox article, i explained that flexbox is writing mode aware. writing modes are fully detailed in the css writing modes specification, which details how css supports the various different writing modes that exist internationally. we need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out...
...And 15 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. the interactive example below use grid layout to demonstrate some of the values of this property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
...a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
...ctive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
...And 15 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. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
...one https://github.com/mdn/interactive-examples and send us a pull request. the property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
... us a pull request. the property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
...And 15 more matches

justify-self - CSS: Cascading Style Sheets
d inside its alignment container along the appropriate axis. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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 align...
... 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. ...
...note that justify-self is ignored in flexbox layouts. ...
...And 15 more matches

Adding menus and submenus - Archive of obsolete content
tems. if your extension involves menus in any way, you should test it on mac os x to make sure everything works adequately. ...
...hould be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog...
... 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. ...
...And 14 more matches

Extensions - Archive of obsolete content
adding a new menu the main menu bar in firefox has the id 'main-menubar'. to add a new menu onto the main application menubar, you will need to overlay this menubar. for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menuitem label="web"/> <menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu. the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. note that the menu will not appear until it has a <menupopup>. adding a new menuitem 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. for a list of the ids of the menus for ...
...e insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. note that the menu will not appear until it has a <menupopup>. adding a new menuitem 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. for a list of the ids of the menus for firefox, see firefox menus. for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus. because of this, the new item might not appear at the end of the menu but before a menuitem added by another extension, depending on the order in which the overlays are applied. as you cannot...
...menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus. because of this, the new item might not appear at the end of the menu but before a menuitem added by another extension, depending on the order in which the overlays are applied. as you cannot predict this order, you should not rely on any menuitems being in particular positions in the presence of other extensions. modifying the context menu an extension may wish to modify the context menu associated with the browser area. normally, this menu displays menu items specific to what was context clicked or focused. ...
...And 14 more matches

menu - Archive of obsolete content
user clicks the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
...create submenus. more information is available in the xul tutorial. ...
... more information is available in the xul tutorial. ...
...And 14 more matches

Adding a new todo form: Vue events, methods, and models - Learn web development
this is what we'll cover in this article. ...
...this is what we'll cover in this article. ...
... the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn about handling forms in vue, and by association, events, models, and methods. creating a new to-do form we now have an app that displays a list of to-do items. however, we can't update our list of items without manually changing our code! let's fix that. let's create a new component that will allow us to add a new to-do item. in your components folder, create a new file called todoform.vue. add a blank <template> and a <script> tag like before: <template></template> <script> export default {}; </script> let's add in an html for...
...And 14 more matches

CustomizableUI.jsm
it is available in the firefox window as the customizableui property on the window. if you want to use it from a jsm or another context without a window reference, you need to import it yourself: components.utils.import("resource:///modules/customizableui.jsm"); introduction the module is intended for two primary purposes: allow adding, moving and removing customizable widgets. manage the areas in which these widgets are shown. ...
...overflowable', that is, if there are too many widgets to fit in the toolbar's horizontal space, the excess widgets will be placed in a panel accessible from an anchor (chevron) in the toolbar. in order to register such a toolbar, set the 'overflowable' property to true, and provide the id of the anchor in the 'anchor' property. widgets widget is the term that customizableui uses for each of the items in a customizable area. note that these are also abstract cross-window objects; customizableui will manage the actual dom manipulation involved with adding/moving/removing widgets in all windows for you. there are three main types of widgets: 'legacy' xul widgets, which are the way customizableui represents widgets whose dom representation is present (or overlaid) into a window; api-style w...
... instance is destroyed because of this. awidgetid is the widget whose instance is being destroyed, adocument the document in which this is happening. only fired for api-based widgets. onwidgetdrag(awidgetid, aarea) fired both when and after customize mode drag handling system tries to determine the width and height of widget awidgetid when dragged to a different 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. oncustomizestart(awindow) fired when opening customize mode in awindow. oncustomizeend(awindow) fired when exiting customize mode in awindow. onwidgetoverflow(anode, acontainer) fired when a widget's dom node is overflowing its container, a toolbar, and will be displayed...
...And 14 more matches

Mail event system
lders, and then forwards it on to any nsifolderlisteners that have registered themselves. the nsimsgmailsession interface actually only allows adding and removal of listeners - the notifications happen through the nsifolderlistener interface as well. methods each event type has a two methods associated with it: notify*<event> - in the nsifolder interface, and nsimsgmailsession interface. onitem*<event> - in the nsifolderlistener interface. the mail session implements this interface. where <event> is the type of event, such as boolpropertychanged or the generic event . sample control flow here is an example of a possible flow of control when a new message is added to a folder. in this example, there is a dialog open that shows properties for this folder including the message co...
...ining 4 messages. because the number of messages in the folder have increased, this change in total message count needs to be broadcast to the world. the folder calls notifyintpropertychanged on itself with the atom that represents "totalmessages": this->notifyintpropertychanged(ktotalmessagesatom, 4, 5);. notifypropertychanged broadcasts this event to each its nsifolderlisteners by calling onitemintpropertychanged on each listener: listener->onintpropertychanged(this, ktotalmessagesatom, 4, 5); the dialog is one of these folder-specific listeners. in its implementation of onintpropertychanged, it uses this information to update the message count in the dialog. notifypropertychanged then broadcasts this event to the mail session: mailsession->onintpropertychanged(this, ktot...
...all folders and receives this notification. in its implementation of onintpropertychanged, it notifies rdf (via the nsirdfobserver system) that the message count has changed. rdf handles the notification by updating the message counts in the folder pane. ...
...And 14 more matches

Accessibility Inspector - Firefox Developer Tools
implemented, the accessibility engine had to be explicitly turned on. starting in firefox 79, it is automatically enabled when you do one of the following: choose accessibility in the tools > web developer menu. select the accessibility tab in the developer tools toolbox. right-click in the main browser window, and choose inspect accessibility properties in the context menu. right-click an item in the html pane of the page inspector, and choose show accessibility properties in the context menu. once activated, the accessibility engine remains running until you close the developer tools toolbox. if you don't wish to allow the accessibility features to be automatically enabled, you can use the configuration editor (also known as about:config) to define the preference devtools.accessibi...
...n't wish to use the accessibility features at all, you can use the configuration editor to set the preference devtools.accessibility.enabled to false. if you do this, the ways listed above for activating the accessibility inspector do nothing. 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. each item has two properties listed: role — the role this item has on the page (e.g., pushbutton, or footer). this can be either a default role provided by the browser, or a role given to it via a wai-aria role attribut...
... 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. each item has two properties listed: role — the role this item has on the page (e.g., pushbutton, or footer). this can be either a default role provided by the browser, or a role given to it via a wai-aria role attribute. name — the name this item has on the page. the name depends on the element; for example, the name of most text elements is simply their textcontent, whereas form elements' names are the contents of their associated <label>. on the right-hand side, you can see further information about the currently selected item. the listed properties are as follows: name — the item's name, as described above. ...
...And 14 more matches

SVGNumberList - Web APIs
. an svgnumberlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. note: starting in gecko 5.0,the svgnumberlist dom interface is now indexable and can be accessed like arrays. ...
...ct can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. note: starting in gecko 5.0,the svgnumberlist dom interface is now indexable and can be accessed like arrays. ...
...t attempts to modify the object will result in an exception being thrown. note: starting in gecko 5.0,the svgnumberlist dom interface is now indexable and can be accessed like arrays. ...
...And 14 more matches

SVGTransformList - Web APIs
ansformlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...esignated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...modify the object will result in an exception being thrown. ...
...And 14 more matches

Typical use cases of Flexbox - CSS: Cascading Style Sheets
in this guide we will take a look at some of the common use cases for flexbox — those places where it makes more sense than another layout method. why choose flexbox? 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. these are the uses that flexbox was designed for. you can read more about the difference between flexbox and css grid layout in relationship of flexbox to other layout methods, where we discuss how flexbox fits into the overall picture of css layout. in reality we also often use flexbox for jobs that might be better done by grid layou...
...n reality we also often use flexbox for jobs that might be better done by grid layout, as a fallback for grid, and also in order to get alignment capabilities. this is something that may well change once box alignment is implemented in block layout. in this guide i look at some of the typical things you might use flexbox for today. navigation a common pattern for navigation is to have a list of items displayed as a horizontal bar. this pattern, as basic as it seems, was difficult to achieve before flexbox. it forms the most simple of flexbox examples, and could be considered the ideal flexbox use case. when we have a set of items that we want to display horizontally, we may well end up with additional space. we need to decide what to do with that space, and have a couple of options. we eith...
...s pattern, as basic as it seems, was difficult to achieve before flexbox. it forms the most simple of flexbox examples, and could be considered the ideal flexbox use case. when we have a set of items that we want to display horizontally, we may well end up with additional space. we need to decide what to do with that space, and have a couple of options. we either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space. space distributed outside the items to distribute the space between or around the items we use the alignment properties in flexbox, and the justify-content property. you can read more about thi...
...And 14 more matches

flex - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... interpreted as <flex-grow>. the second value must be one of: a <number>: then it is interpreted as <flex-shrink>. a valid value for width: then it is interpreted as <flex-basis>. three-value syntax: the values must be in the following order: a <number> for <flex-grow>. a <number> for <flex-shrink>. a valid value for width for <flex-basis>. ...
...lowing order: a <number> for <flex-grow>. a <number> for <flex-shrink>. a valid value for width for <flex-basis>. values initial the item is sized according to its width and height properties. it shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. this is equivalent to setting "flex: 0 1 auto". 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. this is equivalent to setting "flex: 1 1 auto". none the item is sized according to its width and height properties. it is fully inflexible: it neither shrinks nor grows in relation to the flex container. this is equivalent ...
...And 14 more matches

Indexed collections - JavaScript
when these values are specified, the array is initialized with them as the array's elements. the array's length property is set to the number of arguments. the bracket syntax is called an "array literal" or "array initializer." it's shorter than other forms of array creation, and so is generally preferred. see array literals for details. to create an array with non-zero length, but without any items, either of the following can be used: // this... let arr = new array(arraylength) // ...results in the same array as this let arr = array(arraylength) // this has exactly the same effect let arr = [] arr.length = arraylength note: in the above code, arraylength must be a number. otherwise, an array with a single element (the provided value) will be created. calling arr.length will return ...
...'dusty' is indexed at 30, so cats.length returns 30 + 1). remember, javascript array indexes are 0-based: they start at 0, not 1. this means that the length property will be one more than the highest index stored in the array: let cats = [] cats[30] = ['dusty'] console.log(cats.length) // 31 you can also assign to the length property. ...
...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. the simplest way to do this is as follows: let colors = ['red', 'green', 'blue'] for (let i = 0; i < colors.length; i++) { console.log(colors[i]) } if you know that none of the elements in your array evaluate to false in a boolean context—if your array consists only o...
...And 14 more matches

Bookmarks - Archive of obsolete content
tp://google.com/", null, null); var newbkmkid = bmsvc.insertbookmark(newfolderid, uri, bmsvc.default_index, ""); this example instantiates the nsiioservice and uses it to create an nsiuri referring to the google web site, then calls nsinavbookmarksservice.insertbookmark() to create a new bookmark to google, placing it at the end of the bookmarks folder referenced by newbkmkid. 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. var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var bookmarksarray = bmsvc.getbookmarkidsforuri(uri, {});...
..."@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var bookmarksarray = bmsvc.getbookmarkidsforuri(uri, {}); after executing this code, the array bookmarksarray contains the ids of all bookmarks that refer to the specified uri (in this case, "http://google.com"). ...
...); var bookmarksarray = bmsvc.getbookmarkidsforuri(uri, {}); after executing this code, the array bookmarksarray contains the ids of all bookmarks that refer to the specified uri (in this case, "http://google.com"). manipulating existing items there are a number of convenient methods you can use to make changes to existing bookmarks and bookmark folders. this section covers some of them. the item title to change the title of a bookmark or bookmark folder, you use the nsinavbookmarksservice.setitemtitle() method. ...
...And 13 more matches

ContextMenus - Archive of obsolete content
a typical usage is for the user to right-click on an element to display a menu of commands pertaining to what was clicked on. context menu events there are various ways in which a context menu can be opened. the most common is by clicking on an element with the right mouse button. on macintosh systems with only one mouse button, a context menu may be opened by either holding down the mouse button or by pressing the control key and clicking the mouse button. ...
...d event for example. attaching context menus a context menu may be attached to an element using the context attribute, which may be applied to any xul element. the value of the context attribute should be the id of a context menu within the same document. in the example, a context menu is attached to a grid. <window id="main-window"> <popupset> <menupopup id="ins-del-menu"> <menuitem label="insert"/> <menuitem label="delete"/> </menupopup> </popupset> </window> <grid context="ins-del-menu"> <columns> <column/> <column flex="1"/> </columns> <rows id="rows"> <row align="center"> <label value="name:"/> <textbox/> </row> </rows> </grid> the same context menu can be attached to multiple elements. just set the context attribute on ...
...u want the context menu to apply to. one technique is to attach a context menu to an entire document area. for instance, the firefox browser applies a single context menu to the browser area which displays web pages. ...
...And 13 more matches

Using Remote XUL - Archive of obsolete content
menus and buttons the mozilla.org web site uses an html navigation bar on the left-hand side of its pages to provide site navigation. the bar consists of a set of links organized into four main categories: the mozilla organization, developer docs, testing, and tools. the bar also contains two links that are independent of any category: faq and search. 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. the independent links, on the other hand, are similar to xul buttons, which perform a function when pressed, so we'll use the button element for those. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/the...
...es of menus. it can also contain other elements. it serves to group menus together into a single horizontal bar like the one you see at the top of many desktop applications. the menu element defines a pull-down menu, and the button element defines a pressable button. both menus and buttons take a label attribute whose value is the text to display in the element. 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 menuitem elements within it for each item we want to appear on the menu. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="the mozilla organization"> <menupopup> ...
...en'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 menuitem elements within it for each item we want to appear on the menu. ...
...And 13 more matches

What is RSS - Archive of obsolete content
ssword public. news web sites use rss to provide everyone with a list of their newest articles. ...
... <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-44f...
... <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> ...
...And 13 more matches

Accessible Toolkit Checklist
pace opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable. default tab order should be in document order. ...
...size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable. default tab order should be in document order. ...
...on mac os x, ctrl+space is used to bring up the context menu. most widgets (like checkboxes) can have a label outside of themselves, which should focus the widget when clicked on, or when its mnemonic is pressed. ...
...And 13 more matches

Manipulating bookmarks using Places
tp://google.com/", null, null); var newbkmkid = bmsvc.insertbookmark(newfolderid, uri, bmsvc.default_index, ""); this example instantiates the nsiioservice and uses it to create an nsiuri referring to the google web site, then calls nsinavbookmarksservice.insertbookmark() to create a new bookmark to google, placing it at the end of the bookmarks folder referenced by newbkmkid. 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. var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var bookmarksarray = bmsvc.getbookmarkidsforuri(uri, {});...
..."@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var bookmarksarray = bmsvc.getbookmarkidsforuri(uri, {}); after executing this code, the array bookmarksarray contains the ids of all bookmarks that refer to the specified uri (in this case, "http://google.com"). ...
...); var bookmarksarray = bmsvc.getbookmarkidsforuri(uri, {}); after executing this code, the array bookmarksarray contains the ids of all bookmarks that refer to the specified uri (in this case, "http://google.com"). manipulating existing items there are a number of convenient methods you can use to make changes to existing bookmarks and bookmark folders. this section covers some of them. the item title to change the title of a bookmark or bookmark folder, you use the nsinavbookmarksservice.setitemtitle() method. ...
...And 13 more matches

SVGStringList - Web APIs
svg string list interface the svgstringlist defines a list of domstring objects. an svgstringlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
... svg string list interface the svgstringlist defines a list of domstring objects. an svgstringlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...ist defines a list of domstring objects. an svgstringlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...And 13 more matches

Using the Web Storage API - Web APIs
rs. this article provides a walkthrough of how to make use of this technology. basic concepts storage objects are simple key-value stores, similar to objects, but they stay intact through page loads. the keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings). you can access these values like an object, or with the storage.getitem() and storage.setitem() methods. these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a4509b'; localstorage['colorsetting'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores. ...
... reopened. 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. a different storage object is used for the sessionstorage and localstorage for each origin — they function and are controlled separately. so, for example, initially calling localstorage on a document will return a storage object; calling sessionstorage on a document will return a different storage object. both of these can be manipulated in the same way, bu...
...ror, which means that we've used up all available storage space, but storage is actually available. our feature detection should take these scenarios into account. ...
...And 13 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
ed onto the grid within these column and row lines. css grid layout has the following features: fixed and flexible track sizes you can create a grid with fixed track sizes – using pixels for example. this sets the grid to the specified pixel which fits to the layout you desire. you can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose. 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. creation of additional tracks to hold content you can define an explicit grid with grid layout. the grid layout specification is flexible enough to add addit...
... an explicit position on the grid. creation of additional tracks to hold content you can define an explicit grid with grid layout. the grid layout specification is flexible enough to add additional rows and columns when needed. features such as adding “as many columns that will fit into a container” are included. 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. control of overlapping content more than one item can be placed into a grid cell or area and, they can partially overlap each other. this layering may then be controlled with the z-index property. grid is a powerful specification that, when combined with other parts of css such as flexbox, can help you create layouts tha...
...erful specification that, when combined with other parts of css such as flexbox, can help you create layouts that were previously impossible to build in css. it all starts by creating a grid in your grid container. the grid container we create a grid container by declaring display: grid or display: inline-grid on an element. as soon as we do this, all direct children of that element become grid items. in this example, i have a containing div with a class of wrapper and, inside are five child elements. <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> i make the .wrapper a grid container. .wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; backgrou...
...And 13 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
u do not have to use grid in an all or nothing way. you could start by simply enhancing elements in your design with grid, that could otherwise display using an older method. overwriting of legacy methods with grid layout works surprisingly well, due to the way grid interacts with these other methods. floats we have typically used floats to create multiple column layouts. 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. in the example below, i have a simple media object. in a non-supporting browser, i use float, however i have also defined the container as a grid container, in order to use the alignment properties that are implemented in css grids. the float no longer ap...
...s very simple, and we can get away without needing to write code that would be a problem to browsers that do not support grid, and legacy code is not an issue to our grid supporting browsers. however, things are not always so simple. in this next example, i have a set of floated cards. i have given the cards a width, in order to float them. ...
...verwrite older methods.</p> </li> <li class="card"><h2>six</h2> <p>we can use css grid to overwrite older methods.</p> </li> </ul> </div> the example demonstrates the typical problem that we have with floated layouts: if additional content is added to any one card, the layout breaks. ...
...And 13 more matches

Code snippets - Archive of obsolete content
t shows how to load all tabs from other computers. components.utils.import("resource://services-sync/main.js"); // obtain a reference to the main firefox window. let mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .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. for each (let client in tabsengine.getallclients()) {...
...p the cleartext of each record in a collection to the console. ...
...rtext of each record in a collection to the console. ...
...And 12 more matches

More Menu Features - Archive of obsolete content
however, you can create submenus by simply placing the menu element inside the menupopup element. ...
... because the menu element is valid even when it isn't directly placed inside a menu bar. the example below creates a simple submenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menuitem label="window"/> <menuitem label="message"/> </menupopup> </menu> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog. we'll just add a few simple command...
...xit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog. we'll just add a few simple commands to a file menu and an edit menu. this is similar to the example above. ...
...And 12 more matches

Introduction to client-side frameworks - Learn web development
are to client-side frameworks. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand how client-side javascript frameworks came to exist, what problems they solve, what alternatives there are, and how to go about choosing one. a brief history when javascript debuted in 1996, it added occasional interactivity and excitement to a web that was, up until then, composed of static documents. the web became not just a place to read things, but to do things. javascript’s popularity steadily increased. developers who worked with javascript wrote tools to solve the problems they faced, and packaged them into reusable packages called libraries, so they could share their solutions with others. this shared ecosystem of lib...
...ist of tasks. the verbosity of dom changes building html elements and rendering them in the browser at the appropriate time takes a surprising amount of code. ...
... of code. let's say that our state is an array of objects structured like this: const state = [ { id: 'todo-0', name: 'learn some frameworks!' } ] how do we show one of those tasks to our user? we want to represent each task as a list item – an html <li> element inside of an unordered list element (a <ul>). ...
...And 12 more matches

Python binding for NSS
ed as utf-8 first before being passed to nss/nspr. python-nss tries to be flexible when generating a print representation of complex objects. for simplicity you can receive a block of formatted text but if you need more control, such as when building gui elments you can access a list of "lines", each line is paired with an indentation level value. the (indent, text) pairs allow you to insert the item into a gui tree structure or simply change the indentation formatting. deprecated elements of the python-nss api are marked with python deprecation warnings as well as being documented in the nss module documentation. as of python 2.7 deprecation warnings are no longer reported by default. it is suggested python developers using python-nss periodically run their code with deprecation warnings en...
... release 0.16.0 release date 2014-10-29 scm tag pynss_release_0_16_0...
... release 0.16.0 release date 2014-10-29 scm tag pynss_release_0_16_0 source download ...
...And 12 more matches

Gecko Roles
role_titlebar represents a title or caption bar for a window. used by msaa only, this is supported automatically by microsoft windows. role_menubar represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on mac os x) from which menus are selected by the user. ...
... role_window represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. the role is supported automatically by microsoft windows. role_internal_frame a sub-document. role_menupopup represents a menu, which presents a list of options from which the user can make a selection to perform an action. role_menuitem represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option. role_tooltip represents a tooltip that provides helpful hints; this is generally displayed at the mouse cursor position. role_application represents a main window for an application. role_document represents a document window. a document window is always...
...ed at the mouse cursor position. role_application represents a main window for an application. role_document represents a document window. a document window is always contained within an application window. role_pane represents a pane within a frame or document window. users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. role_chart represents a graphical image used to represent data. role_dialog represents a dialog box or message box. role_border represents a window border. role_grouping logically groups other objects. role_separator used to v...
...And 12 more matches

Gloda examples
examples for using gloda. see creating a gloda message query for more examples. ...
...e examples. ...
... 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 */ onitemsadded: function _onitemsadded(aitems, acollection) { }, /* called when items that are already in our collection get re-indexed */ onitemsmodified: function _onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purged from the system */ onitemsremoved: function _onitemsremoved(aitems, acollection) { }, /* called when our database query completes */ ...
...And 12 more matches

SVGLengthList - Web APIs
ects. an svglengthlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
... object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...ns that attempts to modify the object will result in an exception being thrown. ...
...And 12 more matches

SVGPathSegList - Web APIs
svg path segment list interface this interface defines a list of svgpathseg objects. ...
... svg path segment list interface this interface defines a list of svgpathseg objects. ...
...t list interface this interface defines a list of svgpathseg objects. ...
...And 12 more matches

Layout using named grid lines - CSS: Cascading Style Sheets
in this guide we are going to look at how these two things work together when we use named lines. line naming is incredibly useful, but some of the more baffling looking grid syntax comes from this combination of names and track sizes. once you work through some examples it should become clearer and easier to work with. naming lines when defining a grid you can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties. ...
...gh you do not need to name all of the lines on your grid. you might choose to name just some key lines for your layout. .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. .box1 { grid-column-start: main-start; grid-row-start: main-start; grid-row-end: main-end; } .box2 { grid-column-start: content-end; grid-row-start: main-start; grid-row-end: content-end; } .box3 { grid-column-start: content-start; grid-row-start: main-start; } .box4 { grid-column-start: content-start; grid-column-end: main-end; grid-row-star...
...e something in that area should i wish to. * {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. .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]; } .thing { grid-area: content; } <div class="wrapper"> <div class="thing">i am placed in an area named content.</div> </div> we don’t need to...
...And 12 more matches

Closures - JavaScript
mples, each closure had its own lexical environment. here though, there is a single lexical environment that is shared by the three functions: counter.increment, counter.decrement, and counter.value. the shared lexical environment is created in the body of an anonymous function, which is executed as soon as it has been defined (also known as an iife). the lexical environment contains two private items: a variable called privatecounter, and a function called changeby. you can't access either of these private members from outside the anonymous function. instead, you can access them using the three public functions that are returned from the anonymous wrapper. those three public functions are closures that share the same lexical environment. thanks to javascript's lexical scoping, they each hav...
... the helptext array defines three helpful hints, each associated with the id of an input field in the document. the loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method. ...
... the helptext array defines three helpful hints, each associated with the id of an input field in the document. the loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method. if you try this code out, you'll see that it doe...
...And 12 more matches

Array.from() - JavaScript
isnan(number)) return 0; if (number === 0 || !isfinite(number)) return number; return (number > 0 ? ...
... if (number === 0 || !isfinite(number)) return number; return (number > 0 ? ...
...let k be 0. ...
...And 12 more matches

Actions - Archive of obsolete content
will be copied for each matching result (though see below for an exception) and inserted into the document. let's look at a simple example first. <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template> </vbox> in this example, we omit the <xul:rule> element around the <xul:action> as it is optional when we want to generate content unconditionally. instead, the action element is placed directly inside the <xul:template> element after the query is d...
...e created for each result. there are three results, so three buttons will be created. here is the [example], and an image of what it looks like: the template builder iterates through the three results, processing the body of the action for each one in turn. the uri attribute on the button is used to specify the ending or member variable. ...
... for each one in turn. the uri attribute on the button is used to specify the ending or member variable. in this example, there's only one variable to use, ?relateditem, since ?start is the starting point and the start and end points cannot be the same. there are a number of things that will happen for each result. let's look at the results again: (?start = http://www.xulplanet.com/rdf/a, ?relateditem = http://www.xulplanet.com/rdf/b) (?start = http://www.xulplanet.com/rdf/a, ?relateditem = http://www.xulplanet.com/rdf/c) (?start = http://www.xulplanet.com/rdf/a, ?relateditem = http://www.xulplanet.com/rdf/d) the builder will start with the first result. the button element will be copied and inserted into the document after the template. the id attribute of the new element will be set to the ...
...And 11 more matches

XUL controls - Archive of obsolete content
e xul reference. <button> a button that can be pressed by the user. <button label="save" accesskey="s"/> more information about the button element. button reference <button type="menu"> a button that has a drop down menu attached to it. pressing the button opens the menu. <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this type of menu button element. button reference related elements: menupopup menuitem <button type="menu-button"> a button that that has a separate arrow button with a menu attached to it. unlike with the 'menu' type, a separate action may be performed w...
...type of menu button element. button reference related elements: menupopup menuitem <button type="menu-button"> a button that that has a separate arrow button with a menu attached to it. unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed. <button type="menu-button" label="new"> <menupopup> <menuitem label="new document"/> <menuitem label="new image"/> </menupopup> </button> more information about this type of menu button element. button reference related elements: menupopup menuitem <checkbox> a control that may be turned on and off, typically used to create options which may be enabled or disabled. <checkbox label="show toolbar lab...
...an image specified by a url. <image src="start.png"/> more information about the image element. image reference <label> adds a text label to a nearby control. <label control="volume" value="volume:"/> more information about the label element. ...
...And 11 more matches

menupopup - Archive of obsolete content
keys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist. <menulist> <menupopup> <menuitem label="mozilla" value="http://mozilla.org"/> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net"/> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> the following example shows how a menupopup can be used as a context menu for an element. when the label is right-clicked, the menu will be dis...
... left type: integer overrides the horizontal position of the popup specified by the showpopup method. ...
... left type: integer overrides the horizontal position of the popup specified by the showpopup method. ...
...And 11 more matches

tabs - Archive of obsolete content
b elements. nb: you can add some other elements to tabs such as button, but they will receive an index. activating them will not change the selectedindex. more information is available in the xul tutorial. attributes closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltiptextnew, value, properties accessibletype, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem, getindexofitem, getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends. this feature is...
...est you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. onclosetab type: script code this script will be called when the close tab button is clicked. onnewtab not in firefox type: script code this script will be called when the new tab button is clicked. onselect type: script code this event is sent to the tabs element when this ta...
... script code this script will be called when the close tab button is clicked. onnewtab not in firefox type: script code this script will be called when the new tab button is clicked. onselect type: script code this event is sent to the tabs element when this tab is changed. selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. setfocus type: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard. if this attribute is false, the focus does not change during navigation. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user press...
...And 11 more matches

CSS Box Alignment - CSS: Cascading Style Sheets
sic examples the following examples demonstrate how some of the box alignment properties are applied in grid and flexbox. css grid layout alignment example in this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. this space is distributed using justify-content. ...
...me of the box alignment properties are applied in grid and flexbox. css grid layout alignment example in this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. this space is distributed using justify-content. 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. the first item overrides the align-items set on the group by setting align-self to center. key concepts and terminology the specification de...
...g align-self to center. key concepts and terminology the specification details some alignment terminology to make it easier to discuss these alignment properties outside of their implementation within a particular layout method. there are also some key concepts which are common to all layout methods. relationship to writing modes alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. instead we describe alignment in terms of the start and end of the particular dimension we are working with. this ensures that alignment works in the same way whichever writing mode the document has. two dimensions of alignment when using the box alignment properties you will align content o...
...And 11 more matches

grid-row - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if two <grid-line> values are specified, the grid-row-start longhand is set to the value before the slash, and the grid-row-end longhand is set to the value after the slash. ...
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row: foo; will choose the start/end edge of t...
...obal 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. note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it). otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>. <integer> && <custom-ident>? cont...
...And 11 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 appenditem 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 menuitem element and insert it into the popup. this method may only be used with the menu element. <script> function addtomenu() { var menu = document.getelementbyid("edit-menu"); menu.appenditem("insert", "insert"); } </script> <menu id="edit-menu"/> <button label="add" oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed. ...
...ment and insert it into the popup. this method may only be used with the menu element. <script> function addtomenu() { var menu = document.getelementbyid("edit-menu"); menu.appenditem("insert", "insert"); } </script> <menu id="edit-menu"/> <button label="add" oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed. this function appends a new item to the menu's popup with the label insert. the first argument to appenditem is the label of the menuitem, and the second argument is a value to associate with the item. ...
...ert"); } </script> <menu id="edit-menu"/> <button label="add" oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed. this function appends a new item to the menu's popup with the label insert. the first argument to appenditem is the label of the menuitem, and the second argument is a value to associate with the item. this value be set as the menuitem's value attribute and can be used for whatever purpose is desired. note how in this example, the menu does not have a child menupopup. ...
...And 10 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> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listitem> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> </listhead> <listitem type...
...if user wants checkbox support for multicolumn lists, then they will have to implement one. ...
...if user wants checkbox support for multicolumn lists, then they will have to implement one. ...
...And 10 more matches

Accessibility/XUL Accessibility Reference - Archive of obsolete content
inside of the iframe. okay to use html inside of iframe. see browser element for more info. ...
...o use html inside of iframe. see browser element for more info. ...
...label text--></label> <listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </listbox> <label control='listid2' value='<!--list label-->' /> <listbox rows="5" id='listid2'> <listcols> <listcol/> <listcol/> <listcol/> </listcols> <listhead> <listheader label="name" /> <listheader label="sex" /> <listheader label="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws. ...
...And 10 more matches

Introduction to CSS layout - Learn web development
her is due to the fact that they are styled with display: block. if you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line. this is because the <a> element is display: inline by default. you can change this default display behavior. for example, the <li> element is display: block by default, meaning that list items display one below the other in our english document. if we change the display value to inline they now display next to each other, as words would do in a sentence. the fact that you can change the value of display for any element means that you can pick html elements for their semantic meaning, without being concerned about how they will look. the way they look is something that you can change. ...
...lay value to inline they now display next to each other, as words would do in a sentence. the fact that you can change the value of display for any element means that you can pick html elements for their semantic meaning, without being concerned about how they will look. the way they look is something that you can change. 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. however, when using these, you will generally need to invoke additional properties. the two values most important for our purposes when discussing layout are display: flex and display: grid. flexbox flexbox is the short name for the flexible box layout module, designed to make it easy...
...portant for our purposes when discussing layout are display: flex and display: grid. flexbox flexbox is the short name for the flexible box layout module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. 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. we can see this in a simple example. the html markup below gives us a containing element, with a class of wrapper, inside which are three <div> elements. by default these would display as block elements, below one another, in our english language document. however, if we add display: flex to the parent, the three items now arrange themselves into columns. this is due to them becoming flex ite...
...And 10 more matches

Focus management with Vue refs - Learn web development
or non-mouse users. specifically, when a user activates the "edit" button, we remove the "edit" button from the dom, but we don't move the user's focus anywhere, so in effect it just disappears. this can be disorienting for keyboard and non-visual users. to understand what's currently happening: reload your page, then press tab. you should see a focus outline on the input for adding new to-do items. press tab again. the focus should move to the "add" button. hit it again, and it'll be on the first checkbox. one more time, and focus should be on the first "edit" button. activate the "edit" button by pressing enter. the checkbox will be replaced with our edit component, but the focus outline will be gone. this behavior can be jarring. in addition, what happens when you press tab again v...
...o reason about and understand. to use a ref in a component, you add a ref attribute to the element that you want to access, with a string identifier for the value of the attribute. it's important to note that a ref needs to be unique within a component. no two elements rendered at the same time should have the same ref. ...
... that you want to access, with a string identifier for the value of the attribute. it's important to note that a ref needs to be unique within a component. no two elements rendered at the same time should have the same ref. adding a ref to our app so, let's attach a ref to our "edit" button in todoitem.vue. ...
...And 10 more matches

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
e, an element laid out with flexbox has the word flex next to it as shown in the following image: click the word flex in the html pane to keep the overlay visible when you move the mouse away from the container. in the infobar when you hover over an element in the html pane, you will see a tooltip that gives you more information about the element. 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 tog...
... the layout flex container section the css pane's layout view includes a collapsible "flex container" section. ...
...nce 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. the layout flex container section the css pane's layout view includes a collapsible "flex container" section. if you expand the section without selecting a flexbox container, it will only display the message, "select a flex container or item to continue". once you select an element whose display is defined as flex, the panel will include a number of options for vi...
...And 10 more matches

HTML Drag and Drop API - Web APIs
lects a draggable element, drags the element to a droppable element, and then releases the dragged element. during drag operations, several event types are fired, and some events might fire many times, such as the drag and dragover events. 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. (see specifying drop targets.) dragexit ondragexit …an element is no longer the drag operation's immediate selection tar...
...nd 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. (see specifying drop targets.) dragexit ondragexit …an element is no longer the drag operation's immediate selection target. dragleave ondragleave …a dragged item leaves a valid drop target. dragover ondragover …a dragged item is being dragged over a valid drop target, every few hundred milliseconds. dragstart ondragstart …the user starts dragging an item. (see starting a drag operation.) drop ondrop …an item is dropped on a valid drop target. (see performing a drop.) note: neither dragstart nor dra...
... dragstart ondragstart …the user starts dragging an item. (see starting a drag operation.) drop ondrop …an item is dropped on a valid drop target. (see performing a drop.) note: neither dragstart nor dragend events are fired when dragging a file into the browser from the os. interfaces the html drag and drop interfaces are dragevent, datatransfer, datatransferitem and datatransferitemlist. the dragevent interface has a constructor and one datatransfer property, which is a datatransfer object. datatransfer objects include the drag event's state, such as the type of drag being done (like copy or move), the drag's data (one or more items), and the mime type of each drag item. datatransfer objects also have methods to add or remove items to the drag's data. ...
...And 10 more matches

Box alignment in Flexbox - CSS: Cascading Style Sheets
details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of flexbox. as this page aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods. ...
...ignment works in the context of flexbox. as this page aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods. 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. if you are working with flex-direction set to row, this alignment will be in the...
...ts 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. if you are working with flex-direction set to row, this alignment will be in the inline direction. however, in flexbox you can change the main axis by setting flex-direction to column. in this case, justify-content will align items in the block direction. ...
...And 10 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
values: row (default) | row-reverse | column | column-reverse spec: https://drafts.csswg.org/css-flexbox/#flex-direction-property @mixin flex-direction($value: row) { @if $value == row-reverse { -webkit-box-direction: revers...
... 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. values: row (default) | row-reverse | column | column-reverse spec: https://drafts.csswg.org/css-flexbox/#flex-direction-property @mixin flex-direction($value: row) { @if $value == row-reverse { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-direction: reverse; -moz-box-orient: horizontal; } @else if $value == column { -we...
...properties, which together define the flex container's main and cross axes. values: row (default) | nowrap spec: https://drafts.csswg.org/css-flexbox/#flex-flow-property @mixin flex-flow($values: (row nowrap)) { // no webkit/ff box fallback. -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. value: any integer (0 is the default) spec: https://drafts.csswg.org/css-flexbox/#order-property @mixin order($int: 0) { -webkit-box-ordinal-group: $int + 1; -moz-box-ordinal-group: $int + 1; -webkit-order: $int; -ms-flex-order: $int; order: $int; } flexbox grow the flex-grow property sets the flex grow ...
...And 10 more matches

grid-column - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: grid-column-end grid-column-start syntax this property is specified as one or two <grid-line> values. ...
...hand is set to the value after the slash. each <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the keyword span together with either a <custom-ident> or an <integer> or both. 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. note: named grid areas automatically generate implicit named lines of this form, so specifying grid-column: foo; will choose the start/end edge o...
...utomatically generate implicit named lines of this form, so specifying grid-column: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it). otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>. <integer> && <custom-ident>? contributes the nth grid line to the grid item’s placement. if a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. if a name is given as a <custom-ident>, only lines with that name are counted. if not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. an <integer> value of 0 is invalid. span && [ <int...
...And 10 more matches

paint() - CSS: Cascading Style Sheets
ction defines an <image> value generated with a paintworklet. syntax paint(workletname, parameters) where: workletname the name of the registered worklet. parameters optional additional parameters to pass to the paintworklet examples you can pass additional arguments via the css paint() function. ...
...arameters) where: workletname the name of the registered worklet. parameters optional additional parameters to pass to the paintworklet examples you can pass additional arguments via the css paint() function. ...
... workletname the name of the registered worklet. parameters optional additional parameters to pass to the paintworklet examples you can pass additional arguments via the css paint() function. ...
...And 10 more matches

ui/toolbar - Archive of obsolete content
showing and hiding toolbars by default, a toolbar is shown when it is created, although you can specify that a toolbar should be hidden initially by passing hidden:true as an option in its constructor. after that, though, you can't show or hide the toolbar pr...
...gle toolbar for all browser windows, so operations like show and hide work across all browser windows. if you need to customize content for a particular browser window, you can do that by messaging the window-specific frame hosted by that toolbar. globals constructors toolbar(options) creates a toolbar. 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. this add-on creates a toolbar containing one button and a frame: var { actionbutton } = require('sdk/ui/button/action'); var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var button = actionbutton({ id: "my-button", label: "my-button", icon: "./my-button.png" }); var frame = new frame(...
...-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 9 more matches

Recursive Generation - Archive of obsolete content
this extra arrow which neither b or d have causes an extra set of buttons to be created. ...
...this extra arrow which neither b or d have causes an extra set of buttons to be created. ...
...this extra arrow which neither b or d have causes an extra set of buttons to be created. ...
...And 9 more matches

Theme changes in Firefox 2 - Archive of obsolete content
out the changes you need to make. file description of change browser/bookmarks/addbookmark.css updated to include microsummary-related css changes. browser/bookmarks/bookmarksproperties.css new file; includes microsummary-related css. browser/browser.css needs to be updated to include new css for microsummaries, search fields, iconic bookmark menu items, and more. browser/dropmark-nav-small.png new file; used as the drop-down menu arrow on the navigation buttons, when using small icons. browser/dropmark-nav.png new file; used as the drop-down menu arrow on the navigation buttons. browser/enginemanager.css new file; css used for the search engine manager. browser/feeds/addfeedreader.css new file; c...
...ayed behind all tabs. global/toolbar.css needs to be updated to include new styles. mozapps/extensions/about.css updated with a simplified set of style names, since several styles were identical. mozapps/extensions/extensions.css css for the add-ons manager window. updated to support the new features of the firefox 2 add-ons manager. 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. mozapps/extensions/notifybadges.png new file; contains the icons used ito badge the icons for add-ons in t...
... in the add-ons manager. mozapps/extensions/notifybadges.png new file; contains the icons used ito badge the icons for add-ons in the add-on manager window to indicate their status. these look like this in the default theme: the first icon (green here) indicates that an add-on has an update available. the second icon (yellow here)appears to be used for blocklisted items; trying to confirm. the third icon (red here) indicates that an add-on is disabled, either by the user or because it's incompatible with the application. the fourth icon (blue here)(not sure what this one means). mozapps/extensions/question.png new file; used in the add-ons manager when you check for updates. if no updates are found, this icon is displayed at the l...
...And 9 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
round trips. 5 api codingscripting, glossary, infrastructure an api (application programming interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface. 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. 6 aria accessibility, glossary aria (accessible rich internet applications) is a w3c specification for adding semantics and other metadata to html to cater to users of assistive technology. 7 arpa glossary, infrastructure .arpa (address and routing parameter area) is a top-level domain used for internet infrastr...
...involved in the design of a website (or other type of product) are invited to write down the content / services / features they feel the product should contain, and then organize those features into categories or groupings. this can be used for example to work out what should go on each page of a website. 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. 67 carddav carddav, glossary, infrastructure carddav (vcard extension to webdav) is a protocol standardized by the ietf and used to remote-access or share contact information over a server. 68 certificate authority cryptography, glossary, security a certificate authority (ca) is an organization...
... (ect) refers to the measured network performance, returning a cellular connection type, like 3g, even if the actual connection is tethered broadband or wifi, based on the time between the browser requesting a page and effective type of the connection. 127 element codingscripting, glossary, html an element is a part of a webpage. in xml and html, an element may contain a data item or a chunk of text or an image, or perhaps nothing. a typical element includes an opening tag with some attributes, enclosed text content, and a closing tag. 128 empty element codingscripting, glossary, intermediate an empty element is an element from html, svg, or mathml that cannot have any child nodes (i.e., nested elements or text nodes). 129 encapsulation ...
...And 9 more matches

WAI-ARIA basics - Learn web development
<h1>...</h1> <nav> <ul>...</ul> <form> <!-- search form --> </form> </nav> </header> <main> <article>...</article> <aside>...</aside> </main> <footer>...</footer> if you try testing the example with a screenreader in a modern browser, you'll already get some useful information. 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). on the <aside> element — "complementary 2 items" (it contains a heading and a list). on the search form input — "search query, insertion at beginning of text". on the <footer> element — "f...
... if you go to voiceover's landmarks menu (accessed using voiceover key + u and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly. however, we could do better here. ...
...nt. in cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design. <input type="search" name="q" placeholder="search query" aria-label="search through site content"> now if we use voiceover to look at this example, we get some improvements: the search form is called out as a separate item, both when browsing through the page, and in the landmarks menu. the label text contained in the aria-label attribute is read out when the form input is highlighted. beyond this, the site is more likely to be accessible to users of older browsers such as ie8; it is worth including aria roles for that purpose. and if for some reason your site is built using just <div>s, you should definitely in...
...And 9 more matches

Supporting older browsers - Learn web development
spend the time on things which make the site more accessible, thus serving far more users. there is a middle ground between a plain html page and all the bells and whistles, and css has actually made creating these fallbacks pretty straightforward. 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. couple this information with the knowledge that browsers ignore css that they don’t understand, and you have a way to create simple layouts using the legacy techniques we have already covered, which are then overwritten by your grid layout in modern browsers that un...
...s that they don’t understand, and you have a way to create simple layouts using the legacy techniques we have already covered, which are then overwritten by your grid layout in modern browsers that understand it. in the below example, we have floated three <div>s so they display in a row. any browser that does not support css grid layout will see the row of boxes as a floated 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. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding:...
...rapper into a grid container, the floated items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. ...
...And 9 more matches

Index - Learn web development
ash course in the basic features of javascript via a completely practical tutorial. here you'll build up a simple "guess the number" game, step by step. 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. 78 basic math in javascript — numbers and operators article, beginner, codingscripting, guide, javascript, learn, math, operators, augmented, increment, l10n:priority, maths, modulo in this article we h...
... syntax, how to invoke and define them, scope, and parameters. 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. 94 introduction to events article, beginner, codingscripting, event handler, guide, javascript, learn, events, l10n:priority events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. for example, if ...
...t be an exhaustive study; just what you need to know at this stage. 95 looping code article, beginner, codingscripting, do, guide, javascript, learn, loop, break, continue, for, l10n:priority, while 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. here we'll look at the loop structures available in javascript that handle such needs. 96 making decisions in your code — conditionals article, beginner, codingscripting, conditionals, javascript, learn, switch, conditions, else, if, l10n:priority, ternary in any programming language, the code needs to make decisions and carry out actions accordingly d...
...And 9 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_quickderdecodeitem 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 ...
...link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. ...
...d source code references. the nss version column indicates which versions of nss support the function. ...
...And 9 more matches

TPS Bookmark Lists
okmark objects valid properties are: uri: the bookmark uri. required. title: the bookmark title. optional. defaults to the bookmark uri. loadinsidebar: true or false. optional. toggles the "load in sidebar" property. description: the bookmark description. optional. tags: an array of tags for the bookmark. optional. keyword: the keyword for the bookmark. optional. 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. changes: an object containing new properties to be set for this bookmark when this asset list is used in a modify action. the properties for this object include the uri, title, loadinsidebar, des...
... actions. changes: an object containing new properties to be set for this bookmark when this asset list is used in a modify action. ...
... 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: the livemark name. required. siteuri: the livemark's uri. optional. feeduri: the livemark's feed uri. required. after: the title of the bookmark item expected to be found after this livemark; used only in verify and modify actions. before: the title of the bookmark item expected to be found before this livemark; used only in verify and modify actions. changes: an object containing new properties to be set for this livemark when this asset list is used in a modify action. the properties for this object include the livemark, siteuri, feeduri pro...
...And 9 more matches

nsIAccessibleRole
esents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. the role is supported automatically by ms windows. role_internal_frame 10 a sub-document or iframe. role_menupopup 11 represents a menu, which presents a list of options from which the user can make a selection to perform an action. it is used for role="menu". role_menuitem 12 represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option. it is used for xul:menuitem, role="menuitem". role_tooltip 13 represents a tooltip that provides helpful hints. role_application 14 represents a main window for an application. it is used for role="application". also refer to role_app_root. role_document 15 represents a do...
...application. it is used for role="application". also refer to role_app_root. role_document 15 represents a document window. a document window is always contained within an application window. it is used for role="document". role_pane 16 represents a pane within a frame or document window. users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. it is used for the first child of a or iframe. role_chart 17 represents a graphical image used to represent data. role_dialog 18 represents a dialog box or message box. it is used for xul:dialog, role="dialog". role_border 19 represents a window border. role...
...x. it is used for xul:dialog, role="dialog". role_border 19 represents a window border. role_grouping 20 logically groups other objects. there is not always a parent-child relationship between the grouping object and the objects it contains. it is used for html:textfield, xul:groupbox, role="group". role_separator 21 used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. it is used for xul:separator, html:hr, role="separator". role_toolbar 22 represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features. it is used for xul:toolbar, role="toolbar". role_statusbar 23 represents a status bar, which is an area at the bottom of a window...
...And 9 more matches

nsIInstallLocation
efox 4, unless you specify <em:unpack>. ...
...this is different from restricted...
...this is different from restricted because it's not whether or not the location *might* be restricted, it's wheth...
...And 9 more matches

nsIMacDockSupport
this can be used, for example, to display the number of unread messages in an email client. dockmenu nsistandalonemenu the menu to display when the user right-clicks on the application's icon in the dock. methods activateapplication() activates the application, making it the frontmost application. 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. void activateapplication( in boolean aignoreotherapplications ); parameters aignoreotherapplications if true, the application is activated regardless of the state of other applications. if false, the application is only activated if other applications are not currently active. about dockmenu by default fir...
...ce doing so does not automatically activate the application. void activateapplication( in boolean aignoreotherapplications ); parameters aignoreotherapplications if true, the application is activated regardless of the state of other applications. if false, the application is only activated if other applications are not currently active. about dockmenu by default firefox adds two menu items to the dock menu. the menu items are "new window" and "new private window". if permanent private browsing mode is enabled then the "new private window" menu item is hidden. this is created by using the dockmenu attribute of nsimacdocksupport here: http://mxr.mozilla.org/mozilla-release/source/browser/base/content/browser.js#1562 this is seen here: if you were to copy and follow that example yo...
... can be done like this: var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); console.log('docksupport:', docksupport); var win = services.wm.getmostrecentwindow('navigator:browser'); var macmenu = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplicat...
...And 9 more matches

Demo Addon
x.msgdatabase.enumeratemessages(). each message is a nsimsgdbhdr. we iterate over the first ten of them and extract author, subject and date for each one. demo 3- search messages by subject this demo shows how to find messages by a subject accross all folders using gloda. ...
...iterate over the first ten of them and extract author, subject and date for each one. demo 3- search messages by subject this demo shows how to find messages by a subject accross all folders using gloda. ...
... and extract author, subject and date for each one. demo 3- search messages by subject this demo shows how to find messages by a subject accross all folders using gloda. ...
...And 9 more matches

grid-area - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value. ...
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-area: foo; will choose the start/end edge of that named grid area...
...-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. note: named grid areas automatically generate implicit named lines of this form, so specifying grid-area: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it). otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>. <integer> && <custom-ident>? con...
...And 9 more matches

JavaScript Client API - Archive of obsolete content
r data that you can make use of (note that guids must be allowed to change and should be url friendly). if not, you may have to invent your own mapping from data objects to guids as long as it's consistent. 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) changeitemid(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...
...) changeitemid(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. it's your store's responsibility to instantiate a record object, assign the given guid, and return it. itemexists(guid) should simply return true if an item with the given guid exists in the store, false otherwise. changeitemid(oldid, newid) must find the stored item currently associated with the guid oldid and change it to be associated with the guid newid. ...
... object, assign the given guid, and return it. itemexists(guid) should simply return true if an item with the given guid exists in the store, false otherwise. changeitemid(oldid, newid) must find the stored item currently associated with the guid oldid and change it to be associated with the guid newid. getallids() must return an iterable list containing the guids of every item being stored on the local system. this can be a dictionary-type object where the keys are the guids and the values are whatever; or it can simply be a list of guids. this is the method that the engine will call the first time it syncs, in order to get a complete inventory of what data there is that will need to be uploaded to the server. ...
...And 8 more matches

Working With Directories - Archive of obsolete content
directory or the 'pictures' directory do not exist, they will be created. thus, you do not have to create a series of directories individually, the set will all be created if needed. naturally, if the 'myfiles' directory already exists, it won't be recreated. ...
...ted if needed. naturally, if the 'myfiles' directory already exists, it won't be recreated. 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. it returns an enumeration which can be iterated over. ...
...directory already exists, it won't be recreated. 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. it returns an enumeration which can be iterated over. 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...
...And 8 more matches

List Controls - Archive of obsolete content
« previousnext » xul has a number of types of elements for creating list boxes. 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. xul provides two types of elements to create lists, a listbox element to create multi-row list boxes, and a menulist element to create drop-down list boxes. they work similar to the html select element, which performs both functions, but the xul elements have additional features. the simplest list box uses the listbox element for the box itself, and the listitem element for each item. ...
...s, a listbox element to create multi-row list boxes, and a menulist element to create drop-down list boxes. they work similar to the html select element, which performs both functions, but the xul elements have additional features. the simplest list box uses the listbox element for the box itself, and the listitem element for each item. for example, this list box will have four rows, one for each item. example 1 : source view <listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </listbox> like with the html option element, you can assign a value for each item using the value attribute. you can then use the value in a script. the list box will default to a suitable size, but you can ...
...attribute. you can then use the value in a script. the list box will default to a suitable size, but you can control the size with the rows attribute. set it to the number of rows to display in the list box. a scroll bar will appear that the user can use to display the additional rows. the following example demonstrates these additional features: example 2 : source view <listbox rows="3"> <listitem label="butter pecan" value="bpecan" /> <listitem label="chocolate chip" value="chocchip" /> <listitem label="raspberry ripple" value="raspripple" /> <listitem label="squash swirl" value="squash" /> </listbox> the example has been changed to display only 3 rows at a time. values have also been added to each item in the list. list boxes have some additional features, which will be described ...
...And 8 more matches

Simple Menu Bars - Archive of obsolete content
» in this section, we'll see how to create a menu bar with menus on it. creating a menu xul has a number of different ways of creating menus. the most basic way is to add a menu bar with a row of menus on it like many applications have. you can also create popup menus. the menu features of xul consist of a number of different elements which allow you to create menu bars or popup menus. the items on the menus can be customized quite easily. we've already seen part of how to make menus using the menulist. this section will build on that. menu bars are usually created much like a toolbar. the menu bar can optionally be placed inside a toolbox and the menu would work just like any other toolbar. xul does have some special elements which provide special functionality typical of menus. ther...
...menus, which are explained briefly here and in detail afterwards: menubar the container for the row of menus. menu despite the name, this is actually only the title of the menu on the menubar. this element can be placed on a menubar or can be placed separately. menupopup the popup box that appears when you click on the menu title. this box contains the list of menu commands. menuitem an individual command on a menu. this would be placed in a menupopup. menuseparator a separator bar on a menu. this would be placed in a menupopup. you can customize the menus on the menubar to have whatever you want on them on all platforms except the macintosh. this is because the macintosh has its own special menu along the top of the screen controlled by the system. although you can ...
...controlled by the system. although you can create custom menus, any special style rules or non-menu elements that you place on a menu may not be applied. you should keep this is mind when creating menus. ...
...And 8 more matches

radiogroup - Archive of obsolete content
ected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. ...
...at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. ...
...ither direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. attributes disabled, focused, preference, tabindex, value properties accessibletype, disabled, focuseditem, itemcount, selectedindex, selecteditem, tabindex, value methods appenditem, checkadjacentelement, getindexofitem, getitematindex, insertitemat, removeitemat examples <radiogroup> <radio id="orange" label="red"/> <radio id="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> </radiogroup> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribut...
...And 8 more matches

toolbar - Archive of obsolete content
ening the window with the window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name. if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() method. more information is available in the xul tutorial. ...
...ab) with the specified name. if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() method. more information is available in the xul tutorial. 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. this introduces a potential compatibility problem for extensions that depend on being able to identify all possible toolbar items by looking in the toolbarpalette. attributes autohide, currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptext, height...
...lity problem for extensions that depend on being able to identify all possible toolbar items by looking in the toolbarpalette. ...
...And 8 more matches

tooltip - Archive of obsolete content
side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable men...
... noautohide type: boolean if this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds. ...
...nupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. noautohide type: boolean if this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds. if this attribute is set to true, this will not happen and the tooltip will only hide when the user moves the mouse to another element. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be...
...And 8 more matches

Styling lists - Learn web development
the <dl> element has a top and bottom margin of 16px (1em), but no padding set. the <dd> elements have margin-left of 40px (2.5em.) the <p> elements we've included for reference have a top and bottom margin of 16px (1em), the same as the different list types. handling list spacing when styling lists, you need to adjust their styles so they ...
.... these are inherited by everything on the page. rules 2 and 3 set relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs. this means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent. 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. this will also help to keep the vertical rhythm consistent. 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. again, consistency is good! we also make the description terms have bold f...
...plore some list-specific properties. there are three properties you should know about to start with, which can be set on <ul> or <ol> elements: list-style-type: sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list. list-style-position: sets whether the bullets appear inside the list items, or outside them before the start of each item. list-style-image: allows you to use a custom image for the bullet, rather than a simple square or circle. bullet styles as mentioned above, the list-style-type property allows you to set what type of bullet to use for the bullet points. in our example, we've set the ordered list to use uppercase roman numerals, with: ol { list-style-type: up...
...And 8 more matches

XPCOM array guide
ode(nsinode* node); private: nscomarray<nsinode> mnodes; }; // typesafety of mnodes ensures that we only append an nsinode* void nodecontainer::addnode(nsinode* node) { mnodes.appendobject(node); } nscomarray<t> can also be declared on the stack to collect a temporary list of objects and manipulate them. when the object goes out of scope, all its members are released. ...
...afety of mnodes ensures that we only append an nsinode* void nodecontainer::addnode(nsinode* node) { mnodes.appendobject(node); } nscomarray<t> can also be declared on the stack to collect a temporary list of objects and manipulate them. when the object goes out of scope, all its members are released. ...
... we only append an nsinode* void nodecontainer::addnode(nsinode* node) { mnodes.appendobject(node); } nscomarray<t> can also be declared on the stack to collect a temporary list of objects and manipulate them. when the object goes out of scope, all its members are released. ...
...And 8 more matches

Creating a gloda message query
s the constraintname to be used (e.g. query.subjectmatches(searchstring) for message subject (compare fundattr.js line 145 ). create a collection from the query your listener is notified as messages are added to the collection as the database query completes. you may also see new messages show up if new messages are indexed that meet the constraints. ...
...ring) for message subject (compare fundattr.js line 145 ). create a collection from the query your listener is notified as messages are added to the collection as the database query completes. you may also see new messages show up if new messages are indexed that meet the constraints. ...
...e fundattr.js line 145 ). create a collection from the query your listener is notified as messages are added to the collection as the database query completes. you may also see new messages show up if new messages are indexed that meet the constraints. ...
...And 8 more matches

DataTransfer.types - Web APIs
e special-cased for legacy reasons (for example "text"). syntax datatransfer.types; return value an array of the data formats used in the drag operation. each format is string. if the drag operation included no data, this list will be empty. if any files are included in the drag operation, then one of the types will be the string files. ...
...return value an array of the data formats used in the drag operation. each format is string. if the drag operation included no data, this list will be empty. if any files are included in the drag operation, then one of the types will be the string files. example this example shows the use of the types and items properties. ...
...ult(); // 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.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("... ...
...And 8 more matches

FileSystemDirectoryReader.readEntries() - Web APIs
isplay: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function. 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). note that to read all files in a directory, readentries needs to be called repeatedly until it returns an empty array. in chromium-based browsers, the following example will only return a max of 100 entries. let dropzone = document.getelementbyid("dropzone"); let listing = document.getelementbyid("...
...o which to insert the list of contents (the container parameter). note that to read all files in a directory, readentries needs to be called repeatedly until it returns an empty array. in chromium-based browsers, the following example will only return a max of 100 entries. ...
...read all files in a directory, readentries needs to be called repeatedly until it returns an empty array. in chromium-based browsers, the following example will only return a max of 100 entries. ...
...And 8 more matches

Using the group role - Accessibility
a page summary (such as the structures that are dynamically created by a script or assistive technologies); a group should not be considered a major perceivable section on a page. when the role is added to an element, the browser will send out an accessible group event to assistive technology products which can then notify the user about it. a group should be used to form a logical collection of items with related functionality, such as children in a tree widget forming a collection of siblings in a hierarchy, or a collection of items having the same container in a directory. however, when a group is used in the context of list, authors must limit its children to listitem elements. group elements may be nested. proper handling of a group by assistive technologies is determined by the context...
...examples example 1: using the group role with a html tree view the snippet below shows how the group role is added directly into the html source code. ...
...added directly into the html source code. ...
...And 8 more matches

ARIA: listbox role - Accessibility
the listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images. description the listbox role is used to identify an element that creates a list from which a user may select one or more static items, similar to the html <select> element. unlike <select>, a listbox can contain images. each child of a listbox should have a role of option. 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. elements with the role li...
... 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. elements with the role listbox have an implicit aria-orientation value of vertical. when a list is tabbed to, the first item in the list will be selected if nothing else already is. up/down arrows navigate the list, and pressing shift + up/down arrows will move and extend the selection. typing one or more letters will navigate the list items (same letter goes to each item starting with that, different letters go to the first item starting with that entire string). ...
...when a list is tabbed to, the first item in the list will be selected if nothing else already is. up/down arrows navigate the list, and pressing shift + up/down arrows will move and extend the selection. typing one or more letters will navigate the list items (same letter goes to each item starting with that, different letters go to the first item starting with that entire string). if the current item has an associated context menu, shift+f10 will launch that menu. if list items are checkable, space can be used to toggle checkboxes. for selectable list items, space toggles their selection, shift+space can be used to select contiguous items, ctrl+arrow moves without selecting, and ctrl+space can be used to select non-contiguous items. it is recommended that a checkbox, link or other method be u...
...And 8 more matches

display - CSS: Cascading Style Sheets
detail of what happens when display: flex is declared is defined in the css flexible box model specification. see the table at the end of this document for all of the individual specifications. syntax the css display property is specified using keyword values. keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; } outside <display-outside> these keywords specify the element’s outer display type, which is essentially its role in flow layout. valid <display-outside> values: block the element generates a block element box, generating line breaks both before and after the element when in the normal flow. inline the element generates o...
...ing html <ruby> elements. note: browsers that support the two value syntax, on finding the inner value only, such as when display: flex or display: grid is specified, will set their outer value to block. this will result in expected behavior; for example if you specify an element to be display: grid, you would expect that the box created on the grid container would be a block level box. list item <display-listitem> the element generates a block box for the content and a separate list-item inline box. a single value of list-item will cause the element to behave like a list item. this can be used together with list-style-type and list-style-position. list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords. note: in brows...
...tion, see the following material, which covers the various values of display in depth. ...
...And 8 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. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often more convenient to use the shorthand list-style. note: this property is applied to list items, i.e., elements with display: list-item;. by default this includes <li> elements. 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. note that there is variance among browsers regarding behavior when a block element is placed first within a list element declared as list-style-position: in...
...r more information on this, see bug 36854. syntax /* keyword values */ list-style-position: inside; list-style-position: outside; /* global values */ list-style-position: inherit; list-style-position: initial; list-style-position: unset; the list-style-position property is specified as one of the keyword values listed below. ...
... /* global values */ list-style-position: inherit; list-style-position: initial; list-style-position: unset; the list-style-position property is specified as one of the keyword values listed below. values inside the ::marker is the first element among the list item's contents. outside the ::marker is outside the principal block box. ...
...And 8 more matches

HTML documentation index - HTML: Hypertext Markup Language
attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. 20 is global attributes, html, reference, is the is global attribute allows you to specify that a standard html element should behave like a defined custom built-in element (see using custom elements for more details). 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 i...
...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. each name-value pair is called a property, and a group of one or more properties forms an item. property values are either a string or a url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>. ...
...nt 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. property values are either a string or a url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>. 23 itemref attribute, global attribute, html, html microdata, microdata, reference properties that are not descendants of an element with the itemscope attribute can be associated with an item using the global attribute itemref. ...
...And 8 more matches

Building Menus With Templates - Archive of obsolete content
this applies to menus on menubars, submenus, as well as menu-type buttons such as those with a type attribute set to menu. ...
...et to menu. this allows for better performance as the entire content of a complex menu does not need to be created until the user needs to use the menu. it is very simple to create a menu using a template. here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button. the query generates a list of the person tags within the datasource and outputs the action body for each one. the uri attribute has not been placed o...
...mmand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button. the query generates a list of the person tags within the datasource and outputs the action body for each one. 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 menuitem element. this causes the menupopup to only be created once. the menuitem elements however will be repeated for each result from the query. this makes sense, as we only want one menupopup to be created but multiple menuitem elements. the second button in the example displays an alert with the number of children the template-driven button has. if you press this button before opening the menu, there...
...And 7 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
in thunderbird 2 requires seamonkey 1.1 type: string a string which is passed to the search component. autofill obsolete since gecko 1.9.1 type: boolean note: applies to: thunderbird and seamonkeyif set to true, the best match will be filled into the textbox as the user types. if false, the default, the value will not be filled in until the user selects an item. as of gecko 1.9.1, this attribute is now always specified in lower case. autofillaftermatch obsolete since gecko 1.9.1 type: boolean if set to true, the entire text of the best match will be displayed at the end of the input. if false, only the text that hasn't been entered yet will be filled in. the textbox.autofill attribute must be set to true to use this feature. as of gecko 1.9.1, ...
...ofill attribute must be set to true to use this feature. as of gecko 1.9.1, this attribute is superseded by the completedefaultindex attribute. autofill new in thunderbird 3 requires seamonkey 2.0 type: boolean if set to true, the best match will be filled into the textbox as the user types. if false, the default, the value will not be filled in until the user selects an item. completedefaultindex new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, the best match value will be filled into the textbox as the user types. if set to false or omitted, the value must be selected from the list. crop type: boolean this attribute is not used and is only provided for compatibility with the menulist element. disableautocomplete obsol...
...est you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablehistory obsolete since gecko 2.0 type: boolean note: applies to: thunderbird and seamonkeyif false, an arrow button will appear on the end of the textbox which will open a dropdown menu of all available results. the default value is true, hiding the dropdown button. this attribute only wo...
...And 7 more matches

More Tree Features - Archive of obsolete content
« previousnext » here, we'll see more features of trees. hierarchical trees the tree element is also used to create hierarchical lists, like that found in a file manager or a browser's bookmarks list. 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. the tree will query the view for the level of each item in order to determine how to draw the rows. the tree will draw the open and close icons to open and close a parent item as well as lines connecting the children to their parents. the tree will also handle drawing the rows w...
...the tree will also handle drawing the rows with the right level of indenting. however, the view will need to make sure it keeps track of the level of the rows as necessary. this can sometimes be quite tricky, but fortunately, the built-in content tree view does all of the hard work for us. to create a set of nested rows, all we need to do is add a second treechildren element inside the parent treeitem. you can then add items inside that to specify the child rows of an item. don't put the inner treechildren element inside the treerow as this won't work. you can repeat this process to create deeply nested trees. essentially, a treeitem element can contain either single rows which are declared with the treerow element or a set of rows which are declared with the treechildren element. there are tw...
...en element inside the treerow as this won't work. you can repeat this process to create deeply nested trees. essentially, a treeitem element can contain either single rows which are declared with the treerow element or a set of rows which are declared with the treechildren element. there are two other things you need to do to make sure the hierarchy works properly. first, you need to mark the treeitem element that has children as a container. you do this by adding the container attribute to it as follows: <treeitem container="true" /> this allows the user to click on the row that corresponds to the treeitem to expand and collapse the inner rows. you can have the child rows initially displayed by adding the open attribute. when the user expands and collapses the parent, the view's toggleopenst...
...And 7 more matches

Tree Selection - Archive of obsolete content
« previousnext » the section will describe how to get and set the selected items in a tree. getting the selected tree items each item in a tree (that corresponds to treeitem element, if using content tree view) may be selected individually. if you add the seltype attribute to the tree, set to the value single, the user may only select one row at a time. otherwise, the user may select multiple rows, which will not necessarily be contiguous. the tree provides a number of functions which can be used to determine whether an item is selected. handling the select event first, let's see how we can determine when an item is selected. the onselect() event handler may be added to the tree element. when the user selects an item from the tree, the event handler is called. the user may also chang...
...the syntax of the onselect() event handler is shown below. ...
... be added to the tree element. when the user selects an item from the tree, the event handler is called. the user may also change the selection by using the cursor keys. if the user holds down the cursor key to rapidly scroll through the items, the event handler is not called until the user stops. this results in a performance improvement. this also means that the highlight will appear on several items even though the select event is never fired for those items. the syntax of the onselect() event handler is shown below. <tree id="treeset" onselect="alert('you selected something!');"> tree indices the tree has a property currentindex, which can be used to get the currently selected item, where the first row is 0. child items are included in the count just after their parents. this means that i...
...And 7 more matches

Trees - Archive of obsolete content
number of treecol elements, one for each column. each column will appear as a header at the top of the tree. the second part, the tree body, contains the data to appear in the tree and is created with a treechildren tag. the tree is unique in that the body of the tree consists only of a single widget which draws all of the data in the tree. this contrasts with the listbox, where individual listitem and listcell tags are used to specify the rows in the listbox. in a tree, all of the data to be displayed is supplied by a separate object, called a tree view. when it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. the tree is smart enough to only ask for information from the view for those rows ...
...pace. the content tree view having said that the data to be displayed in a tree comes from a view and not from xul tags, there happens to be a built-in tree view which gets its data from xul tags. this may be a bit confusing, but essentially, one of the built-in tree views uses a set of tags which can be used to specify information about the data in the tree. the following tags are used: treeitem this contains a single parent row and all its descendants. this element also serves as the item which can be selected by the user. the treeitem tag would go around the entire row so that it is selectable as a whole. treerow a single row in the tree, which should be placed inside a treeitem tag. treecell a single cell in a tree. this element would go inside a treerow element. conveniently, ...
...he tree. when the tree needs to display a row, the tree asks the content tree view for a cell's label by calling the view's getcelltext function, which in turn gets the data from the label of the appropriate treecell. however, the three elements listed above are not displayed directly. they are used only as the source for the data for the view. thus, only a handful of attributes apply to the treeitem and related elements. for instance, you cannot change the appearance of the tree rows using the style attribute or with other css properties and the box related features such as flexibility and orientation cannot be used. in addition, mouse and other user interface events do not fire at these elements. in fact, apart from some tree specific attributes, the only attributes that will have any effe...
...And 7 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 ...
...d call supported 5. datatypes section title status notes bugs 5.1 xml schema built-in datatypes partial whitespace facet not supported. ...
...section title status notes bugs 5.1 xml schema built-in datatypes partial whitespace facet not supported. ...
...And 7 more matches

NSS Sample Code sample2
s. this example shows the use of a raw key. */ #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; secitem* secparam = null; pk11context* enccontext = null; secitem keyitem, ivitem; 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. * this code uses the simplest...
...slot(ciphermech, null); /* slot = pk11_getinternalkeyslot(); is a simpler alternative but in * theory, it *may not* return the optimal slot for the operation. 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 secitems. these contain a pointer to * data and a length. turn the raw key into a secitem. */ keyitem.type = sibuffer; keyitem.data = gkey; keyitem.len = sizeof(gkey); /* turn the raw key into a key object. we use pk11_originunwrap * to indicate the key was unwrapped - which is what should be done * normally anyway - using raw keys isn't a good idea */ symkey = pk11_importsymkey(slot,...
...secitem. */ keyitem.type = sibuffer; keyitem.data = gkey; keyitem.len = sizeof(gkey); /* turn the raw key into a key object. we use pk11_originunwrap * to indicate the key was unwrapped - which is what should be done * normally anyway - using raw keys isn't a good idea */ symkey = pk11_importsymkey(slot, ciphermech, pk11_originunwrap, cka_encrypt, &keyitem, null); if (symkey == null) { fprintf(stderr, "failure to import key into nss (err %d)\n", pr_geterror()); goto out; } /* set up the pkcs11 encryption paramters. ...
...And 7 more matches

nss tech note1
mmon. quickder was written to be as compatible as possible with the classic decoder, in order to ease migration to it in areas of critical performance bottlenecks. for this reason, i will first describe all the common functionality of the two decoders, before outlining their differences. the main non-streaming apis for these two decoders have an identical prototype : secstatus sec_asn1decodeitem(prarenapool *pool, void *dest, const sec_asn1template *t, secitem *item); secstatus sec_quickderdecodeitem(prarenapool* arena, void* dest, const sec_asn1template* templateentry, secitem* src); here is a description of the arguments : secitem* src† is a structure containing a pointer to the binary data to be decoded, as well as its size. const sec_asn1template* templateentry is a poi...
..._dynamic or sec_asn1_xtrn : specifies that the component format is defined in a dynamic subtemplate. there is no difference between the two macros. the sub field of the template points to a callback function of type sec_asn1templatechooser that returns the subtemplate depending on the component data. sec_asn1_skip: specifies that the decoder should skip decoding of the component. ...
...fference between the two macros. the sub field of the template points to a callback function of type sec_asn1templatechooser that returns the subtemplate depending on the component data. sec_asn1_skip: specifies that the decoder should skip decoding of the component. sec_asn1decodeitem can only skip required components and will assert if you try to skip an optional component. sec_quickderdecodeitem 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. this means the next template will reprocess the same...
...And 7 more matches

ssltyp.html
selected ssl types and structures chapter 3 selected ssl types and structures this chapter describes some of the most important types and structures used with the functions described in the rest of this document, and how to manage the memory used for them. additional types are described with the functions that use them or in the header files. types and structures managing secitem memory types and structures these types and structures are described here: certcertdbhandle certcertificate pk11slotinfo secitem seckeyprivatekey secstatus additional types used by a single function only are described with the function's entry in each chapter. some of these functions also use types defined by nspr and described in the nspr reference. <a name="> many of the struct...
...escription of a function often implies reference counting. never alter the contents of a certificate structure. if you attempt to do so, the change affects all the shallow copies of that structure and can cause severe problems. pk11slotinfo an opaque structure representing a physical or logical pkcs #11 slot. ...
...ef struct pk11slotinfostr pk11slotinfo; secitem 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 } secitemtype; typedef struct secitemstr secitem; struct secitemstr { secitemtype type; unsigned char *data; unsigned int len; }; description a secitem structure can be used to associate your own data with an ssl socket. to free a structure pointed to by a secitem, and, if desired, the secitem structure itself, use one the functions secitem_freeitem or secitem_zfreeitem. seckeyprivatekey...
...And 7 more matches

ExtensionManager (Toolkit)
the extensionmanager follows the nsiextensionmanager api. note: this api is obsolete starting in gecko 2.0, and has been replaced by the new add-on manager. ...
... the extensionmanager follows the nsiextensionmanager api. note: this api is obsolete starting in gecko 2.0, and has been replaced by the new add-on manager. ...
... the extensionmanager follows the nsiextensionmanager api. note: this api is obsolete starting in gecko 2.0, and has been replaced by the new add-on manager. ...
...And 7 more matches

nsIJumpListBuilder
p lists are built and then applied. modifying an applied jump list is not permitted. callers should begin the creation of a new jump list using initlistbuild(), add sub lists using addlisttobuild(), then commit the jump list using commitlistbuild(). lists are built in real-time during the sequence of build calls, make sure to check for errors on each individual step. ...
...in the creation of a new jump list using initlistbuild(), add sub lists using addlisttobuild(), then commit the jump list using commitlistbuild(). lists are built in real-time during the sequence of build calls, make sure to check for errors on each individual step. the default number of allowed items in a jump list is ten. users can change the number through system preferences. user may also pin items to jump lists, which take up additional slots. ...
...it the jump list using commitlistbuild(). lists are built in real-time during the sequence of build calls, make sure to check for errors on each individual step. the default number of allowed items in a jump list is ten. users can change the number through system preferences. 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. item insertion priority is defined as first to last added. users may remove items from jump lists after they are committed. the system tracks removed items between commits. a list of these items is returned by a call to initlistbuild(). nsijumplistbuilder does not filter entries added that have been removed since the last commi...
...And 7 more matches

nsITreeView
1 drop_on 0 drop_after 1 indropbefore 0 obsolete since gecko 1.8 indropon 1 obsolete since gecko 1.8 indropafter 2 obsolete since gecko 1.8 methods candrop() methods used by the drag feedback code to determine if a drag is allowable at the current location. 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(). boolean candrop( in long index, in long orientation, in nsidomdatatransfer datatransfer ); parameters index the index of the row. orientation the position around the given row. defined in constant...
...amined to determine if a drop is possible. return value true if a drop is allowed at the current location; otherwise false. candropbeforeafter() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method used by the drag feedback code to determine if a drag is allowable at the current location. to get the behavior where drops are only allowed on items, such as the mailnews folder pane, always return false from candropbeforeafter(). boolean candropbeforeafter( in long index, in boolean before ); parameters index the index of the item. before true to test drop before. false to test drop after. return value true if a drop event can occur. otherwise false. candropon() obsolete since gecko 1.8 (firefox 1.5 / thund...
... return value true if a drop event can occur. otherwise false. cyclecell() called on the view when a cell in a non-selectable cycling column (for example, unread/flag/and so on.) is clicked. ...
...And 7 more matches

XUL Overlays
ents, as described in the example above overriding small pieces of a xul file without having to resupply the whole ui reusing particular pieces of the ui xul files and overlays work together to describe a single master document. ...
...e" 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. when plug-ins, browser extensions, or other applications provide new ui elements to the browser, these elements should be defined in overlay files. ...
...rowser, these elements should be defined in overlay files. 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: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes bases and overlays are merged when they share the same id attribute. thus, given the following...
...And 7 more matches

Storage - Web APIs
the storage interface of the web storage api provides access to a particular domain's session or local storage. it allows, for example, the addition, modification, or deletion of stored data items. to manipulate, for instance, the session storage for a domain, a call to window.sessionstorage is made; whereas for local storage the call is made to window.localstorage. properties storage.length read only returns an integer representing the number of data items stored in the storage object. ...
...e session storage for a domain, a call to window.sessionstorage is made; whereas for local storage the call is made to window.localstorage. properties storage.length read only returns an integer representing the number of data items stored in the storage object. methods storage.key() when passed a number n, this method will return the name of the nth key in the storage. storage.getitem() when passed a key name, will return that key's value. storage.setitem() when passed a key name and value, will add that key to the storage, or update that key's value if it already exists. storage.removeitem() when passed a key name, will remove that key from the storage. storage.clear() when invoked, will empty all keys out of the storage. examples here we access a storage object by ...
... when passed a key name and value, will add that key to the storage, or update that key's value if it already exists. storage.removeitem() when passed a key name, will remove that key from the storage. storage.clear() when invoked, will empty all keys out of the storage. examples here we access a storage object by calling localstorage. we first test whether the local storage contains data items using !localstorage.getitem('bgcolor'). if it does, we run a function called setstyles() that grabs the data items using storage.getitem() and uses those values to update page styles. ...
...And 7 more matches

Box alignment in grid layout - CSS: Cascading Style Sheets
t, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods. basic example in this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. this space is distributed using justify-content. 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. we have access to all of the box alignment properties to help us achieve this. the inline axis is the axis that...
... is the axis that corresponds to the direction that words in a sentence would run in the writing mode used. therefore, in a horizontal language such as english or arabic the inline direction runs horizontally. should you be in a vertical writing mode the inline axis will run vertically. to align things on the inline axis you use the properties that start with justify-, justify-content, justify-items and justify-self. the block axis crosses the inline axis in the direction that blocks are displayed down the page — for example paragraphs in english are displayed one below the other vertically. this, therefore is the block dimension. to align things on the block axis you use the properties that start with align-, align-content, align-items and align-self. self alignment justify-self ...
...is crosses the inline axis in the direction that blocks are displayed down the page — for example paragraphs in english are displayed one below the other vertically. this, therefore is the block dimension. to align things on the block axis you use the properties that start with align-, align-content, align-items and align-self. ...
...And 7 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. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...yntax /* keyword values */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /* global values */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; this property may take one of two forms: a single keyword: one of row, column, or dense. two keywords: row dense or column dense. ...
...olumn dense; /* global values */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; this property may take one of two forms: a single keyword: one of row, column, or dense. two keywords: row dense or column dense. values row items are placed by filling each row in turn, adding new rows as necessary. if neither row nor column is provided, row is assumed. column items are placed by filling each column in turn, adding new columns as necessary. dense "dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. this may cause items to appear out-of-order, when doing so would fill in holes left by larger items. if it is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" i...
...And 7 more matches

place-self - CSS: Cascading Style Sheets
the align-self and justify-self properties) in a relevant layout system such as grid or flexbox. if the second value is not present, the first value is also used for it. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... for gr...
...es auto computes to the parent's align-items value. normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start. the property doesn't apply to block-level boxes, and to table cells. ...
...And 7 more matches

<menu> - HTML: Hypertext Markup Language
permitted content if the element is in the list menu state: flow content, or alternatively, zero or more occurrences of <li>, <script>, and <template>. (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), <menuitem>, <hr>, <script>, and <template>. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree dom interface htmlmenuelement ...
...the toolbar state, which represents a toolbar consisting of a series of commands for user interaction. this might be in the form of an unordered list of <li> elements, or, if the element has no <li> element children, flow content describing available commands. this value is the default if the attribute is missing. ...
...f a series of commands for user interaction. this might be in the form of an unordered list of <li> elements, or, if the element has no <li> element children, flow content describing available commands. this value is the default if the attribute is missing. usage notes the <menu> and <ul> elements both represent an unordered list of items. ...
...And 7 more matches

getAttributeNS - Archive of obsolete content
some browsers do not support getattributens, the following might be used to work on them as well. while namespaced attributes are less common than namespaced elements, some standards such as xlink depend on them. note that all gecko-based browsers (including firefox) support dom:element.getattributens. this function is not necessary for gecko-based browsers. ...
...etattributens, the following might be used to work on them as well. while namespaced attributes are less common than namespaced elements, some standards such as xlink depend on them. note that all gecko-based browsers (including firefox) support dom:element.getattributens. this function is not necessary for gecko-based browsers. ...
...m as well. while namespaced attributes are less common than namespaced elements, some standards such as xlink depend on them. note that all gecko-based browsers (including firefox) support dom:element.getattributens. this function is not necessary for gecko-based browsers. ...
...And 6 more matches

onpopuphidden - Archive of obsolete content
« xul reference home onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
... « xul reference home onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
... « xul reference home onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...And 6 more matches

PopupEvents - Archive of obsolete content
to open a context menu, whether by the keyboard or mouse. this event will be fired even for elements that don't have a context menu associated with them. for more information about how to use this event, see context menu events. popupshowing this event is fired on a menupopup, panel or tooltip just before it is made visible. ...
... popuphidden this event is fired on a menupopup, panel or tooltip once it has been hidden. the popupshowing event just before a popup is about to be displayed, a popupshowing event will fired on the popup. ...
...popup is about to be displayed, a popupshowing event will fired on the popup. this will occur regardless of how the popup is opened, either from user interaction or from a script calling the openpopup or openpopupatscreen methods. the typical usage of a listener of the popupshowing event is to adjust the content of the popup based on context. 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. within the listener for the popupshowing event, you can append to or modify the menu as needed before it is displayed. for examples of the use of the popupshowing event when used with context menus, see hiding and showing menu items based on context. however, this technique can ...
...And 6 more matches

Building Trees - Archive of obsolete content
you can use a template with a tree just like any other template. however, since templates are often used with trees—especially with large amounts of data—the template system supports a special builder just for creating trees. rather than generate content for every row in the tree, the results are stored in a list inside the builder. this means that dom nodes are not constructed for any of the items. this is much more efficient; creating large numbers of dom nodes adds a lot of overhead. the performance advantage is possible since trees only display text. as a result, the builder only has a few pieces of information to keep track of. to use the tree builder, you need to add a flags attribute to the root node: <tree datasources="template-guide-streets.rdf" ref="http://www.xulplanet.co...
... situations that call for this, typically when handling smaller amounts of data. however, the content builder becomes slower as the amount of data increases. apart from the flags attribute, the template syntax for the tree builder and the content builder are identical. however, the tree builder requires a very specific form to the action body. ...
... a single treeitem 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> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> <treecell label="rdf:http://purl.org/dc/elements/1.1/date"/> </treerow> </treeitem> </treechildren> </template> </tree> note: the tree columns (treecols) are declared outside the template as static content, since they only need to be declared once. this template...
...And 6 more matches

calICalendarViewController - Archive of obsolete content
summary a calicalendarviewcontroller provides a way for a calicalendarview to create, modify, and delete items. implementing a calicalendarviewcontroller allows for these actions to be performed in a manner consistent with the rest of the application in which the calicalendarview is included. calendar/base/public/calicalendarviewcontroller.idlscriptable please add a summary to this article. ...
...calicalendarviewcontroller.idlscriptable please add a summary to this article. ...
...in many cases, acalendar will be the defaultcalendar of the displaycalendar of the calicalendar...
...And 6 more matches

Looping code - Learn web development
here we'll look at the loop structures available in javascript that handle such needs. prerequisites: basic computer literacy, a basic understanding of html and css, javascript first steps. objective: to understand how to use loops in javascript. ...
... to maintain very quickly. loops really are the best. the standard for loop let's start exploring some specific loop constructs. the first, which you'll use most of the time, is the for loop — this has the following syntax: for (initializer; condition; final-expression) { // code to run } here we have: the keyword for, followed by some parentheses. 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. it is also sometimes referred to as a counter variable. a condition — as mentioned before, this defines when the loop should stop looping. this is generally an expression featuring a comparison operator, a test to see if the exit...
... 'jeff', 'pete', 'biggles', 'jasmin']; let info = 'my cats are called '; const para = document.queryselector('p'); for (let i = 0; i < cats.length; i++) { info += cats[i] + ', '; } para.textcontent = info; </script> </body> </html> note: you can find this example code on github too (also see it running live). 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. here: the counter variable (sometimes known as an initializer or an iteration variable), i, starts at 0 (let i = 0). the loop has been told to run until i is no longer smaller than the length of the cats array. this is important — the condition is the condition under which the loop will still run. so in...
...And 6 more matches

Using Vue computed properties - Learn web development
these work similarly to methods, but only re-run when one of their dependencies changes. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. ...
...dvanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn how to use vue computed properties. using computed properties the aim here is to add a summary count of our to-do list. this can be useful for users, while also serving to label the list for assistive technology. 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>{{todoitems.filter(item => item.done).length}} out of {{todoitems.length}} items completed</h2> it would be recalculated on every render. for a small app like this, that probably doesn't matter too much. for bigger apps, or when the expression is more com...
... every render. for a small app like this, that probably doesn't matter too much. for bigger apps, or when the expression is more complicated, that could cause a serious performance problem. a better solution is to use vue’s computed properties. computed properties work similarly to methods, but only re-run when one of their dependencies changes. in our case, this would only re-run when the todoitems array changes. to create a computed property, we need to add a computed property to our component object, much like the methods property we've used previously. adding a summary counter add the following code to your app component object, below the methods property. the list summary method will get the number of finished todoitems, and return a string reporting this. computed: { listsummary...
...And 6 more matches

Utility functions
link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. ...
...d source code references. the nss version column indicates which versions of nss support the function. ...
...h versions of nss support the function. ...
...And 6 more matches

nsINavHistoryResultNode
ribute type description accesscount unsigned long total number of times the uri has been accessed. for hosts, this is the total number of the children under it, rather than the total number of times the host has been accessed (getting that information would require an additional query, so for performance reasons that information isn't given by default). read only. ...
...for other nodes, this value is 0. ...
...for other nodes, this value is 0. read only. icon autf8string this uri can be used as an image source uri and will give you the favicon for the page. ...
...And 6 more matches

ContentIndex - Web APIs
contentindex.getall returns a promise that resolves with an iterable list of content index entries. ...
... contentindex.getall returns a promise that resolves with an iterable list of content index entries. ...
...to the serviceworkerregistration, then check for the index property, which gives us access to the content index interface. ...
...And 6 more matches

DataTransfer - Web APIs
for more information about drag and drop, see html drag and drop api. this object is available from the datatransfer property of all drag events. constructor datatransfer() creates and returns a new datatransfer object. properties standard properties datatransfer.dropeffect gets the type of drag-and-drop operation currently selected or sets the operation to a new type. the value must be none, copy, link or move. ...
...be none, copy, link or move. datatransfer.effectallowed provides all of the types of operations that are possible. must be one of none, copy, copylink, copymove, link, linkmove, move, all or uninitialized. datatransfer.files contains a list of all the local files available on the data transfer. if the drag operation doesn't involve dragging files, this property is an empty list. datatransfer.items read only gives a datatransferitemlist object which is a list of all of the drag data. datatransfer.types read only an array of strings giving the formats that were set in the dragstart event. gecko properties note: all of the properties in this section are gecko-specific. datatransfer.mozcursor gives the drag cursor's state. this is primarily used to control the cursor during tab...
...ernal drags or if the caller can't access the node. datatransfer.mozusercancelled read only this property applies only to the dragend event, and is true if the user canceled the drag operation by pressing escape. it will be false in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location. deprecated properties datatransfer.mozitemcount read only gives the number of items in the drag operation. removed in firefox 71. methods standard methods datatransfer.cleardata() remove the data associated with a given type. the type argument is optional. if the type is empty or not specified, the data associated with all types is removed. if data for the specified type does not exist, or the data transfer contains no data, th...
...And 6 more matches

Checking when a deadline is due - Web APIs
k to see if the form fields have all been filled in. if not, we drop a message into our developer notifications pane (see the bottom left of the app ui) to tell the user what is going on, and exit out of the function. ...
...n, 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 opened for task addition.</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"); // add our newitem object to the object store var request = objectstore.add(newitem[0]); in this section we create an object called newitem that stores the data in the format required to insert it into the database. the next few lines open the databas...
... // add our newitem object to the object store var request = objectstore.add(newitem[0]); in this section we create an object called newitem 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. the notified property of the data object indicates that the to-do list item's deadline has not yet come up and been notified - more on this later! note: the db variable stores a reference to the indexeddb database instance; we can then use various properties of this variable to manipulate the data. request.onsuccess = function(event) { note.innerhtml += '<li>new item add...
...And 6 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. in the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. both horizontal and vertical alignment of the children can be easily manipulated. basic example in the following example a container has been set to display: flex, which means that the three child items become flex items. ...
...their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. both horizontal and vertical alignment of the children can be easily manipulated. 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. an equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. you can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch. the items stretch to the height of the flex container, making them each appear as tall as the tallest item. refe...
... the items are stretching on the cross axis, due to the default value of align-items being stretch. the items stretch to the height of the flex container, making them each appear as tall as the tallest item. reference css properties flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap order alignment properties the properties align-content, align-self, align-items and justify-content initially appeared in the flexbox specification, but are now defined in box alignment. the flexbox spec now refers to the box alignment specification for up to date definitions. also additional alignment properties are now defined in box alignment. ...
...And 6 more matches

Grid template areas - CSS: Cascading Style Sheets
you will see very quickly why we sometimes call this the ascii-art method of grid layout! naming a grid area you have already encountered the grid-area property. ...
...you will see very quickly why we sometimes call this the ascii-art method of grid layout! naming a grid area you have already encountered the grid-area property. ...
...you will see very quickly why we sometimes call this the ascii-art method of grid layout! naming a grid area you have already encountered the grid-area property. ...
...And 6 more matches

place-content - CSS: Cascading Style Sheets
; /* global values */ place-content: inherit; place-content: initial; place-content: unset; the first value is the align-content property value, the second the justify-content one. important: if the second value is not present, the first value is used for both, provided it is a valid value for both. if it is invalid for one or the other, the whole value will be invalid. 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. this only ...
...ach 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. this only applies to flex layout items. for items that are not children of a flex container, this value is treated like start. flex-end the items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end or cross-end side. this only applies to flex layout items. ...
...ner depending on the flex container's main-start or cross-start side. this only applies to flex layout items. for items that are not children of a flex container, this value is treated like start. flex-end the items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end or cross-end side. this only applies to flex layout items. for items that are not children of a flex container, this value is treated like end. center the items are packed flush to each other toward the center of the alignment container. left the items are packed flush to each other toward the left edge of the alignment container. ...
...And 6 more matches

xml:base support in old browsers - Archive of obsolete content
f your browser has native support for node.baseuri. these two functions aim to allow some support for xml:base. note however, that this code is not based on a thorough examination of the specs related to forming base uris and could well have a number of errors. however, it is working in some of the cases tested. ...
...lated to forming base uris and could well have a number of errors. however, it is working in some of the cases tested. ...
...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 (thisitem) { // 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 (!thisitem || !thisitem.nodename) { return xmlbase; } // check present element and higher up for xml:base // now check for the next matching local name up in the hier...
...And 5 more matches

Adding sidebars - Archive of obsolete content
ly familiar with the bookmarks and history sidebars. if not, you can open either one from the view > sidebar menu. they also have shortcuts to open or close them using the keyboard. the code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. ...
... this workaround is necessary because you can't have an background image stretch using css. a less common use for the stack element is to use the left and top attributes on its children in order to have absolute positioning for the content on the layers. 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. this can become complicated very easily, though. remember that you can't have flexibility and absolute positioning at the same time. trees the bookmarks and history sidebars in firefox use the « xul reference « element to show their content. trees are another strong option when you need to show a great am...
...od amount of work before it fits your specific needs. it is in reality a hierarchical table view, so its content is defined in terms of rows and columns. ...
...And 5 more matches

XUL Events - Archive of obsolete content
e of a <checkbox> element has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
...ment has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
...n a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
...And 5 more matches

Special per-platform menu considerations - Archive of obsolete content
for many menu commands, convention dictates where these items will be placed. for instance, the edit menu always starts with the undo command if such a feature is available in the application, followed by redo, cut, copy, paste, and so forth. 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. the mac application menu on the macintosh, an extra menu exists beside the file menu; its name is the same as the name of the application. this menu contains a number of items that pertain to the application. ...
...instance, on windows, the menu item which exits the application is labeled "exit" and is normally placed at the end of the file menu. the mac application menu on the macintosh, an extra menu exists beside the file menu; its name is the same as the name of the application. this menu contains a number of items that pertain to the application. for instance, this is the proper place to put the menu items which open the application preferences and which quit the application. this can be accomplished by ensuring that certain common ids are set for the menu items that need to be placed on the application menu. on the mac, these menu items will be moved onto the application menu, but on other platforms, they will be left in their original locations. this makes it easier to write the same xul code f...
...which quit the application. this can be accomplished by ensuring that certain common ids are set for the menu items that need to be placed on the application menu. on the mac, these menu items will be moved onto the application menu, but on other platforms, they will be left in their original locations. this makes it easier to write the same xul code for all platforms. here is a list of the menu item ids which are automatically handled. menu_filequitseparator the separator just before the quit/exit item. menu_filequititem the item which exits the application. menu_prefsseparator the separator just before the preferences/options item. menu_preferences the item which opens the application preferences. aboutseparator the separator just...
...And 5 more matches

RDF Query Syntax - Archive of obsolete content
next » let's look at a simple query with two statements. each statement is placed as a direct child of the <query> element within the template. <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <rule> ... </rule> </template> </vbox> this query has two statements, each specified with a different tag. the template won't generate anything yet since we still need to fill in the content to be generated which goes in the missing part inside the rule. however, the template builder will be able to compile the rules and examine...
...more understandable. for this discussion, assume that so far we have a single potential result as above. 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/relateditem" object="?relateditem"/> the triple statement is used to follow arcs or arrows in the rdf graph. the predicate attribute specifies the labels of the arrows to follow. in the triple used here, the predicate is 'http://www.xulplanet.com/rdf/relateditem', so we know that the builder will look for arrows with that label. the builder can either follow the arrows in a forward or backward direc...
...known yet. recall the data in the potential results set: (?start = http://www.xulplanet.com/rdf/a) this was the seed data created by the content statement. ...
...And 5 more matches

Static Content - Archive of obsolete content
« previousnext » creating a menuitem in the filter list to show all items is fairly easy. this item doesn't need to be generated from the datasource. instead it will be what is called static content in a template. the static content is any content that is a sibling of the template element. this content is displayed as is without affecting the generated content from the template. ...
...tic content in a template. the static content is any content that is a sibling of the template element. this content is displayed as is without affecting the generated content from the template. ...
...the content will be displayed just like it would be as if the template wasn't present. that is, before the template is examined, the menu...
...And 5 more matches

XPCOM Examples - Archive of obsolete content
to create a window menu with a list of the currently open windows in the application. the datasource for this is rdf:window-mediator. we can use this as in the following example: example 1 : source <toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows. try this example by opening a number of browser windows and you'll see that they are all listed on the menu. window mediator component this is fine for displaying a list of open windows, but...
..."/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows. try this example by opening a number of browser windows and you'll see that they are all listed on the menu. 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. this is accomplished by using the window mediator component. it implements the interface nsiwindowdatasource. the code below shows how to get a component which implements it: var wmdata = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getservice(); wmdata.queryinterface(components.interfaces.nsiwindowdatasource); this code retrieves a window ...
...rdf datasource. you can also get this component through the rdf service, which is another service that manages rdf datasources. the nsiwindowdatasource interface has a function getwindowforresource, which can be used to get the window given a resource. in the earlier example, we generated the list of windows and added it to a menu via a template. the template generates an id attribute on each menuitem element. the value of this attribute can be used as the resource. that means that in order to switch the window focus, we need to do the following: determine the element that the user clicked on. get the value of the id attribute from the element. pass this value to getwindowforresource() to get a window object. switch the focus to this window. the example below shows how we might do th...
...And 5 more matches

Widget Cheatsheet - Archive of obsolete content
see the periodic table of xul for more examples. ...
... see the periodic table of xul for more examples. ...
... see the periodic table of xul for more examples. ...
...And 5 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> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> <...
...r')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> </menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this file, the lowest-down, or "leaf" elements are the menuitems. the hierarchy of the interface can be represented as follows: when one of these menuitems raises an event, any of the elements above it in the hierarchy can handle it. in the example above, when the menuitem raises the "command" event, indicating that it has been selected, the menupopup, the menu itself, the parent box, or the root window element itself can all take advantage of this. eve...
...ropagation" or event bubbling. event bubbling means you can handle events anywhere above the event-raising element in the hierarchy. if you cut and paste the source code from the example above into a separate file, you can see that the effect of these event handlers is to display as many as four different alert dialogs as the event bubbles up the hierarchy. for example, when you click the new menuitem from the file menu, the event handlers display alerts for "new item alert", "menu handler", "box handler", and "window handler." any or all of these event handler locations might be useful in your interface development. (see it happen.) for an event to be useful somewhere higher up, however, it is very often necessary to determine which element below the handler actually raised the event. for ex...
...And 5 more matches

menuseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
...cally drawn as a thin line. more information is available in the xul tutorial. attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in the key attribute. this attribute does not...
... side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user...
...And 5 more matches

panel - Archive of obsolete content
h it will be cleared if the focus is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
... cleared if the focus is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...us is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...And 5 more matches

XForms Select1 Element - Archive of obsolete content
note, some representations of the select1 element do not support visual grouping. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for focusing this control. ...
... #representations section to refer if the attribute is supported for every representation). incremental - supported, default value is true properties selection - see corresponding attribute incremental - see corresponding attribute type restrictions the select1 element can be bound to a node containing simple content. 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. the relaxation happens when the itemset element specifies the item value using a copy (see spec) element. this is because a copy element can be used to add a subtree of nodes underneath the element that the select1 control is bound to. representations the xforms select1 element can be represented by the...
...e = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul). xhtml widget characteristics analogous widgets is <html:select/> visual grouping by choices element is supported selection="open" is supported if incremental attribute value is false, the bound node is updated when the select1 control is blurred (i.e. ...
...And 5 more matches

CSS and JavaScript accessibility best practices - Learn web development
is that you can update the styling of a page feature to fit in your design, but don't change it so much that it no longer looks or behaves as expected. the following sections summarize the main html features to consider. "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. to make your text logical, legible, and comfortable to read. make sure your headings stand out from your body text, typically big and bold like the default styling. your lists should look...
...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 < formitems.length; i++) { const testitem = formitems[i]; if(testitem.input.value === '') { errorfield.style.left = '360px'; createlink(testitem); } } 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...
...erfere with the screen reader being able to read content from it. real form validation would be much more complex than this — you'd want to check that the entered name actually looks like a name, the entered age is actually a number and is realistic (e.g. nonnegative and less than 4 digits). here we've just implemented a simple check that a value has been filled in to each input field (if(testitem.input.value === '')). when the validation has been performed, if the tests pass then the form is submitted. if there are errors (if(errorlist.innerhtml !== '')) then we stop the form submitting (using preventdefault()), and display any error messages that have been created (see below). this mechanism means that the errors will only be shown if there are errors, which is better for usability. fo...
...And 5 more matches

Organizing your CSS - Learn web development
ection of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on. /* || general styles */ body { ... } h1, h2, h3, h4 { ... } ul { ... } blockquote { ... } 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 have a few things you know you will want to apply to lots of different elements, they can come in this section. /* || utilities */ .nobullets { list-style: none; margin: 0; padding: 0; } ... then we can add everything that is used sitewide. that might be things like the basic page layout, the header, navigation styling, and so on. /* || sitewide */ .mai...
...h a fixed size image, video or other element on one side, and flexible content on the other. it's a pattern we see all over websites for comments, listings, and so on. 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. .comment { display: grid; grid-template-columns: 1fr 3fr; } .comment img { border: 1px solid grey; } .comment .content { font-size: .8rem; } .list-...
... 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. .comment { display: grid; grid-template-columns: 1fr 3fr; } .comment img { border: 1px solid grey; } .comment .content { font-size: .8rem; } .list-item { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid grey; } .list-item .content { font-size: .8rem; } in oocss, you would create one pattern called media that would have all of the common css for both patterns — a base class for things that are generally the shape of the media object. then we'd add an additional class to deal with those tiny differences, thus ext...
...And 5 more matches

Understanding client-side JavaScript frameworks - Learn web development
development. 2. ember app structure and componentization in this article we'll get right on with planning out the structure of our todomvc ember app, adding in the html for it, and then breaking that html structure into components. 3. 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. along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app. 4. ember interactivity: footer functionality, conditional rendering now it's time to start tackling the footer functionality in our app. here we'll get the todo counter to update to show ...
...ackground, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example. 2. ...
...te our own custom component — we'll start by creating a component to represent each item in the todo list. along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state. 3. rendering a list of vue components at this point we've got a fully working component; we're now ready to add multiple todoitem components to our app. in this article 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 todoitem components using the v-for directive. 4. adding a new todo form: vue events, methods, and models we now have sample data in place and a loop that takes each bit of data and renders it inside a todoitem in our app. what we really...
...And 5 more matches

NSS 3.15 release notes
download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_rtm/src/ new in nss 3.15 new functionality support for ocsp stapling (rfc 6066, certificate status request) has been added for both client and server sockets. tls client applications may enable this via a call to ssl_optionsetdefault(ssl_enable_ocsp_stapling, pr_true); added function secitem_reallocitemv2. it replaces function secitem_reallocitem, which is now declared as obsolete. support for single-operation (eg: not multi-part) symmetric key encryption and decryption, via pk11_encrypt and pk11_decrypt. certutil has been updated to support creating name constraints extensions. new functions in ssl.h ssl_peerstapledocspresponse - returns the server's stapled ocsp ...
...nded for testing, permits the sending and receiving of raw ocsp request/responses. in secpkcs7.h sec_pkcs7verifydetachedsignatureattime - verifies a pkcs#7 signature at a specific time other than the present time. in xconst.h cert_encodenameconstraintsextension - matching function for cert_decodenameconstraintsextension, added in nss 3.10. in secitem.h secitem_allocarray secitem_duparray secitem_freearray secitem_zfreearray - utility functions to handle the allocation and deallocation of secitemarrays secitem_reallocitemv2 - replaces secitem_reallocitem, which is now obsolete. secitem_reallocitemv2 better matches caller expectations, in that it updates item->len on allocation. for more details of the issues ...
... secitem_allocarray secitem_duparray secitem_freearray secitem_zfreearray - utility functions to handle the allocation and deallocation of secitemarrays secitem_reallocitemv2 - replaces secitem_reallocitem, which is now obsolete. secitem_reallocitemv2 better matches caller expectations, in that it updates item->len on allocation. for more details of the issues with secitem_reallocitem, see bug 298649 and bug 298938. in pk11pub.h pk11_decrypt - performs decryption as a single pkcs#11 operation (eg: not multi-part). this is necessary for aes-gcm. pk11_encrypt - performs encryption as a single pkcs#11 operation (eg: not multi-part). this is necessary for aes-gcm. ...
...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, secitem *outbuf, prbool ishexdata); /* * filetoitem */ extern secstatus filetoitem(secitem *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); /* * filetoitem */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * seedfromnoisefile */ extern secstatus seedfromnoisefile(const char *noisefilename); /* * filesize */ extern long filesize(const char* filename); /* * readderfromfile */ extern secstatus readderfromfile(secitem *der, const char *infilename, prbool ascii); #endif /* _util_h */ util.c /* this source code f...
...port_alloc(outlen) : port_alloc(len); if (!outbuf->data) { return -1; } if (ishexdata) { while (*instring) { if ((*instring == '\n') || (*instring == ':')) { ...
...And 5 more matches

Rhino Debugger
and system.err streams to an internal javascript console window which provides an editable command line for you to enter javascript code and view system output. the console window maintains a history of the commands you have entered. you may move backward and forward through the history list by pressing the up/down arrow keys on the keyboard. opening scripts you may select the file->open menu item on the menu bar to load javascript scripts contained in files. this action will display a file-selection dialog box prompting you for the location of a script to load. the selected file will be compiled and displayed in a new window. running scripts you may select the file->run menu item on the menu bar to execute javascript scripts contained in files. this action will display a file-selection...
...f a script to execute. the loaded script will be run in a new thread and control will be given to the debugger on its first instruction. 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. if the current line in the script contains a function call control will return to the debugger upon entry into the function. otherwise control will return to the debugger at the next line in the current function. step over to single step to the next line in the current f...
...y on the keyboard execution will resume. if the current line in the script contains a function call control will return to the debugger upon entry into the function. otherwise control will return to the debugger at the next line in the current function. ...
...And 5 more matches

Detailed XPCOM hashtable guide
hashtables may seem like arrays, but there are important differences: array hashtable keys: integer: arrays are always keyed on integers, and must be contiguous. ...
...hashtables may seem like arrays, but there are important differences: array hashtable keys: integer: arrays are always keyed on integers, and must be contiguous. ...
...hashtables may seem like arrays, but there are important differences: array hashtable keys: integer: arrays are always keyed on integers, and must be contiguous. ...
...And 5 more matches

nsIApplicationCache
ache. clients can open a session with nsicacheservice.createsession() using this client id and a storage policy of store_offline to access this cache. read only. groupid acstring the group id for this cache group. this is the uri of the cache manifest file. read only. usage unsigned long the disk usage of the application cache, in bytes. read only. ...
...n a session with nsicacheservice.createsession() using this client id and a storage policy of store_offline to access this cache. read only. groupid acstring the group id for this cache group. this is the uri of the cache manifest file. read only. usage unsigned long the disk usage of the application cache, in bytes. read only. ...
...atesession() using this client id and a storage policy of store_offline to access this cache. read only. groupid acstring the group id for this cache group. this is the uri of the cache manifest file. read only. usage unsigned long the disk usage of the application cache, in bytes. read only. 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. item_dynamic 8 this item was added to the cache using the dynamic scripting api. item_foreign 16 this item was listed in the application manifest, but named a different cache group as its manifest. ...
...And 5 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. void appendelement( in nsisupport...
...umerate(); 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. void appendelement( in nsisupports item ) parameters item nsisupports item to be appended to the list. clear() removes all items from the collection. void clear(); parameters none. count() returns the number of items in the collection. pruint32 count(); parameters none. return value number of items in the list. enumerate() returns an nsienumerator that lets you iterate over the items in the collection. nsienumerator enumer...
...s none. return value number of items in the list. enumerate() returns an nsienumerator that lets you iterate over the items in the collection. nsienumerator enumerate(); parameters none. return value an nsienumerator. getelementat() returns the element at the specified index into the collection. nsisupports getelementat( in pruint32 index ); parameters index the index position of the item to be returned. return value nsisupports item at the index position. queryelementat() performs a queryinterface on the item at the specified index into the collection. void queryelementat( in pruint32 index, in nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result ); parameters index position of the item to be queried. uuid nsiidref of the item. result compar...
...And 5 more matches

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 notifyitemadded(in nsisupports item); void notifyitemremoved(in nsisupports item); void notifyfolderevent(in nsiatom event); void listdescendents(in nsisupportsarray descende...
...iatedname astring readonly: old nsifolder properties and methods. parent nsimsgfolder old nsifolder properties and methods. parentmsgfolder nsimsgfolder readonly: handy accessor when we want a msg folder. dbtransferinfo nsidbfolderinfo subfolders nsisimpleenumerator readonly: returns an enumerator containing a list of nsimsgfolder items that are subfolders of the instance this is called on. hassubfolders boolean readonly: returns true if this folder has sub folders. messages nsisimpleenumerator readonly: returns a list of components.interfaces.nsimsgdbhdr. numsubfolders unsigned long readonly: returns the number of sub folders that this folder has. invfeditsearchscope boo...
...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); notifyitemadded() v...
...And 5 more matches

nsINavHistoryQueryOptions
y applied to the containers. asyncenabled boolean when true, the root container node generated by these options and all of its descendant containers are opened asynchronously if they support doing so. by default, this is false. note: currently, only bookmark folder containers support being opened asynchronously. ...
... the root container node generated by these options and all of its descendant containers are opened asynchronously if they support doing so. by default, this is false. note: currently, only bookmark folder containers support being opened asynchronously. excludeitemifparenthasannotation 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). ignored for queries over history. excludeitems boolean this option excludes all uris and separators from a bookmarks query. this would be used if you just wanted a list of bookmark folders and queries (s...
...designed for cases where you want to give the user the option of filing something into a list of folders. it only affects cases where the actual folder result node would appear in its parent folder and filters it out. it doesn't affect the query at all, and doesn't affect more complex queries (such as "folders with annotation x"). expandqueries boolean when set, allows items with "place:" uris to appear as containers, with the container's contents filled in from the stored query. if not set, these will appear as normal items. doesn't do anything if excludequeries is set. defaults to false. note that this has no effect on folder links, which are place: uris returned by nsinavbookmarkservice's getfolderuri method. these are always expanded and will appear as b...
...And 5 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 aitem, 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...
...meters anode the node whose details have changed. anewvisitdate the new value for the last visit date and time for the node. anewaccesscount the new access count value for the node. nodeiconchanged() called right after a node's icon property has changed. void nodeiconchanged( in nsinavhistoryresultnode anode ); parameters anode the node whose icon has changed. 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. void nodeinserted( in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode, in unsigned long anewindex ); parameters aparent the container into which to insert the item. anode the node to insert into the container; it may be either a ...
... nodekeywordchanged() called right after the a node's keyword property has changed. ...
...And 5 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 olditem, in nsinavhistoryresultnode newitem, 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...
... nodekeywordchanged() called right after the keyword property of a node has changed. void nodekeywordchanged( in nsinavhistoryresultnode anode, in autf8string anewkeyword ); parameters anode the node whose title has changed. anewtitle the new value for the node's keyword property. nodemoved() called when a node is moved from aoldparent at aoldindex to anewparent at anewindex. ...
... the keyword property of a node has changed. void nodekeywordchanged( in nsinavhistoryresultnode anode, in autf8string anewkeyword ); parameters anode the node whose title has changed. anewtitle the new value for the node's keyword property. nodemoved() called when a node is moved from aoldparent at aoldindex to anewparent at anewindex. the item may be a container or a leaf. ...
...And 5 more matches

Storage Inspector - Firefox Developer Tools
s: cache storage — any dom caches created using the cache api. cookies — all the cookies created by the page or any iframes inside of the page. cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open. 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. for the time being, the storage inspector only gives you a read-only view of storage. but we're working to let you edit storage contents in future releases. opening the s...
... storage tree the storage tree lists all the storage types that the storage inspector can inspect: under each type, objects are organized by origin. for cookies, the protocol does not differentiate the origin. for indexed db or local storage an origin is a combination of protocol + hostname. ...
...tps://mozilla.org" are two different origins so local storage items cannot be shared between them. under "cache storage", objects are organized by origin and then by the name of the cache: indexeddb objects are organized by origin, then by database name, then by object store name: with the cookies, local storage, and session storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin: you can click on each item in the tree to expand or collapse its children. the tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically. clicking on a tree item will display detailed information about that item in the table widget on the right. for example, clicking on an origin ...
...And 5 more matches

ContentIndex.add() - Web APIs
used in user-visible lists of content. url: a string containing the url of the corresponding html document. needs to be under the scope of the current service worker. category: optional a string defining the category of content. ...
...used in user-visible lists of content. url: a string containing the url of the corresponding html document. needs to be under the scope of the current service worker. category: optional a string defining the category of content. ...
...used in user-visible lists of content. url: a string containing the url of the corresponding html document. needs to be under the scope of the current service worker. category: optional a string defining the category of content. ...
...And 5 more matches

DataTransfer.mozClearDataAt() - Web APIs
note: this method is gecko-specific. ...
... note: this method is gecko-specific. ...
... note: this method is gecko-specific. ...
...And 5 more matches

FileList - Web APIs
note: prior to gecko 1.9.2, the input element only supported a single file being selected at a time, meaning that the filelist would contain only one file. starting with gecko 1.9.2, if the input element's multiple attribute is true, the filelist may contain multiple files. ...
...time, meaning that the filelist would contain only one file. starting with gecko 1.9.2, if the input element's multiple attribute is true, the filelist may contain multiple files. 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. ...
...y contain multiple files. 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="fileitem" 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('fileitem').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. ...
...And 5 more matches

Drag Operations - Web APIs
the draggable attribute in a web page, there are certain cases where a default drag behavior is used. these include text selections, images, and links. when an image or link is dragged, the url of the image or link is set as the drag data, and a drag begins. for other elements, they must be part of a selection for a default drag to occur. ...
...he default image and drag effects are suitable in most situations.) drag data all drag events have a property called datatransfer which holds the drag data (datatransfer is a datatransfer object). when a drag occurs, data must be associated with the drag which identifies what is being dragged. 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. the drag data contains two pieces of information, the type (or format) of the data, and the data's value. the format is a type string (such as text/plain for text data), and the value is a string of text. when the drag begins, you add data by providing a type and the data. during the drag, in...
...ks would check for the type text/uri-list. during a drop event, a listener would retrieve the data being dragged and insert it at the drop location. the drag data's types property returns a list of mime-type like domstrings, such as text/plain or image/jpeg. you can also create your own types. the most commonly used types are listed in the article recommended drag types. ...
...And 5 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
> firefox the element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. normally it would contain a label and a checkbox. ...
... which may include a prelighting background effect under certain platforms. normally it would contain a label and a checkbox. ...
...ckground effect under certain platforms. normally it would contain a label and a checkbox. ...
...And 5 more matches

list-style - CSS: Cascading Style Sheets
the list-style css shorthand property allows you set all the list style properties at once. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: this property is applied to list items, i.e., elements with display: list-item; . by default this includes <li> elements. 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. constituent properties this property is a shorthand for the following css properties: list-style-image list-style-position list-style-type syntax /* type */ list-style: square; /* image *...
...e-type see list-style-type. list-style-image see list-style-image. list-style-position see list-style-position. none no list style is used. accessibility concerns safari has an issue whereby unordered lists with a list-style value of none applied to them will not be recognized as a list in the accessibility tree. to address this, add a zero-width space as pseudo-content before each list item to ensure the list is recognized properly. this ensures the design is unaffected by the bug fix and that list items are not improperly described. ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 ...
...tyle: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: noneapplies tolist itemsinheritedyescomputed valueas each of the properties of the shorthand:list-style-image: none or the image with its uri made absolutelist-style-position: as specifiedlist-style-type: as specifiedanimation typediscrete formal syntax <'list-style-type'> | <'list-style-position'> | <'list-style-image'> examples setting list style type and position html list 1 <ul class="one"> <li>list item1</l...
...And 5 more matches

<li> - HTML: Hypertext Markup Language
the html <li> element is used to represent an item in a list. it must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). in menus and unordered lists, list items are usually displayed using bullet points. in ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content flow content. ...
...ch as a number or letter. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content flow content. ...
...ies none. permitted content flow content. tag omission the end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element. permitted parents an <ul>, <ol>, or <menu> element. though not a conforming usage, the obsolete <dir> can also be a parent. implicit aria role listitem when child of an ol, ul or menu permitted aria roles menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem dom interface htmllielement attributes this element includes the global attributes. value this integer attribute indicates the current ordinal value of the list item as defined by the <ol> element. the only ...
...And 5 more matches

Array.prototype.filter() - JavaScript
1; } console.log(array.filter(isprime)); // [2, 3, 5, 7, 11, 13] filtering invalid entries from json the following example uses filter() to create a filtered json of all elements with non-zero, numeric id. ...
...r(isprime)); // [2, 3, 5, 7, 11, 13] filtering invalid entries from json the following example uses filter() to create a filtered json of all elements with non-zero, numeric id. ...
... // [2, 3, 5, 7, 11, 13] filtering invalid entries from json the following example uses filter() to create a filtered json of all elements with non-zero, numeric id. ...
...And 5 more matches

Array - JavaScript
he array list itself, but will set or access a variable associated with that array's object property collection. the array's object properties and list of array elements are separate, and the array's traversal and mutation operations cannot be applied to these named properties. ...
...rray elements are separate, and the array's traversal and mutation operations cannot be applied to these named properties. ...
...array's traversal and mutation operations cannot be applied to these named properties. ...
...And 5 more matches

XPath snippets - XPath
ne link function docevaluatearray (expr, doc, context, resolver) { var i, result, a = []; doc = doc || (context ? ...
...0; i < result.snapshotlength; i++) { a[i] = result.snapshotitem(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. ...
...otitem(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. ...
...And 5 more matches

indexed-db - Archive of obsolete content
tabase. see bug 778197 and bug 786688. example this example uses the action button api, which is only available from firefox 29 onwards. here's a complete add-on that adds two buttons to the browser: the button labeled "add" adds the title of the current tab to a database, while the button labeled "list" lists all the titles in the database. the add-on implements helper functions open(), additem() and getitems() 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; ...
... in the database. ...
...keyrange } = 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 additem(name) { var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var time = new date().gettime(); var reque...
...And 4 more matches

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

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

MMgc - Archive of obsolete content
with object counts, byte counts, and percentage of total memory. it can also display stack traces for where every object was allocated. the report can be output to the console or to a file, and can be configured to be displayed pre/post sweep or via api call. ...
...tage of total memory. it can also display stack traces for where every object was allocated. the report can be output to the console or to a file, and can be configured to be displayed pre/post sweep or via api call. ...
...ect was allocated. the report can be output to the console or to a file, and can be configured to be displayed pre/post sweep or via api call. ...
...And 4 more matches

Monitoring downloads - Archive of obsolete content
the download manager instance is cached into a member variable in the downloadlogger object for reuse later, and its addlistener() method is called to start listening for download statu...
...the download being started; each row includes the // source uri, size, and start time. the end time and download speed // are both set to 0 at first, since we don't know those yet. // status is the same status value that came from the download manager. ...
... to update the record. we find a // record for the same source uri and start time, then update the end // time, size, and speed entries in the record. by matching on both // source uri and start time, we support logging multiple downloads of // the same file. ...
...And 4 more matches

MenuButtons - Archive of obsolete content
g the button alone should just open the menu and not execute a command directly. this works similarly to the menu tag, and would be used to present a set of commands to execute. to create a button of this type, set the type attribute of the button to 'menu'. ...
... to 'menu'. 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 menuitems. presumably, when one is selected, the application view would be changed accordingly. when using the keyboard, pressing the down key will open the menu while the button is focused. <button type="menu" label="view"> <menupopup> <menuitem label="icons" type="radio" name="view"/> <menuitem label="list" type="radio" name="view"/> <menuitem label="details" type="radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected. if you do want this indication, you should use a menulist instead. the same technique can be used for toolbarbuttons as well as bu...
...popup> </button> note that when the menu is closed, the button doesn't indicate which view is selected. if you do want this indication, you should use a menulist instead. the same technique can be used for toolbarbuttons as well as buttons. in the example below a toolbarbutton with an image has a menu associated with it. <toolbarbutton type="menu" image="cookies.png"> <menupopup> <menuitem label="block cookies" type="checkbox"/> <menuitem label="clear cookies"/> </menupopup> </toolbarbutton> the 'menu-button' button the 'menu-button' type of button is used when you want to attach a menu to a button but want to have a default action carried out when the button is pressed by itself. this is accomplished by dividing the button into two parts, one with the label and image to c...
...And 4 more matches

Adding more elements - Archive of obsolete content
« previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
...reviousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
...de the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog. a spacer has be...
...And 4 more matches

Localization - Archive of obsolete content
e version: <description value="検索"/> you would declare an entity for each label or string of text that you use in your interface. you should not have any directly displayed text in the xul file at all. in addition to using entities for text labels, you should use them for any value that could be different in a different language. access keys and keyboard shortcuts for example. xul <menuitem 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. changing the find files example let's take a look at how we would put all of this together by modifying the find files dialog so that it uses a dtd file for all of its text str...
...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"> <menuitem label="&cutcmd.label;" accesskey="&cutcmd.accesskey;"/> <menuitem label="&copycmd.label;" accesskey="&copycmd.accesskey;"/> <menuitem 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="&copycmd.commandkey;"/> <k...
...iers="accel" key="&copycmd.commandkey;"/> <key 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"> <menuitem label="&opencmd.label;" accesskey="&opencmd.accesskey;"/> <menuitem label="&savecmd.label;" accesskey="&savecmd.accesskey;"/> <menuseparator/> <menuitem label="&closecmd.label;" accesskey="&closecmd.accesskey;" key="close_cmd" oncommand="window.close();"/> </menupopup> </menu> <menu id="edit-menu" label="&...
...And 4 more matches

The box model - Learn web development
in this lesson, we will take a proper look at the css box model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to it. ...
...in this lesson, we will take a proper look at the css box model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to it. ...
...elements inside a box are laid out in normal flow, which means that they behave just like any other block and inline elements (as explained above). we can, however, change the inner display type by using display values like flex. if we set display: flex; on an element, the outer display type is block, but the inner display type is changed to flex. 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. note: to read more about the values of display, and how boxes work in block and inline layout, take a look at the mdn guide to block and inline layout. when you move on to learn about css layout in more detail, you will encounter flex, and various other inner values that your boxes can...
...And 4 more matches

Grids - Learn web development
gns where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites. a grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters. 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. we will look at the basic features of grid layout first and then explore how to create a simple grid system for your project. the following video provides a nice visual explanation of using css grid: defining a grid as a starting point, download and open the starting point file in your text editor and browser (you can also see it live here). you will see an example with a container...
... at the basic features of grid layout first and then explore how to create a simple grid system for your project. the following video provides a nice visual explanation of using css grid: defining a grid as a starting point, download and open the starting point file in your text editor and browser (you can also see it live here). you will see an example with a container, which has some child items. by default these display in normal flow so the boxes display one below the other. we will be working with this file for the first part of this lesson, making changes to see how grid behaves. to define a grid we use the grid value of the display property. as with flexbox, this switches on grid layout, and all of the direct children of the container become grid items. add this to the css inside ...
... below the other. we will be working with this file for the first part of this lesson, making changes to see how grid behaves. to define a grid we use the grid value of the display property. as with flexbox, this switches on grid layout, and all of the direct children of the container become grid items. add this to the css inside your file: .container { display: grid; } unlike flexbox, the items will not immediately look any different. declaring display: grid gives you a one column grid, so your items will continue to display one below the other as they do in normal flow. to see something that looks more grid-like, we will need to add some columns to the grid. let's add three 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. .container ...
...And 4 more matches

Getting started with CSS - Learn web development
e html> <html lang="en"> <head> <meta charset="utf-8"> <title>getting started with css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text. in the text is a <span>span element</span> and also a <a href="http://example.com">link</a>.</p> <p>this is the second paragraph. 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. adding css to our document the very first thing we need to do is to tell the ht...
...and style an html element. we do this by targeting an element selector — this is a selector that directly matches an html element name. to target all paragraphs in the document you would use the selector p. to turn all paragraphs green you would use: p { color: green; } you can target multiple selectors at once, by separating the selectors with a comma. 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. changing the default behavior of elements when we look at a well-marked up html document, even something as simple as our example, we can see how the browser is making the html readable by adding some default styling. headings ...
...names. this works as long as you want all of the elements of that type in your document to look the same. most of the time that isn't the case and so you will need to find a way to select a subset of the elements without changing the others. the most common way to do this is to add a class to your html element and target that class. in your html document, add a class attribute to the second list item. your list will now look like this: <ul> <li>item one</li> <li class="special">item two</li> <li>item <em>three</em></li> </ul> in your css you can target the class of special by creating a selector that starts with a full stop character. add the following to your css file: .special { color: orange; font-weight: bold; } save and refresh to see what the result is. you can apply the ...
...And 4 more matches

JavaScript basics - Learn web development
ten. this takes references to the new button and the heading, storing each inside variables: let mybutton = document.queryselector('button'); let myheading = document.queryselector('h1'); add the function below to set the personalized greeting. this won't do anything yet, but this will change soon. function setusername() { let myname = prompt('please enter your name.'); localstorage.setitem('name', myname); myheading.textcontent = 'mozilla is cool, ' + myname; } the setusername() function contains a prompt() function, which displays a dialog box, similar to alert(). this prompt() function does more than alert(), asking the user to enter data, and storing it in a variable after the user clicks ok. in this case, we are asking the user to enter a name. next, the code calls on an ap...
...ains a prompt() function, which displays a dialog box, similar to alert(). this prompt() function does more than alert(), asking the user to enter data, and storing it in a variable after the user clicks ok. in this case, we are asking the user to enter a name. next, the code calls on an api localstorage, which allows us to store data in the browser and retrieve it later. ...
...dialog box, similar to alert(). this prompt() function does more than alert(), asking the user to enter data, and storing it in a variable after the user clicks ok. in this case, we are asking the user to enter a name. next, the code calls on an api localstorage, which allows us to store data in the browser and retrieve it later. ...
...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 listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; ...
... \'merry christmas my love\',' + '\n \'a happy christmas to all the family\',' + '\n \'you\\\'re all i want for christmas\',' + '\n \'get well soon\'];' + '\n' + '\nfor (let i = 0; i < greetings.length; i++) {' + '\n let input = greetings[i];' + '\n if (greetings[i].indexof(\'christmas\') !== -1) {' + '\n let result = input;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n }' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (...
... code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 250px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let cities = ['london', 'manchester', 'birmingham', 'liverpool']; for (let i = 0; i < cities.length; i++) { let input = cities[i]; // write your code just below here let result = input; let listitem = document.createelement('li'); listitem.textcontent = result; list.appendchild(listitem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width...
...And 4 more matches

Ember interactivity: Events, classes and state - Learn web development
along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. ...
...the @action decorator declares that the function is an "action", meaning it's a type of function that will be invoked from an event that occurred in the template. @action also binds the this of the function to the class instance. note: a decorator is basically a w...
...t the ui to update as well. and just like before, the add() function that will be called from the template gets annotated with the @action decorator to bind it to the class instance. 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. using the service from our header component now that we've defined a way to add todos, we can interact with this service from the header.js input component to actually start adding them. first of all, the service needs to be injected into the template via the @inject decorator, which we’ll rename to @service fo...
...And 4 more matches

Handling common accessibility problems - Learn web development
ces > advanced > general, then uncheck "always use the cursor keys to navigate within pages". next, you have to open your mac's system preferences app, then go to keyboard > shortcuts, then select the all controls radio button. 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. important: you should perform this kind of test on any new page you write — make sure the functionality can be accessed by the keyboard. this example highlights the importance of using the correct semantic element for the correct job. it is possible to style any element to look like a link or button with css, and to behave like a link or button with javascript, but t...
...tent panel that is regularly updated using xmlhttprequest or fetch, a screenreader user might miss those updates. wai-aria do you need to use such complex functionality, or will plain old semantic html do instead? 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. to deal with complex form widgets, you need to use aria attributes like roles to state what role different elements have in a widget (for example, are they a tab, or a tab panel?), aria-disabled to say whether a control is disabled or not, etc. to deal with regularly updating regions o...
... many keyboard commands, and we won't list them all here. the basic ones you'll need for web page testing are in the following table. in the keyboard shortcuts, "vo" means "the voiceover modifier". most common voiceover keyboard shortcuts keyboard shortcut description vo + cursor keys move the vo cursor up, right, down, left. vo + spacebar select/activate items highlighted by the vo cursor. this includes items selected in the rotor (see below). vo + shift + down cursor move into a group of items (such as an html table, or a form, etc.) once inside a group you can move around and select items inside that group using the above commands as normal. vo + shift + up cursor move out of a group. vo + c (when inside a table) ...
...And 4 more matches

Dict.jsm
19 and above, you may also pass a json string to initialize the dictionary: var somejson = '{key1: "foo", key2: {}}'; var newdict = new dict(somejson); note: any string you pass will be assumed to be json. ...
...string akey); object get(string akey, [optional] object adefault); boolean has(string akey); array listitems(); array listkeys(); array listvalues(); void set(string akey, object avalue); string tojson(); string tostring(); properties attribute type description count number the number of items in the dictionary. items iterator returns an iterator over all of the items in the dictionary; each item is 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. in addition, if the dictionary changes during iteration, no guaran...
... 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. in addition, if the dictionary changes during iteration, no guarantees are made as to what will happen. keys iterator returns an iterator over all the keys in the dictionary. note: the order in which items are returned is arbitrary, and may change without notice. in addition, if the dictionary changes during iteration, no guarantees are made as to what will happen. values iterator returns an iterator over all the values in the dictionary. note: the order in which items are returned is arbitrary, and may change without notice. in addition, if the dictionary changes duri...
...And 4 more matches

DOM Inspector internals - Firefox Developer Tools
there are three main facets to dom inspector. the one you are likely to be most familiar with is its inspector.xul-based primary ui. 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., menuitems placed via overlay). besides the dom inspector's primary ui, there are a couple other top-level inspectors which differ slightly (the object inspector and dom inspector sidebar used in seamonkey). initially, we will begin by focusing on inspector.xul and its entry point, and then expand our focus later to explain how these other inspectors differ. dom inspector from a high-level perspective the dom inspector primary ui consists of some toolbars and a panelset. the panelset...
...ot of overlays. some overlays can be described as host-integration overlays, and others as shared structure overlays. host-integration overlays dom inspector is a general-purpose extension, suitable for use with any mozilla toolkit host application. 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. dom inspector explicitly supports several mozilla project applications by...
...tor.xul, dom inspector's primary ui, will reveal that it contains almost no visible elements. as of this writing, there's a toolbox containing an empty menubar and an empty toolbar, as well as an empty vbox: <toolbox id="tbxinstoolbox"> <menubar id="mbrinspectormain"/> <toolbar id="tbinspectorprimary"/> </toolbox> <vbox id="bxinspectormain" flex="1"/> there are no menus, toolbar items, et cetera defined here. even most of the elements that aren't visible, such as key- and commandsets, are not defined in inspector.xul. these are pulled in from a series of overlays, so that the xul defining dom inspector's ui can be organized into discrete units. inspector.xul itself is only a skeleton describing the basic structure and layout of the primary dom inspector window, leaving most o...
...And 4 more matches

Content Index API - Web APIs
to the serviceworkerregistration, then check for the index property, which gives us access to the content index interface. ...
...t 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. ...
... async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index...
...And 4 more matches

DataTransfer.mozSetDataAt() - Web APIs
data should be added in order of preference, with the most specific format added first and the least specific format added last. ...
... data should be added in order of preference, with the most specific format added first and the least specific format added last. ...
... data should be added in order of preference, with the most specific format added first and the least specific format added last. ...
...And 4 more matches

Using XMLHttpRequest - Web APIs
this.contenttype = bispost && otarget.enctype ? otarget.enctype : "application\/x-www-form-urlencoded"; this.technique = bispost ? this.contenttype === "multipart\/form-data" ? 3 : this.contenttype === "text\/plain" ? 2 : 1 : 0; this.receiver = otarget.action; this.status = 0; this.segments = []; var ffilter = this.technique === 2 ? plainescape : escape; for (var nitem = 0; nitem < otarget.elements.length; nitem++) { ofield = otarget.elements[nitem]; if (!ofield.hasattribute("name")) { continue; } sfieldtype = ofield.nodename.touppercase() === "input" ? ofield.getattribute("type").touppercase() : "text"; if (sfieldtype === "file" && ofield.files.length > 0) { if (this.technique === 3) { /* enctype is multipart/form-data...
... ofield.getattribute("type").touppercase() : "text"; if (sfieldtype === "file") { for (nfile = 0; nfile < ofield.files.length; ssearch += "&" + esca...
... ofield.getattribute("type").touppercase() : "text"; if (sfieldtype === "file") { for (nfile = 0; nfile < ofield.files.length; ssearch += "&" + escape(ofield.n...
...And 4 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 listitem role, which is used to identify a list item contained inside the list. <section role="list"> <div role="listitem">list item 1</div> <div role="listitem">list item 2</div> <div role="listitem">list item 3</div> </section> description any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively. a list must have one or more listitem children, or, alternatively, have one or more groups as children, with each group having one or more listitems as children. ...
...ontainer with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively. a list must have one or more listitem children, or, alternatively, have one or more groups as children, with each group having one or more listitems as children. there are no hard and fast rules about which elements you should use to markup the list and list items, but you should make sure that the list items make sense in the context of a list, e.g. a shopping list, recipe steps, driving directions. warning: if at all possible in your work, you should use the appropriate semantic html elements to mark up a list and its listitems — <ul>/<ol> and <li>. see best practices for a full example. associated wai-aria roles, states, and properties listi...
... keyboard interactions none. required javascript features none. ...
...And 4 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
ods supported in iaccessible - a minimal implementation would contain those marked "[important]": get_accparent: get the parent of an iaccessible. [important] get_accchildcount: get the number of children of an iaccessible. [important] get_accchild: get the child of an iaccessible. [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_accdescription: get a long description of the current iaccessible. this is not really too useful. get_ac...
...rotected (for passwords), checked, etc. [important] get_acchelp: get context sensitive help for the iaccessible. get_acchelptopic: we don't use this, it's only if the windows help system is used. get_acckeyboardshortcut: what is the keyboard shortcut for this iaccessible (underlined alt+combo mnemonic) get_accfocus: which child is focused? [important] get_accselection: which children of this item are selected? get_accdefaultaction: get a description or name of the default action for this component, such as "jump" for links. accselect: select the item associated with this iaccessible. [important] acclocation: get the x,y coordinates, and the height and width of this iaccessible node. [important] accnavigate: navigate to the first/last child, previous/next sibling, up, down, left or rig...
...jects marked [inserted by system]. windows will add those objects to your hierarchy for you. ...
...And 4 more matches

In Flow and Out of Flow - CSS: Cascading Style Sheets
in the previous guide i explained block and inline layout in normal flow. all elements that are in flow, will be laid out using this method. in the following example i have a heading, paragraph, a list and a final paragraph which contains a strong element. the heading and paragraphs are block level, the strong element inline. ...
...ins a strong element. the heading and paragraphs are block level, the strong element inline. 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. all of the elements can be said to be in flow. appearing on the page in the order that they are in the source. 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. the root element therefore is out of flow, as the cont...
...i’ve added a background colour to the paragraphs, and then floated the div left. the div is now out of flow. as a float it is first laid out according to where it would be in normal flow, then taken out of flow and moved to the left as far as possible. ...
...And 4 more matches

grid-column-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-column-end: foo; will choose the end edge of that named grid area (u...
...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. note: named grid areas automatically generate implicit named lines of this form, so specifying grid-column-end: foo; will choose the end edge of that named grid area (unless another line named foo-end was explicitly specified before it). otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>. <integer> && <custom-ident>? contributes t...
...And 4 more matches

grid-row-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row-end: foo; will choose the end edge of that named grid area (unle...
...pan; /* 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. note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row-end: foo; will choose the end edge of that named grid area (unless another line named foo-end was explicitly specified before it). otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>. the <custom-ident> cannot take the span value. ...
...And 4 more matches

Adding captions and subtitles to HTML5 video - Developer guides
ents within the video's markup. 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(createmenuitem('subtitles-off', '', 'off')); for (var i = 0; i < video.texttracks.length; i++) { subtitlesmenu.appendchild(createmenuitem('subtitles-' + video.texttracks[i].language, video.texttracks[i].language, video.texttracks[i].label)); } videocontainer.appendchild(subtitlesmenu); } this code creates a documentfragment, which is used to hold an unordered list containing our subtitles menu. ...
...nguage, video.texttracks[i].label)); } videocontainer.appendchild(subtitlesmenu); } this code creates a documentfragment, which is used to hold an unordered list containing our subtitles menu. first of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one. ...
... videocontainer.appendchild(subtitlesmenu); } this code creates a documentfragment, which is used to hold an unordered list containing our subtitles menu. first of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one. ...
...And 4 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...
...as you see, you can flexibly "define" properties without using object.defineproperties. this example can be adapted to find a table row by its cell. in that case, the target will be table.rows. let products = new proxy([ { name: 'firefox', type: 'browser' }, { name: 'seamonkey', type: 'browser' }, { name: 'thun...
... object created by the "little framework" published on the document.cookie page. /* var doccookies = ... ...
...And 4 more matches

ui/frame - Archive of obsolete content
it occupies the whole width of the browser window and is 18 pixels high on a normal-resolution display or 36 pixels high on a high-resolution (hidpi) display. this toolbar might look something like: scripting frames to add scripts to frames, include them directly from the frame's html content, as with a n...
...-on code, you can assign a listener to the frame's message event. the data property of the event is the message payload. 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(). you can specify the frame's url property as the targetorigin: frame.postmessage(message, frame.url); this add-on listens for a frame script to send the "city changed" message above, and in response, updates all frames across all ...
... 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
g.cgi?id=489045) now, let's move forward. first, in javascript, the code gets the nsibasewindow we want, it's a direct child of the top nsibasewindow. ...
...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.nsidocshelltreeitem) .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.nsidocshelltreeitem) .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

Tabbed browser - Archive of obsolete content
tion on getting access to the browser window in working with windows in chrome code. ...
...window in working with windows in chrome code. ...
...elect new tabs, and vice versa "window" new window "save" save to disk (with no filename hint!) openuilink( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held. ...
...And 3 more matches

Venkman Introduction - Archive of obsolete content
ons. the installation process is two steps. first, from within the browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version. when the download is complete, restart your browser (some windows users may also need to restart their computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the interactive session view. for more information about the latest improvements and versions, see the venkman development page. there are two ways to start the debugger: from firefox, you can start it by selecting javascript debugger from ...
...pment menu in mozilla 1.x and netscape). you can also start the browser with the -venkman command line option, which launches venkman initially instead of an application front end. (note that venkman displays usage data when it starts up: "recorded local startup x, global yyy." this data comes from a counter built in to the application. 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. the scripts that have been loaded by the javascript engine appear in the loaded scripts window (for more information about how scripts ar...
...compiled source text for the selected function. this is the same text you would get from the tosource method of the function prototype. if the source text you are debugging is poorly formatted, pretty print can help make it easier to read by inserting line breaks and whitespace in appropriate places. 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. the loaded scripts view the loaded scripts view is in the top left portion of the window. when a file is loaded by the browser it will appear in this view, and when unloaded it will be removed. files are listed in alphabetical order, grouped by file type. file names are displayed after a color coded, single letter icon representing the file extension. figure 6 shows t...
...And 3 more matches

A XUL Bestiary - Archive of obsolete content
this xulnote presents some of the key concepts and terms in the xul development environment. 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. chrome some of the most powerful and frequently misunderstood features of xul and the mozilla browser have to d...
...e url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine. in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome url is being used to point to a chrome within the package hierarchy of the mozilla application. a help chrome defined in mozilla/bi...
...html were not, the term "dom" is used as a synonym for or instead of terms like "dynamic html" or "dhtml." the aom stands for the application object model, and is an extension of the dom up into the interface defined in xul. just as html is reflected in the dom as nodes like link, layer, and img, xul is reflected in the application object model in the hierarchy of xul widgets: browser, menu, menuitem, and so on. the dom and the aom form a kind of continuum, the whole of which is manipulable from the standards upon which xul is based. near synonyms for xul there is much confusion about the words that begin with "x" in the mozilla open source project. the mozilla xparchitecture section below describes xpcom, xpidl, and xpconnect, three somewhat related technologies for getting access to appli...
...And 3 more matches

Dynamically modifying XUL-based user interface - Archive of obsolete content
all children of an element with id=someelement from the current document, by calling removechild() method to remove the first child, until there are no children remaining. note, that haschildnodes() and firstchild are also part of the dom api. 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. note: document.createelementns() creates an element, but does not put it anywhere in the document. you need to use other dom methods, such...
... within the document. note: document.createelementns() creates an element, but does not put it anywhere in the document. you need to use other dom methods, such as appendchild() to insert the newly created element in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. ...
...ere in the document. you need to use other dom methods, such as appendchild() to insert the newly created element in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. ...
...And 3 more matches

Building Hierarchical Trees - Archive of obsolete content
« previousnext » a template may be used to generate hierarchical trees. this works just like with recursive generation using the content builder. each level of the tree is created using a successive iteration of the template build process. 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. remember to make the left column the primary column for these to appear. to be able to do this, the tree builder must know that an item is a container. with an rdf datasource, this would usually be an rdf container such as a seq and the tree would display its children. for an xml datasource, the tree might display a node's children as the children in the tree, mak...
...f container such as a seq and the tree would display its children. for an xml datasource, the tree might display a node's children as the children in the tree, making the tree display a hierarchy similar to that in the xml document. or, with more complex xpath expressions, a template could display a tree where the hierarchy wasn't directly like the xml document. if a node is a container, the tree item becomes a container, and the user may open the row by double-clicking it. note that this test is done on the member value not the reference value. for instance, in the photo example, we have a container 'http://www.xulplanet.com/rdf/myphotos' with three photos. three results will be generated from a simple rule with no extra conditions. it is the result, or the photo, that will be checked, not th...
...f" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <treecols> <treecol id="address" primary="true" label="address" flex="1"/> <treecol id="floors" label="floors" flex="1"/> </treecols> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.xulplanet.com/rdf/address"/> <treecell label="rdf:http://www.xulplanet.com/rdf/floors"/> </treerow> </treeitem> </treechildren> </rule> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.
...And 3 more matches

Using Multiple Queries to Generate More Results - Archive of obsolete content
queries to generate results from different parts of the datasource. the first query will match the streets as before, but the second query will generate a result for each person. a header class is used to distinguish the content, although you could use exactly the same content if you wish. ...
...datasource. the first query will match the streets as before, but the second query will generate a result for each person. a header class is used to distinguish the content, although you could use exactly the same content if you wish. ...
...each person. a header class is used to distinguish the content, although you could use exactly the same content if you wish. ...
...And 3 more matches

Commands - Archive of obsolete content
is invoked. there are two advantages to using this approach. first, it moves all your operations onto commands which can all be grouped together in one section of the xul file. this means that code is all together and not scattered throughout the ui code. the other advantage is that several buttons or other ui elements can be hooked up to the same command. ...
... if you re-enable the command, the buttons will become enabled again. ...
... example: controller implementation let's assume that we want to implement a listbox that handles the delete command. when the user selects delete from the menu, the listbox deletes the selected row. in this case, you just need to attach a controller to a listbox which will perform the action in its docommand method. try opening the example below (source view) in a browser window and selecting items from the list. you'll notice that the delete command on the browser's edit menu is enabled and that selecting it will delete a row. (see discussion about opening this example). the example below isn't completely polished. really, we should ensure that the selection and focus is adjusted appropriately after a deletion. <window id="controller-example" title="controller example" onload="init();" ...
...And 3 more matches

Keyboard Shortcuts - Archive of obsolete content
« previousnext » you could use keyboard event handlers to respond to the keyboard. 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). creating a keyboard shortcut xul provides methods in which you can define keyboard shortcuts. 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. in the example below, the file menu can be selected by pressing alt + f together (or some other key combination for a specific platform). once the file menu is open, the close menu item can be selected by pressing c. example 1 : source v...
...when the key is pressed in this case, the button is selected. you might want to set up more general keyboard shortcuts however. for example, pressing ctrl + c to copy text to the clipboard. ...
... the text to the clipboard. note that textboxes have the clipboard shortcuts built-in so you don't have to implement them yourself. assigning a keyboard shortcut on a menu the second way is: if you are assigning a keyboard shortcut that performs a command that also exists on a menu, you can associate the key element directly with the menu command. to do this, also add a key attribute on the menuitem. ...
...And 3 more matches

Popup Menus - Archive of obsolete content
is described using the menupopup element. it has no special attributes and is a type of box. when invoked, it will display a window containing whatever you put inside the menupopup. however, you should always put an id attribute on the menupopup as it is used to associate the popup with an element. we'll see what this means soon. first, an example: <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> as can be seen here, a simple popup menu with three commands on it has been created. the menupopup element surrounds the three menuitem elements. you will also notice that the id has been set on the menupopup element itself. the popupset element surrounds the entire popup menu declaration. this ...
... put the id on the popup. that way it's easy to have multiple menupopups in one file. in the example above, we want to make the popup a context menu. that means that we need to use the context attribute and add it to the element which we want to have the popup associated with. the sample below shows how we might do this: example 1 : source view <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <box context="clipmenu"> <label value="context click for menu"/> </box> here, the menupopup has been associated with a box. whenever you context-click (right-click) anywhere inside the box, the popup menu will appear. the popup will also appear even if you click on the children of the box, so ...
...lement, you can specify precisely where the popup appears. you cannot specify an exact pixel position. the position attribute can be used with all three popup types, although you probably would not change the value for tooltips. ...
...And 3 more matches

Updating Commands - Archive of obsolete content
paste command is valid when a textbox has the focus and there is something on the clipboard to paste. the command will become enabled whenever a textbox is focused and when the clipboard contents change. a command updater will listen for these situations and code can be executed which enables and disables commands as necessary. a simple command updater looks like this: <commandset id="updatepasteitem" commandupdater="true" events="focus" oncommandupdate="goupdatecommand('cmd_paste');"/> a command updater is indicated by using the commandupdater attribute, which should be set to true. the events attribute is used to list the events that the command updater listens for. you can specify multiple events by separating them with commas. in the example above, the...
...and updater listens for the focus event. this causes commands to be updated when an element receives the focus. when a focus event occurs, the code in the oncommandupdate attribute is called. in the example, the goupdatecommand method is called which is a function provided by the globaloverlay.js script described earlier. it will update the command and enable or disable necessary buttons and menu items. the code behind it is fairly simple. it just gets the necessary controller, calls its iscommandenabled method, and then enables or disables the command. if you have several commands to update, call the goupdatecommand method once for each command. note that the command updater will receive notifications about all focus events on all elements, even if other event handlers respond to the event. e...
...s. select: occurs when the selected text changes. undo: occurs when the undo buffer changes. clipboard: occurs when the contents of the clipboard changes. the following example shows the command updaters used in the mozilla browser to update the edit menu commands. the functions used can be found in the 'chrome://communicator/content/utilityoverlay.js' script. ...
...And 3 more matches

tab - Archive of obsolete content
side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user...
...est you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. fadein type: boolean this attribute is set to true if the tab is fading in or out. this typically means that the tab is in the process of appearing or disappearing. first-tab type: boolean this attribute will be set to true for the first tab. this attribute should not be set manually, but...
...ful in a theme if the first tab should be styled differently. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. last-tab type: boolean this attribute will be set to true for the last tab. this attribute should not be set manually, but is useful in a theme if the last tab should be styled differently. linkedpanel type: id the id of the linked tabpanel element that will be dis...
...And 3 more matches

toolbarbutton - Archive of obsolete content
egular button except that it may be rendered differently. typically, it is expected to have an image. more information is available in the xul tutorial. relevant accessbility guidelines all toolbar functionality should be duplicated elsewhere in the application where possible, provide keyboard alternatives. where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, comma...
...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> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> <toolbarbutton accesskey="m" label="menu" type="menu"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> </toolbar> <toolbar id="radio-toolbar"> <toolbarbutton accesskey="1" label="radio 1" type="radio" group="radiogroup"...
... side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical ...
...And 3 more matches

toolbarpalette - Archive of obsolete content
you can add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the idbrowsertoolbarpalette. ...
... you can add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the idbrowsertoolbarpalette. ...
... you can add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the idbrowsertoolbarpalette. ...
...And 3 more matches

How to enable locale switching in a XULRunner application - Archive of obsolete content
able locales the available package locales are declared in the chrome manifest. ...
...ices into the xul code using fixed list items, or could take the elegant approach and construct the list dynamically. the dynamic list population requires an xpcom to query the currently selected locale as well as all locales available in the application package. ...
...= xulchromereg.getselectedlocale("localeswitchdemo"); var availablelocales = toolkitchromereg.getlocalesforpackage("localeswitchdemo"); // render locale menulist by iterating through the query result from getlocalesforpackage() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.getelementbyid("locale-listbox"); var selecteditem = null; while(availablelocales.hasmore()) { var locale = availablelocales.getnext(); var listitem = document.createelementns(xul_ns, "listitem"); listitem.setattribute("value", locale); listitem.setattribute("label", locale); if (locale == selectedlocale) { // is this the current locale? selecteditem = listitem; } localelistbox.appendchild(listitem); } ...
...And 3 more matches

Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
net. with its own history and culture, it's responsible for the "first post!" phenomena, the anonymous coward, and the recognition of the slashdot effect, a phenomena that adorns its name. one of the quirks of slashdot is that it includes a comments count, a humorous department, a hit parade, and a section with every blog post. rss does not have any facilites for including this information in an <item>, so the rss slash module exists to fill in this gap. an example using the most popular element of 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 ...
...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 ...
... </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> ...
...And 3 more matches

XForms Select Element - Archive of obsolete content
note, some representations of the select element do not support visual grouping. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for focusing this control. ...
... list. possible values are open and closed, default is closed. incremental - supported, default value is true properties selection - see corresponding attribute incremental - see corresponding attribute type restrictions the select element can be bound to a node containing simple content capable of holding a sequence. 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. the relaxation happens when the itemset element specifies the item value using a copy (see spec) element. this is because a copy element can be used to add a subtree of nodes underneath the element that the select control is bound to. representations the xforms select element can be represented by the f...
...ul) list displaying a listbox is the default representation (xhtml/xul). characteristics analogous widgets are <html:select size="5" multiple="true"/> and <xul:listbox seltype="multiple"/> visual grouping by choices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. ...
...And 3 more matches

Mobile accessibility - Learn web development
ill select it, and the device will read out what the app is. swiping left and right will move between apps, or buttons/controls if you are in a control bar. the device will read out each option. double-tapping anywhere will open the app/select the option. 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. if you want to turn talkback off: navigate back to the talkback menu screen (using the different gestures that are currently enabled.) navigate to the slider switch and activate it to turn it off. note: you can get to your home screen at any time by swiping up and left in a smooth motion. if you have more than one home screen, you can move between them by swiping two fi...
... bbc.co.uk. to enter the text of the url: select the url bar by swiping left/right till you get to it, and then double-tapping. hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. repeat for each character. once you've finished, find the enter key and press it. swipe left and right to move between different items on the page. swipe up and right with a smooth motion to enter the local content menu. swipe right until you find the "headings and landmarks" option. double-tap to select it. now you'll be able to swipe left and right to move between headings and aria landmarks. to go back to the default mode, enter the local context menu again by swiping up and right, select "default", and then double-tap t...
... your settings app and select accessibility > voiceover. press the voiceover slider to enable it (you'll also see a number of other options related to voiceover on this page). note: some older ios devices have the voiceover menu at settings app > general > accessibility > voiceover. ...
...And 3 more matches

Floats - Learn web development
and the content will wrap around it to the left. try changing the float value to right and replace margin-right with margin-left in the last ruleset to see what the result is. while we can add a margin to the float to push the text away, we can't add a margin to the text to move it away from the float. this is because a floated element is taken out of normal flow, and the boxes of the following items actually run behind the float. you can demonstrate this by making some changes to your example. add a class of special to the first paragraph of text, the one immediately following the floated box, then in your css add the following rules. these will give our following paragraph a background color. .special { background-color: rgb(79,185,227); padding: 10px; color: #fff; } to make the ...
...nd the paragraph still remains full width. clearing floats we have seen that the float is removed from normal flow and that other elements will display beside it, therefore if we want to stop the following element from moving up we need to clear it; this is achieved with the clear property. in your html from the previous example, add a class of cleared to the second paragraph below the floated item. then add the following to your css: .cleared { clear: left; } float example 3 <h1>simple float example</h1> <div class="box">float</div> <p class="special">lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> <p class="cleared">duis felis orci, pulvinar id metus ut, rutrum luctus orci. cras porttitor imperdiet n...
... width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .special { background-color: rgb(79,185,227); padding: 10px; color: #fff; } .cleared { clear: left; } you should see that the following paragraph clears the floated element and no longer comes up alongside it. the clear property accepts the following values: left: clear items floated to the left. right: clear items floated to the right. both: clear any floated items, left or right. clearing boxes wrapped around a float you now know how to clear something following a floated element, but let's see what happens if you have a tall float and a short paragraph, with a box wrapped around both elements. change your document so that the first paragraph and our floated b...
...And 3 more matches

HTML table advanced features and accessibility - Learn web development
to use them: the <thead> element must wrap the part of the table that is the header — this is usually the first row containing the column headings, but this is not necessarily always the case. if you are using <col>/<colgroup> element, the table header should come just below those. 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. you can include the table footer right at the bottom of the table as you'd expect, or just below the table header (the browser will still render it at the bottom of the table). the <tbody> element needs to wrap the other parts of the table content that aren't in the table header or footer. it will appear below the table header or sometimes footer, depen...
...t's recap briefly on how we use data tables. a table can be a handy tool, for giving us quick access to data and allowing us to look up different values. for example, it takes only a short glance at the table below to find out how many rings were sold in gent last august. to understand its information we make visual associations between the data in this table and its column and/or row headers. ...
...ircut</th> <td>hairdresser</td> <td>12/09</td> <td>great idea</td> <td>30</td> </tr> screenreaders will recognize markup structured like this, and allow their users to read out the entire column or row at once, for example. scope has two more possible values — colgroup and rowgroup. these are used for headings that sit over the top of multiple columns or rows. 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. all of these cells should be marked up as headers (<th>), but "clothes" is a heading that sits over the top and defines the other three subheadings. "clothes" therefore should get an attribute of scope="colgroup", whereas the others wou...
...And 3 more matches

Working with Svelte stores - Learn web development
at the beginn...
...ectory. ...
...: 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.getitem(key) === null) { // item not present in local storage localstorage.setitem(key, tostring(initial)) // initialize local storage with initial value } const saved = toobj(localstorage.getitem(key)) // convert to object const { subscribe, set, update } = writable(saved) // create the underlying writable store return { subscribe, set: (value) => { localstorage.se...
...And 3 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
totaltodos = todos.length let completedtodos = todos.filter(todo => todo.completed).length </script> now let's do something with that information. let's start by showing a status message. 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. to prove it, go to that array, and try changing some of the todo object's completed property values, and even add a new todo object. observe how the numbers in the message are updated appropriately. dynamically generati...
...2 out of 3 items completed" message as before, but this time the information is coming from the todos array. to prove it, go to that array, and try changing some of the todo object's completed property values, and even add a new todo object. observe how the numbers in the message are updated appropriately. 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. html doesn't have a way of expressing logic — like conditionals and loops. svelte does. in this case we use the {#each...} directive to iterate over the todos array. the second parameter, if provided, will contain the index of the current item. also, a key expression...
...in our todos array and render the markup for each task, so let's do that now. html doesn't have a way of expressing logic — like conditionals and loops. svelte does. in this case we use the {#each...} directive to iterate over the todos array. the second parameter, if provided, will contain the index of the current item. also, a key expression can be provided, which will uniquely identify each item. svelte will use it to diff the list when data changes, rather than adding or removing items at the end, and it's a good practice to always specify one. finally, an :else block can be provided, which will be rendered when the list is empty. let's give it a try. replace the existing <ul> element with the following simplified version to get an idea of how it works: <ul> {#each todos as to...
...And 3 more matches

Eclipse CDT Manual Setup
on to the root of your source tree, select an appropriate toolchain (e.g., "macosx gcc"), and click finish. the status bar at the bottom right of the window should now show that eclipse is "refreshing the workspace" (gathering a list of all the files in the source tree). ...
...lchain (e.g., "macosx gcc"), and click finish. the status bar at the bottom right of the window should now show that eclipse is "refreshing the workspace" (gathering a list of all the files in the source tree). 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. ...
...he status bar at the bottom right of the window should now show that eclipse is "refreshing the workspace" (gathering a list of all the files in the source tree). 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. note, you...
...And 3 more matches

NSS Sample Code Utilities_1
port_alloc(outlen) : port_alloc(len); if (!outbuf->data) { return -1; } if (ishexdata) { while (*instring) { if ((*instring == '\n') || (*instring == ':')) { ins...
... 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; } /* * filetoitem */ secstatus filetoitem(secitem *dst, prfiledesc *src) { prfileinfo info; print32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (secitem_allocitem(null, dst, info.size)) { numbytes = pr_read(src, dst->data, info.size); if (numbytes == info.size...
... prfileinfo info; print32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (secitem_allocitem(null, dst, info.size)) { numbytes = pr_read(src, dst->data, info.size); if (numbytes == info.size) { return secsuccess; } } secitem_freeitem(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); ...
...And 3 more matches

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; secitem der; secitem 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...
...(slot, pr_false, null); */ rv = nss_nodb_init("."); if (rv != secsuccess) { fprintf(stderr, "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_convertasciitoitem(&der, pubkstr); if (rv!= secsuccess) { fprintf(stderr, "atob_convertasciitoitem failed %d\n", pr_geterror()); goto cleanup; } spki = seckey_decodedersubjectpublickeyinfo(&der); secitem_freeitem(&der, pr_false); pubkey = seckey_extractpublickey(spki); if (pubkey == null) { fprintf(stderr, "couldn't extract public key (err %d)\n", pr_geterror()); goto cleanup; } ...
... * publicvalue arg (4th) can be null for rsa key - i think it is even * ignored */ pk11_importderprivatekeyinfoandreturnkey(slot, &der,...
...And 3 more matches

NSS Sample Code sample6
id already exists */ genkey(1); /* generate a key with id 2. 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; secitem keyiditem; 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. * error code: token is read-only. ?? */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", ...
...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. * error code: token is read-only. ...
...es_cbc_pad mechanism for example */ ciphermech = ckm_aes_cbc_pad; slot = pk11_getinternalkeyslot(); /* slot = pk11_getbestslot(ciphermech, null); didn't work. * error code: token is read-only. ...
...And 3 more matches

Gecko object attributes
ual markup tag used to create this element (also used in xul). applied to: any role xml-roles if a dynamic content accessibility role string is used, it is exposed here. this may provide more information than the mapped role, which is best-fit. the role string may be a space-delimited list of roles. applied to: any role group attributes level for headings, the heading level. ...
.... applied to: any role xml-roles if a dynamic content accessibility role string is used, it is exposed here. this may provide more information than the mapped role, which is best-fit. the role string may be a space-delimited list of roles. applied to: any role group attributes level for headings, the heading level. for outline items, the indentation level. for diagrams with levels, each item can have its level specified. the level value is 1-based. applied to: grid, heading, listitem, row, tablist exposed in aria: aria-level posinset if this item is in a group, what is the item number within the group, where the size is defined by the setsize attribute. the first item should have posinset="1", and the last item should have a posinset value equal to the setsize. applied to: listi...
...plied to: grid, heading, listitem, row, tablist exposed in aria: aria-level posinset if this item is in a group, what is the item number within the group, where the size is defined by the setsize attribute. the first item should have posinset="1", and the last item should have a posinset value equal to the setsize. applied to: listitem, option exposed in aria: aria-posinset setsize if this item is in a group, this indicates the number of items in the group. this is useful when combined with the posinset object attribute. applied to: listitem, option exposed in aria: aria-setsize live region attribues atomic true when the entire region should be presented as a whole, when changes within it are considered important enough to automatically present. applied to: any role exposed vi...
...And 3 more matches

nsIAccessibleProvider
xultabbox 0x00001018 a com...
... xultabbox 0x00001018 a combination of a tabs object and a tabpanels object. x...
... xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface. xultabbox 0x00001018 a combination of a tabs object and a tabpanels object. xultabs 0x00001019 the collection of tab objects, usable in the tabbox and independent of as well. xultext 0x0000101a xultextbox 0x0000101b xulthumb 0x0000101c xultree 0x0000101d xultreecolumns 0x0000101e xultreecolumnitem 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. this property is used for upload, input[type="xsd:gday"] and input[type="xsd:gmon...
...And 3 more matches

nsIAnnotationObserver
toolkit/components/places/public/nsiannotationservice.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void onitemannotationremoved(in long long aitemid, in autf8string aname); void onitemannotationset(in long long aitemid, in autf8string aname); void onpageannotationremoved(in nsiuri auri, in autf8string aname); void onpageannotationset(in nsiuri apage, in autf8string aname); methods onitemannotationremoved() 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. this is not called when annotations are expired (normally happens when the applicat...
...tionremoved(in nsiuri auri, in autf8string aname); void onpageannotationset(in nsiuri apage, in autf8string aname); methods onitemannotationremoved() 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. this is not called when annotations are expired (normally happens when the application exits). void onitemannotationremoved( in long long aitemid, in autf8string aname ); parameters aitemid the item whose annotation is to be deleted. aname the annotation name. onitemannotationset() this method is called when an annotation value is set for an item. ...
...aname the annotation name. onpageannotationremoved() called when an annotation is deleted for a uri. if aname is empty, then all annotations for the given uri have been deleted. ...
...And 3 more matches

nsIApplicationCacheNamespace
gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) application caches can store a set of namespace entries that affect loads from the application cache. if a load from the cache fails to match on an exact cache entry, the namespace entries are searched for a substring match. ...
...rview 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. how this attribute is used varies depending on the namespace type. if the data is a uri, this attribute should be the uri's asciispec. read only. itemtype unsigned long a bit field indicating one or more namespace types. must be one or more of the constants defined under constants on this page. read only. namespacespec acstring the prefix of this namespace. this should be the asciispec of the uri prefix. read only. ...
...y. itemtype unsigned long a bit field indicating one or more namespace types. must be one or more of the constants defined under constants on this page. read only. namespacespec acstring the prefix of this namespace. this should be the asciispec of the uri prefix. read only. constants constant value description namespace_bypass 1 items matching this namespace can be fetched from the network when loading from this cache. the data attribute is not used. namespace_fallback 2 items matching this namespace can be fetched from the network when loading from this cache; however, if the load fails, the cache entry specified by the data attribute should be loaded intstead. ...
...And 3 more matches

nsIDOMStorage
1.0 66 introduced gecko 1.8.1 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) a dom window's session storage object can be retrieved from the window's sessionstorage attribute. a storage object stores an arbitrary set of key-value pairs, which may be retrieved, modified and removed as needed. ...
... be retrieved, modified and removed as needed. a key may only exist once within a storage object, and only one value may be associated with a particular key. keys are stored in a particular order with the condition that this order not change by merely changing the value associated with a key, but the order may change when a key is added or removed. method overview void clear(); domstring getitem(in domstring key); domstring key(in unsigned long index); void removeitem(in domstring key); void setitem(in domstring key, in domstring data); attributes attribute type description length unsigned long the number of keys stored in the session store. read only. methods clear() clear the content of this storage bound to a domain or an origin. void clear(); parameters none. getite...
... key); void setitem(in domstring key, in domstring data); attributes attribute type description length unsigned long the number of keys stored in the session store. read only. methods clear() clear the content of this storage bound to a domain or an origin. void clear(); parameters none. getitem() returns from session storage the data corresponding to the specified key. domstring getitem( in domstring key ); parameters key the key for which data should be returned. return value an nsidomstorageitem object describing the data corresponding to the specified key, or null if no data exists for the given key. key() returns the key for the item stored at the specified index in the data store. domstring key( in unsigned long index ); parameters index the index for which the cor...
...And 3 more matches

nsIDynamicContainer
scriptable this interface provides a base class for services that want to provide containers for temporary contents. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) the service can fill result nodes directly into the container when it is opened. ...
...from: nsisupports last changed in gecko 1.9 (firefox 3) the service can fill result nodes directly into the container when it is opened. it can use the property bag on every result node to store data associated with each item, such as a full path on disk. it can also create additional containers for each container, registered to its service. ...
...tainers for each container, registered to its service. method overview void oncontainermoved(in long long aitemid, 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 aitemid); methods oncontainermoved() this method is called when the given container has just been moved, in case the service needs to do any bookkeeping. it is called after the container has been moved. ...
...And 3 more matches

Network request list - Firefox Developer Tools
u want to close the sidebar.) enter a string in the field with the placeholder text block resource when url contains. reload the page to test it with the specified url blocked. other actions you can take with request blocking: to turn all request blocking off or on: toggle the checkbox next to enable request blocking. 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. disable all disables blocking of all items in the list. remove all deletes all items in the list. blocking a specific url from the request list you...
...ou 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. disable all disables blocking of all items in the list. remove all deletes all items in the list. blocking a specific url from the request list you can also block a url from the request list: hover over the item you want to block in the request list. select block url from the context menu. when you refresh the page, that specific url will be blocked and a message will be added to the item in the list indicating that it has been blocked by the devtools. stop blocking a url from the request list hover over the item. select unblock url. ...
... note: (starting in firefox 80) you can also block and unblock urls from the web console, using the :block and :unblock helper commands. these accept any string, and affect any url containing the string. filtering requests you can filter requests by content type, by whether they are xmlhttprequests or websocket requests, or by request properties. ...
...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...
...for example, if you ...
... 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 one 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. for example, if you want to set the style background color property, you just add: myp.style.background = "rgb(255,0,0)"; // setting inline style attribute creating textnodes with document.createtextnode("..") use the document object to invoke t...
...And 3 more matches

IDBObjectStore.put() - Web APIs
it returns an idbrequest object, and, in a separate thread, creates a structured clone of the value and stores the cloned value in the object store. this is for adding new records, or updating existing records in an object store when the transaction's mode is readwrite. if the record is successfully stored, then a success event is fired on the returned request object with the result set to the key for the stored record, and the transaction set to the transaction in which this object store is opened. ...
...bjectstore.add method for an insert only method. bear in mind that if you have a idbcursor to the record you want to update, updating it with idbcursor.update() is preferable to using idbobjectstore.put(). doing so makes it clear that an existing record will be updated, instead of a new record being inserted. note: this feature is available in web workers. ...
...nly method. bear in mind that if you have a idbcursor to the record you want to update, updating it with idbcursor.update() is preferable to using idbobjectstore.put(). doing so makes it clear that an existing record will be updated, instead of a new record being inserted. note: this feature is available in web workers. ...
...And 3 more matches

Using IIR filters - Web APIs
ters and how they are implemented digitally. with that all in mind, let's take a look at the code to create an iir filter with the web audio api. setting our iirfilter co-efficients when creating an iir filter, we pass in the feedforward and feedback coefficients as options (coefficients is how we describe the values). both of these parameters are arrays, neither of which can be larger than 20 items. when setting our coefficients, the feedforward values can't all be set to zero, otherwise nothing would be sent to the filter. something like this is acceptable: let feedforward = [0.00020298, 0.0004059599, 0.00020298]; our feedback values cannot start with zero, otherwise on the first pass nothing would be sent back: let feedbackward = [1.0126964558, -1.9991880801, 0.9873035442]; note:...
...w a frequency plot of the filter we've created with the data we get back from this method. we need to create three arrays. one of frequency values for which we want to receive the magnitude response and phase response for, and two empty arrays to receive the data. all three of these have to be of type float32array and all be of the same size. ...
...e get back from this method. we need to create three arrays. one of frequency values for which we want to receive the magnitude response and phase response for, and two empty arrays to receive the data. all three of these have to be of type float32array and all be of the same size. ...
...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 clipboarditem 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...
...y cryptokeypair customelementregistry customevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist domlocator dommatrix dommatrixreadonly domobject domparser dompoint dompointinit dompointreadonly domquad domrect domrectreadonly domstring domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransferitem datatransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch documenttype double...
...ment htmlformcontrolscollection htmlformelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenuitemelement 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

WAI-ARIA Roles - Accessibility
f its children should be treated similar to a desktop application, and no traditional html interpretation techniques should be used. this role should only be used to define very dynamic and desktop-like web applications.aria: article rolethe article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. 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. this usually includes a logo, company name, search icon, photo related to the page, or slogan.aria: button rolethe button role should be used for clickable elements that trigger a re...
...provided to indicate relationships between sections.aria: img rolethe aria img role can be used to identify multiple elements inside page content that should be considered as a single image. these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.aria: list rolethe aria list role can be used to identify a list of items. it is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list.aria: listbox rolethe listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.aria: listitem rolethe aria listitem role can be used to identify an item inside a list of items. it i...
...ttps://developer.mozilla.org/docs/web/accessibility/aria/aria_techniques). ones for which the first draft is completed have been removed from the below list. ...
...And 3 more matches

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
fill that promise of content separated from mark-up, however is it possible to go too far with this idea? is it possible that we could create an accessibility issue through our use of grids? re-ordering content in css grid layout we’ve already seen in these guides that grid gives us power to re-order the content of our page in various ways. 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. the specification includes a section that covers reordering and accessibility. in the introduction to that section are details of what the specification expects browsers to do...
... details of what the specification expects browsers to do when the content is visually reordered using grid layout. grid layout gives authors great powers of rearrangement over the document. however, these are not a substitute for correct ordering of the document source. the order property and grid placement do not affect ordering in non-visual media (such as speech). likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. tabindex html5). if you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. in addition, the reordering will not change tab order. this means th...
... the specification warns authors (the csswg term for web developers) not to do this reordering. authors must use order and the grid-placement properties only for visual, not logical, reordering of content. style sheets that use these features to perform logical reordering are non-conforming. ...
...And 3 more matches

Subgrid - CSS: Cascading Style Sheets
ubgrid value for grid-template-columns and grid-template-rows. this guide details what subgrid does, and gives some use cases and design patterns that are solved by the feature. important: this feature is shipped in firefox 71, which is currently the only browser to implement subgrid. 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. these grids however are independent of the parent grid and of each other, meaning that they do not take their track sizing from the parent grid. this makes it difficult to line nested grid items up with the main grid. if you ...
...l have three column tracks of the same size as the parent grid. gaps are inherited but can also be overridden with a different gap value. line names can be passed from the parent into the subgrid, and the subgrid can also declare its own line names. subgrid for columns in the example below i have a grid layout with nine 1fr column tracks and four rows that are a minimum of 100px tall. i place .item from column line 2 to 7, and row 2 to 4. i then make this grid item into a grid, giving it column tracks that are a subgrid and defining rows as normal. as the item spans five column tracks, this means that the subgrid has five column tracks. i can then place .subitem on this grid. the rows in this example are not a subgrid and so behave as a nested grid does normally. the grid area on the paren...
... the column tracks behave as a regular nested grid, but the rows are tied to the two tracks that the child spans. a subgrid in both dimensions you can of course define both rows and columns as a subgrid, as in the example below. this means that your subgrid is tied in both dimensions to the number of tracks on the parent. no implicit grid in a subgridded dimension if you need to autoplace items, and do not know how many items you will have, take care when creating a subgrid, as it will prevent additional rows being created to hold those items. take a look at the next example — it uses the same parent and child grid as in the example above, however inside the subgrid i have twelve items trying to autoplace into ten grid cells. as the subgrid is on both dimensions there is nowhere for...
...And 3 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. this often leads to frustration, because what works in one browser often doesn't have the same effect in another. for example, if you declare that lists have no left margin, they move over in internet explorer, but sit stubbornly in place in gecko-based browsers.this article will help you understand the problems that can occur and how to avoid them. in order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction. ...
...n, they move over in internet explorer, but sit stubbornly in place in gecko-based browsers.this article will help you understand the problems that can occur and how to avoid them. in order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction. making a list first, we consider a single, pure list item. ...
...r in internet explorer, but sit stubbornly in place in gecko-based browsers.this article will help you understand the problems that can occur and how to avoid them. in order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction. 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. it hangs alone in the void, simple and unadorned, as shown in figure 1. that dotted red border represents outer edges of the content-area of the list item. remember that, at this point, the list item has no padding or borders. if we add two more list items, we get a result like that shown in figure 2. now we...
...And 3 more matches

Column layouts - CSS: Cascading Style Sheets
a number of columns, and css provides several ways to do this. whether you use grid, flexbox or multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options. requirements there are a number of design patterns you might want to achieve with your columns: a continuous thread of content broken up into newspaper-style columns. a single row of items arranged as columns, with all heights being equal. multiple rows of columns lined up by row and column. the recipes you need to choose different layout methods in order to achieve your requirements. a continuous thread of content — multi-column layout if you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. the columns must...
... column in turn. the columns must all be the same size, and you are unable to target an individual column or the content of an individual column. you can control the gaps between columns with the column-gap property, and add a rule between columns using column-rule. download this example use multicol when: you want your text to display in newspaper-like columns. you have a set of small items you want to break into columns. you do not need to target individual column boxes for styling. 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. this is a different behavior to what you saw wi...
...dual column boxes for styling. 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. this is a different behavior to what you saw with multicol. there is currently no way to add a rule between flex items, and browser support for the column-gap and row-gap properties is limited. therefore to create gaps between items use a margin. download this example flexbox can also be used to create layouts where the flex items wrap onto new rows, by setting the flex-wrap property on the container to wrap. ...
...And 3 more matches

Visual formatting model - CSS: Cascading Style Sheets
different; see the block boxes section below for more details. the principal box when an element generates one or more boxes, one of them is the principal box, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme. some elements may generate additional boxes in addition to the principal box, for example display: list-item generates more than one box (e.g. a principal block box and a child marker box). and some values (such as none or contents) cause the element and/or its descendants to not generate any boxes at all. anonymous boxes an anonymous box is created when there is not an html element to use for the box. this situation happens when, for example, you declare display: flex on a parent element, and directl...
...te any boxes at all. anonymous boxes an anonymous box is created when there is not an html element to use for the box. this situation happens when, for example, you declare display: flex on a parent element, and directly inside there is a run of text not contained in another element. in order to fix the box tree, an anonymous box is created around that run of text. 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. the same thing happens when you have text runs interspersed with block elements. in the next example i have a string inside a <div>; in the middle of my string is a <p> element containing part of the text. the string is split into three boxes in the box tree. the part of the string before th...
... section wrapped in the <em> element, then a final anonymous inline box. as with the anonymous block boxes, these anonymous inline boxes cannot be styled independently in the way the <em> can; they just inherit the styles of their container. other formatting contexts also create anonymous boxes. grid layout behaves in the same way as the flexbox example above, turning strings of text into a grid item with an anonymous box. multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted. table layout will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with display: table-row. line boxes line boxes are the boxes that wrap each line of text. you can see the...
...And 3 more matches

<color> - CSS: Cascading Style Sheets
tomato #ff6347 turquoise #40e0d0 violet #ee82ee wheat #f5deb3 whitesmoke #f5f5f5 yellowgreen #9acd32 css color module level 4 rebeccapurple #663399 transparent keyword the transparent keyword represents a fully transparent color. this makes the background behind the colored item completely visible. technically, transparent is a shortcut for rgba(0,0,0,0). compatibility note: to prevent unexpected behavior, such as in a <gradient>, the current css spec states that transparent should be calculated in the alpha-premultiplied color space. however, be aware that older browsers may treat it as black with an alpha value of 0. historical note: transparent wasn't a true colo...
... for readability. 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. they are now deprecated. for use on public web pages. activeborder active window ...
...e threedface or buttonface when the mouse pointer is not over it). should be used with the -moz-buttonhovertext foreground color. -moz-buttonhovertext the text color of a button that the mouse pointer is over (which would be buttontext when the mouse pointer is not over it). should be used with the -moz-buttonhoverface background color. -moz-cellhighlight background color for selected item in a tree widget. should be used with the -moz-cellhighlighttext foreground color. see also -moz-html-cellhighlight. -moz-cellhighlighttext text color for a selected item in a tree. should be used with the -moz-cellhighlight background color. see also -moz-html-cellhighlighttext. -moz-combobox background color for combo-boxes. should be used with the -moz-comboboxtext foreground colo...
...And 3 more matches

grid-auto-columns - CSS: Cascading Style Sheets
the grid-auto-columns css property specifies the size of an implicitly-created grid column track or pattern of tracks. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. syntax /* keyword values */ grid-auto-columns: min-content; grid-auto-columns: max-content; grid-auto-columns: auto; /* <length> values */ grid-auto-colum...
... like auto. <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. when appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)). 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. minmax(min, max) is a functional notation that defines a size range greater than or equal to min and less than or equal to max. if max is smaller than min, then max is ignored and the function is treated as min. as a maximum, a <flex> value sets...
...epresents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. auto is a keyword that is identical to maximal content if it's a maximum. as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. note: auto track sizes (and only auto track sizes) can be streched by the align-content and justify-content properties. formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valuethe percentage as specified or the absolute lengthanimation typediscrete formal syntax <track-...
...And 3 more matches

grid-auto-rows - CSS: Cascading Style Sheets
the grid-auto-rows css property specifies the size of an implicitly-created grid row track or pattern of tracks. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. syntax /* keyword values */ grid-auto-rows: min-content; grid-auto-rows: max-content; grid-auto-rows: auto; /* <length> values */ grid-auto-rows: 100px; grid-auto-rows: 20c...
... like auto. <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. when appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)). 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. minmax(min, max) is a functional notation that defines a size range greater than or equal to min and less than or equal to max. if max is smaller than min, then max is ignored and the function is treated as min. as a maximum, a <flex> value sets...
...nd the function is treated as min. as a maximum, a <flex> value sets the track’s flex factor. as a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint). auto is a keyword that is identical to maximal content if it's a maximum. as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties. formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valuethe percentage as specified or the absolute lengthanimation typediscrete formal syntax <track...
...And 3 more matches

grid-column-start - CSS: Cascading Style Sheets
this start position defines the block-start edge of the grid area. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...erty is specified as a single <grid-line> value. a <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the keyword span together with either a <custom-ident> or an <integer> or both. 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. note: named grid areas automatically generate implicit named lines of this form, so specifying grid-column-start: foo; will choose the start edge of that named grid are...
...reas automatically generate implicit named lines of this form, so specifying grid-column-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it). otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>. <integer> && <custom-ident>? contributes the nth grid line to the grid item’s placement. if a negative integer is given, it counts in reverse, starting from the end edge of the explicit grid. if a name is given as a <custom-ident>, only lines with that name are counted. if not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. an <integer> value of 0 is invalid. span && [ <integer> ||...
...And 3 more matches

grid-row-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...y is specified as a single <grid-line> value. a <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the keyword span together with either a <custom-ident> or an <integer> or both. 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. note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row-start: foo; will choose the start edge of that named grid ar...
...d areas automatically generate implicit named lines of this form, so specifying grid-row-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it). otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>. <integer> && <custom-ident>? contributes the nth grid line to the grid item’s placement. if a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. if a name is given as a <custom-ident>, only lines with that name are counted. if not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. an <integer> value of 0 is invalid. span && [ <int...
...And 3 more matches

<ol>: The Ordered List element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, and if the <ol> element's children include at least one <li> element, palpable content. permitted content zero or more <li>, <script> and <template> elements. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. ...
...ermitted parents any element that accepts flow content. implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree dom interface htmlolistelement attributes this element also accepts the global attributes. reversed this boolean attribute specifies that the list’s items are in reverse order. items will be numbered from high to low. start an integer to start counting from for the list items. always an arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or roman numerals. for example, to start numbering elements from the letter "d" or the roman numeral "iv," use start="4". type sets the numbering type: a for lowercase letters a for u...
...="4". type sets the numbering type: a for lowercase letters a for uppercase letters i for lowercase roman numerals i for uppercase roman numerals 1 for numbers (default) the specified type is used for the entire list unless a different type attribute is used on an enclosed <li> element. note: unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the css list-style-type property instead. usage notes typically, ordered list items display with a preceding marker, such as a number or letter. the <ol> and <ul> elements may nest as deeply as desired, alternating between <ol> and <ul> however you like. the <ol> and <ul> elements both represent a list of items. the difference is with the <ol>...
...And 3 more matches

contextmenu - HTML: Hypertext Markup Language
xtmenu global attribute is the id of a <menu> to use as the contextual menu for this element. a context menu is a menu that appears upon user interaction, such as a right-click. html5 now allows us to customize this menu. here are some implementation examples, including nested menus. example html <body contextmenu="share"> <menu type="context" id="share"> <menu label="share"> <menuitem label="twitter" onclick="shareviatwitter()"></menuitem> <menuitem label="facebook" onclick="shareviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. </li> <li contextmenu="changefont" id="fontsizing"> on this specific list element, you ca...
... anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. ...
... on twitter and facebook using the share menu from your context menu. ...
...And 3 more matches

Global attributes - HTML: Hypertext Markup Language
mode provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. used primarily on <input> elements, but is usable on any element while in contenteditable mode. is allows you to specify that a standard html element should behave like a registered custom built-in element (see using custom elements for more details). ...
... configuration to use when editing this element or its contents. used primarily on <input> elements, but is usable on any element while in contenteditable mode. is allows you to specify that a standard html element should behave like a registered custom built-in element (see using custom elements for more details). note: the item* attributes are part of the whatwg html microdata feature. itemid the unique, global identifier of an item. ...
...its contents. used primarily on <input> elements, but is usable on any element while in contenteditable mode. is allows you to specify that a standard html element should behave like a registered custom built-in element (see using custom elements for more details). note: the item* attributes are part of the whatwg html microdata feature. itemid the unique, global identifier of an item. itemprop used to add properties to an item. every html element may have an itemprop attribute specified, where an itemprop consists of a name and value pair. itemref properties that are not descendants of an element with the itemscope attribute can be associated with the item using an itemref. it provides a list of element ids (not itemids) with additional properties elsewhere in the document. ite...
...And 3 more matches

Namespaces crash course - SVG: Scalable Vector Graphics
g with their equivalent dom2 counterparts that should be used instead. ...
...ivalent dom2 counterparts that should be used instead. ...
...for svg elements this is 'http://www.w3.org/2000/svg'. however, note carefully: ...
...And 3 more matches

Creating Event Targets - Archive of obsolete content
"bookmarks", navigate to it, and run jpm init, accepting all the defaults. ...
...e to it, and run jpm init, accepting all the defaults. ...
...he 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 = { onitemadded: function(aitemid, afolder, aindex) { console.log("added ", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(aitemid, avisitid, time) { console.log("visited ", bookmarkservice.getbookmarkuri(aitemid).spec); }, queryinterface: xpcomutils.generateqi([ci.nsinavbookmarkobserver]) }; exports.main = function() { bookmarkservice.addobserver(bookmarkobserver, false); }; exports.onunload = function() { bookmarkservice.removeobserver(bookmarkobserver); } tr...
...And 2 more matches

Using third-party modules (jpm) - Archive of obsolete content
ludes a command-line tool that you use to initialize, run, test, and package add-ons. the current tool is called jpm, and is based on node.js. it replaces the old cfx tool. you can use jpm from firefox 38 onwards. this article describes how you can use third-party modules with jpm. to follow this tutorial you'll need to have installed jpm and learned the basic jpm commands. to install menuitem you'll need to have git command. if you have error related to git, check you have latest git command installed. the add-on sdk is extensible by design: you can use the modules that ship inside firefox, but you can also create your own modules and make them available for anyone else to use. before the jpm tool was available, there wasn't any package manager for these community-developed modules,...
...here to find community-developed modules, or how to install and update them. with jpm, we use npm as the package manager for sdk modules that don't ship inside firefox. module developers can publish sdk modules to npm, and add-on developers can install them from npm and build them into their add-ons. this article explains how to use npm-hosted third-party sdk modules with jpm. we'll use the menuitem 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 menuitem --save now you'll see a new directory in your add-on root called "node_modules" that contains a directory "menuitem". in your add-on code, you can require() modules by passing a path to the module starting from, but not...
...irefox. summary first, while in the root of your add-on, install the package that contains the modules you want to use: npm install menuitem --save now you'll see a new directory in your add-on root called "node_modules" that contains a directory "menuitem". in your add-on code, you can require() modules by passing a path to the module starting from, but not including "node_modules": var menuitems = require("menuitem"); details create a new directory called, for example, "my-menuitem", navigate to it, type "jpm init" and accept all the defaults: mkdir my-menuitem cd my-menuitem jpm init install the menuitem package from npm: npm install menuitem --save this will install the package in the current directory, under a directory called "node_modules". the --save argument instructs npm ...
...And 2 more matches

Adding Events and Commands - Archive of obsolete content
which you use depend on the situation. elements only implement the events that are relevant to them, but there are several events that are implemented for most elements. these are some notable events you should keep in mind: oncommand. this is one of the most important and commonly used events in xul. it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. for a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the enter key. it's an abstraction of the main way to interact with a control element. onselect. fired when the selection in a tree or listbox changes. onclick. triggered when the user clicks on the element, including right clicks. you shouldn't normall...
...o-online-broadcaster" /> </broadcasterset> these elements are completely invisible, so you can put them anywhere. it is recommended that you have them at the top of the xul code, along with script declarations and other invisible elements with as popupset and commandset. ...
...terset> these elements are completely invisible, so you can put them anywhere. it is recommended that you have them at the top of the xul code, along with script declarations and other invisible elements with as popupset and commandset. then you need to identify which of your xul elements will be linked to this broadcaster, using the observes attribute: <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" observes="xulschoolhello-online-broadcaster" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> the attribute value is set to be the id of the broadcaster element, indicating that this element will observe all attribute changes that happen in the broadcaster. you can have as many elements ...
...And 2 more matches

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
earrange toolbar buttons to their liking, possibly merging multiple toolbars in the process. firefox allows all of this by default, and if you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest. the first thing you need to do is add your buttons to the toolbar palette. the toolbarpalette is a collection of all toolbar buttons and toolbar items in firefox, including those added by extensions. to add your buttons, all you need to do is overlay the palette in your main browser overlay. <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="xulschoolhello-hello-world-button" class="toolbarbutton-1 chro...
...e. --> </toolbarpalette> <!-- more overlay stuff. --> </overlay> one detail that is easy to overlook is the fact that the toolbarpalette element is outside of the window element. if you put the toolbarpalette element inside the window element in your overlay, some weird errors will begin to happen. always set the label and tooltiptext attributes of a toolbarbutton. in the case of a toolbaritem element (discussed later), use the title attribute instead of label. tooltips are very important for users that want to know what a button does before clicking it. setting the image for a toolbar button is done with css: #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar bu...
...verlay file, as you would expect, but also in the chrome.manifest file. this is very important because the toolbar customization dialog won't work correctly without this. 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. we now have code that adds one or more buttons to the toolbar palette. the user can now use the customize dialog to add the buttons to the current firefox toolbars. in most cases this is not what you want as default behavior, because it would be very hard for the user to discover your buttons. keep i...
...And 2 more matches

Adding preferences to an extension - Archive of obsolete content
text="stockmenu" onclick="stockwatcher.refreshinformation()" /> </statusbar> now when the user clicks on the status bar panel, the stock information refreshes, but when they right-click on it, a context menu pops up. defining the menu is also easy. ...
...l, the stock information refreshes, but when they right-click on it, a context menu pops up. defining the menu is also easy. ...
...u pops up. defining the menu is also easy. ...
...And 2 more matches

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...
... 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 galeon 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 versi...
...e 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 product. ...
...And 2 more matches

Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirs...
... docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstvisiblerow getindexofitem getitematindex getnextitem getnotificationbox getnotificationwithvalue getnumberofvisiblerows getpagebyid getpreviousitem getresultat getresultcount getresultvalueat getrowcount getsearchat getselecteditem getsession getsessionbyname getsessionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup ...
... getnumberofvisiblerows getpagebyid getpreviousitem getresultat getresultcount getresultvalueat getrowcount getsearchat getselecteditem getsession getsessionbyname getsessionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications remov...
...And 2 more matches

PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu. this allows items within the menu to be navigated with the cursor keys. the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down, wrapping around if necessary. on linux and the macintosh, disabled items within the menu are skipped over when navigating with the cursor keys. cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. home/end move the highlight to the beginning or the end of the menu, selecting the ...
...if a menu is selected, the menu will open. escape closes the menu. if a chain of submenus is open, only one level of menus is closed. tab/f10 closes all menus in a chain of submenus. ...
...ithin the menu are skipped over when navigating with the cursor keys. cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. home/end move the highlight to the beginning or the end of the menu, selecting the first or last item. enter/return activate the currently highlighted item. if a menuitem is selected, this will close the menu and fire the menuitem's command event. if a menu is selected, the menu will open. escape closes the menu. if a chain of submenus is open, only one level of menus is closed. tab/f10 closes all menus in a chain of submenus. when letter keys are pressed, the accesskeys within the menu are selected. if an access key is a pressed that does not corr...
...And 2 more matches

Filtering - Archive of obsolete content
the data examined for new results. you can view a complete example of this in action. a menulist is used to allow one to select either a specific country, or select all to show all of the photos. when a choice is made, the applyfilter function as shown above is called and the template content gets rebuilt with the desired filter applied. in this example, the menulist is hard-coded to contain the items that we know are in the datasource. next, we'll look at also generating this list using a template. generating a filter menu templates may be used to generate any type of content. it is common to use a template to generate the items on a menu or in a listbox or tree. the syntax is the same regardless of what type of content is being created. in the previous example, we hard-coded a menulist w...
... a second triple is used to get the title for the country. ...
...?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 <menuitem> for each result. it will also need to include a <menupopup> around all of the items. ...
...And 2 more matches

Rule Compilation - Archive of obsolete content
the query will apply. for example, the first rule might apply to results that represent books, while the second rule might apply only to results that are magazines. this way, different kinds of output can be created based on the specifics of the result. in many cases, you will only have need for one rule, as you want all results to be generated in the same manner. for instance, if generating the items in a listbox, you will typically use only one rule. if only one rule is needed, the rule element is optional. a template without any rules (or, in fact, one with a rule with no query defined) will generate output unconditionally for each result. template syntax outline here is the outline of the template syntax so far. <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http...
... the template builder process the query and output content. once done, the correct length can be returned. all of this is transparent to the xul developer. when the template builder decides to start generation is determined automatically, and you don't need to do anything special to get this to happen. however, there are two cases where content is not generated automatically: menus and child tree items. content inside a menu is not generated until the menu is opened. this makes sense since the user can't see the contents of the menu until it is open. 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. this is an important distinction. that means that you will not be able to ...
...e menu is opened. this makes sense since the user can't see the contents of the menu until it is open. 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. this is an important distinction. that means that you will not be able to rely on being able to retrieve the generated menu items until the menu is opened. a similar rule applies for child tree items. ...
...And 2 more matches

Template and Tree Listeners - Archive of obsolete content
ated fresh. the willrebuild method of any listeners will be called before the content is removed, and didrebuild method will be called when the content has been regenerated. this listener will also work for tree builders, and will call the appropriate methods before and after the tree has been generated. to assign a builder listener to a builder, use the addlistener method. ...
...be called before the content is removed, and didrebuild method will be called when the content has been regenerated. this listener will also work for tree builders, and will call the appropriate methods before and after the tree has been generated. to assign a builder listener to a builder, use the addlistener method. 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 restores the selected index after a rebuild. since the content ...
...rst tree will maintain the selection when the rebuild button is pressed, whereas in the second tree does not. this is because the listener is only attached to the first tree. the example above makes use of the getresourceatindex and getindexofresource methods. 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. or, the resource may no longer be part of the results, which is why we need to check the return value of the getindexofresource method. (as this example uses the rdf resources directly, it requires elevated privileges so you will need a chrome url to test it.) you might also guess that the builder's root pr...
...And 2 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
est you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, 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. this feature may be disa...
...box which, when pressed, will open a dropdown menu of all available results. focused type: boolean this attribute is true if the element is focused. forcecomplete new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the textbox will be filled in with the best match when it loses the focus. if false, it will only be filled in when the user selects an item. highlightnonmatches new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, then the autocomplete field will be highlighted when no match has been found. ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear. inputtooltiptex...
... ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear. inputtooltiptext type: string the tooltip text for the textbox. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. maxlength type: integer the maximum number of characters that the textbox allows to be entered. maxrows type: integer the number of rows to show in the results list at a time. a scrollbar will appear so the user can scroll through the remaining items. m...
...And 2 more matches

Things I've tried to do with XUL - Archive of obsolete content
there: if you create from js an element you want to bind, and if it is hidden when the listbox is first rendered, the listbox does not create a frame for it, and the xbl doesn't get attached... a workaround for that is to create the element, insert it in the document and set its style attribute with a -moz-binding property, all of that from c++ instead of js. multi-column listboxes when adding items to multi-column listboxes, you can't use the appenditem api: // auto-create and attach 1st cell var row = mylistbox.appenditem( label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... while this works at first, after a number of rows have been ad...
... attach 1st cell var row = mylistbox.appenditem( label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... while this works at first, after a number of rows have been added it breaks and stops displaying the first cell (the one specified by the appenditem call). ...
...el, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ... while this works at first, after a number of rows have been added it breaks and stops displaying the first cell (the one specified by the appenditem call). ...
...And 2 more matches

Adding Style Sheets - Archive of obsolete content
s dialog so that its style comes from a separate style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
...om a separate style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
...e modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
...And 2 more matches

RDF Datasources - Archive of obsolete content
st. we'll display the history in a tree with three columns, the name, the url and the date. ...
...you can use any of the resources that you want. ...
...the ref attribute has been set to the root element in the r...
...And 2 more matches

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 listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack...
...lbar 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 toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem 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 --- too...
...pacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem 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 toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane ...
...And 2 more matches

XUL accessibility guidelines - Archive of obsolete content
navigation order should be logical, generally left to right, top to bottom. navigation order may vary depending on the nature of the application or the reading direction of the language. ensure that tab order is logical and all interactive elements can be accessed simply without the use of a mouse. you should be able to perform all functionality either directly in the application or through menu items or the context menu. trees provide alternative functionality for inaccessible operations. the column picker and column headers in xul trees are not keyboard accessible, consistent with the standard tree behavior on most contemporary operating systems. it is therefore necessary to provide a keyboard accessible alternative for accessing this functionality. the firefox "bookmarks manager" prov...
...ceive focus, they are not operable with a keyboard. in the bookmark manager this functionality is available under the view menu which is accessible to a keyboard user. toolbarbuttons by default, toolbar buttons cannot receive focus with a keyboard. 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. in cases where duplication of functionality is not possible (such as a window without a menu bar), toolbar buttons can be made focusable by adding the special css rule -moz-user-focus: normal. (firefox's "print preview" window uses this fallback technique.) this should only be used as a last resort, and it should be consistent throughout a window (that is either all toolbar butto...
...ibute work with the correct platform-specific context menu triggers, including the keyboard button and appropriate mouse clicks. mouse dependent scripting functionality associated with mouse events such as onmouseover, onmousemove, and ondrag can only be activated with the use of the mouse. provide keyboard-accessible alternative access points for this functionality. consider using context menu items or other xul elements along with keyboard shortcuts. scrolling ensure that scrolling is keyboard accessible. many xul elements can be set to scroll using css. other elements, such as arrowscrollbox and listbox, are made to scroll automatically. as a general rule, elements set to scroll are inaccessible if the user cannot scroll to all the content using the keyboard. the arrowscrollbox, for exa...
...And 2 more matches

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

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

menubar - Archive of obsolete content
side the menubar will be ignored. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...ed. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...enubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. attributes grippyhidden, statusbar properties accessibletype, statusbar examples <menubar id="sample-menubar"> <menu id="action-menu" label="action"> <menupopup id="action-popup"> <menuitem label="new"/> <menuitem label="save" disabled="true"/> <menuitem label="close"/> <menuseparator/> <menuitem label="quit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> attributes grippyhidden seamonkey only type: boolean when set to true, the grippy will be hidden. when set to false, the d...
...And 2 more matches

radio - Archive of obsolete content
side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user...
...est you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group. only one button from each group can be checked at a time. if the user selects one th...
...lects one the buttons, the others in the group are unchecked. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the ta...
...And 2 more matches

treecol - Archive of obsolete content
imary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. ...
...mage examples this example shows a checkbox in the first column, requires the style below. <tree flex="1" editable="true"> <treecols> <treecol label="active" type="checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> to make the checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type). on firefox 2.x and 3.x, all operating systems other than mac os x already use these styles by default. if targeting...
... side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } cycler type: boolean if true, then the column is a cycler column. in the case, clicking on a cell in the column will alternate its state between on and off. this is used, for example, in a mail window, for a column that indicates that the...
...And 2 more matches

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> ...
...rather than for syndication. spe...
...rather than for syndication. ...
...And 2 more matches

Enumerator.moveFirst - Archive of obsolete content
non-standard. do not use! ...
... non-standard. do not use! ...
... non-standard. do not use! ...
...And 2 more matches

Legacy layout methods - Learn web development
ed this all seems! this knowledge will be helpful to you if you need to create fallback code for browsers that do not support newer methods, in addition to allowing you to work on existing projects which use these types of systems. it is worth bearing in mind, as we explore these systems, that none of them actually create a grid in the way that css grid layout creates a grid. they work by giving items a size, and pushing them around to line them up in a way that looks like a grid. a two column layout let's start with the simplest possible example — a two column layout. you can follow along by creating a new index.html file on your computer, filling it with a simple html template, and inserting the below code into it at the appropriate places. at the bottom of the section you can see a liv...
...s example from a mediarecorder api tutorial. anyway, back to our grids! any column that spans more than one column of our grid has a total width of 6.25% multiplied by the number of columns spanned plus 2.08333333% multiplied by the number of gutters (which will always be the number of columns minus 1). ...
...making these replacements in your own example, or look at our flexbox-grid.html example code (see it running live also). here we are turning each row into a flex container. with a flexbox-based grid we still need rows in order to allow us to have elements that add up to less than 100%. we set that container to display: flex. ...
...And 2 more matches

HTML Cheatsheet - Learn web development
kquote>the blockquote element indicates an extended quotation.</blockquote> the blockquote element indicates an extended quotation. ...
...dicates an extended quotation.</blockquote> the blockquote element indicates an extended quotation. ...
...e> the blockquote element indicates an extended quotation. ...
...And 2 more matches

Silly story generator - Learn web development
the top of the main.js file. this gives you three variables that store references to the "enter custom name" text field (customname), the "generate random story" button (randomize), and the <p> element at the bottom of the html body that the story will be copied into (story), respectively. 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. now look at the second section of the raw text file — "2. raw text strings". this contains text strings that will act as input into our program. we'd like you to contain these inside variables inside main.js: store the first, big long, string of text inside a variable called storytext. store the first set of three strings inside an array called inse...
...on to complete it and make it work properly. completing the result() function: create a new variable called newstory, and set its value to equal storytext. this is needed so we can create a new random story each time the button is pressed and the function is run. if we made changes directly to storytext, we'd only be able to generate a new story once. create three new variables called xitem, yitem, and zitem, 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). for example you can call the function and get it to return one random string out of insertx by writing randomvaluefromarray(insertx). next we want to replace the three placeholders in the newstory string —...
...there is a particular string method that will help you here — in each case, make the call to the method equal to newstory, so each time it is called, newstory is made equal to itself, but with substitutions made. ...
...And 2 more matches

JavaScript object basics - Learn web development
t be separated by a comma, and the name and value in each case are separated by a colon. the syntax always follows this pattern: const objectname = { member1name: member1value, member2name: member2value, member3name: member3value }; the value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. 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. an object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. this is in contrast to objects instantiated from classes, which w...
...ta, and are referred to as the object's methods. an object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. this is in contrast to objects instantiated from classes, which we'll look at later on. 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. sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name. dot notation above, you accessed the object's properties and methods using dot notation. the object name (person) acts as th...
...re efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name. dot notation above, you accessed the object's properties and methods using dot notation. the object name (person) acts as the namespace — it must be entered first to access anything encapsulated inside the object. next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example: person.age person.interests[1] person.bio() sub-namespaces it is even possible to make the value of an object member another object. for example, try changing the name member from name: ['bob', 'smith'], to name : { first: 'bob', last: 's...
...And 2 more matches

TypeScript support in Svelte - Learn web development
adingel: htmlelement finally, you'll notice the following error reported, related to where we set the tabindex attribute. that's because typescript is type-checking the <h2> element and expects tabindex to be of type number. 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. newtodo.svelte next we will take care of newtodo.svelte. as usual, add the lang='ts' attribute. the warning will indicate that we have to specify a type for the nameel variable. set its type to htmlelement like this: let nameel: htmlelement // reference to the name inp...
... 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.getitem(key) === null) { // item not present in local storage localstorage.setitem(key, tostring(initial)) // initialize local storage with initial value } const saved = toobj(localstorage.getitem(key)) // convert to object const { subscribe, set, update } = writable(saved) // create the under...
...etitem(key, tostring(initial)) // initialize local storage with initial value } const saved = toobj(localstorage.getitem(key)) // convert to object const { subscribe, set, update } = writable(saved) // create the underlying writable store return { subscribe, set: (value: jsonvalue) => { localstorage.setitem(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 aut...
...And 2 more matches

Componentizing our Svelte app - Learn web development
growing, it should be split into smaller subcomponents. both approaches should complement each other, and help you decide how to better organize your components. eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred. 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. todo.svelte: an individual todo item. each visible todo item will be displayed in a separate copy of this component. moreactions.svelte: the check all and remove completed buttons at the bottom of the ui that al...
... in this article we will concentrate on creating the filterbutton and todo components; we'll get to the others in future articles. let's get started. ...
...that's because our todo component is receiving the todo via the prop, but it's not sending any information back to its parent. we'll fix this later on. sharing data between components: props-down, events-up pattern the bind directive is pretty straightforward and allows you to share data between a parent and child component with mini...
...And 2 more matches

Application cache implementation overview
update is running at the time. nsofflinecacheupdate it self is the core of the update process. during initiation the update is first looking for an existing nsiapplicationcache object using nsiapplicationcacheservice::getactivecache() with the manifest url to load from as an argument. 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. otherwise, this is “first download”. then creates a new nsiapplicationcache for the given manifest url using nsiapplicationcacheservice::createapplicationcache(). this new cache version is now pending to be activated after all following long and complicated download process passes. until that it is not used for loading resources from. after these steps the ...
...ad process passes. until that it is not used for loading resources from. after these steps the update is in initialized state waiting to be scheduled. when the update is about to actually start, the scheduling service calls nsofflinecacheupdate::begin() method, that switches the update to checking state (+invokes onchecking event) and starts fetch of the manifest file. 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. all files downloaded are deleted and the new cache version is discarded.) an md5 hash is then calculated from the manifest content we download from the server to be compared to existing md5 (in case of an “update”). during the load, manifest...
...alled for each finished entry load, including the manifest and is the main place handling each update state as following: on checking state, a state the update is at after manifest parsing has been done, loadcompleted checks whether the new hash, i.e. the manifest content, differs or this is just “first download”. if so, the update switches to downloading state and fetches in parallel items listed in the manifest by call to nsofflinecacheupdate::processnexturi(). if the new hash is identical, update invokes onnoupdate event and is 'finished'. then it associates any documents waiting for this update to finish with the current existing nsiapplicationcache. if the manifest load failed, onerror event is invoked and the update 'finishes'. the parallel load is implemented by ...
...And 2 more matches

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 [[@ secitem_compareitem_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...
... password bug 392522: integrity hashes must be updated when passwords are changed. ...
...bug 392522: integrity hashes must be updated when passwords are changed. ...
...And 2 more matches

sslcrt.html
upgraded documentation may be found in the current nss reference certificate functions chapter 5 certificate functions this chapter describes the functions and related types used to work with a certificate database such as the cert7.db database provided with communicator. validating certificates manipulating certificates getting certificate information comparing secitem 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> secstatus cert_verifycertnow( certcertdbhandle *handle, certcertificate *cert, ...
...pies of that structure and can cause severe problems. getting certificate information cert_findcertbyname cert_getcertnicknames cert_freenicknames cert_getdefaultcertdb nss_findcertkeatype cert_findcertbyname finds the certificate in the certificate database with a specified dn. syntax #include <cert.h> certcertificate *cert_findcertbyname ( certcertdbhandle *handle, secitem *name); parameters this function has the following parameters: handle a pointer to the certificate database handle. name the subject dn of the certificate you wish to find. returns if successful, the function returns a certificate object of type certcertificate. cert_...
...n ssl server certificate. syntax #include <nss.h> sslkeatype nss_findcertkeatype(certcertificate * cert); parameter this function has the following parameter: a the certificate to check. ...
...And 2 more matches

nsIDOMOfflineResourceList
o and removing resources from the cache, as well as for enumerating the dynamically managed resource list. dom/interfaces/offline/nsidomofflineresourcelist.idlscriptable please add a summary to this article. 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 mozhasitem(in domstring uri); domstring mozitem(in unsigned long index); void mozremove(in domstring uri); void swapcache(); void update(); attributes attribute type description mozitems nsidomofflineresourcelist the list of dynamically-managed entries in the offline resource list. read only. mozlength unsigned long ...
...ess of being updated. checking 2 the application cache manifest is being fetched and checked for updates. downloading 3 resources are being downloaded to be added to the cache. updateready 4 there is a new version of the application cache available. obsolete 5 the application cache group is now obsolete. methods mozadd() adds an item to the dynamically managed entries. the resource will be fetched and added to the application cache. void mozadd( in domstring uri ); parameters uri the uri of the resource to add to the list. mozhasitem returns a boolean value indicating whether or not the specified uri represents a resource that's in the application cache's list. note: this method has been deprecated. you should...
...mically managed entries. the resource will be fetched and added to the application cache. void mozadd( in domstring uri ); parameters uri the uri of the resource to add to the list. mozhasitem returns a boolean value indicating whether or not the specified uri represents a resource that's in the application cache's list. note: this method has been deprecated. you should use the mozitems attribute instead. void mozhasitem( in domstring uri ); parameters uri the uri of the resource to check. return value true if the resource is in the list, otherwise false. ...
...And 2 more matches

nsIDOMStorage2
the nsidomstorage2 interface represents the storage space used for local storage in the dom. items stored in local storage may only be accessed by the same origin that created the items in the first place. a dom window's local storage object can be retrieved from the window's localstorage attribute. dom/public/idl/storage/nsidomstorage2.idlscriptable please add a summary to this article. ...
...same origin that created the items in the first place. a dom window's local storage object can be retrieved from the window's localstorage attribute. dom/public/idl/storage/nsidomstorage2.idlscriptable please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void clear(); domstring getitem(in domstring key); domstring key(in unsigned long index); void removeitem(in domstring key); void setitem(in domstring key, in domstring data); attributes attribute type description length unsigned long the number of keys stored in local storage. methods clear() clears the contents of this storage context; this removes all values bound to the domain or origin. void clear(); pa...
...; domstring key(in unsigned long index); void removeitem(in domstring key); void setitem(in domstring key, in domstring data); attributes attribute type description length unsigned long the number of keys stored in local storage. methods clear() clears the contents of this storage context; this removes all values bound to the domain or origin. void clear(); parameters none. getitem() returns from local storage the data corresponding to the specified key. domstring getitem( in domstring key ); parameters key the key for which data should be returned. return value a string containing the data corresponding to the specified key, or null if no data exists for the given key. key() returns the key for the item stored at the specified index in the data store. domstring key( ...
...And 2 more matches

nsINavHistoryResultViewObserver
methods candrop() implement this method to report whether or not a drop is permitted onto the specified location. to provide behavior similar to the folder pane ...
... 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. ...
...n 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. methods candrop() implement this method to report whether or not a drop is permitted onto the specified location. to provide behavior similar to the folder pane in thunderbird, where drops are only permitted on items themselves instead of on the pane as a whole, always return false when the orientation isn't drop_on. warning: do not change the content of the obser...
...And 2 more matches

nsITransactionList
editor/txmgr/idl/nsitransactionlist.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.7 method overview nsitransactionlist getchildlistforitem(in long aindex); nsitransaction getitem(in long aindex); long getnumchildrenforitem(in long aindex); boolean itemisbatch(in long aindex); attributes attribute type description numitems long the number of transactions contained in this list. read only. methods getchildlistforitem() returns the list of children associated with the item at aindex. ...
...e description numitems long the number of transactions contained in this list. read only. methods getchildlistforitem() returns the list of children associated with the item at aindex. implementations may return null if there are no children, or an empty list. the list returned is addref'd so it is up to the caller to release the transaction when it is done. nsitransactionlist getchildlistforitem( in long aindex ); parameters aindex the index of the item in the list. return value the nsitransactionlist of children associated with the item at aindex. getitem() returns the transaction at the given index in the list. note that a null can be returned here if the item is a batch. the transaction returned is addref'd so it is up to the caller to release the transaction when it is done. nsi...
...dex ); parameters aindex the index of the item in the list. return value the nsitransactionlist of children associated with the item at aindex. getitem() returns the transaction at the given index in the list. note that a null can be returned here if the item is a batch. the transaction returned is addref'd so it is up to the caller to release the transaction when it is done. nsitransaction getitem( in long aindex ); parameters aindex the index of the item in the list. return value missing description getnumchildrenforitem() returns the number of child (auto-aggreated) transactions the item at aindex has. long getnumchildrenforitem( in long aindex ); parameters aindex the index of the item in the list. ...
...And 2 more matches

XPCOM Interface Reference
ncachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitorn...
...entnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstoragewindownsidomuserdatahandlernsidomwindownsidomwindow2nsidomwindowinternalnsidomwindowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpathresultnsidomxulcontrolelementnsidomxulelementnsidomxullabeledcontrolelementnsidomxulselectcontrolelementnsidomxulselectcontrolitemelementnsidatasignatureverifiernsidebugnsidebug2nsidevicemo...
...arsernsidirectoryenumeratornsidirectoryiteratornsidirectoryservicensidirectoryserviceprovidernsidirectoryserviceprovider2nsidiskcachestreaminternalnsidispatchsupportnsidocshellnsidocumentloadernsidownloadnsidownloadhistorynsidownloadmanagernsidownloadmanageruinsidownloadobservernsidownloadprogresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtargetnsiexceptionnsiextensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternalurlhandlerservic...
...And 2 more matches

Add to iPhoto
eed to be shut down, we do need to close the library we opened using the js-ctypes api; that's where the shutdown() method comes in: shutdown: function() { this.lib.close(); } select api declarations let's take a look at a few of the key apis we declare for core foundation, to see how it's done. 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. in c, the declaration looks like this: typedef struct { cfindex location; cfindex length; } cfrange; to declare this for use with js-ctypes, we use the following code: this.cfrange = new ctypes.structtype("cfrange", [ {'location': ctypes.int32_t}, {'length': ctypes.int32_t}]); this defines corefoundation.cfra...
...n that build. cfmutablearray one thing about core foundation types that is interesting is the use of regular and mutable versions of the same data types. for example, the cfarray type describes an array, but cfarray objects can't be changed once they've been created. 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. that's where the cfmutablearray type comes into play. all cfarray functions accept cfmutablearray objects, so you can use cfmutablearray with any routine that accepts a cfarray as input, but cfmutablearray supports additional functions that let you change the contents of the array. there's nothing particularly interesting about how we declare this api, but it will b...
...to" option if the user has right-clicked on an image. 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_menuitem"); 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. the code to identify the node looks like...
...And 2 more matches

Element: mouseout event - Web APIs
ent. mouseout and mouseleave the following example illustrates the difference between mouseout and mouseleave events. the mouseleave event is added to the <ul> to color the list purple whenever the mouse exits the <ul>. mouseout is added to the list to color the targeted element orange when the mouse exits it. ...
...ween mouseout and mouseleave events. the mouseleave event is added to the <ul> to color the list purple whenever the mouse exits the <ul>. mouseout is added to the list to color the targeted element orange when the mouse exits it. 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>. ...
...list purple whenever the mouse exits the <ul>. mouseout is added to the list to color the targeted element orange when the mouse exits it. 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>. ...
...And 2 more matches

HTMLSelectElement.selectedOptions - Web APIs
f an htmloptgroupelement within the <select> element. in other words, any option contained within the <select> element may be part of the results, but option groups are not included in the list. if no options are currently selected, the collection is empty and returns a length of 0. example in this example, a <select> element with a number of options is used to let the user order various food items. html the html that creates the selection box and the <option> elements representing each of the food choices looks like this: <label for="foods">what do you want to eat?</label><br> <select id="foods" name="foods" size="7" multiple> <option value="1">burrito</option> <option value="2">cheeseburger</option> <option value="3">double bacon burger supreme</option> <option value="4">peppe...
...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. note also the <button>, whose role it is to trigger fetching the htmlcollection of selected elements using the selected property. 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...
...elements using the selected property. ...
...And 2 more matches

HTMLSelectElement - Web APIs
ted with. if the element is not associated with of a <form> element, then it returns null. htmlselectelement.labelsread only a nodelist of <label> elements associated with the element. htmlselectelement.length an unsigned long the number of <option> elements in this select element. htmlselectelement.multiple a boolean reflecting the multiple html attribute, which indicates whether multiple items can be selected. htmlselectelement.name a domstring reflecting the name html attribute, containing the name of this control used by servers and dom search functions. htmlselectelement.optionsread only an htmloptionscollection representing the set of <option> (htmloptionelement) elements contained by this element. htmlselectelement.required a boolean reflecting the required html attribute,...
...ubmitting the form. htmlselectelement.selectedindex a long reflecting the index of the first selected <option> element. the value -1 indicates no element is selected. htmlselectelement.selectedoptionsread only an htmlcollection representing the set of <option> elements that are selected. htmlselectelement.size a long reflecting the size html attribute, which contains the number of visible items in the control. the default is 1, unless multiple is true, in which case it is 4. htmlselectelement.typeread only a domstring represeting the form control's type. when multiple is true, it returns "select-multiple"; otherwise, it returns "select-one". htmlselectelement.validationmessageread only a domstring representing a localized message that describes the validation constraints that the...
...d is now implemented on htmlelement. htmlselectelement.checkvalidity() checks whether the element has any constraints and whether it satisfies them. if the element fails its constraints, the browser fires a cancelable invalid event at the element (and returns false). htmlselectelement.focus() gives input focus to this element. this method is now implemented on htmlelement. htmlselectelement.item() gets an item from the options collection for this <select> element. you can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly. htmlselectelement.nameditem() gets the item in the options collection with the specified name. the name string can match either the id or the name attribute of an option node. you can also acces...
...And 2 more matches

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 ...
...he 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 newitem = { 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: ${newitem.tasktitle}`); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transactio...
...', year: 2020 }; const db = dbopenrequest.result; db.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.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(newitem); }; 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.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data ite...
...And 2 more matches

IDBObjectStore - Web APIs
ate thread, creates a structured clone of the value, and stores the cloned value in the object store. this is for updating existing records in an object store when the transaction's mode is readwrite. 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. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in db. db = dbopenrequest.result; }; ...
... 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",...
... 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 newitem = [ { 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(ev...
...And 2 more matches

IDBTransaction.abort() - Web APIs
4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. ...
...eady 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: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...ion.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...And 2 more matches

IDBTransaction.db - Web APIs
dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. ...
...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: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...tion.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...And 2 more matches

IDBTransaction.mode - Web APIs
dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. ...
...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: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...tion.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...And 2 more matches

IDBTransaction.objectStore() - Web APIs
dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable. ...
...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: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...tion.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...And 2 more matches

IDBTransaction - Web APIs
uest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable. ...
...saction, 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 modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...ction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error. ...
...And 2 more matches

NamedNodeMap - Web APIs
hough called namednodemap, this interface doesn't deal with node objects but with attr objects, which were originally a specialized class of node, and still are in some implementations. properties this interface doesn't inherit any property. namednodemap.length read only returns the amount of objects in the map. methods this interface doesn't inherit any method. ...
...th attr objects, which were originally a specialized class of node, and still are in some implementations. properties this interface doesn't inherit any property. namednodemap.length read only returns the amount of objects in the map. methods this interface doesn't inherit any method. namednodemap.getnameditem() returns a attr, corresponding to the given name. namednodemap.setnameditem() replaces, or adds, the attr identified in the map by the given name. ...
...ons. properties this interface doesn't inherit any property. namednodemap.length read only returns the amount of objects in the map. methods this interface doesn't inherit any method. namednodemap.getnameditem() returns a attr, corresponding to the given name. namednodemap.setnameditem() replaces, or adds, the attr identified in the map by the given name. namednodemap.removenameditem() removes the attr identified by the given map. namednodemap.item() returns the attr at the given index, or null if the index is higher or equal to the number of nodes. namednodemap.getnameditemns() returns a attr identified by a namespace and related local name. namednodemap.setnameditemns() replaces, or adds, the attr identified in the map by the given namespace and related local name. ...
...And 2 more matches

PaymentRequest.PaymentRequest() - Web APIs
constructor creates a new paymentrequest object which will be used to handle the process of generating, validating, and submitting a payment request. syntax var paymentrequest = new paymentrequest(methoddata, details, [options]); parameters methoddata contains an array of identifiers for the payment methods the merchant web site accepts and any associated payment method specific data. 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. starting with more recent browsers, this parameter is more generic than credit cards, it is a single domstring, and the meaning of the data parameter changes with the supportedmethods. for example, the b...
...hods. for basic credit card services, this structure should match the basiccardrequest dictionary. details provides information about the requested transaction. this parameter contains the following fields: total the total amount of the payment request. id optional a free-form identifier for this payment request. if a value is not supplied, the browser will construct one. displayitems an array of optional line items for the payment request that the user agent may display, such as product details, tax, and shipping. shippingoptions the shipping options the user may choose from. if this sequence is blank, it indicates the merchant cannot ship to the current shipping address. the default shipping option may be indicated in this sequence. modifiers modifiers for specifi...
...the shipping options the user may choose from. if this sequence is blank, it indicates the merchant cannot ship to the current shipping address. the default shipping option may be indicated in this sequence. modifiers modifiers for specific payment methods; for example, adjusting the total amount based on the payment method. this parameter contains the following fields: additionaldisplayitems an array of items to be appended to the details.displayitems property. this property is commonly used to add a discount or surcharge line item indicating the different amount in details.modifiers.total. data a json-serializable object that provides optional information that might be needed by the supported payment methods. this has to conform to the structure defined in the basiccardreq...
...And 2 more matches

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

:nth-last-child() - CSS: Cascading Style Sheets
the :nth-last-child() css pseudo-class matches elements based on their position among a group of siblings, counting from the end. /* 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. syntax the nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end. keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end. even represents elements whose numeric position in a series of siblings is even: 2, 4, 6...
...this is accomplished by combining the capabilities of the nth-last-child...
...e 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. this is accomplished by combining the capabilities of the nth-last-child pseudo-class and the general sibling combinator. ...
...And 2 more matches

Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
tainers or table cells. the align-content property applies to the block axis in order to align the contents of the box within its container. if a content distribution method such as space-between, space-around or space-evenly is requested then the fallback alignment will be used, as the content is treated as a single alignment subject. justify-self the justify-self property is used to align an item inside its containing block on the inline axis. this property does not apply to floated elements or table cells. absolutely positioned elements the alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. the normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start. align-self...
.... absolutely positioned elements the alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. 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. it also does not apply to table cells. absolutely positioned elements the alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. the normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start. aligning in these layout methods today as we do not currently hav...
... alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. ...
...And 2 more matches

Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
in browsers to make your decision. useful fallback techniques given that flexbox usage is initiated with value of the display property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. 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. flex containers in the following live example, i have floated two blocks and then set display: flex on the container. the items are now flex items, which means they stretch to equal height. any float behaviour does not apply. you can test the fallback behaviour by remo...
...em, and do not take it out-of-flow.” - 3. flex containers in the following live example, i have floated two blocks and then set display: flex on the container. the items are now flex items, which means they stretch to equal height. any float behaviour does not apply. you can test the fallback behaviour by removing display: flex from the wrapper. display: inline-block once an inline-block item becomes a flex item, it is blockified and so behavior of display: inline-block like preserving white space between items no longer applies. remove display: flex to see the fallback behavior. you'll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items. display: table- the css table display properties ...
...ween the items, which is what happens when using display: inine-block as it prefers white space like other inline items. display: table- the css table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as internet explorer 8. if you use display: table-cell on an item in your html it takes on the styling of an html table cell. css creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the html table row, and a second one to represent the table element itself, you can’t see or style these anonymous boxes; they are there purely to fix up the tree. if you then declare display: flex on the parent ite...
...And 2 more matches