Search completed in 1.13 seconds.
TrackDefaultList - Web APIs
the trackdefault
list interface represents a simple container
list for multiple trackdefault objects.
... the trackdefault
list associated with a particular sourcebuffer can be retrieved using the sourcebuffer.trackdefaults property.
... constructor trackdefault
list() constructs and returns a new trackdefault
list object.
...And 2 more matches
<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.
...And 2 more matches
Intl.ListFormat.prototype.format() - JavaScript
the format() method returns a string with a language-specific representation of the
list.
... syntax
listformat.format([
list]); parameters
list an iterable object, such as an array return value a language-specific formatted string representing the elements of the
list description the format() method returns a string that has been formatted based on parameters provided in the intl.
listformat object.
... the locales and options parameters customize the behavior of format() and let applications specify the language conventions that should be used to format the
list.
...And 2 more matches
listcol - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a column in a
listbox.
... examples example <!-- a two column
listbox with one column flexible --> <
listbox> <
listhead> <
listheader label="first"/> <
listheader label="last"/> </
listhead> <
listcols> <
listcol flex="1"/> <
listcol/> </
listcols> <
listitem> <
listcell label="buck"/> <
listcell label="rogers"/> </
listitem> <
listitem> <
listcell label="john"/> <
listcell label="painter"/> </
listitem> </
listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, min...
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
listbox,
listcell,
listcols,
listhead,
listheader,
listitem ...
listhead - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a header row of a
listbox.
... it is usual to place
listheader elements inside the
listhead, one for each column.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
listbox,
listcell,
listcol,
listcols,
listheader,
listitem ...
richlistitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an individual item in a rich
listbox.
...for user editable menu
list elements, the contents, as visible to the user, are read and set using the menu
list.value syntax.
...for textbox and user editable menu
list elements, the contents, as visible to the user, are read and set using the textbox.value and menu
list.value syntax.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributeno...
HTMLIFrameElement.addNextPaintListener()
the addnextpaint
listener() method of the htmliframeelement is used to define a handler to
listen for the next mozafterpaint event coming from the browser <iframe>.
... syntax instanceofhtmliframeelement.addnextpaint
listener(
listener); returns void.
... parameters
listener a function handler to
listen for a mozafterpaint event.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaint
listener(onnextpaint); specification not part of any specification.
HTMLIframeElement.removeNextPaintListener()
the removenextpaint
listener() method of the htmliframeelement interface is used to remove a handler previously set with the addnextpaint
listener method.
... syntax instanceofhtmliframeelement.removenextpaint
listener(
listener); returns void.
... parameters
listener a function handler previously set with addnextpaint
listener.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaint
listener(onnextpaint); browser.removenextpaint
listener(onnextpaint); specification not part of any specification.
PR_INIT_STATIC_CLIST
statically initializes a circular
list.
... syntax #include <prc
list.h> pr_init_static_c
list (prc
list *
listp); parameter
listp a pointer to the anchor of the linked
list.
... description pr_init_static_c
list statically initializes the specified
list to be an empty
list.
... for example, prc
list free_object_
list = pr_init_static_c
list(&free_object_
list); ...
PR_LIST_HEAD
returns the head of a circular
list.
... syntax #include <prc
list.h> prc
list *pr_
list_head (prc
list *
listp); parameter
listp a pointer to the linked
list.
... returns a pointer to a
list element.
... description pr_
list_head returns the head of the specified circular
list.
PR_LIST_TAIL
returns the tail of a circular
list.
... syntax #include <prc
list.h> prc
list *pr_
list_tail (prc
list *
listp); parameter
listp a pointer to the linked
list.
... returns a pointer to a
list element.
... description pr_
list_tail returns the tail of the specified circular
list.
nsIClipboardDragDropHookList
widget/public/nsiclipboarddragdrophook
list.idlscriptable this interface is an internal gecko component.
...method overview void addclipboarddragdrophooks(in nsiclipboarddragdrophooks ahooks); nsisimpleenumerator gethookenumerator(); void removeclipboarddragdrophooks(in nsiclipboarddragdrophooks ahooks); methods addclipboarddragdrophooks() this method adds a hook to the
list.
...removeclipboarddragdrophooks() this method removes a hook from the
list.
... note: if this implementation is not present in the
list then removal will be ignored.
nsIHTTPHeaderListener
modules/plugin/base/public/nsihttpheader
listener.idlscriptable this interface allows plugin authors to access http response headers after issuing an nsipluginhost.geturl or nsipluginhost.posturl call.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: the plugin author must provide an instance to {geturl,posturl}() that implements both nsipluginstream
listener and nsihttpheader
listener.
... this instance is passed in through {geturl,posturl}()'s stream
listener parameter.
... the browser will then qi this stream
listener to see if it implements nsihttpheader
listener.
nsIMessageListener
listeners are attached using the nsimessage
listenermanager interface.
... each
listener is invoked with its own copy of the message parameter.
... when the
listener is called, 'this' value is the target of the message.
...when there are multiple
listeners to synchronous messages, each
listener's return value is sent back as an element in an array.
nsISHistoryListener
docshell/shistory/public/nsishistory
listener.idlscriptable an interface you can implement to receive notifications about activities that occur in session history, and optionally cancel them.
... inherits from: nsisupports last changed in gecko 1.7 a session history
listener is notified when pages are added to, removed from, and loaded from session history.
... the
listener can prevent any action (except adding a new session history entry) from happening by returning false from the corresponding callback method.
... a session history
listener can be registered on a particular nsishistory instance via the nsishistory.addshistory
listener() method.
nsIServerSocketListener
inherits from: nsisupports last changed in gecko 1.7 method overview void onsocketaccepted(in nsiserversocket aserv, in nsisockettransport atransport); void onstop
listening(in nsiserversocket aserv, in nsresult astatus); methods onsocketaccepted() this method is called when a client connection is accepted.
... onstop
listening() this method is called when the
listening socket stops for some reason.
...void onstop
listening( in nsiserversocket aserv, in nsresult astatus ); parameters aserv the server socket.
... astatus the reason why the server socket stopped
listening.
nsIWebProgressListener2
an extended version of nsiwebprogress
listener.
... uriloader/base/nsiwebprogress
listener2.idlscriptable please add a summary to this article.
... last changed in gecko 1.9 (firefox 3) inherits from: nsiwebprogress
listener method overview void onprogresschange64(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress); boolean onrefreshattempted(in nsiwebprogress awebprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri); methods onprogresschange64() notification that the progress has changed for one of the requests associated with awebprogress.
...this function is identical to nsiwebprogress
listener.onprogresschange(), except that this function supports 64-bit values.
nsIWebSocketListener
netwerk/protocol/websocket/nsiwebsocket
listener.idlscriptable implement this interface to receive websocket traffic events asynchronously after calling nsiwebsocketchannel.asyncopen().
...no additional messages through onmessageavailable(), onbinarymessageavailable()() or onacknowledge()() will be delievered to the
listener after onserverclose() is called, but outgoing messages can still be sent through the nsiwebsocketchannel connection.
...any
listener that receives onstart() will also receive onstop().
...this is the final notification the
listener will receive; once it's been received, the websocket connection is complete.
DOMImplementationList - Web APIs
returned by domimplementationsource.getdomimplementation
list() and domimplementationregistry.getdomimplementation
list() .
... properties domimplementation
list.length read only returns an integer.
... methods domimplementation
list.item() returns the pos item.
... specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'domimplementation
list' in that specification.
DOMStringList - Web APIs
a type returned by some apis which contains a
list of domstring (strings).
... properties domstring
list.length read only returns the length of the
list.
... methods domstring
list.item() returns a domstring.
... domstring
list.contains() returns boolean indicating if the given string is in the
list specifications specification status comment html living standardthe definition of 'domstring
list' in that specification.
DOMTokenList.entries() - Web APIs
the domtoken
list.entries() method returns an iterator allowing you to go through all key/value pairs contained in this object.
... syntax token
list.entries(); return value returns an iterator.
... examples in the following example we retrieve the
list of classes set on a <span> element as a domtoken
list using element.class
list.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.class
list; let iterator = classes.entries(); for (let value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'entries() (as iterable<node>)' in that specification.
DOMTokenList.keys() - Web APIs
the keys() method of the domtoken
list interface returns an iterator allowing to go through all keys contained in this object.
... syntax token
list.keys(); parameters none.
... examples in the following example we retrieve the
list of classes set on a <span> element as a domtoken
list using element.class
list.
... first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.class
list; var iterator = classes.keys(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'keys() (as iterable<node>)' in that specification.
DOMTokenList.length - Web APIs
the length read-only property of the domtoken
list interface is an integer representing the number of objects stored in the object.
... syntax token
list.length; value an integer.
... examples in the following example we retrieve the
list of classes set on a <span> element as a domtoken
list using element.class
list, then write the length of the
list to 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.class
list; let length = classes.length; span.textcontent = `class
list length = ${length}`; the output looks like this: specifications specification status comment domthe definition of 'length' in that specification.
DOMTokenList.values() - Web APIs
the values() method of the domtoken
list interface returns an iterator allowing developers to go through all values contained in the domtoken
list.
... syntax token
list.values(); parameters none.
... examples in the following example we retrieve the
list of classes set on a <span> element as a domtoken
list using element.class
list.
... first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.class
list; var iterator = classes.values(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'values() (as iterable<node>)' in that specification.
EventListener.handleEvent() - Web APIs
the event
listener method handleevent() method is called by the user agent when an event is sent to the event
listener, in order to handle events that occur on an observed eventtarget.
... syntax event
listener.handleevent(event); parameters event an event object describing the event that has been fired and needs to be processed.
... specifications specification status comment domthe definition of 'event
listener.handleevent()' in that specification.
... document object model (dom) level 2 events specificationthe definition of 'event
listener.handleevent()' in that specification.
FeaturePolicy.getAllowlistForFeature() - Web APIs
the getallow
listforfeature() method of the featurepolicy allows query of the allow
list for a specific feature for the current feature policy.
... syntax const allow
list = featurepolicy.getallow
listforfeature(<feature>) parameter feature name a specific feature name must be specified.
... return value an allow
list for the specified feature.
... // first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allow
list = featurepolicy.getallow
listforfeature("camera") for (const origin of allow
list){ console.log(origin) } specification specification status comment feature policythe definition of 'getallow
listforfeature' in that specification.
HTMLAnchorElement.relList - Web APIs
the htmlanchorelement.rel
list read-only property reflects the rel attribute.
... it is a live domtoken
list containing the set of link types indicating the relationship between the resource represented by the <a> element and the current document.
... the property itself is read-only, meaning you can't substitute the domtoken
list with another one, but its contents can still be changed.
... syntax var relstr = anchorelt.rel
list; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { var
list = anchors[i].rel
list; var
listlength =
list.length; console.log("new anchor node found with",
listlength, "link types in rel
list."); for (var j = 0; j <
listlength; j++) { console.log(
list[j]); } } specifications specification status comment html living standardthe definition of 'rel
list' in that specification.
HTMLAreaElement.relList - Web APIs
the htmlareaelement.rel
list read-only property reflects the rel attribute.
... it is a live domtoken
list containing the set of link types indicating the relationship between the resource represented by the <area> element and the current document.
... the property itself is read-only, meaning you can't substitute the domtoken
list by another one, but the content of the returned
list can be changed.
... syntax var relstr = areaelt.rel
list; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { var
list = areas[i].rel
list; var
listlength =
list.length; console.log("new area found."); for (var j = 0; j <
listlength; j++) { console.log(
list[j]); } } specifications specification status comment html living standardthe definition of 'rel
list' in that specification.
HTMLLinkElement.relList - Web APIs
the htmllinkelement.rel
list read-only property reflects the rel attribute.
... it is a live domtoken
list containing the set of link types indicating the relationship between the resource represented by the <link> element and the current document.
... the property itself is read-only, meaning you can substitute the domtoken
list by another one, but the content of the returned
list can be changed.
... syntax var relstr = linkelt.rel
list; example var links = document.getelementsbytagname("link"); var length = links.length; for (var i = 0; i < length; i++) { var
list = links[i].rel
list; var
listlength =
list.length; console.log("new link found."); for (var j = 0; j <
listlength; j++) { console.log(
list[j]); } } specifications specification status comment html living standardthe definition of 'rel
list' in that specification.
MediaList.mediaText - Web APIs
the mediatext property of the media
list interface is a stringifier that returns a domstring representing the media
list as text, and also allows you to set a new media
list.
... syntax media
listinstance.mediatext; media
listinstance.mediatext = string; value a domstring representing the media queries of a stylesheet.
...note that the media
list is a live
list; updating the
list via mediatext will immediately update the behavior of the document.
... examples the following would log to the console a textual representation of the media
list of the first stylesheet applied to the current document.
ui/frame - Archive of obsolete content
if the frame script initiates the conversation, you need to specify "*" as the origin: window.parent.postmessage("ping", "*"); if the frame script has received a message from the add-on already, it can use the origin property of the event object passed to the message hander: //
listen for messages from the add-on, and send a reply window.addevent
listener("message", function(event) { event.source.postmessage("pong", event.origin) }, false); this frame script
listens to change events on the "city-selector" <select> element, and sends a message to the add-on containing the value for the newly selected element.
... // city-info.js var cityselector = window.document.getelementbyid("city-selector"); cityselector.addevent
listener("change", citychanged); function citychanged() { window.parent.postmessage(cityselector.value, "*"); } to
listen for these messages in the main add-on code, you can assign a
listener to the frame's message event.
...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 browser windows with that city's current weather (it just reads this from a dictionary, where in 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", ...
...And 25 more matches
ui/sidebar - Archive of obsolete content
listen to attach if the first message in your add-on goes from the sidebar scripts to the main add-on code, and
listen to ready if the first message goes from the main add-on code to the sidebar script.
...the sidebar script may not be initialized yet, so you can't reliably send messages to the sidebar script right away: however, you can start
listening to messages from the script.
...een main.js and a script in a sidebar, in the case where the sidebar script initiates communication: the html file includes just a script, "sidebar.js": <!doctype html> <html> <body> content for my sidebar <script type="text/javascript" src="sidebar.js"></script> </body> </html> the "sidebar.js" file sends a ping message to main.js using port.emit() as soon as it loads, and adds a
listener to the pong message.
...And 25 more matches
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
the final goal is to find the correct stream
listener to pump the data into when necko calls ondataavailable (e.g., we may find the html parser as the stream
listener to give the data to).
...it keeps track of currently pending loads and registered content
listeners.
...nsdocumentopeninfo implements nsistream
listener and proxies the nsistream
listener calls over to the "real" stream
listener once one is chosen.
...And 25 more matches
sslfnc.html
for a complete
list of nss initialization functions, see initialization.
... note that at least one of the functions
listed in ssl export policy functions must also be called during nss initialization.
... syntax #include "ssl.h" secstatus ssl_optiongetdefault(print32 option, prbool *on) parameters this function has the parameters
listed below.
...And 25 more matches
Codecs used by WebRTC - Web media technologies
those are
listed in the following table.
... mandatory audio codecs codec name browser compatibility opus chrome, edge, firefox, safari g.711 pcm (a-law) chrome, firefox, safari g.711 pcm (µ-law) chrome, firefox, safari see below for more details about any webrtc-specific considerations that exist for each codec
listed above.
... it's useful to note that rfc 7874 defines more than a
list of audio codecs that a webrtc-compliant browser must support; it also provides recommendations and requirements for special audio features such as echo cancelation, noise reduction, and audio leveling.
...And 25 more matches
nsIMsgMessageService
inherits from: nsisupports method overview void copymessage(in string asrcuri, in nsistream
listener acopy
listener, in boolean amovemessage, in nsiurl
listener aurl
listener, in nsimsgwindow amsgwindow, out nsiuri aurl); [noscript] void copymessages(in nsmsgkeyarrayptr keys, in nsimsgfolder srcfolder, in nsistream
listener acopy
listener, in boolean amovemessage, in nsiurl
listener aurl
listener, in nsimsgwindow amsgwindow, out nsiuri aurl); void displaymessage(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in ns...
...iurl
listener aurl
listener, in string acharsetoverride, out nsiuri aurl); void openattachment(in string acontenttype, in string afilename, in string aurl, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurl
listener aurl
listener); void savemessagetodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurl
listener aurl
listener, out nsiuri aurl, in boolean canonicallineending, in nsimsgwindow amsgwindow); void geturlforuri(in string amessageuri, out nsiuri aurl, in nsimsgwindow amsgwindow); void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurl
listener aurl
listener, out nsiuri aurl); void search(in nsimsgse...
...archsession asearchsession, in nsimsgwindow amsgwindow, in nsimsgfolder amsgfolder, in string asearchuri); nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsgwindow amsgwindow, in nsiurl
listener aurl
listener, in boolean aconvertdata, in string aadditionalheader); nsiuri streamheaders(in string amessageuri, in nsistream
listener aconsumer, in nsiurl
listener aurl
listener [optional] in boolean alocalonly); boolean ismsginmemcache(in nsiuri aurl, in nsimsgfolder afolder, out nsicacheentrydescriptor acacheentry); nsimsgdbhdr messageuritomsghdr(in string uri); methods copymessage() pass in the uri for the message you want to have copied.
...And 23 more matches
Microdata DOM API - Web APIs
it returns a node
list containing the items with the specified types, or all types if no argument is specified.
...getitems( [ types ] ) returns a node
list of the elements in the document that create items, that are not part of other items, and that are of the types given in the argument, if any are
listed.
... the types argument is interpreted as a space-separated
list of types.
...And 23 more matches
Index - Learn web development
41 installing basic software beginner, browser, learn, setup, tools, webmechanics, l10n:priority, text editor that looks like a scary
list, but fortunately, you can get started in web development without knowing anything about most of these.
... 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.
...once you know how to use them, you can look at the
list to see if there is something which works for the task you are trying to achieve.
...And 22 more matches
nsIHTMLEditor
inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertion
listener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring ...
... acanoutdent); void getinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); astring getinlinepropertywithattrvalue(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); nsisupportsarray getlinkedobjects(); void get
listitemstate(out boolean amixed, out boolean ali, out boolean adt, out boolean add); void get
liststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean ai...
...oid inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchange
list(in astring a
listtype, in boolean entire
list, in astring abullettype); boolean nodeisblock(in nsidomnode node); void pastenoformatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultproperty(in nsiatom aproperty, in astring...
...And 22 more matches
nsIWebProgress
the nsiwebprogress interface is used to add or remove nsiwebprogress
listener instances to observe the loading of asynchronous requests (usually in the context of a dom window).
...a nsiwebprogress
listener instance receives notifications for the nsiwebprogress instance to which it added itself, and it may also receive notifications from any nsiwebprogress instances that are children of that nsiwebprogress instance.
... last changed in gecko 1.8.0 inherits from: nsisupports method overview void addprogress
listener(in nsiwebprogress
listener a
listener, in unsigned long anotifymask); void removeprogress
listener(in nsiwebprogress
listener a
listener); attributes attribute type description domwindow nsidomwindow the dom window associated with this nsiwebprogress instance.
...And 22 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown
list */ .ui-dropdown-
list { width: 100%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 1px solid #3490d2; border-color: #208b20; background: #666; background-color: #eef1f5; color: #000; position: absolute; top: 100%; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: b...
...order-box; } .ui-dropdown-
list:hover { overflow: auto; } .ui-dropdown-
list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-
list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-
list { left: 100%; top: 0; } .ui-dropdown-
list > div { width: 80%; height: 1.6em; margin: 0.3em 0; padding: 0.3em 10%; line-height: 1.6em; } .ui-dropdown-
list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /* * color picker tool */ body { width: 100%; height: 100%; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } body[data-dragg...
...t */ .ui-input-slider { height: 24px; line-height: 20px; } #delete-point { margin: 0 58px 0 0; float: right !important; } #controls .ui-color-picker[data-topic="picker"] { margin: 20px 0 0 0; } #controls .ui-input-slider[data-topic="axis-rotation"] { } #controls .ui-dropdown { width: 130px; height: 24px; } #controls .ui-dropdown-select { line-height: 24px; } #controls .ui-dropdown-
list { height: 66px; line-height: 2.5em; overflow: hidden; } #delete-axis { margin: 0 38px 0 0; float: right !important; } /* tool controls */ #tool-section .property .name { width: 150px; } #canvas-bg { width: 16px; height: 16px; margin: 5px; background: url("images/toggle-background.png") center right no-repeat; } #canvas-bg:hover { cursor: pointer; } #canvas-bg[data-alpha='false'] ...
...And 22 more matches
panel - Archive of obsolete content
the screenshot below shows a panel whose content is built from the
list of currently open tabs: panels are useful for presenting temporary interfaces to users in a way that is easier for users to ignore and dismiss than a modal dialog, since panels are hidden the moment users interact with parts of the application interface outside them.
... your add-on can receive notifications when a panel is shown or hidden by
listening to its show and hide events.
... var myscript = "window.addevent
listener('click', function(event) {" + " var t = event.target;" + " if (t.nodename == 'a')" + " self.port.emit('click-link', t.tostring());" + "}, false);" var mypanel = require("sdk/panel").panel({ contenturl: "http://www.bbc.co.uk/mobile/index.html", contentscript: myscript }); mypanel.port.on("click-link", function(url) { cons...
...And 21 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
the code in
listing 1 is a sample javascript script which incorporates java classes to handle the database query.
...
listing 1 - querying a mysql database from rhino // import the java sql packages importpackage( java.sql ); // load the mysql driver java.lang.class.forname( "com.mysql.jdbc.driver" ); // create connection to the database var conn = drivermanager.getconnection( "jdbc:mysql://localhost/rhino", "urhino", "prhino" ); // create a statement handle var stmt = conn.createstatement(); // get a resultset var rs = stmt.executequery( "select * from employee" ); // get the metadata from the resultset var meta = rs.getmetadata(); // loop over the records, dump out column names and values while( rs.next() ) { for( var i = 1; i <= meta.getcolumncount(); i++ ) { print( meta.getcolumnname( i ) + ": " + rs.getobject( i ) + "\n" ); } print( "----------\n" ); } // cleanup ...
...sample output is shown in
listing 2.
...And 21 more matches
HTML text fundamentals - Learn web development
this article explains the way html can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating
lists, and more.
... objective: learn how to mark up a basic page of text to give it structure and meaning—including paragraphs, headings,
lists, emphasis, and quotations.
... severely visually impaired people often don't read web pages; they
listen to them instead.
...And 21 more matches
Introduction to events - Learn web development
note: event handlers are sometimes called event
listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together.
... the
listener
listens out for the event happening, and the handler is the code that is run in response to it happening.
...we are
listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random rgb color and sets the <body> background-color equal to it.
...And 21 more matches
NSS Tools modutil
you can use the tool to add and delete pkcs #11 modules, change passwords, set defaults,
list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
... syntax to run the security module database tool, type the command modutil option [arguments] where option and arguments are combinations of the options and arguments
listed in the following section.
... -
list [modulename] display basic information about the contents of the secmod.db file.
...And 21 more matches
nsIMsgDatabase
chesize(in unsigned long size); nsimsgdbhdr getmsghdrforkey(in nsmsgkey key); nsimsgdbhdr getmsghdrformessageid(in string messageid); boolean containskey(in nsmsgkey key); nsimsgdbhdr createnewhdr(in nsmsgkey key); void addnewhdrtodb(in nsimsgdbhdr newhdr, in boolean notify); nsimsgdbhdr copyhdrfromexistinghdr(in nsmsgkey key, in nsimsgdbhdr existinghdr, in boolean addhdrtodb); void
listallkeys(in nsmsgkeyarrayref outputkeys); native code only!
... nsisimpleenumerator enumeratemessages(); nsisimpleenumerator enumeratethreads(); void synccounts; nsimsgthread getthreadcontainingmsghdr(in nsimsgdbhdr msghdr); void markhdrread(in nsimsgdbhdr msghdr, in boolean bread, in nsidbchange
listener instigator); void markhdrreplied(in nsimsgdbhdr msghdr, in boolean breplied, in nsidbchange
listener instigator); void markhdrmarked(in nsimsgdbhdr msghdr, in boolean mark,in nsidbchange
listener instigator); void markmdnneeded(in nsmsgkey key, in boolean bneeded,in nsidbchange
listener instigator); boolean ismdnneeded(in nsmsgkey key); void markmdnsent(in nsmsgkey key, in boolean bneeded, in nsidbchange
listener instigator); boolean ismdnsent(in nsmsgkey key); void markread(in nsmsgkey key, in boolean bread, in nsidbchange
listener ins...
...tigator); void markreplied(in nsmsgkey key, in boolean breplied, in nsidbchange
listener instigator); void markforwarded(in nsmsgkey key, in boolean bforwarded, in nsidbchange
listener instigator); void markhasattachments(in nsmsgkey key, in boolean bhasattachments, in nsidbchange
listener instigator); void markthreadread(in nsimsgthread thread, in nsidbchange
listener instigator, in nsmsgkeyarrayptr thosemarked); native code only!
...And 21 more matches
Using files from web applications - Web APIs
accessing selected file(s) consider this html: <input type="file" id="input" multiple> the file api makes it possible to access a file
list containing file objects representing the files selected by the user.
... accessing the first selected file using a classical dom selector: const selectedfile = document.getelementbyid('input').files[0]; accessing selected file(s) on a change event it is also possible (but not mandatory) to access the file
list through the change event.
... you need to use eventtarget.addevent
listener() to add the change event
listener, like this: const inputelement = document.getelementbyid("input"); inputelement.addevent
listener("change", handlefiles, false); function handlefiles() { const file
list = this.files; /* now you can work with the file
list */ } getting information about selected file(s) the file
list object provided by the dom
lists all of the files selected by the user, each specified as a file object.
...And 21 more matches
Key Values - Web APIs
the tables below
list the standard key values in various categories of key, with an explanation of what the key is typically used for.
... keyboardevent.key value description virtual keycode windows mac linux android "appswitch" presents a
list of recently-used applications which lets the user change apps quickly.
... keycode_tv_audio_description_mix_up (253) "tvcontentsmenu" displays or hides the media contents available for playback (this may be a channel guide showing the currently airing programs, or a
list of media files to play).
...And 21 more matches
Using the application cache - HTML: Hypertext Markup Language
this application cache (appcache) interface
lists resources that browsers should cache to be available offline.
... how the application cache works enabling the application cache to enable the application cache for an application, include the manifest attribute in the <html> element: <html manifest="/example.appcache"> … </html> the manifest attribute references a url for a cache manifest file: a text file that
lists urls that browsers should cache for your application.
...the browser does not cache pages without the manifest attribute, unless such pages are
listed in the manifest file.
...And 21 more matches
context-menu - Archive of obsolete content
items are bound to contexts in much the same way that event
listeners are bound to events.
...a bad use would be to show a submenu that
listed all the user's tabs, since tabs aren't related to the page or the node the user clicked to open the menu.
...if you register a
listener function for this event and it returns true, the menu item associated with the
listener's content script is shown in the menu.
...And 20 more matches
tabs - Archive of obsolete content
usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event
listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); //
listen for tab openings.
... tabs.on('open', function onopen(tab) { myopentabs.push(tab); }); //
listen for tab content loads.
... tabs.on('ready', function(tab) { console.log('tab is loaded', tab.title, tab.url); }); access tabs the module itself can be used as a
list of all opened tabs across all windows.
...And 20 more matches
NSS tools : certutil
it can specifically
list, generate, modify, or delete certificates, create or change the password, generate new public and private key pairs, display the contents of the key database, or delete key pairs within the key database.
...the command option -h will
list all the command options available and their relevant arguments.
... -h display a
list of the options and arguments used by the certificate database tool.
...And 20 more matches
nsIAccessibleRole
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 html:td, xul:tree cell and xul:
listcell.
... role_
list 33 represents a
list box, allowing the user to select one or more items.
...And 20 more matches
nsIMsgFolder
inherits from: nsisupports method overview void startfolderloading(); void endfolderloading(); void updatefolder(in nsimsgwindow awindow); nsimsgfilter
list getfilter
list(in nsimsgwindow msgwindow); void setfilter
list(in nsimsgfilter
list filter
list); void forcedbclosed(); void delete(); void deletesubfolders(in nsisupportsarray folders, in nsimsgwindow msgwindow); void propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsgwindow msgwindow); void recursivedelete(in boolean delet...
...estorage, in nsimsgwindow msgwindow); void createsubfolder(in astring foldername, in nsimsgwindow msgwindow); nsimsgfolder addsubfolder(in astring foldername); void createstorageifmissing(in nsiurl
listener url
listener); void compact(in nsiurl
listener a
listener, in nsimsgwindow amsgwindow); void compactall(in nsiurl
listener a
listener, innsimsgwindow amsgwindow,in nsisupportsarray afolderarray, in boolean acompactofflinealso,in nsisupportsarray aofflinefolderarray); void compactallofflinestores(in nsimsgwindow amsgwindow,in nsisupportsarray aofflinefolderarray); void emptytrash(in nsimsgwindow amsgwindow, in nsiurl
listener a
listener); void rename(in astring name, in nsimsgwindow msgwindow); void renamesubfolders( in...
...gned long resultsize, out unsigned long numfolders); nsisupportsarray getallfolderswithflag(in unsigned long aflag); void getexpansionarray(in nsisupportsarray expansionarray); acstring geturiformsg(in nsimsgdbhdr msghdr); void deletemessages(in nsisupportsarray messages,in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservice
listener
listener, in boolean allowundo); void copymessages(in nsimsgfolder srcfolder, in nsisupportsarray messages,in boolean ismove, in nsimsgwindow msgwindow,in nsimsgcopyservice
listener
listener, in boolean isfolder, in boolean allowundo); void copyfolder(in nsimsgfolder srcfolder, in boolean ismovefolder,in nsimsgwindow msgwindow, in nsimsgcopyservice
listener
listener ); ...
...And 20 more matches
Border-image generator - CSS: Cascading Style Sheets
; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown
list */ .ui-dropdown-
list { width: 100%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 3px solid #3490d2; border-color: #208b20; background: #666; background-color: #eef1f5; color: #000; position: absolute; top: 2em; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: bo...
...rder-box; } .ui-dropdown-
list:hover { overflow: auto; } .ui-dropdown-
list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-
list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-
list { left: 100%; top: 0; } .ui-dropdown-
list > div { width: 100%; height: 1.6em; margin: 0.3em 0; padding: 0.3em; line-height: 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-
list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /*************************************************************************************/ /**********************************************************************************...
...: 1; } #controls .property .ui-dropdown { margin: 0 10px; float: left; } #controls .property .ui-checkbox { margin: 0 0 0 16px; float: left; } #controls .property .ui-checkbox label { height: 0.85em; width: 10px; } /* dropdowns */ #controls .ui-dropdown { width: 50px; height: 1.7em; border-radius: 2px; } #controls .ui-dropdown-select { line-height: 1.6em; } #controls .ui-dropdown-
list { top: 20px; } #controls .ui-dropdown-
list { border-width: 1px; text-align: center; } #controls .ui-dropdown-
list:hover { overflow: hidden; } #controls .border-repeat { margin: 0 0 0 16px !important; width: 80px; } #controls .border-repeat .ui-dropdown-
list { height: 6.2em; border-width: 1px; text-align: center; } /* border-image-slice */ #border-slice-control .ui-dropdown-
list { ...
...And 20 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
this section provides a table
listing all the attributes with a brief description.
... this table is followed by a
list describing each attribute in greater detail, along with which input types they are associated with.those that are common to most or all input types are defined in greater detail below.
... form data set encoding type to use for form submission formmethod image, submit http method to use for form submission formnovalidate image, submit bypass form control validation for form submission formtarget image, submit browsing context for form submission height image same as height attribute for <img>; vertical dimension
list almost all value of the id attribute of the <data
list> of autocomplete options max numeric types maximum value maxlength password, search, tel, text, url maximum length (number of characters) of value min numeric types minimum value minlength password, search, tel, text, url minimum length (number of characters) of value m...
...And 20 more matches
SVG documentation index - SVG: Scalable Vector Graphics
this article
lists these types along with their syntax and descriptions of what they're used for.
... 8 other resources reference, svg here is a
list of additional resources on svg: 9 project svg no summary!
... 79 font-family svg, svg attribute the font-family attribute indicates which font family will be used to render the text, specified as a prioritized
list of font family names and/or generic family names.
...And 20 more matches
Elements - Archive of obsolete content
be like: <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml" xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg = "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> binding <!entity % binding-content "(resources?,content?,implementation?,handlers?)"> <!element binding %binding-content;> <!att
list binding id id #required extends cdata #implied display cdata #implied inheritstyle true #implied > the binding element describes a single xbl binding.
... content <!element content any> <!att
list content id id #implied > a binding can specify new content that is placed inside the bound element.
... children <!element children empty> <!att
list children id id #implied includes cdata #implied > specifies the location where any child elements of the bound element are placed in the generated content.
...And 19 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
it is used to create a textbox with a popup containing a
list of possible completions for what the user has started to type.
... autocompletesearch new in thunderbird 2requires seamonkey 1.1 type: space-separated
list of values a space-separated
list of search component names, each of which implements the nsiautocompletesearch interface.
... the components are created using the name @mozilla.org/autocomplete/search;1?name= where name is
listed in this attribute.
...And 19 more matches
nsIWindowMediator
implemented by: @mozilla.org/appshell/window-mediator;1 as a service: var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); method overview void add
listener(in nsiwindowmediator
listener a
listener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only!
... void remove
listener(in nsiwindowmediator
listener a
listener); void setzlevel(in nsixulwindow awindow, in pruint32 azlevel); native code only!
... methods add
listener() register a
listener for window status changes.
...And 12 more matches
Index
the account provisioner gives the user the chance to search for and order a vanity email account from a
list of partner providers.
... 4 account interfaces code snippets, extension development, thunderbird this page contains a
list of the interfaces that you'll will most likely use when writing extensions that work with email or other accounts.
... 7 address book interfaces mailnews, mozilla, seamonkey, thunderbird this page contains a
list of the interfaces that you'll will most likely hit when writing patches for the address book or writing extensions.
...And 12 more matches
Recommended Drag Types - Web APIs
dragging links dragged hyperlinks should include data of two types: text/uri-
list, and text/plain.
...for example: var dt = event.datatransfer; dt.setdata("text/uri-
list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); as usual, set the text/plain type last, as a fallback for the text/uri-
list type.
... note: the url type is uri-
list with an i, not an l.
...And 12 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
the :is() css pseudo-class function takes a selector
list as its argument, and selects any element that can be selected by one of the selectors in that
list.
... (it is not possible to group selectors into single rule, because presence of invalid selector would invalidate whole rule.) */ :-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } syntax :is( <complex-selector-
list> )where <complex-selector-
list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>?
...'='<attr-modifier> = i | s examples cross-browser example <header> <p>this is my header paragraph</p> </header> <main> <ul> <li><p>this is my first</p><p>
list item</p></li> <li><p>this is my second</p><p>
list item</p></li> </ul> </main> <footer> <p>this is my footer paragraph</p> </footer> :-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } :is(header, main, foo...
...And 12 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
we will look at an example using grid-template-areas, a typical 12-column flexible grid system, and also a product
listing using auto-placement.
... * {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul {
list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> ...
... * {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul {
list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"><h1>main a...
...And 12 more matches
MIME types (IANA media types) - HTTP
the internet assigned numbers authority (iana) is responsible for all official mime types, and you can find the most up-to-date and complete
list at their media types page.
... discrete types the discrete types currently registered with the iana are: application
list at iana any kind of binary data that doesn't fall explicitly into one of the other types; either data that will be executed or interpreted in some way or binary data that requires a specific application or category of application to use.
... audio
list at iana audio or music data.
...And 12 more matches
Filtering - Archive of obsolete content
for example, you wish the user to be able to select a value from a
list, and the template results should be filtered based on that value.
... if (!triple) { triple = document.createelement("triple"); triple.id = "filtertriple"; triple.setattribute("subject", "?photo"); triple.setattribute("predicate", "http://www.xulplanet.com/rdf/country"); } triple.setattribute("object", country); cond.appendchild(triple); } else if (triple) { cond.removechild(triple); } document.getelementbyid("photos
list").builder.rebuild(); } the 'country' argument to the applyfilter function holds the value to filter by.
...a menu
list is used to allow one to select either a specific country, or select all to show all of the photos.
...And 11 more matches
tabbrowser - Archive of obsolete content
roup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogress
listener, addtab, addtabsprogress
listener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, reloadwithfl...
...ags, removealltabsbut, removecurrenttab, removeprogress
listener, removetab, removetabsprogress
listener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
... properties browsers type: node
list of browser elements holds a
list of the browser elements inside the tabbrowser.
...And 11 more matches
Looping code - Learn web development
s.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } btn.addevent
listener('click',draw); </script> </body> </html> you don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles: for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } random(x), defined earlier in the c...
...: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addevent
listener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = 'cont...
...="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> <script> const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addevent
listener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } e...
...And 11 more matches
Client-side storage - Learn web development
eryselector('.forget'); const form = document.queryselector('form'); const nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = document.queryselector('h1'); const personalgreeting = document.queryselector('.personal-greeting'); next up, we need to include a small event
listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want.
... add this snippet below your previous code: // stop the form from submitting when a button is pressed form.addevent
listener('submit', function(e) { e.preventdefault(); }); now we need to add an event
listener, the handler function of which will run when the "say hello" button is clicked.
...add this to the bottom of your code: // run function when the 'say hello' button is clicked submitbtn.addevent
listener('click', function() { // store the entered name in web storage localstorage.setitem('name', nameinput.value); // run namedisplaycheck() to sort out displaying the // personalized greetings and updating the form display namedisplaycheck(); }); at this point we also need an event handler to run a function when the "forget" button is clicked — this is only displayed after the "...
...And 11 more matches
Arrays - Learn web development
previous overview: first steps next in the final article of this module, we'll look at arrays — a neat way of storing a
list of data items under a single variable name.
... arrays are generally described as "
list-like objects"; they are basically 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.
...And 11 more matches
Server-side web frameworks - Learn web development
we then explain some of the criteria you can use for choosing a web framework, and then
list some of your options.
... @app.route("/") def hello(): return "hello world!" while django expects developers to define a
list of url mappings between a url pattern and a view function.
...the field definitions may also specify their maximum size, default values, selection
list options, help text for documentation, label text for forms etc.
...And 11 more matches
Accessibility in React - Learn web development
and they can filter their task
list by all, active, or completed tasks.
...this array is a
list of values useeffect() should depend on.
... focusing when the user deletes a task there's one last keyboard experience gap: when a user deletes a task from the
list, the focus vanishes.
...And 11 more matches
Componentizing our React app - Learn web development
objective: to show a sensible way of breaking our todo
list app into components.
...let's take the second bullet point as inspiration and make a component out of the most reused, most important piece of the ui: a todo
list item.
...go back to src/app.js, copy the first <li> from inside the unordered
list, and paste it into todo.js so that it reads like this: export default function todo() { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" ...
...And 11 more matches
Mozilla accessibility architecture
for example, they all expose an accessible name, or text representation, of each object, and they all use an enumerated integer value from a finite
list, to expose the role of an object.
... examples of accessible role constants are role_button, role_checkbox and role_
list, although they can have slightly different names and values in each api.
... nshtmlcomboboxaccessible: an html combo box doesn't have a dom node or anonymous content for its s textfield, button or
list.
...And 11 more matches
JavaScript modules - JavaScript
createreport
list() — creates an unordered
list appended inside a specified wrapper element, which can be used to output report data into.
... returns the
list's id.
... reportarea() — writes a square's area to a specific report
list, given its length.
...And 9 more matches
port - Archive of obsolete content
from the content script to the main add-on code: // content-script.js var mymessagepayload = "some data"; self.port.emit("mymessage", mymessagepayload); from the main add-on code to the content script: // main.js var mymessagepayload = "some data"; worker.port.emit("mymessage", mymessagepayload); on() the port.on() function registers a function as a
listener for a particular message sent from the other side using port.emit().
... in a content script, to
listen for "mymessage" sent from the main add-on code: // content-script.js self.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); in the main add-on code, to
listen for "mymessage" sent from a a content script: // main.js worker.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); once() often you'll want to receive a message just once, then stop
listening.
... this example rewrites the content script in the port.remove
listener() example so that it uses once(): // content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); } self.port.once("get-first-para", getfirstparagraph); remove
listener() you can use port.on() to
listen for messages.
...And 8 more matches
windows - Archive of obsolete content
enumerate and examine open browser windows, open new windows, and
listen for window events.
...with this module, you can: enumerate the currently opened browser windows open new browser windows
listen for common window events such as open and close private windows if your add-on has not opted into private browsing, then you won't see any private browser windows.
...windows.open("http://www.example.com"); // open a new window and set a
listener for "open" event.
...And 8 more matches
dev/panel - Archive of obsolete content
"my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", onready: function() { this.postmessage("message from the add-on"); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document script: // my-panel.js window.addevent
listener("message", function(event) { var content = document.getelementbyid("content"); content.textcontent = event.data; }); note that at the moment you have to pass an array of ports into postmessage, even if you don't need to use them: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/he...
...document this.postmessage("message from the add-on", [panelside]); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document: retrieve the messageport from the event, and use it to send messages to the add-on // my-panel.js window.addevent
listener("message", function(event) { // retrieve the port var toaddon = event.ports[0]; toaddon.start(); toaddon.postmessage("message from the panel document"); console.log(toaddon); }); communicating with the debugger server the firefox developer tools use a client/server protocol: a tool, such as a javascript debugger or style editor, is the client, and the program being debugged, such...
... for example, here's a main.js which sends the
listtabs message to the debugger server, and logs the response: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", setup: function(o...
...And 8 more matches
remote/parent - Archive of obsolete content
we don't yet have a full
list of all the modules that a module in the child process can't load, but the sorts of things
listed in limitations of frame scripts broadly apply.
...t argument is always the process, then the message payload process.port.once("id", (process, id) => { console.log("child process is remote:" + process.isremote); console.log("child process id:" + id); }); }); content frame manipulation this demonstrates telling every current frame to link to a specific anchor element: // remote.js const { frames } = require("sdk/remote/child"); //
listeners receive the frame the event was for as the first argument frames.port.on("changelocation", (frame, ref) => { frame.content.location += "#" + ref; }); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); frames.port.emit("changelocation", "foo"); tab information this shows sending a message when a tab loads; this is similar t...
... // remote.js const { frames } = require("sdk/remote/child"); frames.addevent
listener("pageshow", function() { // `this` is bound to the frame the event came from let frame = this; frame.port.emit("pageshow"); }, true); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); // the first argument is the frame the message came from frames.port.on("pageshow", (frame) => { console.log(frame.frameelement.currenturi.host + ": pageshow"); }); globals functions remoterequire(id, module = null) loads a module in any existing and future child processes.
...And 8 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
unfortunately, adding
listeners for any of these events to a document has a highly deleterious effect on performance, an effect which is not mitigated in the slightest by later removing those
listeners.
... for this reason, it is best to avoid using mutation
listeners at all costs, especially from extensions.
...event
listeners for those events are the preferred method for detecting dom modifications when feasible.
...And 8 more matches
XUL Events - Archive of obsolete content
the events
listeners can be attached using addevent
listener and removed using removeevent
listener.
...when attaching event
listeners using attributes, be aware that only one
listener can be attached at a time.
... any previously attached
listeners are disconnected.
...And 8 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.
...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.
...other keys are ignored by the menu key
listener, however, the event does not propagate to the main window.
...And 8 more matches
Advanced Rules - Archive of obsolete content
let's say you have a
list of cities described in the following rdf/xml fragment: <rdf:seq about="http://www.xulplanet.com/rdf/weather/cities"> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/paris"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/manchester"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/melbourne"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/cit...
...to do this, use the member element as in the following: <tree id="citiestree" datasources="weather.rdf" ref="http://www.xulplanet.com/rdf/weather/cities"> <template> <rule> <conditions> <content uri="?
list"/> <member container="?
list" child="?city"/> </conditions> <rule> <template> </tree> the template builder starts by grabbing the value of the ref attribute, which in this case is http://www.xulplanet.com/rdf/weather/cities.
... this resource will be placed in the '
list' variable as specified by the content tag.
...And 8 more matches
RDF Datasources - Archive of obsolete content
some of them are
listed here with a few examples.
...the history
list the history datasource provides access to the user's history
list which is the
list of urls the user has visited recently.
...page page http://home.netscape.com/nc-rdf#page page name referrer http://home.netscape.com/nc-rdf#referrer referrer of the page url http://home.netscape.com/nc-rdf#url url of the page visit count http://home.netscape.com/nc-rdf#visitcount number of page visits a typical history
list will display a tree with a selection of these fields.
...And 8 more matches
Trees - Archive of obsolete content
« previousnext » xul provides a way to create tabular or hierarchical
lists using a tree.
...it can be used with rows either in a flat
list or arranged into a hierarchy.
...some examples of trees include the
list of messages in a mail application, or the bookmarks window in mozilla.
...And 8 more matches
XPCOM Examples - Archive of obsolete content
creating a window menu the
list of currently open mozilla windows can be used as an rdf datasource.
... this allows you to create a window menu with a
list of the currently open windows in the application.
...we can use this as in the following example: example 1 : source <toolbox> <menubar id="window
list-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.
...And 8 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
found 528 pages: # page tags and summary 1 mdn web docs glossary: definitions of web-related terms beginner, definitions, dictionary, glossary, index, landing, terminology web technologies contain long
lists of jargon and abbreviations that are used in documentation and coding.
... 40 breadcrumb accessibility, glossary, navigation, search, site map, breadcrumb a breadcrumb, or breadcrumb trail, is a navigational aid that is typically placed between a site's header and the main content, displaying either a hierarchy of the current page in relation to the the site's structure, from top level to current page, or a
list of the links the user followed to get to the current page, in the order visited.
... 49 cors-safe
listed request header cors, fetch a cors-safe
listed request header is one of the following http headers: 50 cors-safe
listed response header cors, fetch, glossary, http a cors-safe
listed response header is an http header which has been safe
listed so that it will not be filtered when responses are processed by cors, since they're considered safe (as the headers
listed in a...
...And 8 more matches
Fundamental text and font styling - Learn web development
but it was a rare occasion such as this that he did.</p> font families to set a different font on your text, you use the font-family property — this allows you to specify a font (or
list of fonts) for the browser to apply to the selected elements.
... the
list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the microsoft core fonts for the web initiative in the late 90s and early 2000s): name generic type notes arial sans-serif it's often considered best practice to also add he...
... verdana sans-serif note: among various resources, the cssfontstack.com website maintains a
list of web safe fonts available on windows and macos operating systems, which can help you make your decision about what you consider safe for your usage.
...And 8 more matches
Making decisions in your code — conditionals - Learn web development
elect the weather type today: </label> <select id="weather"> <option value="">--make a choice--</option> <option value="sunny">sunny</option> <option value="rainy">rainy</option> <option value="snowing">snowing</option> <option value="overcast">overcast</option> </select> <p></p> const select = document.queryselector('select'); const para = document.queryselector('p'); select.addevent
listener('change', setweather); function setweather() { const choice = select.value; if (choice === 'sunny') { para.textcontent = 'it is nice and sunny outside today.
... in the javascript, we are storing a reference to both the <select> and <p> elements, and adding an event
listener to the <select> element so that when its value is changed, the setweather() function is run.
...e following example executes the code inside only if both or statements return true, meaning that the overall and statement will return true: if ((x === 5 || y > 3 || z <= 10) && (loggedin || username === 'steve')) { // run the code } a common mistake when using the logical or operator in conditional statements is to try to state the variable whose value you are checking once, and then give a
list of values it could be to return true, separated by || (or) operators.
...And 8 more matches
TypeScript support in Svelte - Learn web development
note: remember that you can run npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo-typescript to get the complete to-do
list application in javascript before you start porting it to typescript.
... porting our to-do
list app to typescript now we are ready to start porting our to-
list application to take advantage of all the features that typescript offers to us.
... 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.
...And 8 more matches
source-editor.jsm
method overview initialization and destruction void destroy(); void init(element aelement, object aconfig, function acallback); search operations number find(string astring, [optional] object options); number findnext(boolean awrap); number findprevious(boolean awrap); event management void addevent
listener(string aeventtype, function acallback); void removeevent
listener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations ...
...otationruler false sourceeditor.defaults.showlinenumbers false sourceeditor.defaults.showoverviewruler false sourceeditor.defaults.tabsize 4 sourceeditor.defaults.theme sourceeditor.themes.mozilla sourceeditor.defaults.undolimit 200 event name constants these constants provide the names of the editor events for which you can
listen.
... addevent
listener() adds a new event
listener to the editor.
...And 8 more matches
Mozilla DOM Hacking Guide
"what do you want to code today?" ;-) all the dom classes are
listed in an enum defined in nsidomclassinfo.h, nsdomclassinfoid.
..."interface flattening is the ability to call methods on an object regardless of the interface it was defined on." for example, when we have the document object in javascript, we can call indistinctly document.getelementbyid(), or document.addevent
listener(), although they are defined on two different interfaces (domdocument and domeventtarget.
...there we have a long
list of macros.
...And 8 more matches
NSS tools : crlutil
name crlutil —
list, generate, modify, or delete crls within the nss security database file(s) and
list, create, modify or delete certificates entries in a particular crl.
...please contribute to the initial review in mozilla nss bug 836477[1] description the certificate revocation
list (crl) management tool, crlutil, is a command-line utility that can
list, generate, modify, or delete crls within the nss security database file(s) and
list, create, modify or delete certificates entries in a particular crl.
... this document discusses certificate revocation
list management.
...And 8 more matches
NSS Tools crlutil
using the certificate revocation
list management tool newsgroup: mozilla.dev.tech.crypto the certificate revocation
list (crl) management tool is a command-line utility that can
list, generate, modify, or delete crls within the nss security database file(s) and
list, create, modify or delete certificates entries in a particular crl.
... this document discusses certificate revocation
list management.
... syntax to run the certificate revocation
list management tool, type the command crlutil option [arguments] where options and arguments are combinations of the options and arguments
listed in the following section.
...And 8 more matches
Using XPCOM Utilities to Make Things Easier
to write a different component library, you could copy the
listing at the end of the chapter, change very little, and paste it into a new project.
...to get an idea about how much can be handled with the macros described in this section, compare the code
listing in weblock2.cpp at the end of the chapter with weblock1.cpp in the previous chapter.
...xpcom module macros
lists the macros discussed in this section.
...And 8 more matches
nsIDeviceMotion
method overview void add
listener(in nsidevicemotion
listener a
listener); void addwindow
listener(in nsidomwindow awindow); native code only!
... void remove
listener(in nsidevicemotion
listener a
listener); void removewindow
listener(in nsidomwindow awindow); native code only!
... methods add
listener() when called, the accelerometer support implementation must begin to notify the specified nsidevicemotion
listener by calling its nsidevicemotion
listener.onaccelerationchange() method as appropriate to share updated acceleration data.
...And 8 more matches
Accessibility Inspector - Firefox Developer Tools
if you do this, the ways
listed above for activating the accessibility inspector do nothing.
...each item has two properties
listed: role — the role this item has on the page (e.g., pushbutton, or footer).
...the
listed properties are as follows: name — the item's name, as described above.
...And 8 more matches
DevTools API - Firefox Developer Tools
window.document.body.addevent
listener("click", this.handleclick); } mypanel.prototype = { open: function() { // any asynchronous operations should be done here.
... this.window.document.body.removeevent
listener("click", this.handleclick); // async destruction.
... when an event is emitted on the eventemitter, the
listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.
...And 8 more matches
Web Console remoting - Firefox Developer Tools
the web console is split between a client with its user interface, and the server which has
listeners for all the things that happen in the tab.
... the new web console actors are: the webconsoleactor allows js evaluation, autocomplete, start/stop
listeners, etc.
... to attach to the webconsoleactor, follow these steps: connecttoserver() // the usual
listtabs() pickthetabyouwant() debuggerclient.attachconsole(tab.consoleactor,
listeners, onattachconsole) the
listeners argument is an array which specifies
listeners you want to start in the web console.
...And 8 more matches
CSSStyleSheet - Web APIs
the cssstylesheet interface represents a single css stylesheet, and lets you inspect and modify the
list of rules contained in the stylesheet.
...the rules are contained in a cssrule
list, which can be obtained from the stylesheet's cssrules property.
... cssrules read only returns a live cssrule
list which maintains an up-to-date
list of the cssrule objects that comprise the stylesheet.
...And 8 more matches
Timing element visibility with the Intersection Observer API - Web APIs
below that, we define the site's sidebar as a
list of links within an <aside> block.
...the sidebar is represented using an <aside> element, and is styled as follows: aside { grid-column: 1; grid-row: 2; background-color: cornsilk; padding: 5px 10px; } aside ul { padding-left: 0; } aside ul li {
list-style: none; } aside ul li a { text-decoration: none; } the most important thing to note here is that the grid-column is set to 1, to place the sidebar on the left-hand side of the screen.
... previouslyvisibleads used to temporarily store the
list of visible ads while the document is not visible (for example, if the user has tabbed to another page).
...And 8 more matches
system - CSS: Cascading Style Sheets
cyclic cycles through the
list of symbols provided.
... once the end of the
list of symbols is reached, it will loop back to the beginning and start over.
... symbolic cycles through the provided
list of symbols.
...And 8 more matches
Box-shadow generator - CSS: Cascading Style Sheets
-pointer'; node.appendchild(pointer); this.pointer = pointer; setmousetracking(node, updateslider.bind(this)); sliders[topic] = this; setvalue(topic, this.value); } var setbuttoncomponent = function setbuttoncomponent(node) { var type = node.getattribute('data-type'); var topic = node.getattribute('data-topic'); if (type === "sub") { node.textcontent = '-'; node.addevent
listener("click", function() { decrement(topic); }); } if (type === "add") { node.textcontent = '+'; node.addevent
listener("click", function() { increment(topic); }); } } var setinputcomponent = function setinputcomponent(node) { var topic = node.getattribute('data-topic'); var unit_type = node.getattribute('data-unit'); var input = document.createelement('input');...
... var unit = document.createelement('span'); unit.textcontent = unit_type; input.setattribute('type', 'text'); node.appendchild(input); node.appendchild(unit); input.addevent
listener('click', function(e) { this.select(); }); input.addevent
listener('change', function(e) { setvalue(topic, e.target.value | 0); }); subscribe(topic, function(value) { node.children[0].value = value; }); } var increment = function increment(topic) { var slider = sliders[topic]; if (slider === null || slider === undefined) return; if (slider.value + slider.step <= slider.max) { slider.value += slider.step; setvalue(slider.topic, slider.value) notify.call(slider); } }; var decrement = function decrement(topic) { var slider = sliders[topic]; if (slider ===...
...a = slider.max - slider.min; var width = slider.node.clientwidth; var offset = slider.pointer.clientwidth; var pos = (value - slider.min) * width / delta; slider.value = value; slider.pointer.style.left = pos - offset / 2 + "px"; slider.node.setattribute('data-value', value); notify.call(slider); } var setmousetracking = function setmousetracking(elem, callback) { elem.addevent
listener("mousedown", function(e) { callback(e); document.addevent
listener("mousemove", callback); }); document.addevent
listener("mouseup", function(e) { document.removeevent
listener("mousemove", callback); }); } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); } var unsu...
...And 8 more matches
shape-outside - CSS: Cascading Style Sheets
,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the
list below, which define the float area for float elements.
...the values in the shape functions interpolate as a simple
list.
... the
list values interpolate as <length>, <percentage>, or calc() where possible.
...And 8 more matches
What is JavaScript? - Learn web development
uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addevent
listener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
...for example, let's return to the block of javascript we saw in our first example: const para = document.queryselector('p'); para.addevent
listener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } here we are selecting a text paragraph (line 1), then attaching an event
listener to it (line 3) so that when the paragraph is clicked, the updatename() code block (lines 5–8) is run.
...this means that the para object does not exist yet, so we can't add an event
listener to it.
...And 7 more matches
Ember app structure and componentization - Learn web development
the rendered output should now look like this: it doesn't take too much effort to get our html looking like a fully-featured to-do
list app.
...bs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-
list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus c...
... looking at the code next to the rendered todo app, there are a number of ways we could decide how to break up the ui, but let's plan on splitting the html out into the following components: the component groupings are as follows: the main input / "new-todo" (red in the image) the containing body of the todo
list + the mark-all-complete button (purple in the image) the mark-all-complete button, explicitly highlighted for reasons given below (yellow in the image) each todo is an individual component (green in the image) the footer (blue in the image) something odd to note is that the mark-all-complete checkbox (marked in yellow), while in the "main" section, is rendered next to the "new-to...
...And 7 more matches
Adding a new CSS property
once you know which struct you're going to use (or that the property is a shorthand), you can add appropriate entry to nscssprop
list.h.
... every property in nscssprop
list.h must have in its flags field exactly one of the four css_property_parse_* flags defined in nscssprops.h.
... if the property's values can be expressed as a single value, or as a space-separated or comma-separated
list of values that can be described by the variant_* flags (also in nscssprops.h), you should use css_property_parse_value or css_property_parse_value_
list, and set the appropriate variant_* flags in the entry in nscssprop
list.h (and maybe also css_property_value_
list_uses_commas).
...And 7 more matches
Performance
do some work on the window } function dosomething(message) { result = helper(content, message.data) sendasyncmessage("my-addon:response-from-child", {something: result}) } addmessage
listener("my-addon:request-from-parent", dosomething) why is this bad?
...do some work on the window } function dosomething(message) { frameglobal = message.target result = helper(frameglobal.content, message.data) frameglobal.sendasyncmessage("my-addon:response-from-child", {something: result}) } function addframe(frameglobal) { frameglobal.addmessage
listener("my-addon:request-from-parent", dosomething) } javascript modules are per-process singletons and thus all their objects are only initialized once, which makes them suitable for stateless callbacks.
... store heavyweight state once per process bad: // addon.js var main = new myaddonservice(); main.onchange(statechange); function statechange() { services.mm.broadcastasyncmessage("my-addon:update-configuration", {newconfig: main.serialize()}) } // framescript.js var maincopy; function onupdate(message) { maincopy = myaddonservice.deserialize(message.data.newconfig); } addmessage
listener("my-addon:update-configuration", onupdate) // maincopy used by other functions the main issue here is that a separate object is kept for each tab.
...And 7 more matches
Storage access policy: Block cookies from trackers
firefox uses the tracking protection
list to determine which resources are tracking resources.
... the tracking protection
list is maintained by disconnect.
... when the
list is applied in firefox, we make two important changes: first, we only use the "basic protection" version of the
list, which excludes some categories of trackers.
...And 7 more matches
TPS Tests
ute: python create_venv.py --keep-config %path% activate the environment source %path%/bin/activate run some tests note that the testfile is not a path, it should only be the filename from services/sync/tests/tps/ runtps --debug --testfile %test_file_name% --binary %firefox_binary_path% additionally, omitting a --testfile parameter will cause it to run all tps tests
listed in services/sync/tests/tps/all_tests.json an example on osx, for running just the test_sync.js testfile against a locally built firefox (where the mozconfig set the objdir to obj-ff-artifact): runtps --debug --testfile test_sync.js --binary obj-ff-artifact/dist/nightly.app/contents/macos/firefox running tps against stage, or dev fxa tps can be configured using the $tps_venv_p...
... data definitions/asset
list (optional, but all current tests have them).
... asset
lists a test file will contain one or more asset
lists, which are
lists of bookmarks, passwords, or other types of browser data that are relevant to sync.
...And 7 more matches
XForms Accessibility
xforms elements behavior is implemented in accordance with accessible toolkit check
list.
...or you may be guided by toolkit check
list to check keyboard navigation for xforms controls.
...this section
lists accessible presentations for form control elements.
...And 7 more matches
nsIChannel
method overview void asyncopen(in nsistream
listener a
listener, in nsisupports acontext); nsiinputstream open(); attributes attribute type description contentcharset acstring the character set of the channel's content if available and if applicable.
...this means that: the stream
listener this channel will be notifying was initially passed to the asyncopen() method of some other channel this channel's uri is a better identifier of the resource being accessed than this channel's originaluri.
...data is fed to the specified stream
listener as it becomes available.
...And 7 more matches
nsIDOMWindowUtils
nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void garbagecollect([optional] in nsicyclecollector
listener a
listener); short getcursortype(); astring getdocumentmetadata(in astring aname); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); astring getpccountscriptsummary(in long ascript); astring getpccountscriptcontents(in long ascript); void getscrollxy(in boolean aflush...
...layout, out long ascrollx, out long ascrolly); astring getvisiteddependentcomputedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnode
list nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext at...
... void garbagecollect( in nsicyclecollector
listener a
listener optional ); parameters a
listener optional
listener that receives information about the cc graph (see @mozilla.org/cycle-collector-logger;1 for a logger component) getcursortype() get current cursor type from this window.
...And 7 more matches
nsISHistory
to create an instance, use: var shistory = components.classes["@mozilla.org/browser/shistory;1"] .createinstance(components.interfaces.nsishistory); method overview void addshistory
listener(in nsishistory
listener a
listener); nsishentry getentryatindex(in long index, in boolean modifyindex); void purgehistory(in long numentries); void reloadcurrententry(); void removeshistory
listener(in nsishistory
listener a
listener); attributes attribute type description count long the number of toplevel documents currently...
... use nsisimpleenumerator.getnext() on the object returned by step #1 to obtain handle to the next object in the
list.
... methods addshistory
listener() called to register a
listener for the session history component.
...And 7 more matches
nsISessionStore
getclosedtabdata() returns a
list of closed tabs for a specified window.
... astring getclosedtabdata( in nsidomwindow awindow ); parameters awindow the browser window whose closed tab
list is to be retrieved.
... return value a json string representing the
list of closed tabs for the window specified by awindow.
...And 7 more matches
Creating a gloda message query
create a collection from the query your
listener is notified as messages are added to the collection as the database query completes.
... let my
listener = { /* called when new items are returned by the database query or freshly indexed */ onitemsadded: function my
listener_onitemsadded(aitems, acollection) { }, /* called when items that are already in our collection get re-indexed */ onitemsmodified: function my
listener_onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purged from the system */ onitemsremoved: function my
listener_onitemsremoved(aitems, acollection) { }, /* called when our database query completes */ onquerycompleted: function my
listener_onquerycompleted(acollection) { } }; let collection = query.getcollection(my
listener); message attributes look at t...
... the max number of messages which are returned is governed by a preference: "mailnews.database.global.search.msg.limit" although you can deal with the messages as they show up via the
listener, the
list of messages in the collection is available in collection.items.
...And 7 more matches
BaseAudioContext.createPanner() - Web APIs
the panner node is spatialized in relation to the audiocontext's audio
listener (defined by the audiocontext.
listener attribute), which represents the position and orientation of the person
listening to the audio.
... example in the following example, you can see an example of how the createpanner() method, audio
listener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio
listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 7 more matches
HTMLInputElement - Web APIs
it is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a <data
list> ancestor; its disabled property is true.
... properties that apply only to elements of type file accept string: returns / sets the element's accept attribute, containing comma-separated
list of file types accepted by the server when type is file.
... allowdirs boolean: part of the non-standard directory upload api; indicates whether or not to allow directories and files both to be selected in the file
list.
...And 7 more matches
PannerNode.distanceModel - Web APIs
the distancemodel property of the pannernode interface is an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the
listener.
... example in the following example, you can see an example of how the createpanner() method, audio
listener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio
listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 7 more matches
nsIMsgIncomingServer
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void clearallvalues(); void cleartemporaryreturnreceiptsfilter(); void closecachedconnections(); void configuretemporaryfilters(in nsimsgfilter
list filter
list); void configuretemporaryreturnreceiptsfilter(in nsimsgfilter
list filter
list); obsolete since gecko 1.8 void displayofflinemsg(in nsimsgwindow awindow); boolean equals(in nsimsgincomingserver server); void forgetpassword(); void forgetsessionpassword(); astring generateprettynameformigration(); boolean getboolattribute(in string name); boolean getboolvalue(in string at...
...tr); acstring getcharattribute(in string name); acstring getcharvalue(in string attr); nsilocalfile getfilevalue(in string relpref, in string abspref); nsimsgfilter
list getfilter
list(in nsimsgwindow amsgwindow); long getintattribute(in string name); long getintvalue(in string attr); nsimsgfolder getmsgfolderfromuri(in nsimsgfolder afolderresource, in acstring auri); void getnewmessages(in nsimsgfolder afolder, in nsimsgwindow amsgwindow, in nsiurl
listener aurl
listener); acstring getpasswordwithui(in astring apromptstring, in astring aprompttitle, in nsimsgwindow amsgwindow, out boolean okayvalue); astring getunicharattribute(in string name); astring getunicharvalue(in string attr); boolean isnewhdrduplicate(in nsimsgdbhdr anewhdr); void onuserorhostnamechanged(in ac...
...iles(); void setboolattribute(in string name, in boolean value); void setboolvalue(in string attr, in boolean value); void setcharattribute(in string name, in acstring value); void setcharvalue(in string attr, in acstring value); void setdefaultlocalpath(in nsilocalfile adefaultlocalpath); void setfilevalue(in string relpref, in string abspref, in nsilocalfile avalue); void setfilter
list(in nsimsgfilter
list afilter
list); void setintattribute(in string name, in long value); void setintvalue(in string attr, in long value); void setunicharattribute(in string name, in astring value); void setunicharvalue(in string attr, in astring value); void shutdown(); void storepassword(); astring tostring(); void writetofoldercache(in nsimsgfoldercache foldercache); attributes...
...And 6 more matches
nsIServerSocket
void close(); void async
listen(in nsiserversocket
listener a
listener); prnetaddr getaddress();native code only!
... methods async
listen() this method puts the server socket in the
listening state.
... it will asynchronously
listen for and accept client connections.
...And 6 more matches
nsISyncMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessage
listenermanager message "senders" have a single "other side" to which messages are sent.
...jsval objects, [optional] in nsiprincipal principal); jsval sendrpcmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects, [optional] in nsiprincipal principal); sendsyncmessage() like sendasyncmessage(), except blocks the sender until all
listeners of the message have been invoked.
... returns an array containing return values from each
listener invoked.
...And 6 more matches
Demo Addon
it
lists all your email accounts with their account type - either pop3 or imap - and the associated email addresses.
... demo 2 - find the inbox this demo shows various information: it
lists all folders of an account (in this case the first one) and marks the inbox folder with a *.
... furthermore, it shows some messages in the inbox and
lists a random attachment.
...And 6 more matches
Blocking By Domain - Plugins
according to the firefox plugin roadmap, the plugin block
list is planned for firefox 55.
... there are two versions of plugin blocking: first-party plugin blocking
list sites on this
list may not use plugins.
... third-party plugin block
list sites on this
list may not use plugins when they are loaded into a third-party iframe in another site.
...And 6 more matches
about:debugging - Firefox Developer Tools
above the usual
list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via usb, to firefox preview, on a pixel 2, as well as the title of the page that you are debugging, and the address of the page.
...when you do, it is added to the network locations
list along with the devices, as shown below: this firefox the this firefox tab combines the features of extensions, tabs, and workers into a single tab with the following sections: temporary extensions displays a
list of the extensions that you have loaded using the load temporary add-on button.
... extensions this section
lists information about the extensions that you have installed on your system.
...And 6 more matches
Using the CSS Typed Object Model - Web APIs
we start with some html: a paragraph with a link, as well as a definition
list to which we will add all the css property / value pairs.
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add javascript to grab our unstyled link and return back a definition
list of all the default css property values impacting the link using computedstylemap().
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styles
list = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const defaultcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of defaultcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styles
list.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styles
list.appendchild(cssvalue); } the computedstylemap() method returns a stylepropertymapreadonly ob...
...And 6 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
the first element of the
list is located at position [0] in the array.
... html <body> <input type="button" value="set paragraph background color" onclick="set_background()"> <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 one item, which we retrieve by selecting the first element in that
list using [0].
...And 6 more matches
Element.querySelectorAll() - Web APIs
the element method queryselectorall() returns a static (not live) node
list representing a
list of elements matching the specified group of selectors which are descendants of the element on which the method was called.
... syntax element
list = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to match against.
... return value a non-live node
list containing one element object for each descendant node that matches at least one of the specified selectors.
...And 6 more matches
Using the Frame Timing API - Web APIs
function create_frame_observer() { if (window.performanceobserver === undefined) return; // register the performance observer var observe_frame = new performanceobserver(function(
list) { // log the frame entries var perfentries =
list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #1: [" + i + "] = " + perfentries[i].name); } }); // only observe 'frame' events observe_frame.observe({entrytypes: ['frame']}); } function init () { create_frame_observer(); var obs = new performanceobserver(frame_observer_2...
...); obs.observe({entrytypes: ['frame']}); } function frame_observer_2(
list) { // log the frame entries var perfentries =
list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #2: [" + i + "] = " + perfentries[i].name); } } <body onload="init(event)"> when the browser adds a new "frame" entry to the performance timeline, both of the observer callbacks will be invoked.
... var observe_frame = new performanceobserver(function(
list) { // process the frame ...
...And 6 more matches
HTMLMediaElement.textTracks - Web APIs
the read-only texttracks property on htmlmediaelement objects returns a texttrack
list object
listing all of the texttrack objects representing the media element's text tracks, in the same order as in the
list of text tracks.
...instead, they're sent to the track
list object of the htmlmediaelement that corresponds to the type of track that was added to the element the returned
list is live; that is, as tracks are added to and removed from the media element, the
list's contents change dynamically.
... once you have a reference to the
list, you can monitor it for changes to detect when new text tracks are added or existing ones removed.
...And 6 more matches
The HTML DOM API - Web APIs
access to
lists of elements in the document's <head> block and body, as well as
lists of the images, links, scripts, etc.
... htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmld
listelement htmldataelement htmldata
listelement htmldetailselement htmldialogelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement...
... htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlo
listelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlu
listelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefon...
...And 6 more matches
Dragging and Dropping Multiple Items - Web APIs
this processing does not use the datatransferitem interface nor the datatransferitem
list interface.
...for example: var dt = event.datatransfer; dt.mozsetdataat("text/uri-
list", "url1", 0); dt.mozsetdataat("text/plain", "url1", 0); dt.mozsetdataat("text/uri-
list", "url2", 1); dt.mozsetdataat("text/plain", "url2", 1); dt.mozsetdataat("text/uri-
list", "url3", 2); dt.mozsetdataat("text/plain", "url3", 2); // [item1] data=url1, index=0 // [item2] data=url2, index=1 // [item3] data=url3, index=2 after you added three items in two different formats, dt.mozclearda...
...taat("text/uri-
list", 1); dt.mozcleardataat("text/plain", 1); you've removed the second item clearing all types, then the old third item becomes new second item, and its index decreases.
...And 6 more matches
HTML Drag and Drop API - Web APIs
interfaces the html drag and drop interfaces are dragevent, datatransfer, datatransferitem and datatransferitem
list.
...(firefox supports some gecko-specific extensions to the datatransfer object, but those extensions will only work on firefox.) each datatransfer object contains an items property, which is a
list of datatransferitem objects.
... the datatransferitem
list object is a
list of datatransferitem objects.
...And 6 more matches
Checking when a deadline is due - Web APIs
the main example application we will be referring to in this article is to-do
list notifications, a simple to-do
list application that stores task titles and deadline times and dates via indexeddb, and then provides users with notifications when deadline dates are reached, via the notification, and vibration apis.
... you can download the to-do
list notifications app from github and play around with the source code, or view the app running live.
... recording the date information to provide a reasonable user experience on mobile devices, and to cut down on ambiguities, i decided to create an html form with: a text input for entering a title for your to-do
list.
...And 6 more matches
SpeechRecognition - Web APIs
speechrecognition.abort() stops the speech recognition service from
listening to incoming audio, and doesn't attempt to return a speechrecognitionresult.
... speechrecognition.start() starts the speech recognition service
listening to incoming audio with intent to recognize grammars associated with the current speechrecognition.
... speechrecognition.stop() stops the speech recognition service from
listening to incoming audio, and attempts to return a speechrecognitionresult using the audio captured so far.
...And 4 more matches
TouchEvent.changedTouches - Web APIs
the changedtouches read-only property is a touch
list whose touch points (touch objects) varies depending on the event type, as follows: for the touchstart event, it is a
list of the touch points that became active with the current event.
... for the touchmove event, it is a
list of the touch points that have changed since the last event.
... for the touchend event, it is a
list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface).
...And 4 more matches
Touch events - Web APIs
touch
list represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.
... function startup() { var el = document.getelementbyid("canvas"); el.addevent
listener("touchstart", handlestart, false); el.addevent
listener("touchend", handleend, false); el.addevent
listener("touchcancel", handlecancel, false); el.addevent
listener("touchmove", handlemove, false); } document.addevent
listener("domcontentloaded", startup); this simply sets up all the event
listeners for our <canvas> element so we can handle the touch events as they occur.
...then we get the context and pull the
list of changed touch points out of the event's touchevent.changedtouches property.
...And 4 more matches
Using DTMF with WebRTC - Web APIs
initialization when the page loads, we do some basic setup: we fetch references to the dial button and the log output box elements, and we use addevent
listener() to add an event
listener to the dial button so that clicking it calls the connectanddial() function to begin the connection process.
... window.addevent
listener("load", function() { logelement = document.queryselector(".log"); dialbutton = document.queryselector("#dial"); dialbutton.addevent
listener("click", connectanddial, false); }); starting the connection process when the dial button is clicked, connectanddial() is called.
...nders) { dtmfsender = callerpc.getsenders()[0].dtmf; } else { log("your browser doesn't support rtcpeerconnection.getsenders(), so " + "falling back to use <strong>deprecated</strong> createdtmfsender() " + "instead."); dtmfsender = callerpc.createdtmfsender(audiotracks[0]); } dtmfsender.ontonechange = handletonechangeevent; } after setting audiotracks to be a
list of the audio tracks on the stream from the user's microphone, it's time to add the media to the caller's rtcpeerconnection.
...And 4 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
if you are unaware of how one sounds you can
listen to one here.
...tack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="release">release</label> <input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /> now we can create some variables over in javascript and have them change when the input values are updated: let attacktime = 0.2; const attackcontrol = document.queryselector('#attack'); attackcontrol.addevent
listener('input', function() { attacktime = number(this.value); }, false); let releasetime = 0.5; const releasecontrol = document.queryselector('#release'); releasecontrol.addevent
listener('input', function() { releasetime = number(this.value); }, false); the final playsweep() function now we can expand our playsweep() function.
... let pulsehz = 880; const hzcontrol = document.queryselector('#hz'); hzcontrol.addevent
listener('input', function() { pulsehz = number(this.value); }, false); let lfohz = 30; const lfocontrol = document.queryselector('#lfo'); lfocontrol.addevent
listener('input', function() { lfohz = number(this.value); }, false); the final playpulse() function here's the entire playpulse() function: let pulsetime = 1; function playpulse() { let osc = audioctx.createoscillator(); osc.
...And 4 more matches
window.postMessage() - Web APIs
the dispatched event otherwindow can
listen for dispatched messages by executing the following javascript: window.addevent
listener("message", receivemessage, false); function receivemessage(event) { if (event.origin !== "http://example.org:8080") return; // ...
... security concerns if you do not expect to receive messages from other sites, do not add any event
listeners for message events.
... the secret response is: rheeeeet!" } window.addevent
listener("message", receivemessage, false); /* * in the popup's scripts, running on <http://example.com>: */ // called sometime after postmessage is called function receivemessage(event) { // do we trust the sender of this message?
...And 4 more matches
ARIA: button role - Accessibility
in this case, the action is to add a new name to the
list of names.
...the button will cause the name to be added to a
list.
... html <h1>aria button example</h1> <ul id="name
list"></ul> <label for="newname">enter your name: </label> <input type="text" id="newname"> <span role="button" tabindex="0" onclick="handlecommand()" onkeydown="handlecommand()">add name</span> css [role="button"] { padding: 2px; background-color: navy; color: white; cursor: default; } [role="button"]:hover, [role="button"]:focus, [role="button"]:active { background-color: white; color: navy; } ul {
list-style: none; } javascript function handlecommand(event) { // handles both mouse clicks and keyboard // activate with enter or space // get the new name value from the input element let newnameinput = document.getelementbyid('newname'); let name = newnameinput.value; newnamein...
...And 4 more matches
ARIA: textbox role - Accessibility
for example, in a combobox, focus may remain on the textbox while the value of aria-activedescendant on the textbox element refers to a descendant of a popup
listbox that is controlled by the textbox.this attribute must be updated programmatically as the focus changes.
...
list: predicted text is presented as a collection of values.
... if
list or both is set, the aria-controls and aria-haspopup attributes should also be included.
...And 4 more matches
-webkit-box-reflect - CSS: Cascading Style Sheets
, <color-stop-
list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-
list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-
list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 4 more matches
Using CSS animations - CSS: Cascading Style Sheets
.slidein { animation-duration: 3s; animation-name: slidein; animation-iteration-count: 3; animation-direction: alternate; } @keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } adding the animation event
listeners we’ll use javascript code to
listen for all three possible animation events.
... this code configures our event
listeners; we call it when the document is first loaded in order to set things up.
... var element = document.getelementbyid("watchme"); element.addevent
listener("animationstart",
listener, false); element.addevent
listener("animationend",
listener, false); element.addevent
listener("animationiteration",
listener, false); element.classname = "slidein"; this is pretty standard code; you can get details on how it works in the documentation for eventtarget.addevent
listener().
...And 4 more matches
Border-radius generator - CSS: Cascading Style Sheets
text; -ms-user-select: text; user-select: text; float: right; } javascript content 'use strict'; /** * ui-inputslidermanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.addevent
listener('click', function(e) { this.select(); }); input.addevent
listener('change', function(e) { var value = parseint(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); subscribe(obj.topic, function(value) { input.value = value + obj.unit; }); return input; } var slidercomponent = function sliderco...
...mponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addevent
listener("click", function(e) { setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addevent
listener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addevent
listener("mousemove", slidermotion); }); document.addevent
listener("mouseup", function(e) { document.removeevent
listener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step +...
...checkbox.id = id; checkbox.setattribute('type', 'checkbox'); checkbox.checked = state; label.setattribute('for', id); if (name) { label.classname = 'text'; if (align) label.classname += ' ' + align; label.textcontent = name; } node.appendchild(checkbox); node.appendchild(label); this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addevent
listener('change', function(e) { notify.call(this); }.bind(this)); buttons[topic] = this; } var getnode = function getnode(topic) { return buttons[topic].node; } var setvalue = function setvalue(topic, value) { try { buttons[topic].checkbox.checked = value; } catch(error) { console.log(error); } } var subscribe = function subscribe(topic, callback) { if (subscribers...
...And 4 more matches
Using CSS transitions - CSS: Cascading Style Sheets
css transitions let you decide which properties to animate (by
listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g.
...as it doesn't make sense to animate some properties, the
list of animatable properties is limited to a finite set.
...only properties
listed here are animated during transitions; changes to all other properties occur instantaneously as usual.
...And 4 more matches
background-image - CSS: Cascading Style Sheets
, <color-stop-
list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-
list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-
list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 4 more matches
border-image-source - CSS: Cascading Style Sheets
, <color-stop-
list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-
list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-
list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 4 more matches
font-variant-alternates - CSS: Cascading Style Sheets
/* keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-forms; /* functional notation values */ font-variant-alternates: sty
listic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2); /* global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-va...
...riant-alternates: unset; the @font-feature-values at-rule can define names for alternative glyph functions (sty
listic, styleset, character-variant, swash, ornament or annotation), associating the name with opentype parameters.
... syntax this property may take one of two forms: either the keyword normal or one or more of the other keywords and functions
listed below, space-separated, in any order.
...And 4 more matches
Building accessible custom components in XUL - Archive of obsolete content
you can find a
list of all the supported roles in firefox 1.5 on mozilla.org.
...<code> var gfocuscell = null; function install_handlers() { var spreadsheet = window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addevent
listener('focus', spreadsheet_focus, true); spreadsheet.addevent
listener('click', spreadsheet_click, true); } function spreadsheet_focus(e) { if (e.target.tagname == 'grid') { if (!gfocuscell) { gfocuscell = e.target.getelementsbytagname('label')[0]; } gfocuscell.focus(); } else { gfocuscell = e.target; } } function spreadsheet_click(e) { ...
...other compound controls such as
lists and treeviews support two-phased keyboard navigation.
...And 3 more matches
MenuItems - Archive of obsolete content
you might do this if the key associated with the item changes, for instance a
list of open windows displayed on a window menu.
...instead of specifying the icon with the image attribute, you can also reference the image in a style sheet with the '
list-style-image' property.
... #add-bookmark {
list-style-image: url('addbookmark.png'); } this technique can also be used to apply an image for the menu element, except you would want to use the "menu-iconic:" class instead.
...And 3 more matches
SQLite Templates - Archive of obsolete content
this simple example shows how to display a
listbox containing the values in one column in a database table.
... <
listbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name from myfriends </query> <action> <
listitem uri="?" label="?name"/> </action> </template> </
listbox> the query returns the
list of values from the 'name' column in the table 'myfriends'.
...if the query returns six results, six
listitems will be generated.
...And 3 more matches
XML Templates - Archive of obsolete content
an example: <
listbox datasources="people.xml" ref="*" querytype="xml"> <template> ...
... </template> <
listbox> the url in the datasources attribute may be a relative url or an absolute url.
... for this and the following examples, we are going to use the following xml document containing a
list of people: <people> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> xml query syntax the query syntax is fairly simple for xml datasources.
...And 3 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
you can find a
list of uris for the most commonly overlaid documents at the bottom of this page.
...see below for the
list of common palette ids.
... let button = doc.createelement("toolbarbutton"); button.setattribute("id", button_id); button.setattribute("label", "replace bookmark"); button.setattribute("class", "toolbarbutton-1 chromeclass-toolbar-additional"); button.setattribute("tooltiptext", "replace an existing bookmark"); button.style.
liststyleimage = "url(" + icon + ")"; button.addevent
listener("command", main.action, false); toolbox.palette.appendchild(button); this code is thanks to dgutov and is seen in full context at his repository here at github: dgutov / bmreplace / bootstrap.js.
...And 3 more matches
Modifying a XUL Interface - Archive of obsolete content
this is used to insert into the middle of a
list of children of the parent element instead of at the end like appendchild() does.
... the replacechild() function removes an existing child and adds a new one in its place at the same position in the
list of its parent element.
... finally the removechild() function removes a child from the
list of its parent element.
...And 3 more matches
XUL element attributes - Archive of obsolete content
it may be set to a space-separated
list of rdf properties or resources.
... datasources type: space separated
list of datasource uris a space-separated
list of datasources that an element's template will use for content generation.
... flags type: space-separated
list of the values below a set of flags used for miscellaneous purposes.
...And 3 more matches
browser - Archive of obsolete content
nkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogress
listener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogress
listener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocompleteenabled type: boolean set...
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(),...
... hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addprogress
listener(
listener ) return type: no return value add a progress
listener to the browser which will monitor loaded documents.
...And 3 more matches
dialog - Archive of obsolete content
buttons type: comma-separated
list of the values below a comma-separated
list of buttons to appear in the dialog box.
...the following values can be used in the
list: accept: the ok button, which will accept the changes when pressed.
... properties buttons type: comma-separated
list of the values below a comma-separated
list of buttons to appear on the dialog box.
...And 3 more matches
key - Archive of obsolete content
in order to use (non-default) key commands within specific elements, you will need to
listen for key events.
...valid keys are
listed at keyboard shortcuts.
... modifiers type: space-separated
list of the values below a
list of modifier keys that should be pressed to invoke the keyboard shortcut.
...And 3 more matches
menupopup - Archive of obsolete content
there are several ways in which a menupopup may be used: it may be placed inside a menu, menu
list, toolbarbutton, or a button with the type attribute set to "menu" to create a popup that will open when the menu or button is pressed.
... attributes ignorekeys, 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 menu
list.
... <menu
list> <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> </menu
list> the following example shows how a menupopup can be used as a context menu for an element.
...And 3 more matches
prefpane - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
... preferenceelements type: dom node
list holds a
list of the ui elements in the pane that are attached to preferences.
... preferences type: dom node
list holds a
list of the preference elements in the pane.
...And 3 more matches
radiogroup - Archive of obsolete content
for user editable menu
list elements, the contents, as visible to the user, are read and set using the menu
list.value syntax.
...the
listbox, rich
listbox, 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.
...for textbox and user editable menu
list elements, the contents, as visible to the user, are read and set using the textbox.value and menu
list.value syntax.
...And 3 more matches
tabbox - Archive of obsolete content
attributes eventnode, handlectrlpageupdown, handlectrltab properties accessibletype, eventnode, handlectrlpageupdown, handlectrltab, selectedindex, selectedpanel, selectedtab, tabs, tabpanels examples <tabbox id="mytab
list" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="click me"/></tabpanel> <tabpanel><!-- tabpanel fourth elemen...
...ts go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below indicates where keyboard navigation events are
listened to.
... if this attribute is not specified, events are
listened to from the tabbox.
...And 3 more matches
Deploying XULRunner - Archive of obsolete content
after that, the app could be installed to the registered xulrunner and appear in start menus,
lists of installed programs, etc.
...here's how the entire application bundle looks: myapp.app/ contents/ info.p
list pkginfo resources/ application.ini app_icon.icns components/ ...
...the complete bundle structure is as follows: myapp.app/ contents/ info.p
list pkginfo frameworks/ xul.framework/ files copied from /library/frameworks/xul.framework/versions/1.8/...
...And 3 more matches
calICalendarView - Archive of obsolete content
this explains the need for the fairly large
list off attributes and methods that must be implemented, so that outside code can be able to gain a decent picture of the current state of those nodes.
...calicalendar displaycalender; attribute calicalendarviewcontroller controller; void showdate(in calidatetime adate); void setdaterange(in calidatetime astartdate, in calidatetime aenddate); readonly attribute calidatetime startdate; readonly attribute calidatetime enddate; readonly attribute boolean supportsdisjointdates; readonly attribute boolean hasdisjointdates; void setdate
list(in unsigned long acount, [array,size_is(acount)] in calidatetime adates); void getdate
list(out unsigned long acount, [array,size_is(acount),retval] out calidatetime adates); attribute caliitembase selecteditem; attribute calidatetime selectedday; attributes displaycalendar the displaycalendar is an implementation of the calicalendar interface.
... supportsdisjointdates consumers of calicalendarview should check this attribute to determine whether or not the implementation allows for calls to setdate
list.
...And 3 more matches
Paddle and keyboard controls - Game development
two event
listeners for keydown and keyup events.
...to
listen for key presses, we will set up two event
listeners.
... add the following lines just above the setinterval() line at the bottom of your javascript: document.addevent
listener("keydown", keydownhandler, false); document.addevent
listener("keyup", keyuphandler, false); when the keydown event is fired on any of the keys on your keyboard (when they are pressed), the keydownhandler() function will be executed.
...And 3 more matches
Plug-in Development Overview - Gecko Plugin API Reference
this exported c function should return a string containing the type, extension
list, and type description separated by colons.
... to determine the supported mime types, gecko first checks for registry information in the plugins info.p
list.
...plugins should use the info.p
list approach, and only use the following method as a supplement to support older browsers.
...And 3 more matches
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
model view controller example imagine a simple shopping
list app.
... all we want is a
list of the name, quantity and price of each item we need to buy this week.
... going back to our shopping
list app, the model would specify what data the
list items should contain — item, price, etc.
...And 3 more matches
Practical positioning examples - Learn web development
and now an ordered
list: how exciting!</p> <ol> <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> <li>aliquam ut porttitor urna.</li> <li>nulla facilisi</li> </ol> </article> </div> </section> so here we've got a <section> element with a class of info-box, which contains a <ul> and a <div>.
... the unordered
list contains three
list items with links inside, which will become the actual tabs to click on for displaying our content panels.
...first, add the following rule at the bottom of your css to remove the default padding-left and margin-top from the unordered
list: .info-box ul { padding-left: 0; margin-top: 0; } note: we are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.
...And 3 more matches
How do I start to design my website? - Learn web development
list all the goals you want to reach.
... once you have such a
list, you need to prioritize.
...(should i implement these features, use these services, create these designs?) so now that you have a prioritized
list of goals, let's move on to the next question.
...And 3 more matches
Example 1 - Learn web development
basic state html <div class="select"> <span class="value">cherry</span> <ul class="opt
list hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .opt
list { position: absolute; top : 100%; left : 0; } .select .opt
list.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* -------...
...cal-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .opt
list { z-index : 2;
list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .hi...
...ghlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="opt
list hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .opt
list { position: absolute; top : 100%; left : 0; } .select .opt
list.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ ...
...And 3 more matches
Example 3 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit" tabindex="-1"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" tabindex="0"> <span class="value">cherry</span> <ul class="opt
list hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles...
... */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .opt
list { position: absolute; top : 100%; left : 0; } .select .opt
list.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : ...
...cal-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .opt
list { z-index : 2;
list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { pa...
...And 3 more matches
Introduction to web APIs - Learn web development
this seemingly small detail has had a huge impact on the performance and behaviour of sites — if you just need to update a stock
listing or
list of available new stories, doing it instantly without having to reload the whole entire page from the server can make the site or app feel much more responsive and "snappy".
... the youtube api, which allows you to embed youtube videos on your site, search youtube, build play
lists, and more.
...tn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.addevent
listener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play it if (this.getattribute('class') === 'paused') { audioelement.play(); this.setattribute('class', 'playing'); this.textcontent = 'pause' // if track is playing, stop it }...
...And 3 more matches
Working with JSON - Learn web development
for example, to access the third superpower of the second hero
listed in the members
list, you'd do this: superheroes['members'][1]['powers'][2] first we have the variable name — superheroes.
...s the superhero cards: function showheroes(jsonobj) { const heroes = jsonobj['members']; for (let i = 0; i < heroes.length; i++) { const myarticle = document.createelement('article'); const myh2 = document.createelement('h2'); const mypara1 = document.createelement('p'); const mypara2 = document.createelement('p'); const mypara3 = document.createelement('p'); const my
list = document.createelement('ul'); myh2.textcontent = heroes[i].name; mypara1.textcontent = 'secret identity: ' + heroes[i].secretidentity; mypara2.textcontent = 'age: ' + heroes[i].age; mypara3.textcontent = 'superpowers:'; const superpowers = heroes[i].powers; for (let j = 0; j < superpowers.length; j++) { const
listitem = document.createelement('li');
listite...
...m.textcontent = superpowers[j]; my
list.appendchild(
listitem); } myarticle.appendchild(myh2); myarticle.appendchild(mypara1); myarticle.appendchild(mypara2); myarticle.appendchild(mypara3); myarticle.appendchild(my
list); section.appendchild(myarticle); } } to start with, we store the members property of the javascript object in a new variable.
...And 3 more matches
Aprender y obtener ayuda - Learn web development
note: you might favor one learning method over the others, but rea
listically a hybrid approach is probably what you will end up with.
...the following have different scopes, but are all rea
listic and achievable: i want to become a professional web developer in two years' time.
...it is still possible to achieve your goals, but you have to be rea
listic about how quickly you can do it.
...And 3 more matches
Client-Server Overview - Learn web development
the different methods/verbs and their associated actions are
listed below: get: get a specific resource (e.g.
... an html file containing information about a product, or a
list of products).
... the diagram below shows the main elements of the "team coach" website, along with numbered labels for the sequence of operations when the coach accesses their "best team"
list.
...And 3 more matches
Getting started with Svelte - Learn web development
<main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a
list of elements, and work with async values, respectively.
...that's svelte's syntax for
listening to dom events.
...g git, to clone the repository you should execute: git clone https://github.com/opensas/mdn-svelte-tutorial.git then at the beginning of each article, you can just cd into the corresponding folder and start the app in dev mode to see what its current state should be, like this: cd 02-starting-our-todo-app npm install npm run dev if you want lo learn more about git and github, we've compiled a
list of links to useful guides — see git and github.
...And 3 more matches
Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul {
list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-fam...
... before: after: noticeable changes include the removal of the
list bullets, background color changes, and changes to the base button and input styles.
... 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } </style> if you check the app, you'll see that our todo
list is now in a card, and we have some better formatting of our to-do items.
...And 3 more matches
Software accessibility: Where are we today?
if a person was unable to do one of the above-
listed tasks, they found themselves unable to use many popular computer applications.
...some, like stephen hawking, enter information by choosing among
lists of options.
... they might press a switch down to begin moving a highlight bar through the
list, and release the switch when the desired option is highlighted.
...And 3 more matches
XPIDL Syntax
idl_file = 1*definition definition = [type_decl / const_decl / interface] ";" interface = [prop_
list] "interface" ident [[inheritance] "{" *(ifacebody) "}"] inheritance = ":" *(scoped_name ",") scoped_name] ifacebody = [type_decl / op_decl /attr_decl / const_decl] ";" / codefrag type_decl = [prop_
list] "typedef" type_spec *(ident ",") ident type_decl /= [prop_
list] "native" ident [parens] const_decl = "const" type_spec ident "=" expr op_decl = [prop_
list] (type_spec / "void") parameter_d...
...ecls raise_
list parameter_decls = "(" [*(param_decl ",") param_decl] ")" param_decl = [prop_
list] ("in" / "out" / "inout") type_spec ident attr_decl = [prop_
list] ["readonly"] "attribute" type_spec *(ident ",") ident ; descending order of precedence expr /= expr ("|" / "^" / "&") expr ; unequal precedence "|" is lowest expr /= expr ("<<" / ">>") expr expr /= expr ("+" / "-") expr expr /= expr ("*" / "/" / "%") expr expr /= ["-" / "+" / "~"] (scoped_name / literal / "(" expr ")" ) ; numeric literals: quite frankly, i'm sure you know how these kinds of ; literals work, and these are annoying to specify in abnf.
... string_literal = 1*(%x22 *(any char except %x22 or %x0a) (%x22 / %x0a)) ; same as above, but s/"/'/g char_literal = 1*(%x27 *(any char except %x27 or %x0a) (%x27 / %x0a)) type_spec = "float" / "double" / "string" / "wstring" type_spec /= ["unsigned"] ("short" / "long" / "long" "long") type_spec /= "char" / "wchar" / "boolean" / "octet" type_spec /= scoped_name prop_
list = "[" *(property ",") property "]" property = ident [parens] raise_
list = "raises" "(" *(scoped_name) ",") scoped_name ")" scoped_name = *(ident "::") ident / "::" ident ; in regex: [a-za-z_][a-za-z0-9_]*; identifiers beginning with _ cause warnings ident = (%x41-5a / %x61-7a / "_") *(%x41-5a / %x61-7a / %x30-39 / "_") parens = "(" 1*(any char except ")") ")" functionality not used in xpi...
...And 2 more matches
XPIDL
the built-in native types are those
listed under the type_spec production above.
... in addition to this
list, nearly every idl file includes nsrootidl.idl in some fashion, which also defines the following types: table 2: types provided by nsrootidl.idl idl typedef c++ in parameter c++ out parameter js type notes prtime (xpidl unsigned long long typedef, 64 bits) number prtime is in microseconds, while js date assumes time in milliseconds nsresult ...
...most native types are not scriptable: if it is not present in the
list above, then it is certainly not scriptable (some of the above, particularly jsid, are not scriptable).
...And 2 more matches
Gloda examples
a) show all messages in a conversation regardless of the folder in which they are stored, b) search messages by subject assuming that you have a message (glodamessage) in the conversation already, this is straight forward using glodamessage.conversation.getmessagescollection() a
listener = { /* 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 ...
...s, acollection) { }, /* called when our database query completes */ onquerycompleted: function _onquerycompleted(conversation_coll) { try { for (var conv in conversation_coll) { //do something with the conversation here alert(conv.subject); } } catch (e) {} } } glodamessage.conversation.getmessagescollection(a
listener) alternatively if you need to get a conversation based on the subject, you need to do a query (using the same
listener as above).
... if you search for a message based on subject, use noun_message instead of noun_conversation and modify the
listener accordingly.
...And 2 more matches
Add to iPhoto
cfindex a core foundation long integer type used to represent indexes into
lists.
... 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.
... this.struct_lsapplicationparameters.ptr, // description of the app to launch ctypes.voidptr_t, // psn array pointer cfindex); // max psn count this function returns an osstatus indicating the result of the launch attempt, and accepts these parameters: a cfarrayref providing a
list of cfurl objects for the files to open in the application.
...And 2 more matches
Standard OS Libraries
windows also has the "winapi
lists" and ".net framework" (i'm not sure if it can be accessed jsctypes but probably).
... a complete
list of windows apis can be found at the msdn api index.
...a
list of all the functions available through this api can be found at the msdn winapi index.
...And 2 more matches
Storage Inspector - Firefox Developer Tools
cookies created as a part of response of network calls are also
listed, but only for calls that happened while the tool is open.
... storage inspector user interface the storage inspector ui is split into three main components: storage tree table widget sidebar storage tree the storage tree
lists all the storage types that the storage inspector can inspect: under each type, objects are organized by origin.
... 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.
...And 2 more matches
Style Editor - Firefox Developer Tools
the style sheet pane the style sheet pane, on the left,
lists all the style sheets being used by the current document.
...you can save any changes you've made to the style sheet to your local computer by clicking the save button in the bottom-right corner of each sheet's entry in the
list.
...just start typing, and it will offer you a
list of suggestions.
...And 2 more matches
CSSStyleSheet.cssRules - Web APIs
the read-only cssstylesheet property cssrules returns a live cssrule
list which provides a real-time, up-to-date
list of every css rule which comprises the stylesheet.
... each item in the
list is a cssrule defining a single rule.
... syntax var rules = cssstylesheet.cssrules; value a live-updating cssrule
list containing each of the css rules making up the stylesheet.
...And 2 more matches
CacheStorage.keys() - Web APIs
use this method to iterate over a
list of all cache objects.
... syntax caches.keys().then(function(key
list) { //do something with your key
list }); parameters none.
...here we have a white
list containing the names of the caches we want to keep (cachewhite
list).
...And 2 more matches
Advanced animations - Web APIs
radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestanimationframe(draw); } canvas.addevent
listener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addevent
listener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); boundaries without any boundary collision testing our ball runs out of the canvas quickly.
...); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addevent
listener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addevent
listener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); acceleration to make the motion more real, you can play with the velocity like this, for example: ball.vy *= .99; ball.vy += .25; this slows down the vertical velocity each frame, so that the ball will just b...
...learrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; ball.vy *= .99; ball.vy += .25; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addevent
listener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addevent
listener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); trailing effect until now we have made use of the clearrect method when clearing prior frames.
...And 2 more matches
Detecting device orientation - Web APIs
it is different from the deviceorientationevent because it is
listening for changes in acceleration as opposed to orientation.
... processing orientation events all you need to do in order to begin receiving orientation change is to
listen to the deviceorientation event: note: gyronorm.js is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices.
... window.addevent
listener("deviceorientation", handleorientation, true); after registering your event
listener (in this case, a javascript function called handleorientation()), your
listener function periodically gets called with updated orientation data.
...And 2 more matches
DirectoryReaderSync - Web APIs
you can do that by passing a
list of filesystem: urls—which are just strings—instead of a
list of entries.
... console.log(fileentry.name); }); }); }; worker.postmessage({'cmd': '
list'}); the following is worker.js code that gets the contents of the directory.
...self.requestfilesystemsync = self.webkitrequestfilesystemsync || self.requestfilesystemsync; // global for holding the
list of entry file system urls.
...And 2 more matches
Document.getElementsByTagNameNS() - Web APIs
returns a
list of elements with the given tag name belonging to the given namespace.
... syntax elements = document.getelementsbytagnamens(namespace, name) elements is a live node
list (but see the note below) of found elements in the order they appear in the tree.
... note: while the w3c specification says elements is a node
list, this method returns a htmlcollection both in gecko and internet explorer.
...And 2 more matches
Events and the DOM - Web APIs
the event interface itself is described, as well as the interfaces for event registration on nodes in the dom, and event
listeners, and several longer examples that show how the various event interfaces relate to one another.
... registering event
listeners there are 3 ways to register event handlers for a dom element.
... eventtarget.addevent
listener // assuming mybutton is a button element mybutton.addevent
listener('click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages.
...And 2 more matches
Element: mouseenter event - Web APIs
in such cases, it is better to
listen for mouseover events.
...it then adds an item to the
list with the number of the mouseenter or mouseleave event.
... html <div id='mousetarget'> <ul id="unordered
list"> <li>no events yet!</li> </ul> </div> css styling the div to make it more visible.
...And 2 more matches
Audio and video manipulation - Developer guides
o.ended) { return; } this.computeframe(); var self = this; settimeout(function () { self.timercallback(); }, 16); // roughly 60 frames per second }, doload: function() { this.video = document.getelementbyid("my-video"); this.c1 = document.getelementbyid("my-canvas"); this.ctx1 = this.c1.getcontext("2d"); var self = this; this.video.addevent
listener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var g...
...utton" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setplaybackrate() { eval(textarea.value); } reset.addevent
listener('click', function() { textarea.value = code; setplaybackrate(); }); edit.addevent
listener('click', function() { textarea.focus(); }) textarea.addevent
listener('input', setplaybackrate); window.addevent
listener('load', setplaybackrate); note: try the playbackrate example live.
...diaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addevent
listener('click', function() { textarea.value = code; setfilter(); }); edit.addevent
listener('click', function() { textarea.focus(); }) textarea.addevent
listener('input', setfilter); window.addevent
listener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code.
...And 2 more matches
Challenge solutions - Developer guides
see css color value for a complete
list as well as other ways of specifying colors.
... you see two items
listed, one that references an internal resource and one that references your stylesheet file.
... solution add this rule to your stylesheet: p:before{ content: url("yellow-pin.png"); }
lists lower roman numerals challenge add a rule to your stylesheet, to number the oceans using roman numerals from i to v.
...And 2 more matches
DOM onevent handlers - Developer guides
two common approaches are addevent
listener() and the specific onevent handlers.
...in order to allow multiple handlers to be installed for the same event on a given object, you can call its addevent
listener() method, which manages a
list of handlers for the given event on the object.
... a handler can then be removed from the object by calling its removeevent
listener() function.
...And 2 more matches
Index - Developer guides
2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing
lists, newsgroups, forums, or other communities related to ajax, please link to them here.
...two common approaches are addevent
listener() and the specific onevent handlers.
... 20 media events intermediate, media various events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section
lists them and provides some helpful information about using them.
...And 2 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
fully standards-compliant implementations automatically apply the css display:
list-item to the <summary> element.
... you can use an event
listener for the toggle event to detect when the widget changes state: details.addevent
listener("toggle", event => { if (details.open) { /* the element was toggled open */ } else { /* the element was toggled closed */ } }); examples a simple disclosure example this example shows a <details> element with no provided summary.
... the <summary> element supports the
list-style shorthand property and its longhand properties, such as
list-style-type, to change the disclosure triangle to whatever you choose (usually with
list-style-image).
...And 2 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
sizes is a
list of source sizes that describes the final rendered width of the image represented by the source.
... each source size consists of a comma-separated
list of media condition-length pairs.
... srcset a
list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use.
...And 2 more matches
Global attributes - HTML: Hypertext Markup Language
list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element.
... this attribute consists of a space-separated
list of characters.
... off or none, no autocapitalization is applied (all letters default to lowercase) on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words, the first letter of each word defaults to a capital letter; all other letters default to lowercase characters, all letters should default to uppercase class a space-separated
list of the classes of the element.
...And 2 more matches
Access-Control-Allow-Headers - HTTP
the header may
list any number of headers, separated by commas.
...note that the authorization header can't be wildcarded and always needs to be
listed explicitly.
...it indicates that in addition to the cors-safe
listed request headers, a custom header named x-custom-header is supported by cors requests to the server.
...And 2 more matches
Access-Control-Expose-Headers - HTTP
the access-control-expose-headers response header indicates which headers can be exposed as part of the response by
listing their names.
... by default, only the 7 cors-safe
listed response headers are exposed: cache-control content-language content-length content-type expires last-modified pragma if you want clients to be able to access other headers, you have to
list them using the access-control-expose-headers header.
...access-control-expose-headers: * directives <header-name> a
list of exposed headers consisting of zero or more header names other than the cors-safe
listed request headers that the resource might use and can be exposed.
...And 2 more matches
CSP: script-src - HTTP
'nonce-<base64-value>' an allow-
list for specific inline scripts using a cryptographic nonce (number used once).
...at the same time, any allow-
list or source expressions such as 'self' or 'unsafe-inline' are ignored.
... examples violation case given this csp header: content-security-policy: script-src https://example.com/ the following script is blocked and won't be loaded or executed: <script src="https://not-example.com/js/library.js"></script> note that inline event handlers are blocked as well: <button id="btn" onclick="dosomething()"> you should replace them with addevent
listener calls: document.getelementbyid("btn").addevent
listener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides.
...And 2 more matches
Feature-Policy - HTTP
header type response header forbidden header name yes syntax feature-policy: <directive> <allow
list> <directive> the feature policy directive to apply the allow
list to.
... see directives below for a
list of the permitted directive names.
... <allow
list> an allow
list is a
list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...And 2 more matches
Upgrade - HTTP
header type request header, response header forbidden header name yes overview the upgrade header field may be used by clients to invite a server to switch to one (or more) of the
listed protocols, in descending preference order.
... for example, the client might send a get request as shown,
listing the preferred protocols to switch to (in this case "example/1" and "foo/2"): get /index.html http/1.1 host: www.example.com connection: upgrade upgrade: example/1, foo/2 note: connection: upgrade must be set whenever upgrade is sent.
... protocols are
listed, comma-separated, in order of descending preference.
...And 2 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
the most common host environment is the browser, but javascript interpreters can also be found in a huge
list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others.
...things are a lot easier if we stick with the first diagram, however, so we'll discuss the types
listed there for now.
...the rest parameter operator is used in function parameter
lists with the format: ...variable and it will include within that variable the entire
list of uncaptured arguments that the function was called with.
...And 2 more matches
Working with objects - JavaScript
for example, let's create an object named mycar and give it properties named make, model, and year as follows: var mycar = new object(); mycar.make = 'ford'; mycar.model = 'mustang'; mycar.year = 1969; the above example could also be written using an object initializer, which is a comma-delimited
list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}): var mycar = { make: 'ford', model: 'mustang', year: 1969 }; unassigned properties of an object are undefined (and not null).
...ter out properties from the object's prototype chain if (obj.hasownproperty(i)) { result += `${objname}.${i} = ${obj[i]}\n`; } } return result; } so, the function call showprops(mycar, "mycar") would return the following: mycar.make = ford mycar.model = mustang mycar.year = 1969 enumerate the properties of an object starting with ecmascript 5, there are three native ways to
list/traverse object properties: for...in loops this method traverses all enumerable properties of an object and its prototype chain.
... before ecmascript 5, there was no native way to
list all properties of an object.
...And 2 more matches
The arguments object - JavaScript
it returns a string
list using each argument in the
list: // returns "red, orange, blue" myconcat(', ', 'red', 'orange', 'blue'); // returns "elephant; giraffe; lion; cheetah" myconcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); // returns "sage.
...', 'sage', 'basil', 'oregano', 'pepper', 'parsley'); defining a function that creates html
lists this example defines a function that creates a string containing html for a
list.
... the only formal argument for the function is a string that is "u" if the
list is to be unordered (bulleted), or "o" if the
list is to be ordered (numbered).
...And 2 more matches
Function.prototype.bind() - JavaScript
[[boundarguments]] a
list of values whose elements are used as the first arguments to any call to the wrapped function.
...the arguments to the internal method are a this value and a
list containing the arguments passed to the function by a call expression.
...this : otherthis, baseargs ); }; if (this.prototype) { // function.prototype doesn't have a prototype property fnop.prototype = this.prototype; } fbound.prototype = new fnop(); return fbound; }; })(); some of the many differences (there may well be others, as this
list does not seriously attempt to be exhaustive) between this algorithm and the specified algorithm are: the partial implementation relies on array.prototype.slice(), array.prototype.concat(), function.prototype.call() and function.prototype.apply(), built-in methods to have their original values.
...And 2 more matches
handler.construct() - JavaScript
syntax const p = new proxy(target, { construct: function(target, arguments
list, newtarget) { } }); parameters the following parameters are passed to the construct() method.
... arguments
list the
list of arguments for the constructor.
... const p = new proxy(function() {}, { construct: function(target, arguments
list, newtarget) { console.log('called: ' + arguments
list.join(', ')); return { value: arguments
list[0] * 10 }; } }); console.log(new p(1).value); // "called: 1" // 10 the following code violates the invariant.
...And 2 more matches
Digital audio concepts - Web media technologies
special low frequency enhancement (lfe) channels provide the signal for special speakers designed to produce the low frequency sounds and vibration to create a visceral sensation when
listening to the audio.
...generally, lossy compression results in significantly smaller output than lossless compression methods; also, many lossy codecs are excellent, with the loss in quality and detail being difficult or even impossible for the average
listener to discern.
... use cases for lossless audio include scenarios such as: any situation in which the
listener expects precise audio reproduction and may have an ear for sound that's good enough to make out the intricate details of unaltered audio audio loops and samples used in music and sound effects production work situations in which audio clips or samples may be remixed and then compressed; using lossless audio for the mastering process avoids compressing previously compressed data, resulting i...
...And 2 more matches
class - SVG: Scalable Vector Graphics
usage context categories none value <
list-of-class-names> animatable yes normative document svg 1.1 (2nd edition): the class attribute
list-of-ts <
list-of-ts> (where t is some type.) a
list consists of a separated sequence of values.
... unless explicitly described differently,
lists within svg's xml attributes can be either comma-separated (with optional white space before or after the comma), or white space-separated.
... white space in
lists is defined as one or more of the following consecutive characters: "space" (u+0020), "tab" (u+0009), "line feed" (u+000a), "carriage return" (u+000d), and "form-feed" (u+000c).
...And 2 more matches
kernelMatrix - SVG: Scalable Vector Graphics
the kernelmatrix attribute defines the
list of numbers that make up the kernel matrix for the <feconvolvematrix> element.
...the number of entries in the
list must equal to <orderx> by <ordery> as defined in the order attribute.
...0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <
list of numbers> default value none animatable yes <
list of numbers> the
list of <number>s that make up the kernel matrix for the convolution.
...And 2 more matches
values - SVG: Scalable Vector Graphics
the values attribute has different meanings, depending upon the context where itʼs used, either it defines a sequence of values used over the course of an animation, or itʼs a
list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed.
... five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <fecolormatrix> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, values is a
list of values defining the sequence of values over the course of the animation.
... value <
list-of-values> default value none animatable no <
list-of-values> the value holds a semicolon-separated
list of one or more values.
...And 2 more matches
<altGlyph> - SVG: Scalable Vector Graphics
value type: <
list-of-coordinates> ; default value: absolute x-coordinate of ancestor <text> or <tspan>; animatable: yes y this attribute defines the corresponding absolute y-coordinates for rendering the element.
... value type: <
list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>; animatable: yes dx this attribute indicates a shift along the x-axis on the position of the element.
... value type: <
list-of-coordinates> ; default value: relative x-coordinate of ancestor <text> or <tspan>; animatable: yes dy this attribute indicates a shift along the x-axis on the position of the element.
...And 2 more matches
<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
the default value is single: single numbers sibling nodes sequentially, as in the items in a
list.
... the processor goes to the first node in the ancestor-or-self axis that matches the count attribute and then counts that node plus all its preceding siblings (stopping when it reaches a match to the from attribute, if there is one) that also match the count attribute.if no match is found, the sequence will be an empty
list.
...for each node in this
list that matches the count attribute, the processor counts how many preceding matching siblings it has, and adds one for the node itself.
...And 2 more matches
Communicating using "postMessage" - Archive of obsolete content
again, panel and page integrate worker directly: // post a message to the panel's content scripts panel.postmessage(addonmessage); however, for page-mod objects you need to
listen to the onattach event and use the worker supplied to that: var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.postmessage(addonmessage); } }); to receive messages from a content script, use the worker's on function.
... to simplify this most content modules provide an onmessage property as an argument to the constructor: panel = require("sdk/panel").panel({ onmessage: function(contentscriptmessage) { // handle message from the content script } }); message events versus user-defined events you can use message events as an alternative to user-defined events: var pagemodscript = "window.addevent
listener('mouseover', function(event) {" + " self.postmessage(event.target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.on('message', function(message) { console.log('mouseover: ' + message); }); } }); the reason to prefer user-de...
...now we have to embed the event type in the message payload, and implement a switch function in the receiver to dispatch the message: var pagemodscript = "window.addevent
listener('mouseover', function(event) {" + " self.postmessage({" + " kind: 'mouseover'," + " element: event.target.tostring()" + " });" + "}, false);" + "window.addevent
listener('mouseout', function(event) {" + " self.postmessage({" + " kind:...
... worker.on('message', function(message) { switch(message.kind) { case 'mouseover': console.log('mouseover: ' + message.element); break; case 'mouseout': console.log('mouseout: ' + message.element); break; } }); } }); implementing the same add-on with user-defined events is shorter and more readable: var pagemodscript = "window.addevent
listener('mouseover', function(event) {" + " self.port.emit('mouseover', event.target.tostring());" + "}, false);" + "window.addevent
listener('mouseout', function(event) {" + " self.port.emit('mouseout', event.target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ incl...
selection - Archive of obsolete content
usage registering for selection notifications to be notified when the user makes a selection, register a
listener for the "select" event.
... each
listener will be called after a selection is made.
... function my
listener() { console.log("a selection has been made."); } var selection = require("sdk/selection"); selection.on('select', my
listener); // you can remove
listeners too.
... selection.remove
listener('select', my
listener); iterating over discontiguous selections discontiguous selections can be accessed by iterating over the selection module itself.
preferences/event-target - Archive of obsolete content
listen to changes to the preferences system in firefox.
... this enables add-ons to
listen to change events to the system-wide settings.
... example var { prefstarget } = require("sdk/preferences/event-target"); //
listen to the same branch which reqire("sdk/simple-prefs") does var target = prefstarget({ branchname: "extensions." + require("sdk/self").preferencesbranch + "." }); target.once("test", function(prefname) { console.log(prefname) // logs "test" console.log(target.prefs[name]) // logs true }); target.once("", function() { console.log(prefname) // logs "test" console.log(target.prefs[name]) //...
... logs true }) // changing a pref which our target
listens to require("sdk/simple-prefs").prefs.test = true; ...
cfx - Archive of obsolete content
e, to pass the -jsconsole argument to firefox, which will launch the javascript error console, try the following: cfx run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: cfx run --binary-args '-url "www.mozilla.org" -jsconsole' --extra-packages=extra_packages extra packages to include, specified as a comma-separated
list of package names.
... --extra-packages=extra_packages extra packages to include, specified as a comma-separated
list of package names.
...use cfx testcfx -v for the specific
list of tests.
...configurations are
listed under a key called "configs".
jpm-mobile - Archive of obsolete content
sdk users and project team members discuss problems and proposals on the project mailing
list.
... someone else may have had the same problem you do, so try searching the
list.
... $ adb shell pm
list packages | grep org.mozilla package:org.mozilla.firefox $ jpm-mobile run -b firefox # the package name is firefox -v --verbose verbose operation.
... $ adb shell pm
list packages | grep org.mozilla package:org.mozilla.firefox $ jpm-mobile run -b firefox # the package name is firefox -v --verbose verbose operation.
Display a Popup - Archive of obsolete content
function handleclick(state) { text_entry.show(); } // when the panel is displayed it generated an event called // "show": we will
listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display.
... text_entry.on("show", function() { text_entry.port.emit("show"); }); //
listen for messages called "text-entered" coming from // the content script.
...var textarea = document.getelementbyid("edit-box"); textarea.addevent
listener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline.
... text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); //
listen for the "show" event being sent from the // main add-on code.
Tutorials - Archive of obsolete content
this page
lists practical hands-on articles about how to accomplish specific tasks using the sdk.
...
listen for page load use the tabs module to get notified when new web pages are loaded, and access their content.
... get the
list of open tabs use the tabs module to iterate through the currently open tabs, and access their content.
...
listen for load and unload get notifications when your add-on is loaded or unloaded by firefox, and pass arguments into your add-on from the command line.
Bookmarks - Archive of obsolete content
specifying default_index as the index at which to insert the new folder places it at the end of the
list.
... var parentfolderid = bmsvc.getfolderidforitem(newbkmkid); observing changes to bookmarks and tags to set up an observer to
listen for changes related to bookmarks, you will need to create an nsinavbookmarkobserver object and use the nsinavbookmarksservice.addobserver() and nsinavbookmarksservice.removeobserver() methods.
... // an nsinavbookmarkobserver var myext_bookmark
listener = { onbeginupdatebatch: function() {}, onendupdatebatch: function() {}, onitemadded: function(aitemid, afolder, aindex) {}, onitemremoved: function(aitemid, afolder, aindex) {}, onitemchanged: function(abookmarkid, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: f...
...unction() { bmsvc.addobserver(myext_bookmark
listener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmark
listener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
Forms related code snippets - Archive of obsolete content
g", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000; window.addevent
listener ?
... addevent
listener("load", buildcalendars, false) : window.attachevent ?
... attachevent("onload", buildcalendars) : (onload = buildcalendars); document.addevent
listener ?
... document.addevent
listener("mousedown", ondocclick, false) : document.attachevent ?
Examples and demos from articles - Archive of obsolete content
what follows is a brief
list of examples and demos from our theoretical articles.
...[article] typewriter effect [html] the following example will delete and re-type simulating a typewriter all the text content of the node
list which match a specified group of selectors.
... here is a possible and minima
list example of such abstraction, which for this reason we named minidaemon.
... multipage ajax navigation example this article provides a working (minima
list) example of a pure-ajax web site composed only of three pages.
HTML to DOM - Archive of obsolete content
the returned <body> object is of type element here is a sample that counts the number of paragraphs in a string: var dompars = htmlparser('<p>foo</p><p>bar</p>'); alert(dompars.getelementsbytagname('p').length); if htmlparser() returns the element name html (instead of body), you have all document object with its complete functions
list, therefore you can retrieve info within div tag like this: var dompars = htmlparser("<div id='userinfo'>john was a mediocre programmer, but people liked him <strong>anyway</strong>.</div>"); alert(dompars.getelementbyid('userinfo').innerhtml); to parse a complete html page, load it into an iframe whose type is content (not chrome).
...main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; //
listen for load frame.addevent
listener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" setti...
...if (donkeybrowser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addevent
listener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the iframe element we declared in the .xul file.
... the most interesting piece of code here is the domcontentloaded event
listener we define for the element.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
first of all, it
lists the subdirectories that make up the extension, so the build system knows where to look for additional makefiles.
...(if something goes wrong, figure out what, fix it and then come back here and add it to this article.) to make sure that the build really finished, launch firefox and check that your extension is
listed when you select tools/extensions.
...zip) file with all the chrome files
listed in jar.mn as well as a complete directory structure mirroring that of the jar file.
...ffix) \ $(dist)/lib/$(lib_prefix)xpcomglue_s.$(lib_suffix) \ $(dist)/lib/$(lib_prefix)xul.$(lib_suffix) \ $(dist)/lib/$(lib_prefix)nss3.$(lib_suffix) \ $(null) cppsrcs = \ advanced.cpp \ $(null) include $(topsrcdir)/config/rules.mk local_includes += \ -i$(srcdir)/../intricate/src \ -i$(srcdir)/../multifarious/src \ $(null) the makefile in the advanced/ directory should
list the intricate/, multifarious/ and build/ directories in its dirs variable.
Multiple item extension packaging - Archive of obsolete content
the individual packages contained in the multiple item package will not be
listed).
...the manager will not display the multiple item package in the
list of items after the download has completed.
...do not add to this
list without contacting benjamin smedberg.
... note that this page is included from the pages
listed below.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
range of uses restricted to author unrestricted book print, publish, revise read music record, perform, revise
listen movie distribute, screen, revise watch software copy, distribute, modify execute licenses are a use permit in order to use (in the authorial sense) a copyrighted work, the user must either receive a use permit from the copyright holder, or must be assigned partial rights by the author.
...redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
...redistributions in binary form must reproduce the above copyright notice, this
list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
...ic license http://www.mozilla.org/mpl/mpl-1.1.html mpl faq http://www.mozilla.org/mpl/mpl-faq.html common public license http://opensource.org/licenses/cpl1.0.php gnu general public license (gpl) http://www.gnu.org/licenses/gpl.html gnu lesser general public license (lgpl) http://www.gnu.org/licenses/lgpl.html various licenses and comments about them http://www.gnu.org/licenses/license-
list.html the bsd license problem http://www.gnu.org/philosophy/bsd.html the free software license diagnostic (in japanese) http://www.rubyist.net/~matz/20030608.html#p02 openoffice.org joint copyright assignment (jca) http://www.openoffice.org/licenses/jca.pdf gnu free documentation license (gfdl) http://www.gnu.org/licenses/fdl.html creative commons http://www.creativecommons.cc/ gnu gplv...
Custom XUL Elements with XBL - Archive of obsolete content
you should see a new item in the hello world menu, that opens a binding test window where you can add "persons" to a
list.
... person
list.appendchild(person); // ...
... methods our "person" binding has a single method that removes the item from the
list: <method name="remove"> <parameter name="aevent" /> <body><![cdata[ this.parentnode.removechild(this); ]]></body> </method> as you can see, it's very easy to define a method and the parameters it takes.
... with inheritance you could take the rich
listbox element and modify it to make a rich item tree, or create a switch button that changes state everytime it's clicked.
Session store API - Archive of obsolete content
if your extension wants to be able to restore data when tabs are restored, you can install a
listener like this: function myextensionhandlerestore(aevent) { var tab = event.originaltarget; /* the tab being restored */ var uri = tab.linkedbrowser.contentdocument.location; /* the tab's uri */ components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage("restoring tab: " + uri); }; document.add...
...event
listener("sstabrestoring", myextensionhandlerestore, false); simply replace the contents of the function myextensionhandlerestore() with whatever you need to do when the tab is restored.
... new windows are opened as required (one for each window that was saved in the session store), and cookies and the
list of recently closed tabs are restored.
...see the
list in observer notifications.
Signing an XPI - Archive of obsolete content
certutil.exe) in the system directory (\windows\system32\) so ensure the new paths are first in the path search
list.
...tree "signed/" signed successfully re-package xpi change to the signed/ folder, create a new zip with the meta-inf/zigbert.rsa file
listed first, then add the remaining files.
... press the ok button and you'll see your new certificate in the
list of authorities.
... object signing certificates --------------------------------------- mytestcert issued by: mytestcert (xpi test) expires: tue mar 14, 2006 code signing (certum) issued by: certum level iii ca (certum level iii ca) expires: tue mar 14, 2006 --------------------------------------- for a
list including ca's, use "signtool -l" now you must export the new key/certificate pair from the mozilla firefox certificate database and into the nss certificate database.
Updating addons broken by private browsing changes - Archive of obsolete content
ingui finally, if your code watches for any of these observer notifications: private-browsing private-browsing-cancel-vote private-browsing-change-granted private-browsing-transition-complete then your addon will require updating to correctly support the new per-window private browser feature in firefox 20 (and will require updating to work correctly in releases of firefox since the ones
listed).
... nsidownloadmanager's add
listener method is deprecated.
... addprivacyaware
listener should be used instead, or no notifications will be received for private downloads.
... observer notifications none of the ones
listed above will be sent as of firefox 20.
No Proxy For configuration - Archive of obsolete content
this feature was originally designed as a "black
list" of sites or domains that was within the intranet, and should not be accessed via the proxy server.
... due to various limitations, this feature should be used for only the most simple black
list scenarios.
... entry points: preferences | advanced | proxies control-click menu for off line-online icon (network plug) configuration the no proxy
list is composed of either domain elements or ipv4 address elements.
...ip address "1.2.3.4" does not block hostnames that resolve to the ip address ("127.0.0.1" does not block "localhost") a network network w/ cidr block "10.0.0.0/8" does not block hostnames that resolve to the ip address range (10.0.0.0/8 is not "no proxy for intranet hostnames") optional - port-specific (optional) ":" + port number "<filter>:81" only black-
lists port.
Notes on HTML Reflow - Archive of obsolete content
stylechange, when the entire frame hierarchy must be traversed to recover from sty
listic change; for example, a change in the default font size.
... a style change reflow is performed when the presentation shell's global sty
listic information is changed; e.g., addition or removal of a style sheet, a change to the shell's default font.
...in order to correctly dispatch the reflow to the child frame, the frame may need to perform some state recovery ; for example, a block frame will traverse its line
list to recover the space occupied by floated frames.
... stylechanged indicates that the sty
listic information corresponding to the target frame has changed; for example, the font size has increased.
Download Manager improvements in Firefox 3 - Archive of obsolete content
firefox 3 offers improvements to the download manager that allow multiple progress
listeners, use of the storage api for data management, download resuming, and more.
... download manager interfaces nsidownloadmanager gives applications and extensions access to the download manager, allowing them to add and remove files to the download
list, retrieve information about past and present downloads, and request notifications as to the progress of downloads.
... nsidownloadprogress
listener applications and extensions implement this interface to be made aware of changes in the status of downloads.
... other download manager documentation download manager preferences this article
lists preferences used by the download manager as well as their default values.
Download Manager preferences - Archive of obsolete content
this article provides a
list of them.
... browser.download.manager.addtorecentdocs a boolean value that indicates whether or not new downloads should be added to the recent documents
list.
...this folder is enabled when browser.download.folder
list equals 2.
... browser.download.folder
list indicates the default folder to download a file to.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
getsupportedflavours() this function should return a
list of flavors that the object being dragged over can accept.
...the getsupportedflavours function should return a
list of flavours that the element being dragged over can accept for dropping.
...var textobserver = { getsupportedflavours : function () { var flavours = new flavourset(); flavours.appendflavour("text/unicode"); return flavours; } } the flavours
list contains only one flavour, which is 'text/unicode'.
... the flavourset object can be used to hold a
list of flavours.
Content states and the style system - Archive of obsolete content
this is done by walking the
list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector.
... this
list is created during the parsing of the stylesheets involved.
... for each selector in this
list we check whether it might have stopped matching the node or started matching it.
...so the effect will be that of matching a node against the selectors: a a div the code that implements this is in the selectormatches method, which is passed the
list of states that changed in the astatemask parameter.
Style System Overview - Archive of obsolete content
detail: !important declarations cause an extra rule object cssimportantrule to be created since they are in a separate part of the cascade other nsistylerule implementations nshtmlmappedattributes represents sty
listic html attributes turned into a style rule (one instance per unique set of attributes) bodyrule handles marginwidth/marginheight mixes on body and on frame.
... to match rules, we do lookups in the rulehash's tables, remerge the
lists of rules using stored indices, and then call selectormatchestree to find which selectors really match.
...(i'll call this the data-struct-based hint mechanism.) caller of nsiframemanager::computestylechangefor processes the change
list, which has been built to avoid duplication.
... presshell::reconstructstyledata calls framemanager::computestylechangefor (reresolve) and then processes the frame-change
list.
Using microformats - Archive of obsolete content
to use the api, you need to first load the object: components.utils.import("resource://gre/modules/microformats.js"); once you've loaded the microformats api, you can manage microformats using the methods
listed here; for information about parsing microformats, see parsing microformats in javascript.
... getnamesfromnode() returns a space-delineated
list of microformat names that correspond to the specified microformat node.
... var name
list = microformats.getnamesfromnode(node); parameters node the node for which to retrieve a
list of microformat names.
... return value if the specified node is a microformat, the result is a space-delineated string
listing all the microformat names that correspond to the node.
Enabling Experimental Jetpack Features - Archive of obsolete content
to get a
list of mount paths that are available, see the method below.
...
list() arrayreturns an array of the set of potential stringmountpath as used in jetpack.future.import().
...a quick way of displaying the
list is to write it to the console.log.
... var
list = jetpack.future.
list();console.log(
list); open the firebug console to view.
Enabling - Archive of obsolete content
to get a
list of mount paths that are available, see the method below.
...
list()returns an array of the set of potential stringmountpath as used in jetpack.future.import().
...a quick way of displaying the
list is to write it to the console.log.
... var
list = jetpack.future.
list(); console.log(
list); open the firebug console to view.
Enabling Experimental Jetpack Features - Archive of obsolete content
to get a
list of mount paths that are available, see the method below.
...
list() arrayreturns an array of the set of potential stringmountpath as used in jetpack.future.import().
...a quick way of displaying the
list is to write it to the console.log.
... var
list = jetpack.future.
list(); console.log(
list); open the firebug console to view.
jspage - Archive of obsolete content
||"iframe",d);var b=function(){var g=$try(function(){return c.contentwindow.location.host;});if(!g||g==window.location.host){var h=new window(c.contentwindow); new document(c.contentwindow.document);$extend(h.element.prototype,element.prototype);}e.call(c.contentwindow,c.contentwindow.document);};var a=$try(function(){return c.contentwindow; });((a&&a.document.body)||window.frames[d.id])?b():c.add
listener("load",b);return c;}});var elements=new native({initialize:function(f,b){b=$extend({ddup:true,cash:true},b); f=f||[];if(b.ddup||b.cash){var g={},e=[];for(var c=0,a=f.length;c<a;c++){var d=document.id(f[c],!b.cash);if(b.ddup){if(g[d.uid]){continue;}g[d.uid]=true; }if(d){e.push(d);}}f=e;}return(b.cash)?$extend(f,this):f;}});elements.implement({filter:function(a,b){if(!a){return this;}return new...
...this;},haschild:function(l){l=document.id(l,true);if(!l){return false; }if(browser.engine.webkit&&browser.engine.version<420){return $a(this.getelementsbytagname(l.tagname)).contains(l);}return(this.contains)?(this!=l&&this.contains(l)):!!(this.comparedocumentposition(l)&16); },match:function(l){return(!l||(l==this)||(element.get(this,"tag")==l));}});native.implement([element,window,document],{add
listener:function(o,n){if(o=="unload"){var l=n,m=this; n=function(){m.remove
listener("unload",n);l();};}else{h[this.uid]=this;}if(this.addevent
listener){this.addevent
listener(o,n,false);}else{this.attachevent("on"+o,n); }return this;},remove
listener:function(m,l){if(this.removeevent
listener){this.removeevent
listener(m,l,false);}else{this.detachevent("on"+m,l);}return this; },retrieve:function(m,l){var...
... o=c(this.uid),n=o[m];if(l!=undefined&&n==undefined){n=o[m]=l;}return $pick(n);},store:function(m,l){var n=c(this.uid);n[m]=l; return this;},eliminate:function(l){var m=c(this.uid);delete m[l];return this;}});window.add
listener("unload",d);})();element.properties=new hash;element.properties.style={set:function(a){this.style.csstext=a; },get:function(){return this.style.csstext;},erase:function(){this.style.csstext="";}};element.properties.tag={get:function(){return this.tagname.tolowercase(); }};element.properties.html=(function(){var c=document.createelement("div");var a={table:[1,"<table>","</table>"],select:[1,"<select>","</select>"],tbody:[2,"<table><tbody>","</tbody></table>"],tr:[3,"<table><tbody><tr>","</tr></tbody></table>"]}; a.thead=a.tfoot=a.tbody;var b={set:function(){var e=array.f...
...g)){return this; }h[e].keys.push(g);var f=e,a=element.events.get(e),c=g,i=this;if(a){if(a.onadd){a.onadd.call(this,g);}if(a.condition){c=function(j){if(a.condition.call(this,j)){return g.call(this,j); }return true;};}f=a.base||f;}var d=function(){return g.call(i);};var b=element.nativeevents[f];if(b){if(b==2){d=function(j){j=new event(j,i.getwindow()); if(c.call(i,j)===false){j.stop();}};}this.add
listener(f,d);}h[e].values.push(d);return this;},removeevent:function(c,b){var a=this.retrieve("events");if(!a||!a[c]){return this; }var f=a[c].keys.indexof(b);if(f==-1){return this;}a[c].keys.splice(f,1);var e=a[c].values.splice(f,1)[0];var d=element.events.get(c);if(d){if(d.onremove){d.onremove.call(this,b); }c=d.base||c;}return(element.nativeevents[c])?this.remove
listener(c,e):this;},addevents:func...
Mozilla Crypto FAQ - Archive of obsolete content
for the very latest information about psm, nss, and other crypto-related mozilla developments, see the mozilla.dev.tech.crypto newsgroup or the corresponding dev-tech-crypto mailing
list.
... for more information on nss 3.1 see the nss 3.1 plan and the nss 3.1 build instructions; for more information on psm 1.3 see the psm 1.3 task
list posted by david drinan.
...specific questions about licensing of the psm and nss source code should be directed to the netscape.public.mozilla.license newsgroup or the associated mozilla-license mailing
list.
...munitions
list to the commerce control
list (ccl) of the ear.
Tamarin Build System Documentation - Archive of obsolete content
the smoke test
list is constantly updated to contain the most recent failures, most frequent failures, and the newest testcases.
... the
list of smoke tests are located in the tamarin-repository, test/run-smokes.txt, assume the start directory is test format is cd testdir; command to run test above the test should be a # comment describing why the test in the smokes, when test failed, possibly a bugzilla bug the tests can be run by following the above instructions for running buildbot scripts locally and executing the all/run-smoke-tes...
...ts.sh as a rule any test failure should be immediately added to the top of the smoke test
list so the
list is prioritized how to exclude tests from acceptance or mark them as known failures?
... the test/acceptance/testconfig.txt file contains a
list of tests marked as expected failures or skipped with the configuration see the testconfig.txt for current instructions generally the format is comma separated
list with regular expressions for test and configuration.
Event Handlers - Archive of obsolete content
a handler specifies what event it is
listening for using the event attribute.
... the most basic handler specifies the event to
listen for and an action to take when the handler fires.
...this attribute is a comma-separated
list of modifier keys that must be down at the time the key or mouse event occurs in order for the handler to execute.
... examples of common keys in the
list are shift and control.
Learn XPI Installer Scripting by Example - Archive of obsolete content
most installation scripts, including the one discussed here, take the following basic form (in pseudo-code and with links to the sections in which these installation steps are documented): initinstall(); if (verify_space()) { err = add_dirs_and_files; register_files; if (err==success) { performinstall() }; else { cancelinstall() }; } as you can see in the code
listing, the verification process at the top is on lines 1 to 18; the file addition process, here part of the main installation block, is on lines 24 to 41; the registration part of the main installation block is on lines 42-58; and the execution at the end of the main block is on lines 59 to 71.
...in the example above, all of the contents of the "bin" directory in the archive are queued for installation, and the target of that installation (when the installation is actually begun with a call to performinstall at the end), is the communicatorfolder directory defined at line 22 as "program." "program" is one of a short
list of keywords that can be used in place of full path names in methods such as addfile.
... "program" represents the directory where software itself is installed (e.g., c:\program files\ on win32 systems), as opposed to supporting directories like "components", "chrome", or "temporary" (see getfolder in the xpinstall api reference for a
list of keywords).
...when you install new chrome, for example, like the browser.xpi install does, you need to alert the chrome registry to these changes, so that skins, user preferences, packaging
lists, and localization bundles will all track the new software.
Deprecated and defunct markup - Archive of obsolete content
the
list below may include a few elements which are actually in use, but at a deeper level in the code.
... elements <actions> (
listed here by mistake or was it a container tag?) typo for <action> --neil 03 march 2011 <autorepeatbutton> (action occurs repeatedly on mouse hover--used to construct other elements; used in <arrowscrollbox> and large drop-down menus) so, not deprecated?
... --neil 03 march 2011 <bulletinboard> (made to support left/top styles, but <stack> can now do as well) <gripper> (inside of <scrollbar><thumb>; not to be used by itself) <
listboxbody> (internal use only; part of xbl for <
listbox>) <menubutton> (experiment in combining buttons and menus; use <button type> instead) <nativescrollbar> (displayed a native scrollbar; had been for mac only with native themes on) <outliner> (former name for <tree>; <
listbox> had been "<tree>") <popup> (use menupopup) <package> (no longer present but in older documentation) <scrollbarbutton> (button at end of scrollbar; had been only within larger <scrollbar>) so, not deprecated, but internal use only?
...ment --neil 03 march 2011 <treecaption> (old/experimental and unsupported xul tags) <treecolgroup> (former name for <treecols> <treecolpicker> (internal use only; part of xbl for <tree>) <treefoot> (old/experimental and unsupported xul tags) <treeindentation> (old/experimental and unsupported xul tags) was a part of the old <tree> that predated <outliner> that was not converted to <
listbox>--neil 03 march 2011 <treeicon> (old/experimental and unsupported xul tags) <treerows> (internal use only; part of xbl for <tree>) attributes @debug="true" provided struts and springs around boxes to facilitate identification of flex issues but does not seem to work now you need a special debug_layout build --neil 03 march 2011 references xul element reference by neal deakin ...
Writing to Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data,
list of file-related error codes.
...see file errors for a
list of errors that might occur.
...however, here is an example of how they might be used: var stream = io.newoutputstream(file, "text nocreate append"); the flags are specified in a space separated
list as the second argument to the newoutputstream method.
...for a
list of supported character encodings, see supported character sets.
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogress
listener addsession addtab addtabsprogress
listener 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...
... movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogress
listener removesession removetab removetabsprogress
listener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection ...
... related dom element methods dom:element.addevent
listener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagname dom:element.getelementsbytagnamens dom:element.getfeature fixme: brokenlink dom:element.getuserdata dom:element.hasattribute dom:element.hasattributens dom:element.hasattributes dom:element.haschildnodes dom:element.insertbefore dom:element.isequalnode dom:element.issamenode dom:element.issupported dom:element.lookupnamespaceuri dom:element.lookupprefix dom:element.normalize dom:element.removeattribute dom:element.removeattributenode dom:element.removeattrib...
...utens dom:element.removechild dom:element.removeevent
listener dom:element.replacechild dom:element.setattribute dom:element.setattributenode dom:element.setattributenodens dom:element.setattributens dom:element.setuserdata ...
ContextMenus - Archive of obsolete content
although there are several ways to open a context menu, a single event may be used to
listen for any of these situations; the 'contextmenu' event is fired in any case.
... <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event
listener attached using the oncontextmenu attribute.
... function checkcontextmenu(event) { if (event.target.localname == "textbox") event.preventdefault(); } function init() { var container = document.getelementbyid("container"); container.addevent
listener("contextmenu", checkcontextmenu, true); } the 'checkcontextmenu' function checks to see if the textbox was the target of the context menu and, if so, cancels the event using the preventdefault method.
...the event
listener is attached using the addevent
listener method within the 'init' function.
OpenClose - Archive of obsolete content
if you do want to open a submenu, open the parent menu first, and then open the child menu in a popupshown event
listener.
...for instance, let's say that a file menu has a submenu containing a
list of recent files.
...attaching an event
listener which
listens for the popuphiding event can be used to remove any commands that were adding during the popupshowing event.
...here is an example mouse click event
listener: function mouseclicked(event) { var panel = document.getelementbyid("some-panel"); panel.openpopup(null, "", event.clientx, event.clienty, false, false); } the openpopupatscreen method a second method, openpopupatscreen, may be used to open up a popup and place it at a specific screen coordinate.
Popup Guide - Archive of obsolete content
a brief overview of each type is
listed here; more details for each type can be found by following the corresponding links.
...specifically, the first two types in the
list below are menus.
...a menu is normally hidden, and when activated, a popup appears containing the
list of commands.
...it displays items in a
list, can display submenus, and provides keyboard navigation between the items.
Building Trees - Archive of obsolete content
rather than generate content for every row in the tree, the results are stored in a
list inside the builder.
...here is an example (using an rdf source): <tree id="photos
list" 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"/...
...for example: <tree id="photos
list" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="photo" label="photo" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell src="rdf:*"/> </treerow> </treeitem> </treechildren> </template> </tree> t...
...untry" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <treechildren> <treeitem uri="?photo"> <treerow properties="?countrytitle"> <treecell src="?photo"/> </treerow> </treeitem> </treechildren> </action> </rule> you might use the following css to change the border around rows
listing a particular country: treechildren::-moz-tree-row(netherlands) { border: green 1px solid; } the result of this example is a tree where one row has a green border around it.
Focus and Selection - Archive of obsolete content
you can also add event handlers dynamically using the dom function addevent
listener.
...example 3 : source view <window id="focus-example" title="focus example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init(){ addevent
listener("focus",setfocusedelement,true); } function setfocusedelement(){ var focused = document.commanddispatcher.focusedelement; document.getelementbyid("focused").value = focused.tagname; } </script> <hbox> <label control="username" value="user name:"/> <textbox id="username"/> </hbox> <button label="hello"/> <checkbox label="remember this decision"/> <label id="focused" value="-no focu...
...we want to use a capturing event handler, so the addevent
listener method needs to be used.
...this means that when the fka preference is off, only textboxes and
lists/trees are focusable with the keyboard, as well as from your code using focus().
Manifest Files - Archive of obsolete content
g/ xpcnativewrappers=yes content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes overlay chrome://global/content/viewsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://global/content/viewpartialsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul two packages are
listed here, 'branding' and 'browser'.
...add the following to the file: content findfile file:///findfile/content/ skin findfile classic/1.0 file:///findfile/skin/ locale findfile en-us file:///findfile/locale/ create the new directories
listed above.
...however, applications installed with a script will not be
listed in the extension manager and there is no automated method to uninstall them.
...check if your application is
listed.
More Button Features - Archive of obsolete content
example 1 : source view <button label="help" image="happy.png"/> button with css image another way to specify the image is by using the css
list-style-image style property on the button.
...example 2 : source view <button id="find-button" label="find" style="
list-style-image: url('happy.png')"/> in this case, the image 'happy.png' is displayed on the button.
...button with menupopup you can place a menupopup inside the button to cause a menu to drop down when the button is pressed, much like the menu
list.
...note that selecting one of these menu items does not change the label on the button, unlike a menu
list.
Styling a Tree - Archive of obsolete content
you can set the image with the
list-style-image property.
... treechildren::-moz-tree-row(readonly) { border: 1px solid red; } treechildren::-moz-tree-row(readonly, unread) { background-color: rgb(80%, 80%, 80%); } default properties the properties
list for tree elements contain a small number of default properties, which you can also use in a style sheet.
... prior to gecko 22 the last argument to each of these functions is a properties
list which the view is expected to fill with a
list of properties.
... getservice(components.interfaces.nsiatomservice); props.appendelement(aserv.getatom("makeitblue")); } } the properties
list requires an array of atom objects, which can be thought of as constant strings.
Templates - Archive of obsolete content
<button class="rdf:http://www.example.com/rdf#class" uri="rdf:*" label="rdf:http://www.example.com/rdf#name" crop="rdf:http://www.example.com/rdf#crop"/> as you can see, you can dynamically generate
lists of elements with the attributes provided by a separate datasource.
... more examples by adding these features to the container the template is in, which in this case is a box, and to the elements inside the template, we can generate various interesting
lists of content from external data.
...this is a separator in the bookmark
list.
... rule example the following example demonstrates the earlier example with two rules: example 4 : source <window id="example-window" title="bookmarks
list" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <rule rdf:type="http://home.netscape.com/nc-rdf#bookmarkseparator"> <spacer uri="rdf:*" height="16"/> </rule> <rule> ...
Tree View Details - Archive of obsolete content
<window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="element
list" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> </window> we use a simple tree here with no data in the treechildren.
... function init() { document.getelementbyid("element
list").view = treeview; } the custom tree view will need to implement a number of methods, of which the important ones will be examined individually.
...they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="element
list" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { solids: ["silver", "gold", "lead"], liquids: ["mercury"], gases: ["helium", "nitrogen"] }, visibledata : [ ["solids", true, false], ["liquids", true, false], ["gases", true, false] ]...
...n(col, elem) {}, selectionchanged: function() {}, cyclecell: function(idx, column) {}, performaction: function(action) {}, performactiononcell: function(action, index, column) {}, getrowproperties: function(idx, prop) {}, getcellproperties: function(idx, column, prop) {}, getcolumnproperties: function(column, element, prop) {}, }; function init() { document.getelementbyid("element
list").view = treeview; } ]]></script> </window> next, we'll look in more detail at the tree box object.
Updating Commands - Archive of obsolete content
a command updater will
listen for these situations and code can be executed which enables and disables commands as necessary.
...the events attribute is used to
list the events that the command updater
listens for.
...in the example above, the command updater
listens for the focus event.
...command updaters have a number of events which they can respond to which are
listed below.
Using Remote XUL - Archive of obsolete content
however, there is a white
list that lets you specify sites that can still use remote xul.
... the remote xul manager extension lets you manage this white
list, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces.
...we add an id attribute to the iframe element so we can reference it from our function, and we add an oncommand event
listener to the menubar element that calls the function every time the user clicks a button or selects a menu item.
... the oncommand event
listener is a generic
listener that fires whenever the user manipulates an element in some conclusive way.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical
list of all xul elements action arrowscrollbox 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 menu
list menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer rich
listbox rich
listitem row rows rule scale scri...
...e 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 --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image
list...
...s --- trees --- layout --- templates --- scripting --- helper elements other xul
lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menu
list progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (moz...
...illa autocomplete) timepicker description label image
listbox
listitem
listcell
listcol
listcols
listhead
listheader rich
listbox rich
listitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script commandset command broadcaster broadcasterset observes key keyset stringbundle stringbundleset arrowscrollbox dropmarker grippy scrollbar scrollcorner spinbuttons all attributes all properties all methods attributes defined for all xul elements style classes event handlers deprecated/defunct markup ...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
image <image src="images/img.xbm" tooltiptext='<!--image label-->'/> key see keyboard shortcut tutorial keyset see keyboard shortcut tutorial
listbox <label control='
listid'><!--label text--></label> <
listbox id="
listid"> <
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" /> <
listhead...
...er 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.
... items are read per line as in "pearl female gray"
listitem see
listbox menuitem see menu
list and menubar menubar <menubar hidden="false"> <menu label="file" accesskey="f"> <menupopup> <menuitem label="new" accesskey="n" key="file-new-key"/> </menupopup> </menu> </menubar> menu
list <label value="<!--label text-->" control="comboid" /> <menu
list id="comboid"> <menupopup> <menuitem label="<!--option1-->" /> <menuitem label="<!--option2-->" selected="true" /> <menuitem label="<!--option3-->" /> </menupopup> </menu
list> menupopup see menu
list and menubar popup see popupset popupset be careful regarding keyboard access of popups...
... tree elements that do not expose anything to screen readers/have no discovered accessibility issues yet: arrowscrollbox bbox box grippy hbox menuseparator overlay page script spacer splitter stringbundle stringbundleset vbox window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor
listcell member observes preference preferences prefpane prefwindow resizer rich
listbox rich
listitem resizer rule scrollbar scrollbox scrollcorner separator template textnode titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip treeseparator triple wizard wizardpage cases to r...
colorpicker - Archive of obsolete content
overview an onchange attribute is an event
listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as
listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select
list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
... value property gets and sets color attribute methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement bugs the onchange event only fires if attribute type is set to "button".
command - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
...this means that, to execute these commands, key events won't be passed to content, and event
listeners registered for them in content will not be executed.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related xul:
list of commands ...
notification - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
...for user editable menu
list elements, the contents, as visible to the user, are read and set using the menu
list.value syntax.
...for textbox and user editable menu
list elements, the contents, as visible to the user, are read and set using the textbox.value and menu
list.value syntax.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setatt...
promptBox - Archive of obsolete content
method overview nsidomelement appendprompt(args, onclosecallback); void removeprompt(nsidomelement aprompt); node
list listprompts(nsidomelement aprompt); methods appendprompt() creates a new prompt, adding it to the tab.
...
listprompts() returns a
list of all the prompts on the tabbrowser.
... node
list listprompts( nsidomelement aprompt ); parameters aprompt this parameter isn't used; i don't know why it's even there.
... return value a node
list containing all of the prompt elements on the tabbrowser.
toolbarpalette - Archive of obsolete content
it is not displayed, but is used by the toolbar customization dialog to display the
list of items.
... the children of the toolbarpalette should be the complete
list of toolbarbuttons and toolbaritems that can be added to the toolbar.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbox - Archive of obsolete content
the external toolbars associated with a toolbox are
listed in the array of elements provided by the toolbox's externaltoolbars property.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(),...
... hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendcustomtoolbar( name, currentset ) firefox only return type: element adds a custom toolbar to the toolbox with the given name.
... you can supply a comma-separated
list of toolbar item ids as the second argument to add some items by default.
window - Archive of obsolete content
listen to the sizemodechange event dispatched to the dom window to get notified when the window state changes.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata see also: dom window object methods note the error message "xml parsing error: undefined entity...<window" can be caused by a missing or unreachable dtd file referenced in the xul file.
... <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <!-- icon from chrome --> <html:link rel="icon" href="chrome://myextension/content/path/to/favicon.png"/> <!-- from a remote site --> <html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/> since firefox 3.6 the above
listed code does not work correctly - it produces the following message: "warning: xul box for box element contained an inline link child, forcing all its children to be wrapped in a block".
reftest opportunities files - Archive of obsolete content
for now, create a bug in the core product, testing component in the bugzilla, if you can point to a file in this
list and can attach the html reference that can be used to compare the output.
...test/sec051103b http://dbaron.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec060403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1 http://dbaron.org/css/test/noncss2 http://dbaron.org/css/test/shortbox http://dbaron.org/css/test/shortbox2 http://dbaron.org/css/test/rootbox http://dbaron.org/css/test/
listbox http://dbaron.org/css/test/margtest http://dbaron.org/css/test/shortborder http://dbaron.org/css/test/shortborder2 http://dbaron.org/css/test/sec0805 http://dbaron.org/css/test/dborder http://dbaron.org/css/test/sec090102 http://dbaron.org/css/test/sec090201 http://dbaron.org/css/test/sec090203 http://dbaron.org/css/test/sec090204 http://dbaron.org/css/test/sec090205 http://dbaron.org/css/test...
.../htmlparser/tests/html/pre001.html parser/htmlparser/tests/html/param002.html parser/htmlparser/tests/html/param001.html parser/htmlparser/tests/html/option.html parser/htmlparser/tests/html/obj003.html parser/htmlparser/tests/html/obj002.html parser/htmlparser/tests/html/obj001.html parser/htmlparser/tests/html/nulltest.html parser/htmlparser/tests/html/newlines.html parser/htmlparser/tests/html/
list003.html parser/htmlparser/tests/html/
list002.html parser/htmlparser/tests/html/
list001.html parser/htmlparser/tests/html/layer01.html parser/htmlparser/tests/html/layer003.html parser/htmlparser/tests/html/layer002.html parser/htmlparser/tests/html/layer001.html parser/htmlparser/tests/html/java.html parser/htmlparser/tests/html/insdel02.html parser/htmlparser/tests/html/insdel01.html parser/html...
...s/html/home01.html parser/htmlparser/tests/html/head03.html parser/htmlparser/tests/html/head02.html parser/htmlparser/tests/html/head01.html parser/htmlparser/tests/html/form002.html parser/htmlparser/tests/html/form001.html parser/htmlparser/tests/html/fieldset003.html parser/htmlparser/tests/html/fieldset002.html parser/htmlparser/tests/html/fieldset001.html parser/htmlparser/tests/html/entity_
list.html parser/htmlparser/tests/html/entity_attr
list.html parser/htmlparser/tests/html/entity001.html parser/htmlparser/tests/html/endswithcr.html parser/htmlparser/tests/html/doc002.html parser/htmlparser/tests/html/doc001.html parser/htmlparser/tests/html/del011.html parser/htmlparser/tests/html/del010.html parser/htmlparser/tests/html/del009.html parser/htmlparser/tests/html/del008.html parser/ht...
NPN_RequestRead - Archive of obsolete content
syntax #include <npapi.h> nperror npn_requestread(npstream* stream, npbyterange* range
list); parameters the function has the following parameters: stream stream of type np_seek from which to read bytes.
... range
list range of bytes in the form of a linked
list of npbyterange objects, each of which specifies a request for a range of bytes.
...for multiple requests, the function creates a linked
list of npbyterange structures, each of which represents a separate request.
... if the plug-in requests multiple ranges (either through a
list of npbyterange objects in a single call to npn_requestread(), or multiple calls to npn_requestread()), the browser can write individual ranges in any order, and with any number of npp_writeready() and npp_write() calls.
-ms-content-zoom-snap-points - Archive of obsolete content
snap
list( <percentage># ) specifies the position of individual snap-points as a comma-separated
list of percentages, each of which represents a zoom factor.
... formal syntax snapinterval( <percentage>, <percentage> ) | snap
list( <percentage># ) examples this example demonstrates both types of values for the -ms-content-zoom-snap-points property.
...in the second selector, each snap-point is
listed separately—100%, 200%, 300%, and so on.
...} .snappy2 { -ms-content-zoom-snap-points: snap
list(100%, 200%, 300%, 400%, 500%); ...
-ms-filter - Archive of obsolete content
syntax the -ms-filter property is specified as a string that contains a
list of one or more items, separated by spaces, of the following types: filters transitions procedural surfaces formal syntax filter: <-ms-filter-function>+ -ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ] where <-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy> where <-ms-filter-function-progid> = 'progid:' [ <ident-token> ...
...'.' ]* [ <ident-token> | <function-token> <any-value> ')' ] <-ms-filter-function-legacy> = <ident-token> | <function-token> <any-value> ')' the <string> contains the
list of filters, transitions, and procedural surfaces.
... alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addevent
listener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter.
... initial value"" (the empty string)applies toall elementsinheritednocomputed valueas specifiedanimation typediscrete remarks the following table
lists the most popular dx filters and their standards-based alternatives: dx filter standards-based alternative alpha opacity alphaimageloader <img> or background-image and related properties gradient background-image: linear-gradient() dropshadow text-shadow or box-shadow matrix transform, transform-origin in windows ...
-ms-scroll-snap-points-x - Archive of obsolete content
snap
list( <length-percentage># ) specifies the position of individual snap-points as a comma-separated
list of values, each of which represents a zoom factor.
... formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snap
list( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-x property.
...in the second selector, each snap-point is
listed separately — 100%, 200%, 300%, and so on.
...w-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-x-min: 100%; -ms-scroll-limit-x-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snap
list(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
-ms-scroll-snap-points-y - Archive of obsolete content
snap
list( <length-percentage># ) specifies the position of individual snap-points as a comma-separated
list of values, each of which represents a zoom factor.
... formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snap
list( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-y property.
...in the second selector, each snap-point is
listed separately — 100%, 200%, 300%, and so on.
...w-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-y-min: 100%; -ms-scroll-limit-y-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-y: snap
list(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
Descendants and Filters - Archive of obsolete content
that is, if there are multiple descendants of the requested type, an xml
list is returned, instead of the normal element.
... the * selector returns all descendants in an xml
list.
...consider var element = <dogs> <fido color="brown"/> <spike color="black"/> <killer color="brown"/> </dogs>; var
list = element.*.(@color == "brown"); originally, elements.* returns a
list with all 3 dogs in it.
...the filtering conditional therefore creates a
list with just fido and killer as members.
Windows Media in Netscape - Archive of obsolete content
example 1: client-side detection scripts browser architecture supports: netscapeplugin windows media player installed: true windows media scriptable: false windows media version: pluginversion a complete source code
listing showing how that detection was done can be found here (devedge-temp).
...the code
listing below provides a mechanism to to this.
...here's an example of directly instantiating the control programmatically (without an object element) and scripting it: try { var player = null; if (window.activexobject) { player = new activexobject("wmplayer.ocx.7"); } else if(window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { ; } if (player) { player.currentplay
list = player.mediacollection.getbyname('preludesteel'); player.controls.play(); } callbacks from within windows media player to web pages: script for event netscape 7.1 supports ie's <script for="activexcontrol" event="activexcontrolevent"> script elements.
... the min-object-usage.html sample shows a minima
list control manipulated by scripting and html buttons.
Game promotion - Game development
if you want to learn more about the etiquette of contacting the press you should definitely check out how to contact press - a great guide from pixel prospector, and the video game journaliser site curated by them for the
list of sites to contact.
...you should also be rea
listic however — don't think this alone will skyrocket your downloads or visits, and be prepared to deal with bad reviews as well as good ones.
...this big
list of youtubers is a great place to start.
... events if you've gone through all the options
listed above you can still find new, creative ways to promote your game — events are another good example.
Building up a basic demo with PlayCanvas editor - Game development
after clicking the button you'll see a dropdown
list containing a lot of various entities to choose from.
...click on the plus button in the assets tab, and click on the material option in the dropdown
list that appears to create a new material.
...click on the root folder in the hierarchy panel (to make sure that the new shape appears in the root, and not as a child of the box) then click on the big add entity (plus) button and select cylinder from the dropdown
list — it will add a new cylinder shape to the scene.
... at the bottom of the screen you can see the
list of scripts available — for now there's only boxanimation.js — clicking it will add the animation script to the box object.
Desktop gamepad controls - Game development
the
list of supported devices is also quite extensive — most popular gamepads (e.g.
...first, we need an event
listener to
listen for the connection of the new device: window.addevent
listener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on the screen when the device is connected: we can also show the id of the device — in the case ...
... you could also create a helper function that would assign proper names to the
listed buttons, so for example istead of checking out if gamepadbuttonpressedhandler(3) is pressed, you could do a more descriptive check: gamepadbuttonpressedhandler('dpad-right').
...the connect() and disconnect() functions are bound to the following events: window.addevent
listener("gamepadconnected", gamepadapi.connect); window.addevent
listener("gamepaddisconnected", gamepadapi.disconnect); they are fired when the gamepad is connected and disconnected respectively.
Mobile touch controls - Game development
pure javascript approach we could implement touch events on our own — setting up event
listeners and assigning relevant functions to them would be quite straightforward: var el = document.getelementsbytagname("canvas")[0]; el.addevent
listener("touchstart", handlestart); el.addevent
listener("touchmove", handlemove); el.addevent
listener("touchend", handleend); el.addevent
listener("touchcancel", handlecancel); this way, touching the game's <canvas> on the mobile screen would emit events,...
...the function touchhandler will assign proper variables to the ship's position so that we can use it for both cases: when the player touches the screen but doesn't move it (touchstart), and when the finger is moved on the screen (touchmove): document.addevent
listener("touchstart", touchhandler); document.addevent
listener("touchmove", touchhandler); the touchhandler function looks like this: function touchhandler(e) { if(e.touches) { playerx = e.touches[0].pagex - canvas.offsetleft - playerwidth / 2; playery = e.touches[0].pagey - canvas.offsettop - playerheight / 2; output.innerhtml = "touch: "+ " x: " + playerx + ", y: " + p...
... input events instead of using the pointers directly it is also possible to
listen for this.game.input events, like ondown, onup, ontap and onhold: this.game.input.ondown.add(itemtouched, this); function itemtouched(pointer) { // do something } the itemtouched() function will be executed when the ondown event is dispatched by touching the screen.
... implementation the easiest way to add an interactive object that will
listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the clickenclave() function when it is touched.
Unconventional controls - Game development
you can check them by printing the responses out in the console: window.addevent
listener("keydown", function(event) { console.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console.
...all that is needed is checking for key presses: window.addevent
listener("keydown", function(event) { switch(event.keycode) { case 8: { // pause the game break; } case 588: { // detonate bomb break; } // ...
...we next add these lines after all the event
listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 180); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * t...
... an event
listener for device proximity would look like this: window.addevent
listener('deviceproximity', function(event) { var min = event.min; var max = event.max; var proximity = event.value; }); the min and max values are the minimum and the maximum distances respectively between which the sensor can detect the exact proximity value.
2D maze game with device orientation - Game development
this.gametitle.anchor.set(0.5,0); this.startbutton = this.add.button(ball._width*0.5, 200, 'button-start', this.startgame, this, 2, 0, 1); this.startbutton.anchor.set(0.5,0); this.startbutton.input.usehandcursor = true; }, startgame: function() { this.game.state.start('howto'); } }; to create a new button there's add.button method with the following
list of optional arguments: top absolute position on canvas in pixels.
...here’s the code from the create() function responsible for this: window.addevent
listener("deviceorientation", this.handleorientation, true); we’re adding an event
listener to the "deviceorientation" event and binding the handleorientation function which looks like this: handleorientation: function(e) { var x = e.gamma; var y = e.beta; ball._player.body.velocity.x += x; ball._player.body.velocity.y += y; }, the more you tilt the device, the more force is appli...
...if you don't want to loop through the
list of items again to add a property to every single one explicitly, you can use setall on a group to apply it to all the items in that group.
...the following line in the update() function adds a
listener that fires when the ball gets to the hole.
Test your skills: CSS and JavaScript accessibility - Learn web development
css accessibility 1 in the first task you are presented with a
list of links.
... we'd like you to assume that the existing ruleset with the a selector is supplied by some cms, and that you can't change it — instead, you need to create new rules to make the links look and behave like links, and for the user to be able to tell where they are in the
list.
...we have a simple app that presents a
list of animal names.
... clicking one of the animal names causes a further description of that animal to appear in a box below the
list.
Test your skills: WAI-ARIA - Learn web development
wai-aria 1 in our first aria task, we present you with a section of non-semantic markup, which is obviously meant to be a
list.
... assuming you are not able to change the elements used, how can you allow screenreader users to recognize this as a
list?
...as before, we have a simple app that presents a
list of animal names.
... clicking one of the animal names causes a further description of that animal to appear in a box below the
list.
Typesetting a community school homepage - Learn web development
lists: make sure the spacing of your
lists and
list items works well with the styling of the overall page.
... each
list item should have the same line-height as a paragraph line, and each
list should have the same spacing at its top and bottom as you have between paragraphs.
... give your
list items a nice bullet, appropriate for the design of the page.
... previous overview: styling text in this module fundamental text and font styling styling
lists styling links web fonts typesetting a community school homepage ...
Web fonts - Learn web development
this takes one or more font family names, and the browser travels down the
list until it finds a font it has available on the system it is running on: p { font-family: helvetica, "trebuchet ms", verdana, sans-serif; } this system works well, but traditionally web developers' font choices were limited.
... you then need to copy the css declarations
listed into your css as appropriate, to apply the custom fonts to your html.
...multiple declarations can be
listed, separated by commas — the browser will search through them and use the first one it can find that it understands — it is therefore best to put newer, better formats like woff2 earlier on, and older, not so good formats like ttf later on.
... previous overview: styling text next in this module fundamental text and font styling styling
lists styling links web fonts typesetting a community school homepage ...
Example 2 - Learn web development
js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="opt
list hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --...
...------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .opt
list { position: absolute; top : 100%; left : 0; } .select .opt
list.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-l...
...cal-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .opt
list { z-index : 2;
list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { pa...
...dding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addevent
listener("load", function () { var form = document.queryselector('form'); form.class
list.remove("no-widget"); form.class
list.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="opt
list hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </u...
Test your skills: Other controls - Learn web development
inside the
list, split the choices up into 2 subgroups — "mains" and "snacks".
... other controls 3 in our final task of this set, we start with much the same
list of food choices.
... put the food choices into a
list that can be associated with a form input.
... associate the
list with your text input, so that when you type characters, any of the
list options that match the character sequence are given in a dropdown
list as autocomplete suggestions.
UI pseudo-classes - Learn web development
there are many others too, but the ones
listed above are the most obviously useful.
...the ones
listed above all have pretty good browser support, but of course, you should test your form implementations carefully to make sure they work for your target audience.
... now finally, we've used some javascript to toggle the disabling of the billing address fields: // wait for the page to finish loading document.addevent
listener('domcontentloaded', function () { // attach `change` event
listener to checkbox document.getelementbyid('billing-checkbox').addevent
listener('change', togglebilling); }, false); function togglebilling() { // select the billing text fields let billingitems = document.queryselectorall('#billing input[type="text"]'); // select the billing text labels let billinglabels = document.qu...
...this could be useful for adding an indicator to a
list of options to remind the user what the defaults (or starting options) were, in case they want to reset their choices.
JavaScript basics - Learn web development
it's outside the scope of this article—as a light introduction to javascript—to present the details of how the core javascript language is different from the tools
listed above.
...see expressions and operators for a complete
list.
...these are code structures that
listen for activity in the browser, and run code in response.
...if you enjoyed playing, and wish to go further, take advantage of the resources
listed below.
Images in HTML - Learn web development
; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addevent
listener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addevent
listener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = ...
...'show solution'; } updatecode(); }); var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addevent
listener('input', updatecode); window.addevent
listener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = text...
...; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addevent
listener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addevent
listener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = ...
...tion'; } updatecode(); }); var htmlsolution = '<figure>\n <img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>a t-rex on display in the manchester university museum</figcaption>\n</figure>'; var solutionentry = htmlsolution; textarea.addevent
listener('input', updatecode); window.addevent
listener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scr...
General asynchronous programming concepts - Learn web development
in our simple-sync.html example (see it running live), we add a click event
listener to a button so that when clicked, it runs a time-consuming operation (calculates 10 million dates then logs the final one to the console) and then adds a paragraph to the dom: const btn = document.queryselector('button'); btn.addevent
listener('click', () => { let mydate; for(let i = 0; i < 10000000; i++) { let date = new date(); mydate = date } console.log(mydate); let pe...
... note: the previous example is very unrea
listic.
... in our second example, simple-sync-ui-blocking.html (see it live), we simulate something slightly more rea
listic that you might come across on a real page.
... function expensiveoperation() { for(let i = 0; i < 1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degtorad(0), degtorad(360), false); ctx.fill() } } fillbtn.addevent
listener('click', expensiveoperation); alertbtn.addevent
listener('click', () => alert('you clicked me!') ); if you click the first button and then quickly click the second one, you'll see that the alert does not appear until the circles have finished being rendered.
Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addevent
listener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
... we add a click event
listener to it so that when the button is clicked: an alert() message appears.
... an example of an async callback is the second parameter of the addevent
listener() method (as we saw in action above): btn.addevent
listener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); the first parameter is the type of event to be
listened for, and the second parameter is a callback function that is invoked when the event is fire...
... it worked :) if this confuses you, then consider the following smaller example: console.log("registering click handler"); button.addevent
listener('click', () => { console.log("get click"); }); console.log("all done"); this is very similar in behavior — the first and third console.log() messages will be shown immediately, but the second one is blocked from running until someone clicks the mouse button.
Third-party APIs - Learn web development
add the following line to your javascript, below the "// event
listeners to control the functionality" comment.
... searchform.addevent
listener('submit', submitsearch); now add the submitsearch() and fetchresults() function definitions, below the previous line: function submitsearch(e) { pagenumber = 0; fetchresults(e); } function fetchresults(e) { // use preventdefault() to stop the form submitting e.preventdefault(); // assemble the full url url = baseurl + '?api-key=' + key + '&page=' + pagenumber + '&q=' + searchterm.value + '&fq=document_type:("article")'; if(startdate.value !== '') { url += '&begin_date=' + startdate.value; }; if(enddate.value !== '') { url += '&end_date=' + enddate.value; }; } submitsearch() sets the page number back to 0 to begin with, then...
... this allows us to write a simp
listic pagination function easily.
... below the existing addevent
listener() call, add these two new ones, which cause the nextpage() and previouspage() functions to be invoked when the relevant buttons are clicked: nextbtn.addevent
listener('click', nextpage); previousbtn.addevent
listener('click', previouspage); below your previous addition, let's define the two functions — add this code now: function nextpage(e) { pagenumber++; fetchresults(e); }; function previouspage(e) { if(pagenumber > 0) { pagenumber--; } else { return; } fetchresults(e); }; the first function is simple — we increment the pagenumber variable, then run the fetchresults() function again to display the next page's results.
Website security - Learn web development
website security threats this section
lists just a few of the most common website threats and how they are mitigated.
...for example, the following code is intended to
list all users with a particular name (username) that has been supplied from an html form: statement = "select * from users where name = '" + username + "';" if the user specifies a real name, the statement will work as intended.
... for a comprehensive
listing of website security threats see category: web security exploits (wikipedia) and category: attack (open web application security project).
... keep track of the most popular threats (the current owasp
list is here) and address the most common vulnerabilities first.
Getting started with Ember - Learn web development
now type the following into your terminal to install ember-cli: npm install -g ember-cli this tool provides the ember program in your terminal, which is used to create, build, develop, test, and scaffold your application (run ember --help for a full
list of commands and their options).
... finally, find app.css, located at app/styles/app.css, and paste in the following: :focus, .view label:focus, .todo-
list li .toggle:focus + label, .toggle-all:focus + label { /* !important needed because todomvc styles deliberately disable the outline */ outline: #d86f95 solid !important; } this css overrides some of the styles provided by the todomvc-app-css npm package, therefore allowing keyboard focus to be visible.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo
list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a
list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo
list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Ember resources and troubleshooting - Learn web development
previous overview: client-side javascript frameworks next our final ember article provides you with a
list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
... general troubleshooting, gotchas, and misconceptions this is nowhere near an extensive
list, but it is a
list of things that came up around the time of writing (latest update, may 2020).
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo
list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a
list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo
list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Framework main features - Learn web development
frameworks each provide their own syntax for
listening to browser events, which reference the names of the equivalent native browser events.
... in react,
listening for the click event requires a special property, onclick.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo
list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a
list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo
list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Getting started with React - Learn web development
we don't write a path or extension when importing the react module — this is not a local file; instead, it is
listed as a dependency in our package.json file.
...in the next article, we'll start building our first proper application — a todo
list.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo
list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a
list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo
list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Introduction to automated testing - Learn web development
lowing test to the bottom of gulpfile.js: function css(cb) { return gulp.src('src/style.css') .pipe(csslint()) .pipe(csslint.formatter('compact')) .pipe(autoprefixer({ browsers: ['last 5 versions'], cascade: false })) .pipe(gulp.dest('build')); cb(); } here we grab our style.css file, run csslint on it (which outputs a
list of any errors in your css to the terminal), then runs it through autoprefixer to add any prefixes needed to make nascent css features run in older browsers.
... in the next screen, type in the url of a page you want to test (use http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html, for example), then choose a browser/os combination you want to test by using the different buttons and
lists.
...ntents: const saucelabs = require('saucelabs'); let myaccount = new saucelabs({ username: "your-sauce-username", password: "your-sauce-api-key" }); myaccount.getaccountdetails(function (err, res) { console.log(res); myaccount.getservicestatus(function (err, res) { // status of the sauce labs services console.log(res); myaccount.getjobs(function (err, jobs) { // get a
list of all your jobs for (let k in jobs) { if ( jobs.hasownproperty( k )) { myaccount.showjob(jobs[k].id, function (err, res) { let str = res.id + ": status: " + res.status; if (res.error) { str += "\033[31m error: " + res.error + " \033[0m"; } console.log(str); }); } } }); }); }); y...
... the basics: manual tests the testingbot dashboard
lists the various options you can choose from.
Implementing feature detection - Learn web development
the dive into html5 detecting html5 features page has a lot more useful feature detection tests besides the ones
listed above, and you can generally find a feature detection test for most things by searching for "detect support for your-feature-here" in your favorite search engine.
... bear in mind though that some features, however, are known to be undetectable — see modernizr's
list of undetectables.
...if you search through the class
list, you'll also see others relating to flexbox, like: flexboxlegacy for the old flexbox spec (2009).
... note: you can find a
list of what all the class names mean — see features detected by modernizr.
Handling common HTML and CSS problems - Learn web development
one service that can do this is the w3c markup validation service, which allows you to point to your code, and returns a
list of errors: css has a similar story — you need to check that your property names are spelled correctly, property values are spelled correctly and are valid for the properties they are used on, you are not missing any curly braces, and so on.
... you should see a package called lint at the top of the
list.
... once you've identified a
list of potential problem technologies you will be using, it is a good idea to research what browsers they are supported in, and what related techniques are useful.
...you can choose which browsers you want to make sure you support using the notation outlined in autoprefixer options; also see browsers
list queries, which this is based on, for more detail.
Setting up your own test automation environment - Learn web development
now if you go to your lambdatest automation dashboard, you'll see your test
listed; from here you'll be able to see videos, screenshots, and other such data.
... now if you go back to the browserstack automation dashboard page, you'll see your test
listed: if you click on the link for your test, you'll get to a new screen where you will be able to see a video recording of the test, and multiple detailed logs of information pertaining to it.
... now if you go to your sauce labs automated test dashboard page, you'll see your test
listed; from here you'll be able to see videos, screenshots, and other such data.
...not a beta), and from the
list choose a file starting with "selenium-server-standalone".
Accessibility/LiveRegionDevGuide
event types the table for web page mutation event types
lists the two major event types associated with live regions, namely text-changed and object changed events.
... filtering events text changed events certain web page mutation events, such as adding to a
list, trigger both an object changed and a text changed event.
...the following is a
list of potential filtering techniques: the "event-from-input" object attribute can be used to filter events that were triggered by user action.
...(at-spi only) a global variable can be set in a document:load:complete event
listener and reset in a object:state-changed:busy
listener.
Information for users
please give us feedback on the discussion
list!
... firefox accessibility skins and themes at the excellent access firefox website, you will find many valuable resources, including a
list of firefox themes that have been specially designed for those with low vision: themes with high color constrast themes with big icons themes with extra large and bright icons themes with extra large and extra bold text join the mozilla accessibility community live chat both end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... newsgroup and mailing
list we have two discussion
lists, which can be read via a newsgroup reader, as a mailing
list or via google groups.
... purpose newsgroup mailing
list google group developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Mozilla’s UAAG evaluation report
there may be accessibility and customizability features not
listed here.
...(p1) vg mozilla implements standard keyboard bindings there are a few missing pieces, such as support in xul comboboxes (menu
list) for selecting items by typing alphanumeric keystrokes 7.3 operating environment conventions.
... css: text-indent: yes css: text-align: yes css: word-spacing: yes css: letter-spacing: yes css: font-stretch: ni css: margin: yes css: float: yes css: position: yes css: !important: yes css: system fonts: yes css: system colors: yes css:
list types: yes css: outline: no css: :before, :after, content: p(oor) 8.2 conform to specifications.
...(p2) p dom inspector provides a type of outline view, although it is not intended for end users page info (ctrl+i) gives
lists of links, media, forms/elements can use a user style sheet to implement an outline bug 127030 has been filed for an outline view.
Adding a new event
define event class name you need to add an event class name in eventclass
list.h.
...if all information of the event is stored by its internal event, c++ event handlers can access them with following code: ns_imethodimp anevent
listener::handleevent(nsidomevent* aevent) { internalfooevent* internalevent = aevent->getinternalnsevent()->asfooevent(); if (ns_warn_if(!internalevent)) { return ns_error_unexpected; } dosomethingwith(internalevent->mbar); aevent->preventdefault(); return ns_ok; } implement dom event class generate dom event implementation if it's possible if you're creating simple dom event ...
... register each event into eventname
list.h if you're in case 3, you can skip this section.
... eventname
list.h defines mapping between dom event name, internal event message, event handler attribute owner and internal event class.
Adding phishing protection data providers
phishing protection technology lets firefox help protect users by comparing the urls the user visits to a
list of known scam sites, and presenting a warning to the user when they visit a site on the
list.
... browser.safebrowsing.provider.idnum.lookupurl the url to use to look up urls to see if they're block-
listed.
... browser.safebrowsing.provider.idnum.updateurl an url used to request an updated
list of phishing sites.
... the server either provides a full
list or incremental updates in order to bring the client's tables up to date.
Chrome registration
os=winnt os=darwin see os_target for a more complete
list of os names.
.../classic/global/ override chrome://global/content/neterror.xhtml jar:embedder.jar!/global/content/neterror.xhtml content inspector jar:inspector.jar!/content/inspector/ instructions supported in bootstrapped add-ons the following instructions are supported in bootstrapped extensions: manifest content locale skin override debugging a chrome manifest file the chrome
list extension shows all registered chrome.
...do not add to this
list without contacting benjamin smedberg.
... note that this page is included from the pages
listed below.
Command line options
you may
list multiple urls, separated by spaces.
... the port argument is optional, and if it is omitted, the server will
listen on port 6000.
... print the
list of all available command line options.
... other options need to be documented -print-xpcom-dir -print-xpcom-dir
list -kill -killall -f -ftimeout -fwait -unsetdefaultmail gtk options -no-deelevate (running windows as administrator with launcher process enabled causes drag and drop errors - how to fix) references chrome: command line test documentation for command-line features (mozilla.org) toolkit/xre/nsapprunner.cpp browser/components/nsbrowsercontenthandler.js suite/browser/nsbrowsercontentha...
Creating Custom Events That Can Pass Data
what follows a
list of the files you'll need to modify, as well as a discussion of each change.
...if you peruse nsdomclassinfoclasses.h you'll see of
list of macros of the form domci_class(foo).
...mozilla/content/events/src/nseventdispatcher.cpp note: in the mozilla 1.8.x branch this code is actually in mozilla/content/events/src/nsevent
listenermanager.cpp this is quite an important file since this holds the createevent method which acts as a factory method dom events.
...you will find that there is a bunch of code like: if (aeventtype.lowercaseequalsliteral("{somethingsomething}event")) return ns_{somethingsomething}event(adomevent, aprescontext, nsnull); you can either have a function like this or write the code straight in nsevent
listenermanager::createevent() like this: if (aeventtype.lowercaseequalsliteral("nsmyevent")){ //note: the lowercase is important!
Error codes returned by Mozilla APIs
the following tables
list errors that can occur when calling various mozilla apis.
... each error is
listed by its name and an error code in parentheses.
... file errors the following table
lists the errors that could occur when using files.
...t (0x804b0014) ns_error_ftp_login (0x804b0015) ns_error_ftp_cwd (0x804b0016) ns_error_ftp_pasv (0x804b0017) ns_error_ftp_pwd (0x804b0018) ns_error_not_resumable (0x804b0019) ns_error_invalid_content_encoding (0x804b001b) the content encoding of the source document was incorrect, for example returning a plain html document advertised as content-encoding: gzip ns_error_ftp_
list (0x804b001c) ns_error_unknown_host (0x804b001e) ns_error_redirect_loop (0x804b001f) ns_error_entity_changed (0x804b0020) ns_error_unknown_proxy_host (0x804b002a) ns_error_unknown_socket_type (0x804b0033) ns_error_socket_create_failed (0x804b0034) ns_error_cache_key_not_found (0x804b003d) ns_error_cache_data_is_stream (0x804b003e) ns_error_cache_data_is_not_stre...
Index
8 experimental features in firefox experimental, firefox, preferences, features this page
lists features that are in nightly versions of firefox along with information on how to activate them, if necessary.
... 10 firefox ui considerations for web developers activity stream, firefox, icons, mozilla, new tab, newtab, ui, web, web development, favicon there are a number of places within the firefox user interface where web sites are
listed for the user to choose a destination to visit or a site to manage in some way.
... 141 index firefox, index, mozilla found 168 pages: 142 linux compatibility matrix the following table
lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.
... 169 privacy privacy, security this document
lists privacy-related documentation.
Firefox
contents experimental features in firefoxthis page
lists features that are in nightly versions of firefox along with information on how to activate them, if necessary.firefox and the "about" protocolthere is a lot of useful information about firefox hidden away behind the about: url protocol.
... the most useful is the url about:config, which displays preferences and settings that can be inspected and changed.firefox ui considerations for web developersthere are a number of places within the firefox user interface where web sites are
listed for the user to choose a destination to visit or a site to manage in some way.
... linux compatibility matrixthe following table
lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.multiple firefox profilesa profile in firefox is the collection of settings, customizations, add-ons, and other personalizations that a user has made or installed into their copy of firefox.
...always keep in mind the side effects your changes may have, from blocking other tasks, to interfering with other user interface elements.privacythis document
lists privacy-related documentation.security best practices for firefox front-end engineersthis article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.site identity buttonthe site identity button is a feature in firefox that gives users more information about the sites they visit.
Geckoview-Junit Tests
running tests locally if desired, connect an android device to your computer, or start an emulator, and make sure your device is visible to adb: $ adb devices
list of devices attached emulator-5554 device if no device is found, 'mach geckoview-junit' will offer to start an emulator.
... to run just one test: mozilla-central$ mach geckoview-junit <class>#<test> to run more than one test: mozilla-central$ mach geckoview-junit <class1>#<test1> <class2>#<test2> mach geckoview-junit also supports running a
list of tests that are specified in a text file.
... each test must be
listed on its own line.
... for example: <class1>#<test1> <class2> <class3>#<test2> <class3>#<test3> to run the tests specified in the file: mozilla-central$ mach geckoview-junit --test-filters-file <path-to-filter-file> disabling one failing test there is no manifest
listing the geckoview junit tests.
Implementing Download Resuming
if the download gets interrupted, necko will call the stream
listener's onstoprequest method with a failure status.
...you may want to use nsisimplestream
listener to simplify this task; to get progress notifications, you can implement nsiprogresseventsink and set an interface requester as the notificationcallbacks of the channel that gives out such an event sink (this needs to be done before calling asyncopen).
... detecting when a file changed if the file changed (that is, the entity id does not match), then necko will notify the stream
listener with an ns_error_entity_changed error code.
...in such a case, the stream
listener will get an ns_error_not_resumable status.
Integrated Authentication
mozilla currently supports a white
list of sites that are permitted to engage in spnego authentication with the browser.
... this
list is intended to be configured by an it department prior to distributing mozilla to end-users.
... the preferences are: pref("network.negotiate-auth.trusted-uris", site-
list); pref("network.negotiate-auth.delegation-uris", site-
list); pref("network.automatic-ntlm-auth.trusted-uris", site-
list); where, site-
list is a comma-separated
list of url prefixes or domains of the form: site-
list = "mydomain.com, https://myotherdomain.com" network.negotiate-auth.trusted-uris
lists the sites that are permitted to engage in spnego authentication with the browser, and network.negotiate-auth.delegation-uris
lists the sites for which the browser may delegate user authorization to the server.
... network.automatic-ntlm-auth.trusted-uris
lists the trusted sites to use ntlm authentification.
Introduction to Layout in Mozilla
struction style resolution reflow painting setting up assume basic knowledge of embedding and network apis (doc shell, streams) content dll auto-registers a document loader factory (dlf) @mozilla.org/content-viewer-factory/view;1?type=text/html all mime types mapped to the same class, nscontentdlf nsdocshell receives inbound content via nsdsuricontent
listener invokes nsidlf::createinstance, passes mime type to dlf nscontentdlf creates a nshtmldocument object, invokes startdocumentload.
... creates a parser, returned as nsistream
listener back to the docshell creates a content sink, which is linked to the parser and the document creates a documentviewerimpl object, which is returned as nsicontentviewer back to the docshell documentviewerimpl creates pres context and pres shell content model construction content arrives from network via nsistream
listener::ondataavailable parser tokenizes & processes content; invokes methods on nsicontentsink with parser node objects some buffering and fixup occurs here opencontainer, closecontainer, addleaf content sink creates and attaches content nodes using nsicontent interface content sink maintains stack of “live” elements more buffering and...
...notifications passes these to the style set object, who in turn passes to the frame constructor frame constructor creates frames constructframeinternal recursively walks content tree, resolves style and creates frames either created by tag (<select>) or by display type (<p>) frame manager maintains mapping from content to frame style resolution compute sty
listic information based on the style rules that apply for the frame’s content node style data broken into different structures display, visibility, font, color, background, … inherit vs.
... reset style context object is a placeholder for partially computed sty
listic data style data is computed lazily, as it is asked for reflow recursively compute geometry (x, y, w, h) for frames, views, and widgets given w & h constraints of “root frame” compute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired size returned “up” via nshtmlreflowmetrics basic pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes desired (w, h), returns via reflow metrics parent frame sizes child frame and view based on child’s metrics n.b.
AddonUpdateChecker
iew updateinfo getcompatibilityupdate(in updateinfo updates[], in string version, in boolean ignorecompatibility, in string appversion, in string platformversion) updateinfo getnewestcompatibleupdate(in updateinfo updates[], in string appversion, in string platformversion) void checkforupdates(in string id, in string type, in string updatekey, string url, in updatecheck
listener
listener) constants constant description error_timeout the update check timed out.
... methods getcompatibilityupdate() retrieves the best matching compatibility update for the application from a
list of available update objects.
...y information for ignorecompatibility an optional parameter to get the first compatibility update that is compatible with any version of the application or toolkit appversion the version of the application or null to use the current version platformversion the version of the platform or null to use the current version getnewestcompatibleupdate() returns the newest available update from a
list of update objects.
... void checkforupdates( in string id, in string type, in string updatekey, string url, in updatecheck
listener
listener ) parameters id the id of the add-on being checked for updates type the type of add-on being checked for updates updatekey an optional update key for the add-on url the url of the add-on's update manifest
listener an observer to notify of results ...
WebChannel.jsm
method overview
listen(function callback); stop
listening(); send(object message, eventtarget target); attributes id string webchannel id methods
listen() registers the callback for messages on this channel.
... id - webchannel id of the incoming messages message - incoming message object sendercontext - incoming message context - this should be treated as an opaque object and passed to the .send() method stop
listening() resets the callback for messages on this channel.
... parameters message the message object that will be sent sendercontext the sendercontext parameter passed to the .
listen method.
... examples setting up a webchannel between chrome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.
listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code window.addevent
listener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code window.dispatchevent(new window.customevent("webchannelmessagetochrome", { detail: { id: webchannelid, message: { something: true } } })); ...
Bootstrapping a new locale
refer to l10n:branches for the
list of all branches.
...--> after the localization notes, you will see a
list of <!entity> strings like the following: <!entity certerror.pagetitle "untrusted connection"> you should go through each entity, translating the value in the parameters (e.g.
... recommended order of localization for recommended order of localization, refer to the localization "phase
list" which provides a very rough guide on where to start and in what order to proceed through translation.
... the localization phase
lists (firefox 3.5: ff35.phase
list, firefox 3.6: ff36.phase
list).
Localizing with Mozilla Translator
this will remove obsolete strings and files from the internal database of mt, and will present you with a
list of new and updated strings.
... migrating contents when the directory structure changes overall, if you are a ''good'' mt user and you do things like: checking "keep original" flags for strings not needing translation, instead of just leaving the translation empty struggling to get empty
lists when running "untranslated strings" and "view fuzzy" if you are up to date in localization regularly running qa checks and trying to minimize them.
... if you are a ''not so good'' mt user, however, you can just create a new product (or several ones; see next recipe to know why), run file -> update on them (you'll get a
list of all the strings) and then run edit -> autotranslate.
... mt could be changed for a mt product to have a
list of ''root'' directories instead of just one, and maybe someday it will do, but it will probably won't happen before seamonkey 1.1.x dies (and seamonkey 2.0 finally conquers the web, if i may add).
sslerr.html
(some _alert codes are
listed in other blocks.) ssl_error_handshake_unexpected_alert -12229 "ssl peer was not expecting a handshake message it received." ssl_error_decompression_failure_alert -12228 "ssl peer was unable to successfully decompress an ssl record it received." ssl_error_handshake_failure_alert -12227 "ssl peer was unable to negotiate an acceptable set of s...
... sec_error_krl_not_yet_valid -8079 "the key revocation
list for this certificate is not yet valid." sec_error_crl_not_yet_valid -8078 "the certificate revocation
list for this certificate is not yet valid." sec_error_unknown_cert -8077 "the requested certificate could not be found." sec_error_unknown_signer -8076 "the signer's certificate could not be found." sec_error_cert_bad_access_location -8075...
... sec_error_unsupported_ec_point_form -8050 "unsupported elliptic curve point form." sec_error_unrecognized_oid -8049 "unrecognized object identifier." sec_error_ocsp_invalid_signing_cert -8048 "invalid ocsp signing certificate in ocsp response." sec_error_revoked_certificate_crl -8047 "certificate is revoked in issuer's certificate revocation
list." sec_error_revoked_certificate_ocsp -8046 "issuer's ocsp responder reports certificate is revoked." sec_error_crl_invalid_version -8045 "issuer's certificate revocation
list has an unknown version number." sec_error_crl_v1_critical_extension -8044 "issuer's v1 certificate revocation
list has a critical extension." sec_error_crl_unknown_critic...
...al_extension -8043 "issuer's v2 certificate revocation
list has an unknown critical extension." sec_error_unknown_object_type -8042 "unknown object type specified." sec_error_incompatible_pkcs11 -8041 "pkcs #11 driver violates the spec in an incompatible way." sec_error_no_event -8040 "no new slot event is available at this time." sec_error_crl_already_exists -8039 "crl already exists." sec_error_not_initialized -8038 "nss is not initialized." sec_error_token_not_logged_in -8037 "the operation failed because the pkcs#11 token is not logged in." sec_error_ocsp_responder_cert_invalid -8036 "the configured ocsp responder's certificate is invalid." sec_error_ocsp_bad_signature ...
Utility functions
the public functions
listed here perform initialization tasks and other services.
... if documentation is available for a function
listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference.
... mxr 3.9.3 and later secmod_candeleteinternalmodule mxr 3.5 and later secmod_createmodule mxr 3.4 and later secmod_deletemodule mxr 3.4 and later secmod_findmodule mxr 3.4 and later secmod_findslot mxr 3.4 and later secmod_freemodulespec
list mxr 3.4 and later secmod_getdbmodule
list mxr 3.9 and later secmod_getdeadmodule
list mxr 3.9 and later secmod_getmodulespec
list mxr 3.4 and later secmod_hasremovableslots mxr 3.9.3 and later secmod_ismodulepresent mxr 3.2 and later ...
....4 and later secmod_lookupslot mxr 3.2 and later secmod_pubcipherflagstointernal mxr 3.4 and later secmod_pubmechflagstointernal mxr 3.4 and later secmod_unloadusermodule mxr 3.4 and later secmod_updatemodule mxr 3.4 and later secmod_updateslot
list mxr 3.9.3 and later secmod_waitforanytokenevent mxr 3.9.3 and later secoid_addentry mxr 3.10 and later secoid_comparealgorithmid mxr 3.2 and later secoid_copyalgorithmid mxr 3.2 and later secoid_destroyalgorithmid mxr 3.2 and later ...
NSS Tools pk12util
the tool allows you to import certificates and keys from pkcs #12 files into nss or export them and also
list certificates and keys in such files.
...--cert_key_len certkeylen] [common-options] or pk12util -l p12file [-h tokenname] [-r] [common-options] where [common-options] = [-d dir] [-p dbprefix] [-k slotpasswordfile | -k slotpassword] [-w p12filepasswordfile | -w p12filepassword] syntax to run the pkcs #12 tool, type ther command pk12util option [arguments] where option and arguments are combinations of the options and arguments
listed in the following section.
... -l p12file
list certificate and private key from from the p12file file.
...a
list of ciphers follows.
NSS tools : cmsutil
to run cmsutil, type the command cmsutil option [arguments] where option and arguments are combinations of the options and arguments
listed in the following section.
... specify
list of recipients (email addresses) for an encrypted or enveloped message.
... for certificates-only message,
list of certificates to send.
... mailing
lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat.
Necko Architecture
receiving data & nsistream
listener you can read or write, from or to a channel using either the synchronous api, or the asynchronous api.
... if you want to move data asynchronously you need to be able to receive callbacks using an implementation of nsistream
listener.
... an nsistream
listener is told when the uri transaction has "started," when data is available (in the case of reading data), and when it has "stopped." it is up to the nsistream
listener implementation to decide what to do with these various notifications.
... the ondataavailable() notification provides a chance for the nsistream
listener to actually retrieve data that the channel has acquired.
Scripting Java
if we just view the method object by itself we can see the various overloaded forms of the method: js> f.
listfiles function
listfiles() {/* java.io.file[]
listfiles() java.io.file[]
listfiles(java.io.filenamefilter) java.io.file[]
listfiles(java.io.filefilter) */} this output shows that the file class defines three overloaded methods
listfiles: one that takes no arguments, another with a filenamefilter argument, and a third with a filefilter argument.
...using the javascript for..in construct, we can print out all these values: js> for (i in f) { print(i) } exists parentfile mkdir tostring wait [44 others] note that not only the methods of the file class are
listed, but also the methods inherited from the base class java.lang.object (like wait).
... javascript functions as java interfaces often we need to implement an interface with only one method, like in the previous runnable example or when providing various event
listener implementations.
...function can use it to distinguish on behalf of which method it was called: js> var frame = new packages.javax.swing.jframe(); js> frame.addwindow
listener(function(event, methodname) { if (methodname == "windowclosing") { print("calling system.exit()..."); java.lang.system.exit(0); } }); js> frame.setsize(100, 100); js> frame.visible = true; true js> calling system.exit()...
Garbage collection
the chunkinfo contains a
list of unallocated arenas, starting at chunkinfo::freearenashead and linked through arenaheader::next.
... every arena maintains a
list of free spans, starting at arenaheader::firstfreespanoffets.
...instead, we append them to a
list.
... after marking everything live we scan through the
list to null out references to garbage.
JS_ConvertArgumentsVA
converts a series of js values, passed in a va_
list, to their corresponding jsapi types.
... syntax bool js_convertargumentsva(jscontext *cx, const js::callargs &args, const char *format, va_
list ap); bool js_convertargumentsva(jscontext *cx, unsigned argc, jsval *argv, const char *format, va_
list ap); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... ap va_
list the
list of pointers into which to store the converted types.
...the type va_
list is a standard feature of the c programming language.
JS_PushArguments
syntax jsval * js_pusharguments(jscontext *cx, void **markp, const char *format, ...); jsval * js_pushargumentsva(jscontext *cx, void **markp, const char *format, va_
list ap); name type description cx jscontext * the context in which to perform any necessary conversions.
... format const char * null-terminated string holding a
list of format types to convert the following arguments to.
... ap va_
list (in js_pushargumentsva) the
list of arguments to be converted to jsvals.
...the type va_
list is a standard feature of the c programming language.
Secure Development Guidelines
buffer bounds validations (bbv) thou shalt check the array bounds of all strings (indeed, all arrays), for surely where thou typest "foo" someone someday shall type "supercalifragi
listicexpialidocious".
... most memory allocators use a linked
list or binary tree bbv: off-by-one the array index starts at 0 not at 1 char array[1024]; array[0] = first element!
... unlock(locka); unlock(lockb); } writing secure code: good coding practices banned api
list badly designed apis can often lead to vulnerabilities it’s too easy to use the api inappropriately for example, consider the libc string handling apis strcpy() performs no bounds checking strncpy() doesn’t always 0-terminate strncat() length parameter is very confusing banned api
list examples of incorrect strncat usage buffer overflow strncat(buffer, stri...
...ng, sizeof(buffer)); off-by-one strncat(buffer, string, sizeof(buffer) – strlen(string)); correct usage strncat(buffer, string, sizeof(buffer) – strlen(string) – 1)); banned api
list: recommendations create wrappers or replacements for standard functions with a bad design libc function name reason to ban it strcpy, strcat, gets, sprintf, vsprintf no bounds checking.
Gecko states
« at apis support page introduction below you will find a
list of supported states by gecko.
... states
list state_unavailable the object is unavailable, i.e.
...for example, a
list box can have both state_invisible and state_offscreen set.
... in this case, the client application can communicate all items in the
list to users.
Manipulating bookmarks using Places
specifying default_index as the index at which to insert the new folder places it at the end of the
list.
... var parentfolderid = bmsvc.getfolderidforitem(newbkmkid); observing changes to bookmarks and tags to set up an observer to
listen for changes related to bookmarks, you will need to create an nsinavbookmarkobserver object and use the nsinavbookmarksservice.addobserver() and nsinavbookmarksservice.removeobserver() methods.
... // an nsinavbookmarkobserver var myext_bookmark
listener = { onbeginupdatebatch: function() {}, onendupdatebatch: function() {}, onitemadded: function(aitemid, afolder, aindex) {}, onitemremoved: function(aitemid, afolder, aindex) {}, onitemchanged: function(abookmarkid, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: f...
...unction() { bmsvc.addobserver(myext_bookmark
listener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmark
listener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
Places utilities for JavaScript
string apostdata); boolean showaddlivemarkui(nsiuri afeeduri, nsiuri asiteuri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker); boolean showminimaladdlivemarkui(nsiuri afeeduri, nsiuri asiteuri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker); boolean showminimaladdmultibookmarkui(array nsiuri auri
list); boolean showbookmarkproperties(int aid); boolean showfolderproperties(int aid); boolean showaddfolderui(string atitle, int adefaultinsertionpoint, boolean ashowpicker); array object getannotationsforuri(nsiuri auri); array object getannotationsforitem(int aitemid); void setannotationsforuri(nsiuri auri, object aannos); void setannot...
...the all take in the same argument and return a boolean true or false, so i'm just going to
list them all in one lump: boolean nodeisfolder(anode) determines whether or not a resultnode is a bookmark folder or not.
... showminimaladdmultibookmarkui() show an "add bookmarks" dialog to allow the adding of a folder full of bookmarks corresponding to the objects in the uri
list.
... showaddmultibookmarkui(auri
list) parameters auri
list list of nsiuri objects representing the locations to be bookmarked.
An Overview of XPCOM
rts component software development, it also provides much of the functionality that a development platform provides, such as: component management file abstraction object message passing memory management we will discuss the above items in detail in the coming chapters, but for now, it can be useful to think of xpcom as a platform for component development, in which features such as those
listed above are provided.
...in this "semi-encapsulated" situation, the only part of the class that is exposed is a well-defined
list of callable methods (i.e., the interface).
...in xpcom, all interface methods should return an nsresult error value (see the xpcom api reference for a
listing of these error codes).
...the tutorial will show each of these component and services in use, and the xpcom api reference has a complete interface
listing of these areas.
Creating the Component Code
this is the object that contains the business logic, that implements functionality such as starting a network download, implementing interfaces that
listen to the download progress, or providing a new content type handler.
... in weblock, this is the part that brings together various gecko services and prevents users from leaving the
list of acceptable domains.
...the source we're referring to is
listed in its entirety at the end of this chapter (see weblock1.cpp).
...a
listing of this and other global xpcom functions is in the xpcom api reference.
nsIDocShell
parenturicontent
listener nsiuricontent
listener uri content
listener parent.
... beginrestore() begin firing webprogress
listener notifications for restoring a page presentation.
...finishrestore() finish firing webprogress
listener notifications and dom events for restoring a page presentation.
...this method is identical to loaduri() except that its parameter
list is broken out instead of being packaged inside of an nsidocshellloadinfo object.
nsIFeedProcessor
1.0 66 introduced gecko 1.8.1 inherits from: nsistream
listener last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) implemented by: @mozilla.org/feed-processor;1.
...g/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); method overview void parseasync(in nsirequestobserver requestobserver, in nsiuri uri); void parsefromstream(in nsiinputstream stream, in nsiuri uri); void parsefromstring(in astring str, in nsiuri uri); attributes attribute type description
listener nsifeedresult
listener the feed result
listener that will respond to feed events.
...the caller must then call the processor's nsistream
listener methods to drive the parsing process.
... see also nsistream
listener nsifeedresult
listener interwiki link ...
nsIFrameScriptLoader
if you want a frame script to do something whenever a new document is loaded, you can
listen for the document-element-inserted notification.
... removedelayedframescript() removes aurl from the
list of scripts which support delayed load.
...the return value is a
list of pairs [<url>, <wasloadedinglobalscope>].
... returns
list of the delayed scripts.
nsIMessageBroadcaster
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessage
listenermanager message "broadcasters" don't have a single "other side" that they send messages to, but rather a set of subordinate message managers.
...methods void broadcastasyncmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects); nsimessage
listenermanager getchildat(in unsigned long aindex); broadcastasyncmessage() like sendasyncmessage(), but also broadcasts this message to all "child" message managers of this message manager.
... see nsimessage
listener::receivemessage() for the format of the data delivered to
listeners.
... returns nsimessage
listenermanager: the message manager at the given index.
nsIMsgSearchSession
alse; searchsession.appendterm(searchterm); searchsession.search(null); inherits from: nsisupports method overview void addsearchterm(in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value, in boolean booleanand, in string arbitraryheader); nsimsgsearchterm createterm(); void appendterm(in nsimsgsearchterm term); void register
listener(in nsimsgsearchnotify
listener); void unregister
listener(in nsimsgsearchnotify
listener); void getnthsearchterm(in long whichterm, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value); long countsearchscopes(); void getnthsearchscope(in long which,out nsmsgsearchscopevalue scopeid, out nsimsgfolder folder); void a...
... createterm() nsimsgsearchterm createterm(); appendterm() void appendterm(in nsimsgsearchterm term); parameters term register
listener() adds a
listener to the search session.
... void register
listener(in nsimsgsearchnotify
listener); parameters
listener unregister
listener() removes a
listener from the search session.
... void unregister
listener (in nsimsgsearchnotify
listener); parameters
listener getnthsearchterm() void getnthsearchterm(in long whichterm, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value); parameters whichterm attrib op value note: this parameter should be an out.
nsINavHistoryContainerResultNode
childrenreadonly boolean false if the node's
list of children can be modified (by adding or removing children, or rearranging them), or true if the user interface should not allow the
list of children to be altered.
...for queries and bookmark folders, however, being open means they must keep themselves up-to-date by
listening for updates and re-querying as needed.
... nsinavhistoryresultnode getchild( in unsigned long aindex ); parameters aindex the index into the child
list of the node to fetch.
... return value the index of the specified node into the
list of immediate children of the container.
nsIPrincipal
void getpreferences(out string prefbranch, out string id, out string subjectname, out string granted
list, out string denied
list, out boolean istrusted); boolean iscapabilityenabled(in string capability, in voidptr annotation); native code only!
...void getpreferences( out string prefbranch, out string id, out string subjectname, out string granted
list, out string denied
list, out boolean istrusted ); parameters prefbranch on return, contains the preference branch to which the preferences pertain.
... granted
list space-delineated
list of capabilities which are explicitly granted by a preference.
... denied
list space-delineated
list of capabilities which are explicitly denied by a preference.
nsISHEntry
refreshuri
list nsisupportsarray saved refresh uri
list for the content viewer.
...append a child shell to the end of our
list.
... return value clearchildshells() clear the child shell
list.
...if either contentviewer or windowstate are null, then all of the following members are cleared/reset: contentviewer, sticky, windowstate, viewerbounds, childshells, refreshuri
list.
nsISelectionPrivate
method overview void addselection
listener(in nsiselection
listener new
listener); void endbatchchanges(); void getcachedframeoffset(in nsiframe aframe, in print32 inoffset, in nspointref apoint); native code only!
...obsolete since gecko 12.0 long gettableselectiontype(in nsidomrange range); void removeselection
listener(in nsiselection
listener
listenertoremove); void scrollintoview(in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent); void setancestorlimiter(in nsicontent acontent); native code only!
... constants constant value description endofprecedingline 0 startofnextline 1 tableselection_none 0 tableselection_cell 1 tableselection_row 2 tableselection_column 3 tableselection_table 4 tableselection_allcells 5 methods addselection
listener() void addselection
listener( in nsiselection
listener new
listener ); parameters new
listener endbatchchanges() will resume user interface updates after a previous call to startbatchchanges().
... removeselection
listener() void removeselection
listener( in nsiselection
listener
listenertoremove ); parameters
listenertoremove scrollintoview() scrolls a region of the selection, so that it is visible in the scrolled view.
nsISmsDatabaseService
ssage(in domstring asender, in domstring abody, in unsigned long long adate); long savesentmessage(in domstring areceiver, in domstring abody, in unsigned long long adate); void getmessage(in long messageid, in long requestid, [optional] in unsigned long long processid); void deletemessage(in long messageid, in long requestid, [optional] in unsigned long long processid); void createmessage
list(in nsidommozsmsfilter filter, in boolean reverse, in long requestid, [optional] in unsigned long long processid); void getnextmessagein
list(in long
listid, in long requestid, [optional] in unsigned long long processid); void clearmessage
list(in long
listid); void markmessageread(in long messageid, in boolean value, in long requestid, [optional] in unsigned long long processid) methods s...
... createmessage
list() void createmessage
list( in nsidommozsmsfilter filter, in boolean reverse, in long requestid, [optional] in unsigned long long processid ); parameters filter a smsfilter to filter out sms messages from a
list.
... getnextmessagein
list() void getnextmessagein
list( in long
listid, in long requestid, [optional] in unsigned long long processid ); parameters
listid a number representing the id of the message
list.
... clearmessage
list() void getnextmessagein
list( in long
listid, ); parameters
listid a number representing the id of the message
list.
nsIStyleSheetService
allows extensions or embeddors to add to the built-in
list of user or agent style sheets.
...type); void unregistersheet(in nsiuri sheeturi, in unsigned long type); constants constant value description agent_sheet 0 user_sheet 1 author_sheet 2 methods loadandregistersheet() synchronously loads a style sheet from sheeturi and adds it to the
list of user or agent style sheets.
... return value returns true if a style sheet at sheeturi has previously been added to the
list of style sheets specified by type.
... unregistersheet() remove the style sheet at sheeturi from the
list of style sheets specified by type.
nsIUpdateChecker
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(in nsiupdatecheck
listener
listener, in boolean force); void stopchecking(in unsigned short duration); constants constant value description current_check 1 constant for the stopchecking() method indicating that only the current update check should be stopped.
... methods checkforupdates() checks for available updates, notifying a
listener of the results.
... void checkforupdates( in nsiupdatecheck
listener
listener, in boolean force ); parameters
listener an object implementing nsiupdatecheck
listener to be notified of the results of an update check.
... see also nsiupdatepatch nsiupdate nsiupdatecheck
listener nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatetimermanager ...
Setting HTTP request headers
for more information about notifications framework and a
list of common notification topics, see observer notifications.
...var headername = "x-hello"; var headervalue = "world"; function log(text) { // var consoleservice = components.classes["@mozilla.org/consoleservice;1"].getservice(components.interfaces.nsiconsoleservice); // consoleservice.logstringmessage(text); } function myhttp
listener() { } myhttp
listener.prototype = { observe: function(subject, topic, data) { if (topic == "http-on-modify-request") { log("----------------------------> (" + subject + ") mod request"); var httpchannel = subject.queryinterface(components.interfaces.nsihttpchannel); httpchannel.setrequestheader(headername, headervalue, false); return; ...
...service(components.interfaces.nsicategorymanager); catmgr.addcategoryentry("app-startup", this.myname, this.myprogid, true, true); }, getclassobject: function (compmgr, cid, iid) { log("----------------------------> getclassobject"); return this.myfactory; }, mycid: components.id("{9cf5f3df-2505-42dd-9094-c1631bd1be1c}"), myprogid: "@dougt/myhttp
listener;1", myname: "simple http
listener", myfactory: { queryinterface: function (aiid) { if (!aiid.equals(components.interfaces.nsisupports) && !aiid.equals(components.interfaces.nsifactory)) throw components.results.ns_error_no_interface; return this; }, createinstance: function (outer, iid) { l...
...og("----------------------------> createinstance"); return new myhttp
listener(); } }, canunload: function(compmgr) { return true; } }; function nsgetmodule(compmgr, filespec) { return mymodule; } privacy and security good practice a use case for setting specific a http request header is to have a specific web site be able to check if a specific plugin / addon / extension is installed.
Address book sync client design
// // sync approach - server handles all conflict resolution: // // step 2: // using the sync mapping table and the local records database, generate the change //
list to send to the server.
...this interface is defined in mozilla/mailnews/addrbook/public/nsiabsyncdriver.idl #include "nsrootidl.idl" #include "nsiabsync
listener.idl" [scriptable, uuid(91fdfee1-efbc-11d3-8f97-000073757374)] interface nsiabsyncdriver : nsiabsync
listener { void kickit(); }; as you can see, this is a very simple interface which allows for the starting of the address book sync operation.
... the interface of greater interest is the address book sync
listener.
...this interface is as follows: #include "nsisupports.idl" #include "nsrootidl.idl" #include "nsifilespec.idl" [scriptable, uuid(e0ed29e0-098a-11d4-8fd6-00a024a7d144)] interface nsiabsync
listener : nsisupports { /** * notify the observer that the ab sync authorization operation has begun.
Building a Thunderbird extension 6: Adding JavaScript
window.addevent
listener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: " + datestring; } the fir...
...st part registers a new event
listener that will be executed automatically when thunderbird loads.
... the event
listener then calls our startup function which gets our <statusbarpanel>-element with the id my-panel from the document's dom tree.
... further documentation more functions for the dom objects are
listed on: dom/window (api reference for the window object) dom/document (api reference for the document object) gecko dom reference (overview of all dom objects in gecko) you may also find the javascript cheat sheet very useful.
Initialization and Destruction - Plugins
in the initialization process, the browser passes the plug-in two tables of function pointers for all api calls: one table
lists all api calls from the plug-in to the browser.
... the other table
lists all api calls from the browser to the plug-in.
...the data is saved in the history
list.
... as long as the plug-in still appears in this
list, that saved data is associated with the page; any new instances receive this data.
Plug-in Basics - Plugins
the installed plug-ins page
lists each installed plug-in along with its mime type or types, description, file extensions, and the current state (enabled or disabled) of the plug-in for each mime type assigned to it.
...gecko displays a page
listing all installed plug-ins and the mime types they handle, as well as optional descriptive information supplied by the plug-in.
...the browser ignores these nonstandard attributes when parsing the html, but it passes all attributes to the plug-in, allowing the plug-in to examine the
list for any private attributes that could modify its behavior.
... the plug-in must scan its
list of attributes to determine whether it should automatically start the video and loop it on playback.
Streams - Plugins
if the user now requests a specific page of the document, the plug-in calls npn_requestread with a
list of byte ranges.
... the npn_requestread method has the following syntax: nperror npn_requestread(npstream *stream, npbyterange *range
list); the stream parameter is the stream from which to read bytes; the range
list parameter specifies the range of bytes in the form of a linked
list of npbyterange objects, which the plug-in must allocate.
... the plug-in can request multiple ranges, either through a
list of npbyterange objects in a single call to npn_requestread or through multiple calls to npn_requestread.
... for the complete
list of codes, see "result codes." for an example that demonstrates using this function with npn_newstream and npn_write, see "example of sending a stream." example of sending a stream the following code creates a new stream of html text displayed by the browser in a new window, writes it, and destroys the stream.
All keyboard shortcuts - Firefox Developer Tools
this page
lists all keyboard shortcuts used by the developer tools built into firefox.
... the first section
lists the shortcut for opening each tool and the second section
lists shortcuts that are applicable to the toolbox itself.
... after that there's one section for each tool, which
lists the shortcuts that you can use within that tool.
... command windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 source editor this table
lists the default shortcuts for the source editor.
Inspecting web sockets - Firefox Developer Tools
accessing the inspector when you are inspecting a web app that utilizes a web socket connection, the web socket requests are
listed in the
list of requests in the network monitor along with all other requests.
... you can use the ws button to filter the
list for just web socket connections.
... there are also predefined filters, available in the tool bar of the response pane, grouped into a selection
list.
... expanding each message selecting a message in the
list shows a preview of the data being sent in that message, at the bottom of the response pane.
Console messages - Firefox Developer Tools
the context menu options
listed below are available on all message categories.
... the complete
list of security messages is as follows: message details blocked loading mixed active content the page contained mixed active content: that is, the main page was served over https, but asked the browser to load "active content", such as scripts, over http.
...for example, if you entered the string img into the text box, you would have a
list something like this: a small "x" icon appears at the right end of the text box when you have entered a string on which to filter the output.
... click the "x" icon to clear the filter and show the entire
list again.
The JavaScript input interpreter - Firefox Developer Tools
once you have initiated the reverse search, you can use shift + f9 on windows or linux ( ctrl+s on mac) to search forward in the
list of matches.
...this is like for document.queryselectorall(), but returns an array instead of a node
list.
... keys() given an object, returns a
list of the keys (or property names) on that object.
... values() given an object, returns a
list of the values on that object; serves as a companion to keys().
AudioTrack - Web APIs
this id can be used to locate a specific track within an audio track
list by calling audiotrack
list.gettrackbyid().
... usage notes to get an audiotrack for a given media element, use the element's audiotracks property, which returns an audiotrack
list object from which you can get the individual tracks contained in the media: var el = document.queryselector("video"); var tracks = el.audiotracks; you can then access the media's individual tracks using either array syntax or functions such as foreach().
...the
list is filtered to only allow certain track kinds through.
... function gettrack
list(el) { var track
list = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { track
list.push({ id: track.id, kind: track.kind, label: track.label }); } }); return track
list; } the resulting track
list contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
CSSStyleSheet.insertRule() - Web APIs
note: although insertrule() is exclusively a method of cssstylesheet, it actually inserts the rule into cssstylesheet.cssrules — its internal cssrule
list.
...see browser compatibility for details.) return value the newly inserted rule's index within the stylesheet's rule-
list.
... if index > cssrule
list.length, the method aborts with an indexsizeerror.
... if rule is @namespace and the rule-
list has more than just @import at-rules and/or @namespace at-rules, the method aborts with an invalidstateerror.
Using the CSS Painting API - Web APIs
example let's create a
list of items with a background image that rotates between three different colors and three widths.
...when we get our
list of argument values, we ask specifically for a <length> unit.
... let's say we add a second argument with how many pixels wide we want the stroke to be: li { background-image: paint(hollowhighlights, stroke, 10px); } when we get our
list of argument values, we can ask specifically for a <length> unit.
...gisterpaint('hollowhighlights', class { static get inputproperties() { return ['--boxcolor']; } // input arguments that can be passed to the `paint` function static get inputarguments() { return ['*','']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, props, args) { // ctx -> drawing context // size -> size of the box being painted // props ->
list of custom properties available to the element // args ->
list of arguments set when calling the paint() function in the css // where to start the highlight & dimensions const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const blockheight = size.height * 0.85; // the values passed in the paint() function in the css const colour = props.get( '--boxcolo...
CSS Typed Object Model API - Web APIs
it consists of a
list of string fragments and variable references.
...subclasses include: cssimagevalue objects an interface representing values for properties that take an image, for example background-image,
list-style-image, or border-image-source.
... csstransformvalue an interface representing a
list of transform
list values.
...it consists of a
list of string fragments and variable references.
Using channel messaging - Web APIs
var input = document.getelementbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addevent
listener("load", onload); function onload() { //
listen for button clicks button.addevent
listener('click', onclick); //
listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); port1.postme...
... receiving the port and message in the iframe over in the iframe, we have the following javascript: var
list = document.queryselector('ul'); var port2; //
listen for the initial port transfer message window.addevent
listener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessage = onmessage; } // handle messages received on port2 function onmessage(e) { var
listitem = document.createelement('li');
listitem.textcontent = e.data;
list.app...
...endchild(
listitem); port2.postmessage('message received by iframe: "' + e.data + '"'); } when the initial message is received from the main page via the window.postmessage method, we run the initport function.
... when a message is received from the main page we create a
list item and insert it in the unordered
list, setting the textcontent of the
list item equal to the event's data attribute (this contains the actual message).
ChildNode - Web APIs
childnode.remove() removes this childnode from the children
list of its parent.
... childnode.before() inserts a set of node or domstring objects in the children
list of this childnode's parent, just before this childnode.
... childnode.after() inserts a set of node or domstring objects in the children
list of this childnode's parent, just after this childnode.
... childnode.replacewith() replaces this childnode in the children
list of its parent with a set of node or domstring objects.
ContentIndex - Web APIs
contentindex.getall returns a promise that resolves with an iterable
list of content index entries.
...ature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving items within the current index the below example shows an asynchronous function that retrieves items within the content index and iterates over each entry, building a
list for the interface.
... async function createreading
list() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const reading
listelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' reading
listelem.append(message); } else { // if entries are present, display in a
list of links to the content const
listelem = document.createelement('ul'); for (const entry of entries) { const
listitem = document.createelement('l...
...i'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url);
listelem.append(
listitem); } reading
listelem.append(
listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.
Content Index API - Web APIs
ature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving items within the current index the below example shows an asynchronous function that retrieves items within the content index and iterates over each entry, building a
list for the interface.
... async function createreading
list() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const reading
listelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' reading
listelem.append(message); } else { // if entries are present, display in a
list of links to the content const
listelem = document.createelement('ul'); for (const entry of entries) { const
listitem = document.createelement('l...
...i'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url);
listelem.append(
listitem); } reading
listelem.append(
listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.
... self.addevent
listener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); the contentdelete event is only fired when the deletion happens due to interaction with the browser's built-in user interface.
DataTransfer.clearData() - Web APIs
this method does not remove files from the drag operation, so it's possible for there still to be an entry with the type "files" left in the object's datatransfer.types
list if there are any files included in the drag.
...</span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addevent
listener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addevent
listener('dragstart', dragstarthandler); draggable.addevent...
...
listener('dragend', dragendhandler); dropable.addevent
listener('dragover', dragoverhandler); dropable.addevent
listener('dragleave', dragleavehandler); dropable.addevent
listener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; // change target element's border to signify drag has started event.currenttarget.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
...rhtml = event.datatransfer.getdata('text/plain'); } function dragendhandler (event) { if (!dropped) { status.innerhtml = 'drag canceled'; } data.innerhtml = event.datatransfer.getdata('text/plain') || 'empty'; // change border to signify drag is no longer in process event.currenttarget.style.border = '1px solid black'; if (dropped) { // remove all event
listeners draggable.removeevent
listener('dragstart', dragstarthandler); draggable.removeevent
listener('dragend', dragendhandler); dropable.removeevent
listener('dragover', dragoverhandler); dropable.removeevent
listener('dragleave', dragleavehandler); dropable.removeevent
listener('drop', drophandler); } } function dragoverhandler (event) { status.innerhtml = 'd...
DataTransfer.files - Web APIs
the datatransfer.files property is a
list of the files in the drag operation.
... if the operation includes no files, the
list is empty.
... syntax datatransfer.files; return value a
list of the files in a drag operation, one
list item for each file in the operation.
... if the drag operation had no files, the
list is empty.
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 item
list = datatransfer.items; return value a datatransferitem
list 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.
DataTransfer.mozTypesAt() - Web APIs
the datatransfer.moztypesat() method returns a
list of the format types that are stored for an item at the specified index.
... if the index is not in the range from 0 to the number of items minus one, an empty string
list is returned.
... return value nsivariant a
list of data formats (which are strings).
... if the index is not in the range from 0 to the number of items minus one, an empty string
list is returned.
Document: DOMContentLoaded event - Web APIs
examples basic usage document.addevent
listener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); delaying domcontentloaded <script> document.addevent
listener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); for( let i = 0; i < 1000000000; i++) {} // this synchronous script is going to delay parsing of the dom, // so the domcontentloaded event is going to lau...
...</script> checking whether loading is already complete domcontentloaded may fire before your script has a chance to run, so it is wise to check before adding a
listener.
... function dosomething() { console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.addevent
listener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload ...
...{ height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addevent
listener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addevent
listener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addevent
listener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addevent
listener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment html living standardthe definition of 'domcontentloaded' in that specif...
Document.createElement() - Web APIs
content = document.createtextnode("hi there and greetings!"); // add the text node to the newly created div newdiv.appendchild(newcontent); // add the newly created element and its content into the dom const currentdiv = document.getelementbyid("div1"); document.body.insertbefore(newdiv, currentdiv); } web component example the following example snippet is taken from our expanding-
list-web-component example (see it live also).
... in this case, our custom element extends the htmlu
listelement, which represents the <ul> element.
... // create a class for the element class expanding
list extends htmlu
listelement { constructor() { // always call super first in constructor super(); // constructor definition left out for brevity ...
... } } // define the new element customelements.define('expanding-
list', expanding
list, { extends: "ul" }); if we wanted to create an instance of this element programmatically, we'd use a call along the following lines: let expanding
list = document.createelement('ul', { is : 'expanding-
list' }) the new element will be given an is attribute whose value is the custom element's tag name.
Document.createEvent() - Web APIs
event.initevent('build', true, true); //
listen for the event.
... elem.addevent
listener('build', function (e) { // e.target matches elem }, false); // target can be any element or other eventtarget.
... elem.dispatchevent(event); notes event type strings suitable for passing to createevent() are
listed in the dom standard — see the table in step 2.
... gecko supports some non-standard event object aliases, which are
listed below.
Document.getElementsByName() - Web APIs
the getelementsbyname() method of the document object returns a node
list collection of elements with a given name in the document.
... syntax var elements = document.getelementsbyname(name); elements is a live node
list collection, meaning it automatically updates as new elements with the same name are added to/removed from the document.
... the returned node
list collection contains all elements with the given name, such as <meta>, <object>, and even elements which do not support the name attribute at all.
... both ie and edge return an htmlcollection, not a node
list specifications specification status comment html living standardthe definition of 'document.getelementsbyname()' in that specification.
Document.styleSheetSets - Web APIs
the stylesheetsets read-only property returns a live
list of all of the currently-available style sheet sets.
... syntax var sets = document.stylesheetsets; on return, sets is a
list of style sheet sets that are available.
... example given an <ul> (
list) element with the id "sheet
list", you can populate it with the names of all the available style sheet sets with code like this: let
list = document.getelementbyid('sheet
list'); let sheets = document.stylesheetsets;
list.innerhtml = ''; for (let i = 0; i < sheets.length; i++) { let item = document.createelement('li'); item.innerhtml = sheets[i];
list.appendchild(item); } notes the
list of available style sheet sets is constructed by enumerating all the style sheets available for the document, in the order in which they're
listed in the document.stylesheets attribute, adding the title of each style sheet that has a title to the
list.
... duplicates are dropped from the
list (using a case-sensitive comparison).
Document Object Model (DOM) - Web APIs
dom interfaces attr cdatasection characterdata childnode comment customevent document documentfragment documenttype domerror domexception domimplementation domstring domtimestamp domstring
list domtoken
list element event eventtarget htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator node
list nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker url window worker xmldocument obsolete dom interfaces the document object model has been highly sim...
...it is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided: documenttouch domconfiguration domerrorhandler domimplementation
list domimplementationregistry domimplementationsource domlocator domobject domsettabletoken
list domuserdata elementtraversal entity entityreference name
list notation typeinfo userdatahandler html dom a document containing html is described using the document interface, which is extended by the html specification to include various html-specific features.
... static type svgangle svgcolor svgicccolor svgelementinstance svgelementinstance
list svglength svglength
list svgmatrix svgname
list svgnumber svgnumber
list svgpaint svgpathseg svgpathsegclosepath svgpathsegmovetoabs svgpathsegmovetorel svgpathseglinetoabs svgpathseglinetorel svgpathsegcurvetocubicabs svgpathsegcurvetocubicrel svgpathsegcurvetoquadraticabs svgpathsegcurvetoquadraticrel svgpathsegarcabs svgpathsegarcrel svgpathseglinetoh...
...orizontalabs svgpathseglinetohorizontalrel svgpathseglinetoverticalabs svgpathseglinetoverticalrel svgpathsegcurvetocubicsmoothabs svgpathsegcurvetocubicsmoothrel svgpathsegcurvetoquadraticsmoothabs svgpathsegcurvetoquadraticsmoothrel svgpathseg
list svgpoint svgpoint
list svgpreserveaspectratio svgrect svgstring
list svgtransform svgtransform
list animated type svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlength
list svganimatednumber svganimatednumber
list svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransform
list smil-related interfaces elementtimecontrol timeevent other svg interfaces getsvgd...
Element: mouseleave event - Web APIs
it then adds an item to the
list with the number of the mouseenter or mouseleave event.
... html <div id='mousetarget'> <ul id="unordered
list"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible.
... #mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unordered
list = document.getelementbyid('unordered
list'); mousetarget.addevent
listener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; add
listitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addevent
listener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; add
listitem('this is mouseleave event ' + leaveeventcount + '.'); }); function add
listitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a...
... new li element var new
listitem = document.createelement("li"); // add the text node to the li element new
listitem.appendchild(newtextnode); // add the newly created
list item to
list unordered
list.appendchild(new
listitem); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.
Element: mouseout event - Web APIs
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>.
... html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // briefly make the
list purple when the mouse moves off the // <ul> element test.addevent
listener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addevent
listener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result ...
Event.cancelable - Web APIs
if the event is not cancelable, then its cancelable property will be false and the event
listener cannot stop the event from occurring.
... event
listeners that handle multiple kinds of events may want to check cancelable before invoking their preventdefault() methods.
... example for example, browser vendors are proposing that the wheel event can only be canceled the first time the
listener is called — any following wheel events cannot be canceled.
... console.warn(`the following event couldn't be canceled:`); console.dir(event); } } document.addevent
listener('wheel', preventscrollwheel); notes whether an event can be canceled or not is something that's determined when that event is initialized.
Event.composedPath() - Web APIs
the composedpath() method of the event interface returns the event’s path which is an array of the objects on which
listeners will be invoked.
... return value an array of eventtarget objects representing the objects on which an event
listener will be invoked.
... let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event
listener on the <html> element: document.queryselector('html').addevent
listener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
...ement's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] in the second case, the event
listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.
FeaturePolicy.features() - Web APIs
the features() method of the featurepolicy interface returns a
list of names of all features supported by the user agent.
... feature whose name appears on the
list might not be allowed by the feature policy of the current execution context and/or might not be accessible because of user's permissions.
... return value a
list of strings that represent names of all feature policy directives supported by the user agent.
... // get the feature policy object const featurepolicy = document.featurepolicy // retreive the
list of all supported feature policy directives const supporteddirectives = featurepolicy.features() // print out each directive into the console for (const directive of supporteddirectives){ console.log(directive) } specification specification status comment feature policythe definition of 'features' in that specification.
FontFaceSet - Web APIs
events fontfaceset.onloading an event
listener called whenever an event of type loading is fired, indicating a font-face set has started loading.
... fontfaceset.onloadingdone an event
listener called whenever an event of type loadingdone is fired, indicating that a font face set has finished loading.
... fontfaceset.onloadingerror an event
listener called whenever an event of type loadingerror is fired, indicating that an error occurred whilst loading a font-face set.
... fontfaceset.load() returns a promise which resolves to a
list of font-faces for a requested font.
Using FormData Objects - Web APIs
32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addevent
listener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error " +...
... using a formdata event a more recent addition to the platform than the formdata object is the formdata event — this is fired on an htmlformelement object after the entry
list representing the form's data is constructed.
... typically this is used as shown in our simple formdata event demo — in the javascript we reference a form: const formelem = document.queryselector('form'); in our submit event handler we use preventdefault to stop the default form submission, then invoke a formdata constructor to trigger the formdata event: formelem.addevent
listener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); when the formdata event fires we can access the formdata object using formdataevent.formdata, then do what we like with it (below we post it to the server using xmlhttprequest).
... formelem.addevent
listener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr let request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); note: the formdata event and formdataevent object are available in chrome from version 77 (and other equivalent chromiums), and firefox 72 (first available behind the dom.formdata.event.enabled pref in firefox 71).
Fullscreen API - Web APIs
these are
listed in the following sections.
...the full-screen mode feature is identified by the string "fullscreen", with a default allow-
list value of "self", meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.
... view live examples watching for the enter key when the page is loaded, this code is run to set up an event
listener to watch for the enter key.
... document.addevent
listener("keypress", function(e) { if (e.keycode === 13) { togglefullscreen(); } }, false); toggling full-screen mode this code is called by the event handler above when the user hits the enter key.
GlobalEventHandlers.onerror - Web APIs
error events are fired at various targets for different kinds of errors: when a javascript runtime error (including syntax errors and exceptions thrown within handlers) occurs, an error event using interface errorevent is fired at window and window.onerror() is invoked (as well as handlers attached by window.addevent
listener (not only capturing)).
...these error events do not bubble up to window, but (at least in firefox) can be handled with a window.addevent
listener configured with usecapture set to true.
... syntax for historical reasons, different arguments are passed to window.onerror and element.onerror handlers (as well as on error-type window.addevent
listener handlers).
... window.addevent
listener('error') window.addevent
listener('error', function(event) { ...
Audio() - Web APIs
the audio() constructor creates and returns a new htmlaudioelement which can be either attached to a document for the user to interact with and/or
listen to, or can be used offscreen to manage and play audio.
...
listen for the canplay event.
...
listen for the canplaythrough event.
... the event-based approach is best: myaudioelement.addevent
listener("canplaythrough", event => { /* the audio is now playable; play it if permissions allow */ myaudioelement.play(); }); memory usage and management if all references to an audio element created using the audio() constructor are deleted, the element itself won't be removed from memory by the javascript runtime's garbage collection mechanism if playback is currently underway.
HTMLElement - Web APIs
htmlelement.dropzone read only returns a domsettabletoken
list reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
... htmlelement.itemtype read only returns a domsettabletoken
list… htmlelement.itemid is a domstring representing the item id.
... htmlelement.itemref read only returns a domsettabletoken
list… htmlelement.itemprop read only returns a domsettabletoken
list… htmlelement.itemvalue returns a object representing the item value.
... events
listen to these events using addevent
listener() or by assigning an event
listener to the oneventname property of this interface.
HTMLInputElement.webkitdirectory - Web APIs
pic1000.jpg pic1004.jpg pic1044.jpg don's 40th birthday pic2343.jpg pic2344.jpg pic2355.jpg pic2356.jpg vacations mars pic5533.jpg pic5534.jpg pic5556.jpg pic5684.jpg pic5712.jpg if the user chooses photoalbums, then the
list reported by files will contain file objects for every file
listed above—but not the directories.
...this makes it possible to know the hierarchy even though the file
list is flat.
...when the change event occurs, a
list of all files contained within the selected directory hierarchies is generated and displayed.
... html content <input type="file" id="filepicker" name="file
list" webkitdirectory multiple /> <ul id="
listing"></ul> javascript content document.getelementbyid("filepicker").addevent
listener("change", function(event) { let output = document.getelementbyid("
listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
HTMLLinkElement - Web APIs
htmllinkelement.media is a domstring representing a
list of one or more media formats to which the resource applies.
... htmllinkelement.rel
list read only is a domtoken
list that reflects the rel html attribute, as a
list of tokens.
... htmllinkelement.sizes read only is a domsettabletoken
list that reflects the sizes html attribute, as a
list of tokens.
... the following properties have been added: rel
list, and sizes.
IDBDatabase: abort event - Web APIs
bubbles yes cancelable no interface event event handler property onabort examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a
listener to the abort event, then aborts the transaction to trigger the event.
... // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addevent
listener('abort', () => { console.log('tr...
...ansaction aborted'); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list', { 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', 'd...
...unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.onabort = () => { console.log('transaction aborted'); }; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); // abort the transaction transaction.abort(); }; ...
IDBDatabase: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record,
listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will conta...
...que: 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.addevent
listener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); const objectstore = transaction.objectstore('todo
list'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of ad...
...devent
listener(): // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list', { 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 newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, mo...
...nth: 'january', year: 2020 }; const db = dbopenrequest.result; db.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); const objectstore = transaction.objectstore('todo
list'); const objectstorerequest = objectstore.add(newitem); }; ...
IDBDatabase.transaction() - Web APIs
invalidaccesserror the function was called with an empty
list of store names.
...for a complete example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the displaydata() function to populate the task
list with // all the to-do
list data already in the idb displaydata(); }; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todo
list"], "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.
... duplicate items not allowed.</li>'; }; // you would then go on to do something to this database // via an object store var objectstore = transaction.objectstore("todo
list"); // etc.
IDBObjectStore.add() - Web APIs
to determine if the add operation has completed successfully,
listen for the transaction’s complete event in addition to the idbobjectstore.add request’s success event, because the transaction may still fail after the success event fires.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var 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(["todo
list"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'add()' in that specification.
IDBOpenDBRequest - Web APIs
events
listen to these events using addevent
listener() or by assigning an event
listener to the oneventname property of this interface.
...for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); // these event handlers act on the database being opened.
...this is used a lot below db = dbopenrequest.result; // run the displaydata() function to populate the task //
listwith all the to-do
list data already in the idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above // it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result;...
... db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todo
list", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); }; specifications specification status comment indexed database api 2.0the definition of 'idbopendbrequ...
IDBRequest: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record,
listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.addevent
listener('upgradeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { 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.addevent
listener('success', event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); const objectstore = transaction.objectstore('todo
list'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); obj...
...ectstorerequest.addevent
listener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addevent
listener(): // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { 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: fal...
...se }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); const objectstore = transaction.objectstore('todo
list'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; }; ...
IDBTransaction: abort event - Web APIs
examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a
listener to the abort event, then aborts the transaction to trigger the event.
... // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.
...result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); // add a
listener for `abort` transaction.addevent
listener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore...
...inutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); // add a
listener for `abort` transaction.onabort = (event) => { console.log('transaction was aborted'); }; // abort the transaction transaction.abort(); }; ...
IDBTransaction: complete event - Web APIs
bubbles no cancelable no interface event event handler property oncomplete examples using addevent
listener(): // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectsto...
...re.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); // add a
listener for `complete` transaction.addevent
listener('complete', event => { console.log('transaction was competed'); }); const objectstore = transaction.objectstore('todo
list'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database ...
...const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a re...
...ad/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); // add a
listener for `complete` transaction.oncomplete = event => { console.log('transaction was competed'); }; const objectstore = transaction.objectstore('todo
list'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; ...
IDBTransaction: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record,
listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will c...
...utes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); transaction.addevent
listener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); const objectstore = transaction.objectstore('todo
list'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror...
... property instead of addevent
listener(): // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/w...
...rite db transaction, ready for adding the data const transaction = db.transaction(['todo
list'], 'readwrite'); transaction.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; const objectstore = transaction.objectstore('todo
list'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; ...
KeyboardEvent - Web APIs
a
list of the constants identifying the locations is shown above in keyboard locations.
...in the
list below, each event links to the documentation for the document handler for the event, which applies generally to all of the recipients.
... example <!doctype html> <html> <head> <script> 'use strict'; document.addevent
listener('keydown', (event) => { const keyname = event.key; if (keyname === 'control') { // do not alert when only control key is pressed.
... alert(`combination of ctrlkey + ${keyname}`); } else { alert(`key pressed ${keyname}`); } }, false); document.addevent
listener('keyup', (event) => { const keyname = event.key; // as the user releases the ctrl key, the key is no longer active, // so event.ctrlkey is false.
MSCandidateWindowShow - Web APIs
syntax event property object.oncandidatewindowshow = handler; addevent
listener method object.addevent
listener("mscandidatewindowshow", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
... example in ie11, developers can detect the opening of the ime candidate window by
listening to mscandidatewindowshow event, then call getcandidatewindowclientrect() function to find out where the candidate window is and position the suggestion ui away from it: var context = document.getelementbyid("mysearchbox").msgetinputcontext(); context.addevent
listener("mscandidatewindowshow", candidatewindowshowhandler); function candidatewindowshowhandler(e) { var imerect = context.getc...
...andidatewindowclientrect(); var suggestionrect = document.getelementbyid("mysuggestion
list").getboundingclientrect(); // check if the two rects intersect, and position them away from each other.
...developers could
listen to them and shift the suggestion ui accordingly.
MediaDevices.getSupportedConstraints() - Web APIs
return value a new object based on the mediatracksupportedconstraints dictionary
listing the constraints supported by the user agent.
... because only constraints supported by the user agent are included in the
list, each of these boolean properties has the value true.
... example this example outputs a
list of the constraints supported by your browser.
... html <p>the following media constraints are supported by your browser:</p> <ul id="constraint
list"> </ul> css body { font: 15px arial, sans-serif; } javascript let constraint
list = document.getelementbyid("constraint
list"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraint
list.appendchild(elem); } } result specifications specification status comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification.
MediaStream - Web APIs
you can create an empty stream, a stream which is based upon an existing stream, or a stream that contains a specified
list of tracks (specified as an array of mediastreamtrack objects).
... mediastream.getaudiotracks() returns a
list of the mediastreamtrack objects stored in the mediastream object that have their kind attribute set to audio.
... mediastream.gettracks() returns a
list of all mediastreamtrack objects stored in the mediastream object, regardless of the value of the kind attribute.
... mediastream.getvideotracks() returns a
list of the mediastreamtrack objects stored in the mediastream object that have their kind attribute set to "video".
MessagePort.postMessage() - Web APIs
syntax port.postmessage(message, transfer
list); returns void.
... transfer
list optional transferable objects to be transferred — these objects have their ownership transferred to the receiving browsing context, so are no longer usable by the sending browsing context.
...the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is
listened to, to check when the message arrives.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addevent
listener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MutationObserver.MutationObserver() - Web APIs
the callback function function callback(mutation
list, observer) { mutation
list.foreach( (mutation) => { switch(mutation.type) { case 'child
list': /* one or more children have been added to and/or removed from the tree.
... the kind of change that took place (either a change to the
list of children, or a change to an attribute) is detected by looking at the mutation.type property.
... const targetnode = document.queryselector("#someelement"); const observeroptions = { child
list: true, attributes: true, // omit (or set to false) to observe only changes to the parent node subtree: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); the desired subtree is located by finding an element with the id someelement.
...in it, we specify values of true for both child
list and attributes, so we get the information we want.
MutationObserverInit.attributeFilter - Web APIs
syntax var options = { attributefilter: [ "
list", "of", "attribute", "names" ] } value an array of domstring objects, each specifying the name of one attribute whose value is to be monitored for changes.
... function callback(mutation
list) { mutation
list.foreach(function(mutation) { switch(mutation.type) { case "attributes": switch(mutation.attributename) { case "status": userstatuschanged(mutation.target.username, mutation.target.status); break; case "username": usernamechanged(mutation.oldvalue, mutation.target.username); break; } ...
... break; } }); } var user
listelement = document.queryselector("#user
list"); var observer = new mutationobserver(callback); observer.observe(user
listelement, { attributefilter: [ "status", "username" ], attributeoldvalue: true, subtree: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each item in the
list of mutationrecord objects.
... when observe() is called, the specified options include both attributefilter and subtree, so that we monitor the attribute values for all of the nodes contained within the subtree rooted at the node with the id "user
list".
Online and offline events - Web APIs
you can register
listeners for these events in a few familiar ways: using addevent
listener on the window, document, or document.body by setting the .ononline or .onoffline properties on document or document.body to a javascript function object.
... example there's a simple test case that you can run to verify that the events are working (does not work in chrome due to attaching the event
listener to document.body).
... here's the javascript part: window.addevent
listener('load', function() { var status = document.getelementbyid("status"); var log = document.getelementbyid("log"); function updateonlinestatus(event) { var condition = navigator.online ?
... "online" : "offline"; status.classname = condition; status.innerhtml = condition.touppercase(); log.insertadjacenthtml("beforeend", "event: " + event.type + "; status: " + condition); } window.addevent
listener('online', updateonlinestatus); window.addevent
listener('offline', updateonlinestatus); }); a touch of css #status { position: fixed; width: 100%; font: bold 1em sans-serif; color: #fff; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online { background: green; } .offline { background: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id="log"></div> <p>this is a test</p> here's the live result n...
Node - Web APIs
node.childnodesread only returns a live node
list containing all the children of this node.
... node
list being live means that if the children of the node change, the node
list object is automatically updated.
... node.getboxquads() returns a
list of the node's css boxes relative to another node.
... rea
listic usage the following demonstrates a real-world use of the eachnode() function: searching for text on a web-page.
PannerNode.coneInnerAngle - Web APIs
however, normally this would mean the pannernode points to the left of the
listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the
listener at 0° rotation.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the
listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ll decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the
listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.o...
PannerNode.coneOuterAngle - Web APIs
however, normally this would mean the pannernode points to the left of the
listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the
listener at 0° rotation.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the
listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ll decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the
listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.o...
PannerNode.coneOuterGain - Web APIs
however, normally this would mean the pannernode points to the left of the
listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the
listener at 0° rotation.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the
listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ll decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the
listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.o...
PerformanceEventTiming - Web APIs
the performanceeventtiming interface of the event timing api provides timing information for the event types
listed below.
... examples the following example shows how to use the api for all events: const observer = new performanceobserver(function(
list) { const perfentries =
list.getentries().foreach(entry => { // full duration const inputduration = entry.duration; // input delay (before processing event) const inputdelay = entry.processingstart - entry.starttime; // synchronous event processing time (between start and end dispatch).
...0 : infinity; document.addevent
listener('visibilitychange', (event) => { firsthiddentime = math.min(firsthiddentime, event.timestamp); }, {once: true}); // sends the passed data to an analytics endpoint.
... const po = new performanceobserver((entry
list) => { entry
list.getentries().foreach(onfirstinputentry); }); // observe entries of type `first-input`, including buffered entries, // i.e.
Performance Timeline - Web APIs
when the observer (callback) is invoked, the callback's parameters include a performance observer entry
list that contains only observed performance entries.
... that is, the
list contains entries only for the event types that were specified when the observer's observe() method was invoked.
... the performance observer entry
list interface has the same three getentries*() methods as the performance interface.
... however, note there is one key difference with these methods; the performance observer entry
list versions are used to retrieve observed performance entries within the observer callback.
Using Pointer Events - Web APIs
function startup() { var el = document.getelementsbytagname("canvas")[0]; el.addevent
listener("pointerdown", handlestart, false); el.addevent
listener("pointerup", handleend, false); el.addevent
listener("pointercancel", handlecancel, false); el.addevent
listener("pointermove", handlemove, false); log("initialized."); } this simply sets up all the event
listeners for our <canvas> element so we can handle the touch events as they occur.
...its job is to draw the last line segment for the touch that ended and remove the touch point from the ongoing touch
list.
...x - 4, evt.clienty - 4, 8, 8); // and a square at the end ongoingtouches.splice(idx, 1); // remove it; we're done } else { log("can't figure out which touch to end"); } } this is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call array.splice(), we simply remove the old entry from the ongoing touch
list, without adding in the updated information.
... function handlecancel(evt) { log("pointercancel: id = " + evt.pointerid); var idx = ongoingtouchindexbyid(evt.pointerid); ongoingtouches.splice(idx, 1); // remove it; we're done } since the idea is to immediately abort the touch, we simply remove it from the ongoing touch
list without drawing a final line segment.
RTCConfiguration.iceServers - Web APIs
description how the
list of servers you provide is used is up to the implementation of the user agent.
... while it can be useful to provide a second server as a fallback in case the first is offline,
listing too many servers can delay the user's connection being established, depending on the network's performance and how many servers get used for negotiation before a connection is established.
... if the
list of servers is changed while a connection is already active by calling the the rtcpeerconnection method setconfiguration(), no immediate effect occurs.
... however, the new
list of servers is used for any future renegotiation, such as while handling an ice restart.
RTCPeerConnection.removeTrack() - Web APIs
the rtcpeerconnection.removetrack() method tells the local end of the connection to stop sending media from the specified track, without actually removing the corresponding rtcrtpsender from the
list of senders as reported by rtcpeerconnection.getsenders().
... if the track is already stopped, or is not in the connection's senders
list, this method has no effect.
... example this example adds a video track to a connection and sets up a
listener on a close button which removes the track when the user clicks the button.
... var pc, sender; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); var track = stream.getvideotracks()[0]; sender = pc.addtrack(track, stream); }); document.getelementbyid("closebutton").addevent
listener("click", function(event) { pc.removetrack(sender); pc.close(); }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.removetrack()' in that specification.
Range.commonAncestorContainer - Web APIs
syntax rangeancestor = range.commonancestorcontainer; example in this example, we create an event
listener to handle pointerup events on a
list.
... the
listener gets the common ancestors of each piece of selected text, and triggers an animation to highlight them.
... .highlight { animation: highlight linear 1s; } @keyframes highlight { from { outline: 1px solid #f00f; } to { outline: 1px solid #f000; } } body { padding: 1px; } javascript document.addevent
listener('pointerup', e => { const selection = window.getselection(); if (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.class
list.remove('highlight...
...'); settimeout(() => { el.class
list.add('highlight'); }, 0); } result specifications specification status comment domthe definition of 'range.commonancestorcontainer' in that specification.
Report - Web APIs
this contains the
list of reports currently contained in the observer's report queue.
... the report details are displayed via the displayreports() fuction, which takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const
list = document.createelement('ul'); outputelem.appendchild(
list); for(let i = 0; i < reports.length; i++) { let
listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type);
listitem.appendchild(textnode); let inner
list = document.createelement('ul');
listitem.appendchild(inner
list);
list.appendchild(l...
...istitem); for (let key in reports[i].body) { let inner
listitem = document.createelement('li'); let keyvalue = reports[i].body[key]; inner
listitem.textcontent = key + ': ' + keyvalue; inner
list.appendchild(inner
listitem); } } } the reports parameter contains an array of all the reports in the observer's report queue.
... we loop over each report using a basic for loop, then iterate over each entry of in the report's body using a for...in structure, displaying each key/value pair inside a
list item.
Screen Wake Lock API - Web APIs
wakelock.release() .then(() => { wakelock = null; });
listening for wake lock release this example updates the ui if the wake lock has been released for any reason (such as navigating away from the active window/tab).
... wakelock.addevent
listener('release', () => { // the wake lock has been released statuselem.textcontent = 'wake lock has been released'; }); reacquiring a wake lock the following code reacquires the wake lock should the visibility of the document change and the wake lock is released.
... document.addevent
listener('visibilitychange', () => { if (wakelock !== null && document.visibilitystate === 'visible') { wakelock = await navigator.wakelock.request('screen'); } }); putting it all together you can find the complete code on github here.
...therefore make sure to re-acquire screen wake lock if necessary when document becomes active (
listen for visibilitychange event).
ServiceWorker.onstatechange - Web APIs
an event
listener property called whenever an event of type statechange is fired; it is basically fired anytime the serviceworker.state changes.
...} serviceworker.addevent
listener('statechange', function(statechangeevent) { ...
...the code
listens for any change in the serviceworker.state and returns its value.
...nt.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addevent
listener('statechange', function(e) { logstate(e.target.state); }); } note that when statechange fires, the service worker's references may have changed.
SourceBuffer - Web APIs
sourcebuffer.audiotracks read only a
list of the audio tracks currently contained inside the sourcebuffer.
... sourcebuffer.texttracks read only a
list of the text tracks currently contained inside the sourcebuffer.
... sourcebuffer.videotracks read only a
list of the video tracks currently contained inside the sourcebuffer.
..._bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addevent
listener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addevent
listener('updateend', function (_) { mediasource.endofstream(); ...
SpeechSynthesis.getVoices() - Web APIs
the getvoices() method of the speechsynthesis interface returns a
list of speechsynthesisvoice objects representing all the available voices on the current device.
... return value a
list (array) of speechsynthesisvoice objects.
... note: the spec wrongly
lists this method as returning as a speechsynthesisvoice
list object, but this was in fact removed from the spec.
... example javascript function populatevoice
list() { if(typeof speechsynthesis === 'undefined') { return; } var voices = speechsynthesis.getvoices(); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); document.getelementbyid("voiceselect").appendchild(option); } } populatevoice
list(); if (typeof speechsynthesis !== 'undefined' && speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoice
list; } html <select id="voiceselect"></select> ...
SpeechSynthesis.onvoiceschanged - Web APIs
the onvoiceschanged property of the speechsynthesis interface represents an event handler that will run when the
list of speechsynthesisvoice objects that would be returned by the speechsynthesis.getvoices() method has changed (when the voiceschanged event fires.) this may occur when speech synthesis is being done on the server-side and the voices
list is being determined asynchronously, or when client-side voices are installed/uninstalled while a speech synthesis application is running.
...}; examples this could be used to populate a
list of voices that the user can choose between when the event fires (see our speak easy synthesis demo.) note that firefox doesn't support it at present, and will just return a
list of voices when speechsynthesis.getvoices() is fired.
... with chrome however, you have to wait for the event to fire before populating the
list, hence the bottom if statement seen below.
... var voices = []; function populatevoice
list() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoice
list(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoice
list; } specifications specification status comment web speech apithe definition of 'onvoiceschanged' in that specification.
Using readable streams - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let
listitem = document.createelement('li');
listitem.textcontent = string;
list1.appendchild(
listitem); }, 1000); button.addevent
listener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, ...
... if (done) { console.log("stream complete"); para.textcontent = result; return; } charsreceived += value.length; const chunk = value; let
listitem = document.createelement('li');
listitem.textcontent = 'read ' + charsreceived + ' characters so far.
... current chunk = ' + chunk;
list2.appendchild(
listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } closing and cancelling streams we’ve already shown examples of using readablestreamdefaultcontroller.close() to close a reader.
...this example works much the same way as our simple random stream, except that when the button is pressed to stop generating random strings, the custom stream is taken and teed, and both resulting streams are then read: function teestream() { const teedoff = stream.tee(); readstream(teedoff[0],
list2); readstream(teedoff[1],
list3); } pipe chains one very experimental feature of streams is the ability to pipe streams into one another (called a pipe chain).
SubtleCrypto.verify() - Web APIs
*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.class
list.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.class
list.add(result ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsa-pss .signature-value"); signaturevalue.class
list.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "rsa-pss", saltlength: 32, }, publickey, signature, encoded ); signaturevalue.class
list.add(result ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".ecdsa .signature-value"); signaturevalue.class
list.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "ecdsa", hash: {name: "sha-384"}, }, publickey, signature, encoded ); signaturevalue.class
list.add(result ?
...*/ async function verifymessage(key) { const signaturevalue = document.queryselector(".hmac .signature-value"); signaturevalue.class
list.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "hmac", key, signature, encoded ); signaturevalue.class
list.add(result ?
getTrackById() - Web APIs
the texttrack
list method gettrackbyid() returns the first texttrack object from the track
list whose id matches the specified string.
... syntax var thetrack = texttrack
list.gettrackbyid(id); paramters id a domstring indicating the id of the track to locate within the track
list.
... return value a texttrack object indicating the first track found within the texttrack
list whose id matches the specified string.
... specifications specification status comment html living standardthe definition of 'texttrack
list.gettrackbyid()' in that specification.
getTrackById - Web APIs
the videotrack
list method gettrackbyid() returns the first videotrack object from the track
list whose id matches the specified string.
... syntax var thetrack = videotrack
list.gettrackbyid(id); paramters id a domstring indicating the id of the track to locate within the track
list.
... return value a videotrack object indicating the first track found within the videotrack
list whose id matches the specified string.
... specifications specification status comment html living standardthe definition of 'videotrack
list.gettrackbyid()' in that specification.
A basic 2D WebGL animation example - Web APIs
let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation timing let previoustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup(): window.addevent
listener("load", startup, false); function startup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: gl.fragment_shader, id: "fragment-shader" } ]; shaderprogram = buildshaderprogram(shaderset); aspectratio = glcanvas.width/glcanvas.h...
...the array shaderset contains a
list of objects, each describing one shader function to be compiled into the program.
... with the vertex data now provided to webgl, we set vertexnumcomponents to the number of components in each vertex (2, since they're 2d vertexes) and vertexcount to the number of vertexes in the vertex
list.
... then, for each shader in the specified
list of shaders, we call a compileshader() function to compile it, passing into it the id and type of the shader function to build.
Writing WebSocket client applications - Web APIs
to handle it, add an event
listener for the message event, or use the onmessage event handler.
... to begin
listening for incoming data, you can do something like this: examplesocket.onmessage = function (event) { console.log(event.data); } receiving and interpreting json objects let's consider the chat client application first alluded to in using json to transmit objects.
... there are assorted types of data packets the client might receive, such as: login handshake message text user
list updates the code that interprets these incoming messages might look like this: examplesocket.onmessage = function(event) { var f = document.getelementbyid("chatbox").contentdocument; var text = ""; var msg = json.parse(event.data); var time = new date(msg.date); var timestr = time.tolocaletimestring(); switch(msg.type) { case "id": clientid = msg.id; setusername(); break; case "username": text = "<b>user <em>" + msg.name + "</em> signed in at " + timestr + "</b><br>"; break; case "message": text = "(" + timestr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; break; case "rejectusername": tex...
...t = "<b>your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" break; case "user
list": var ul = ""; for (i=0; i < msg.users.length; i++) { ul += msg.users[i] + "<br>"; } document.getelementbyid("user
listbox").innerhtml = ul; break; } if (text.length) { f.write(text); document.getelementbyid("chatbox").contentwindow.scrollbypages(1); } }; here we use json.parse() to convert the json object back into the original object, then examine and act upon its contents.
Movement, orientation, and motion: A WebXR example - Web APIs
window.addevent
listener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.addevent
listener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector(...
... function sessionstarted(session) { let refspacetype; xrsession = session; xrbutton.innertext = "exit webxr"; xrsession.addevent
listener("end", sessionended); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); if (allowmouserotation) { canvas.addevent
listener("pointermove", handlepointermove); canvas.addevent
listener("contextmenu", (event) => { event.preventdefault(); }); } if (allowkeyboardmotion) { document.addevent
listener("keydown", handlekeydown...
...these buffers include the array of vertex positions, the array of vertex normals, the texture coordinates for each surface of the cube, and the array of vertex indices (specifying which entry in the vertex
list represents each corner of the cube).
...try adding more objects to the world, or improve the movement controls to move more rea
listically.
Window.matchMedia() - Web APIs
the window interface's matchmedia() method returns a new mediaquery
list object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.
... syntax mq
list = window.matchmedia(mediaquerystring) parameters mediaquerystring a string specifying the media query to parse into a mediaquery
list.
... return value a new mediaquery
list object for the media query.
... examples this example runs the media query (max-width: 600px) and displays the value of the resulting mediaquery
list's matches property in a <span>; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that.
WindowEventHandlers.onhashchange - Web APIs
syntax using an event handler: window.onhashchange = funcref; using an html event handler: <body onhashchange="funcref();"> using an event
listener: to add an event
listener, use addevent
listener(): window.addevent
listener("hashchange", funcref, false); parameters funcref a reference to a function.
... function locationhashchanged() { if (location.hash === '#cool-feature') { console.log("you're visiting a cool feature!"); } } window.onhashchange = locationhashchanged; using an event
listener this example uses an event
listener to log a notification whenever the hash has changed.
... function hashhandler() { console.log('the hash has changed!'); } window.addevent
listener('hashchange', hashhandler, false); overriding the hash this function sets a new hash dynamically, setting it randomly to one of two values.
... polyfill for event.newurl and event.oldurl // let this snippet run before your hashchange event binding code if (!window.hashchangeevent)(function(){ var lasturl = document.url; window.addevent
listener("hashchange", function(event){ object.defineproperty(event, "oldurl", {enumerable:true,configurable:true,value:lasturl}); object.defineproperty(event, "newurl", {enumerable:true,configurable:true,value:document.url}); lasturl = document.url; }); }()); specifications specification status comment html living standardthe definition of 'onhashchange' i...
Synchronous and asynchronous requests - Web APIs
this is a standard function which uses the xmlhttprequest object asynchronously in order to switch the content of the read file to a specified
listener.
...en("get", url, true); xhr.send(null); } usage: function showmessage(message) { console.log(message + this.responsetext); } loadfile("message.txt", showmessage, "new message!\n\n"); the signature of the utility function loadfile declares (i) a target url to read (via an http get request), (ii) a function to execute on successful completion of the xhr operation, and (iii) an arbitrary
list of additional arguments that are passed through the xhr object (via the arguments property) to the success callback function.
... window.addevent
listener('unload', logdata, false); function logdata() { var client = new xmlhttprequest(); client.open("post", "/log", false); // third parameter indicates sync xhr.
... window.addevent
listener('unload', logdata, false); function logdata() { navigator.sendbeacon("/log", analyticsdata); } ...
XRInputSourceArray.forEach() - Web APIs
the xrinputsourcearray method foreach() executes the specified callback once for each input source in the array, starting at index 0 and progressing until the end of the
list.
... source
list optional the xrinputsourcearray object which is being processed.
... examples this example snippet gets the
list of inputs for a session and tries to handle each type of input device it supports using.
...putsources = xrsession.inputsources; inputsources.foreach((input) => { if (input.gamepad) { checkgamepad(input.gamepad); } else { if (input.targetraymode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } }); for each input in the l
list, the callback dispatches gamepad inputs to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other devices, we look for tracked-pointer devices in the player's main hand, dispatching those to a handlemainhandinput() method.
XRInputSourceArray.keys() - Web APIs
return value a javascript iterator that can be used to walk through the keys for each entry in the
list of input sources.
... the values returned by the iterator are the indexes of each entry in the
list; that is, the numbers 0, 1, 2, and so forth through the index of the last item in the
list.
... examples this example snippet gets the
list of inputs for a session and tries to handle each type of input device it supports using.
... for (const inputidx of xrsession.inputsources.keys()) { /* the keys are the indexes into the
list of inputs */ checkinput(xrsession.inputsources[inputidx]); } here, for...of is used to iterate over each of the keys.
XRPermissionDescriptor.requiredFeatures - Web APIs
the xrpermissiondescriptor dictionary's requiredfeatures property should be set prior to calling navigator.permissions.query() to a
list of webxr features which must be supported for the app to work.
... syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeature
list, optionalfeatures: optfeature
list }; xrpermissiondescriptor.requiredfeatures = reqfeature
list; reqfeature
list = xrpermissiondescriptor.requiredfeatures; value an array of strings indicating the webxr features which must be available for use by the app or site.
... the permissions check will be performed in such a manner as to verify that all features in the
list are available for use with the user's permission.
... the permitted values are: the types of reference space are
listed in the table below, with brief information about their use cases and which interface is used to implement them.
ARIA: feed role - Accessibility
a feed is a dynamic scrollable
list of articles in which articles are added to or removed from either end of the
list as the user scrolls.
...</section> description a feed is a page structure for a scrollable
list of articles where scrolling may cause articles to be added to the top or end of the
list.
... the
list establishes an interoperability contract between the web page and assistive technologies that governs scroll interactions so that assistive technology users can read articles, jump forward and backward by article, and reliably trigger new articles to load while in reading mode.
... examples include an rss feed, news feeds, social media feeds like facebook, instagram or twitter, or even a
list of related products on an ecommerce page.
An overview of accessible web applications and widgets - Accessibility
sliders, menu bars, file
list views, and more can be built with a combination of javascript, css, and html.
...--> <!-- we've added role attributes to describe the tab
list and each tab.
... --> <ol role="tab
list"> <li id="ch1tab" role="tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab" role="tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab" role="tab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <!-- notice the role and aria-labelledby attributes we've added to describe these panels.
...examples include (but are certainly not limited to): aria-checked: indicates the state of a checkbox or radio button aria-disabled: indicates that an element is visible, but not editable or otherwise operable aria-grabbed: indicates the 'grabbed' state of an object in a drag-and-drop operation (for a full
list of aria states, consult the aria
list of states and properties.) developers should use aria states to indicate the state of ui widget elements and use css attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
Accessibility Information for Web Authors - Accessibility
these guidelines are discussed on the wai interest group discussion
list.
...(...) contrast is extremely important in web design." wheel of color: pump up the contrast, robert hess, msdn "for this year's
list of worst design mistakes, (...) i asked readers of my newsletter to nominate the usability problems they found the most irritating.
... newsgroup and mailing
list we have two discussion
lists, which can be read via a newsgroup reader, as a mailing
list or via google groups.
... purpose newsgroup mailing
list google group developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
:nth-last-child() - CSS: Cascading Style Sheets
formal syntax :nth-last-child( <nth> [ of <complex-selector-
list> ]?
... )where <nth> = <an-plus-b> | even | odd<complex-selector-
list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>?
...in this example,
list items turn red when there are at least three of them in a given
list.
... html <h4>a
list of four items (styled):</h4> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <h4>a
list of two items (unstyled):</h4> <ol> <li>one</li> <li>two</li> </ol> css /* if there are at least three
list items, style them all */ li:nth-last-child(n+3), li:nth-last-child(n+3) ~ li { color: red; } result specifications specification status comment selectors level 4the definition of ':nth-last-child' in that specification.
range - CSS: Cascading Style Sheets
[ [ | infinite ]{2} ]# defines a comma-separated
list of ranges.
...the range of the counter style is the union of all the ranges defined in the
list.
... description the value of the range descriptor can be either auto or a comma separated
list of lower and upper bounds specified as integers.
... formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="
list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-multi-example { system: cyclic; symbols: "\25a0" "\25a1"; range: 2 4, 7 9; } .
list {
list-style: range-multi-example; } the above
list will display as follows: 1.
src - CSS: Cascading Style Sheets
the format hint contains a comma-separated
list of format strings that denote well-known font formats.
... description the value of this descriptor is a prioritized, comma-separated
list of external references or locally-installed font face names.
... when a font is needed the user agent iterates over the set of references
listed using the first one it can successfully activate.
... fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the
list.
@font-feature-values - CSS: Cascading Style Sheets
@sty
listic specifies a feature name that will work with the sty
listic() functional notation of font-variant-alternates.
... a sty
listic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't.
... formal syntax @font-feature-values <family-name># { <feature-value-block-
list> }where <family-name> = <string> | <custom-ident>+<feature-value-block-
list> = <feature-value-block>+where <feature-value-block> = <feature-type> '{' <feature-value-declaration-
list> '}'where <feature-type> = @sty
listic | @historical-forms | @styleset | @character-variant | @swash | @ornaments | @annotation<feature-value-declaration-
list> = <feature-value-declaration>where <feature-value-declarat...
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 9.3samsung internet android no support no@sty
listicchrome no support noedge no support nofirefox full support 34 full support 34 full support 24disabled disabled from version 24: this feature is behind the layout.css.font-fe...
Attribute selectors - CSS: Cascading Style Sheets
[attr~=value] represents elements with an attribute name of attr whose value is a whitespace-separated
list of words, one of which is exactly value.
...*/ /* note: you could also use hyphenated attributes without double quotes */ div[data-lang="zh-tw"] { color: purple; } html <div lang="en-us en-gb en-au en-nz">hello world!</div> <div lang="pt">olá mundo!</div> <div lang="zh-cn">世界您好!</div> <div lang="zh-tw">世界您好!</div> <div data-lang="zh-tw">世界您好!</div> result html ordered
lists the html specification requires the type attribute to be matched case-insensitively due to it primarily being used in the <input> element, trying to use attribute selectors to with the type attribute of an ordered
list doesn't work without the case-sensitive modifier.
... css /*
list types require the case sensitive flag due to a quirk in how html treats the type attribute.
... */ ol[type="a"] {
list-style-type: lower-alpha; background: red; } ol[type="a" s] {
list-style-type: lower-alpha; background: lime; } ol[type="a" s] {
list-style-type: upper-alpha; background: lime; } html <ol type="a"> <li>example
list</li> </ol> result specifications specification status comment selectors level 4the definition of 'attribute selectors' in that specification.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
here's what happens when the play() function gets called: the box's
list of css classes is reset to simply "box".
...however, changes to the class
list don't take effect until the style recomputation is complete and a refresh has occurred to reflect the change.
... of course, we also need to add an event handler to our "run" button so it'll actually do something: document.queryselector(".runbutton").addevent
listener("click", play, false); result stopping an animation simply removing the animation-name applied to an element will make it jump or cut to its next state.
...e: .slidein { animation-duration: 5s; animation-name: slidein; animation-iteration-count: infinite; } .stopped { animation-name: none; } @keyframes slidein { 0% { margin-left: 0%; } 50% { margin-left: 50%; } 100% { margin-left: 0%; } } <h1 id="watchme">click me to stop</h1> let watchme = document.getelementbyid('watchme') watchme.classname = 'slidein' const
listener = (e) => { watchme.classname = 'slidein stopped' } watchme.addevent
listener('click', () => watchme.addevent
listener('animationiteration',
listener, false) ) demo https://jsfiddle.net/morenoh149/5ty5a4oy/ ...
Using multiple backgrounds - CSS: Cascading Style Sheets
these are layered atop one another with the first background you provide on top and the last background
listed in the back.
...that is, the following background properties can be specified as a
list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
...rl(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button in the css section) as you can see here, the firefox logo (
listed first within background-image) is on top, directly above the bubbles graphic, followed by the gradient (
listed last) sitting underneath all previous 'images'.
...so the first
listed value for background-repeat applies to the first (frontmost) background, and so forth.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
ainer: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0;
list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } <div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>two</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li cl...
...however, the width i have assigned to the
list items themselves still applies, and it now makes those items a third of the width of the track: if i reset the width to auto, then this will stop the float behavior happening for older browsers.
...thers: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0;
list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width: auto; min-height: auto; margin: 0; } } <div class="wrapper"> ...
...e item becomes a grid item: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { margin: 0 -10px; padding: 0;
list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width: auto; margin: 0; } } <div class="wrap...
Pagination - CSS: Cascading Style Sheets
to ensure that the pagination is understandable by people using a screenreader, we mark the items up as a
list inside a <nav> element, and then use css to display the layout visually as a row.
...the <nav> element is designated a flex container in order that we can center the
list inside using the justify-content property.
... the
list itself also becomes a flex container to lay the items out as a row.
... .pagination {
list-style: none; margin: 0; padding: 0; display: flex; column-gap: 2px; } accessibility concerns we want to ensure that a person using a screenreader understands what this navigation does, and where they will go when clicking a link.
Mozilla CSS extensions - CSS: Cascading Style Sheets
ic(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones
listed below.
...ted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox
listbox menuarrow menucheckbox menuimage menuitem menuitemtext menu
list menu
list-button menu
list-text menu
list-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-c...
...cko 62 -moz-grid-lineobsolete since gecko 62 -moz-groupbox -moz-deckobsolete since gecko 62 -moz-popupobsolete since gecko 62 -moz-stackobsolete since gecko 62 -moz-markerobsolete since gecko 62 empty-cells -moz-show-background (default value in quirks mode) font -moz-button -moz-info -moz-desktop -moz-dialog (also a color) -moz-document -moz-workspace -moz-window -moz-
list -moz-pull-down-menu -moz-field (also a color) font-family -moz-fixed image-rendering -moz-crisp-edges <length> -moz-calc
list-style-type -moz-arabic-indic -moz-bengali -moz-cjk-earthly-branch -moz-cjk-heavenly-stem -moz-devanagari -moz-ethiopic-halehame -moz-ethiopic-halehame-am -moz-ethiopic-halehame-ti-er -moz-ethiopic-halehame-ti-et -moz-ethiopic-numeric ...
...moz-any :-moz-any-link [matches :link and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz-handler-blocked :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-
list-bullet :-moz-
list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-anonymous :-moz-only-whitespace ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-m...
WebKit CSS extensions - CSS: Cascading Style Sheets
t-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones
listed below.
... note: if there is an invalid pseudo-class within in a chain or group of selectors, the whole selector
list is invalid.
...it-media-text-track-container ::-webkit-outer-spin-button ::-webkit-progress-bar ::-webkit-progress-inner-element ::-webkit-progress-value ::-webkit-search-cancel-button ::-webkit-search-results-button ::-webkit-slider-runnable-track ::-webkit-slider-thumb note: generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector
list is invalid.
... if a pseudo-element (but not pseudo-class) has a -webkit- prefix, as of firefox 63, blink, webkit and gecko browsers assume it is valid, not invalidating the selector
list.
grid-template - CSS: Cascading Style Sheets
]+ [ / <explicit-track-
list> ]?
... sets grid-template-areas to the strings
listed, grid-template-rows to the track sizes following each string (filling in auto for any missing sizes), and splicing in the named lines defined before/after each size, and grid-template-columns to the track
listing specified after the slash (or none, if not specified).
... note: the repeat() function isn’t allowed in these track
listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ascii art”.
...]+ [ / <explicit-track-
list> ]?where <line-names> = '[' <custom-ident>* ']'<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )<explicit-track-
list> = [ <line-names>?
pointer-events - CSS: Cascading Style Sheets
events: visible; /* svg only */ pointer-events: painted; /* svg only */ pointer-events: fill; /* svg only */ pointer-events: stroke; /* svg only */ pointer-events: all; /* svg only */ /* global values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset; the pointer-events property is specified as a single keyword chosen from the
list of values below.
...in these circumstances, pointer events will trigger event
listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
... note that preventing an element from being the target of pointer events by using pointer-events does not necessarily mean that pointer event
listeners on that element cannot or will not be triggered.
... if one of the element's children has pointer-events explicitly set to allow that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event
listeners on the parent as appropriate.
Media buffering, seeking, and time ranges - Developer guides
cument.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.addevent
listener('seeked', function() { for (i = 0; i < myaudio.buffered.length; i++) { var startx = myaudio.buffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); context.stroke(); } }); } this works b...
... height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addevent
listener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; ...
... break; } } } }); myaudio.addevent
listener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.getelementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*100) + "%"; } }); } the progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.
...for example: var played = audio.played; // returns a timeranges object this could be useful for establishing the parts of your media that are most
listened to or watched.
User input and controls - Developer guides
for example if you want to add controls when any key gets pressed, you need to add an event
listener on the window object: window.addevent
listener("keydown", handlekeydown, true); window.addevent
listener("keyup", handlekeyup, true); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
...the
list of all events using the mouse event interface is provided in the events reference.
... if you want to use touch events, you need to add event
listeners and specify handler functions, which will be called when the event gets fired: element.addevent
listener("touchstart", handlestart, false);
element.addevent
listener("touchcancel", handlecancel, false);
element.addevent
listener("touchend", handleend, false);
element.addevent
listener("touchmove", handlemove, false); where element is the dom element you want to register the touch even...
...
</div> in which we: set the draggable attribute to true on the element that you wish to make draggable add a
listener for the dragstart event and set the drag data within this
listener note: you can find more information in the mdn drag & drop documentation.
Connection - HTTP
except for the standard hop-by-hop headers (keep-alive, transfer-encoding, te, connection, trailer, upgrade, proxy-authorization and proxy-authenticate), any hop-by-hop headers used by the message must be
listed in the connection header, so that the first proxy knows it has to consume them and not forward them further.
... standard hop-by-hop headers can be
listed too (it is often the case of keep-alive, but this is not mandatory).
... any comma-separated
list of http headers [usually keep-alive only] indicates that the client would like to keep the connection open.
...the
list of headers are the name of the header to be removed by the first non-transparent proxy or cache in-between: these headers define the connection between the emitter and the first entity, not the destination node.
Feature-Policy: publickey-credentials-get - HTTP
syntax feature-policy: publickey-credentials-get <allow
list>; <allow
list> an allow
list is a
list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allow
list, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy the default allow
list is 'self'.
... definition of publickey-credentials-get directive, default allow
list.
Strict-Transport-Security - HTTP
while the service is hosted by google, all browsers have stated an intent to use (or actually started using) the preload
list.
... information regarding the hsts preload
list in chrome : https://www.chromium.org/hsts consultation of the firefox hsts preload
list : nsstspreload
list.inc examples all present and future subdomains will be https for a max-age of 1 year.
...note that 1 year is acceptable for a domain to be included in browsers' hsts preload
lists.
...it also suffixed with preload which is necessary for inclusion in most major web browsers' hsts preload
lists, e.g.
Concurrency model and the event loop - JavaScript
queue a javascript runtime uses a message queue, which is a
list of messages to be processed.
... adding messages in web browsers, messages are added anytime an event occurs and there is an event
listener attached to it.
... if there is no
listener, the event is lost.
...this method adds a message to the other runtime if the latter
listens to message events.
Expressions and operators - JavaScript
a complete and detailed
list of operators and expressions is also available in the reference.
... there are also compound assignment operators that are shorthand for the operations
listed in the following table: compound assignment operators name shorthand operator meaning assignment x = y x = y addition assignment x += y x = x + y subtraction assignment x -= y x = x - y multiplication assignment x *= y x = x * y division assignment x /= y x = x / y remainder assignment x ...
...for example: 1 / 2; // 0.5 1 / 2 == 1.0 / 2.0; // this is true in addition to the standard arithmetic operations (+, -, *, /), javascript provides the arithmetic operators
listed in the following table: arithmetic operators operator description example remainder (%) binary operator.
... the shift operators are
listed in the following table.
Meta programming - JavaScript
handler.ownkeys() object.getownpropertynames() object.getownpropertysymbols() object.keys() reflect.ownkeys() the result of ownkeys is a
list.
... the type of each result
list element is either string or symbol.
... the result
list must contain the keys of all non-configurable own properties of target.
... if the target object is not extensible, then the result
list must contain all the keys of the own properties of target and no other values.
SyntaxError: Malformed formal parameter - JavaScript
the javascript exception "malformed formal parameter" occurs when the argument
list of a function() constructor call is invalid somehow.
...all the rest make up your new function's argument
list.
... the argument
list is invalid somehow.
... perhaps you accidentally picked a keyword like if or var as an argument name, or perhaps there's some stray punctuation in your argument
list.
TypeError: Reduce of empty array with no initial value - JavaScript
examples invalid cases this problem appears frequently when combined with a filter (array.prototype.filter(), typedarray.prototype.filter()) which will remove all elements of the
list.
... similarly, the same issue can happen if there is a typo in a selector, or an unexpected number of elements in a
list: var names = document.getelementsbyclassname("names"); var name_
list = array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); valid cases these problems can be solved in two different ways.
... var names = document.getelementsbyclassname("names"); var name_
list1 = ""; if (names1.length >= 1) name_
list1 = array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); // name_
list1 == "" when names is empty.
... var name_
list2 = array.prototype.reduce.call(names, (acc, name) => { if (acc == "") // initial value return name; return acc + ", " + name; }, ""); // name_
list2 == "" when names is empty.
JavaScript error reference - JavaScript
below, you'll find a
list of errors which are thrown by javascript.
...
list of errors in this
list, each page is
listed by name (the type of error) and message (a more detailed human-readable error message).
...can't have an initializersyntaxerror: applying the "delete" operator to an unqualified name is deprecatedsyntaxerror: for-in loop head declarations may not have initializerssyntaxerror: function statement requires a namesyntaxerror: identifier starts immediately after numeric literalsyntaxerror: illegal charactersyntaxerror: invalid regular expression flag "x"syntaxerror: missing ) after argument
listsyntaxerror: missing ) after conditionsyntaxerror: missing : after property idsyntaxerror: missing ; before statementsyntaxerror: missing = in const declarationsyntaxerror: missing ] after element
listsyntaxerror: missing formal parametersyntaxerror: missing name after .
... operatorsyntaxerror: missing variable namesyntaxerror: missing } after function bodysyntaxerror: missing } after property
listsyntaxerror: redeclaration of formal parameter "x"syntaxerror: return not in functionsyntaxerror: test for equality (==) mistyped as assignment (=)?syntaxerror: unterminated string literaltypeerror: "x" has no propertiestypeerror: "x" is (not) "y"typeerror: "x" is not a constructortypeerror: "x" is not a functiontypeerror: "x" is not a non-null objecttypeerror: "x" is read-onlytypeerror: 'x' is not iterabletypeerror: more arguments neededtypeerror: reduce of empty array with no initial valuetypeerror: x.prototype.y called on incompatible typetypeerror: can't access dead objecttypeerror: can't access property "x" of "y"typeerror: can't assign to property "x" on "y": not...
Array - JavaScript
the javascript array class is a global object that is used in the construction of arrays; which are high-level,
list-like objects.
... description arrays are
list-like objects whose prototype has methods to perform traversal and mutation operations.
...setting or accessing via non-integers using bracket notation (or dot notation) will not set or retrieve an element from the 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.
Function.prototype.apply() - JavaScript
description note: while the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument
list, while apply() accepts a single array of arguments.
...you use an arguments array instead of a
list of arguments (parameters).
...for example, you could use a node
list, or a custom object like { 'length': 2, '0': 'eat', '1': 'bananas' }.
... in the following example we will create a global function method called construct, which will enable you to use an array-like object with a constructor instead of an arguments
list.
Intl.NumberFormat() constructor - JavaScript
possible values are the iso 4217 currency codes, such as "usd" for the us dollar, "eur" for the euro, or "cny" for the chinese rmb — see the current currency & funds code
list.
...a subset of units from the full
list was selected for use in ecmascript.
...possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso 4217 currency code
list (2 if the
list doesn't provide that information).
...possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 4217 currency code
list (2 if the
list doesn't provide that information); the default for percent formatting is the larger of minimumfractiondigits and 0.
Intl - JavaScript
intl.
listformat() constructor for objects that enable language-sensitive
list formatting.
... locale identification and negotiation the internationalization constructors as well as several language sensitive methods of other constructors (
listed under see also) use a common pattern for identifying locales and determining the one they will actually use: they all accept locales and options arguments, and negotiate the requested locale(s) against the locales they support using an algorithm specified in the options.localematcher property.
... locales argument the locales argument requests that a particular locale (or a locale from a
list of them) be considered for use in a given operation.
... locale negotiation the
list of locales specified by the locales argument, after unicode extensions have been removed from them, is interpreted as a prioritized request from the application.
WeakMap - JavaScript
such an implementation would have two main inconveniences: the first one is an o(n) set and search (n being the number of keys in the map) since both operations must iterate through the
list of keys to find a matching value.
...there is no method to obtain a
list of the keys.
... if they were, the
list would depend on the state of garbage collection, introducing non-determinism.
... if you want to have a
list of keys, you should use a map.
MathML documentation index - MathML
html becomes verbose when your document contains advanced structures like
lists or tables but fortunately there are many generators from simple notations, wysiwyg editors and other content management systems to help writing web pages.
... 5 proving the pythagorean theorem beginner, example, guide, html5 math, math education, mathml, needsbeginnerupdate we will now prove the pythagorean theorem: 6 mathml attribute reference mathml, mathml reference this is an alphabetical
list of mathml attributes.
... 8 mathml documentation index index, mathml found 40 pages: 9 mathml element reference mathml, mathml reference this is an alphabetical
list of mathml presentation elements.
...it accepts all attributes of all mathml presentation elements with some exceptions and additional attributes
listed below.
Autoplay guide for media and Web Audio APIs - Web media technologies
autoplay availability as a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true: the audio is muted or its volume is set to 0 the user has interacted with the site (by clicking, tapping, pressing keys, etc.) if the site has been white
listed; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features if the autoplay feature policy is used to grant autoplay support to an <iframe> and its document.
...the exact situations that result in blocking, and the specifics of how sites become white
listed vary from browser to browser, but the above are good guidelines to go by.
...you can do this easily, by
listening for the play event to be fired on the media element.
...here, any such preferences that may be of special significance or importance to you as a web developer are
listed.
Media container formats (file types) - Web media technologies
common container formats while there are a vast number of media container formats, the ones
listed below are the ones you are most likely to encounter.
...the mime types and extensions for each are
listed.the most commonly used containers for media on the web are probably mpeg-4 (mp4), quicktime movie (mov), and the wavefile audio file format (wav).
... index of media container formats (file types) to learn more about a specific container format, find it in this
list and click through to the details, which include information about what the container is typically useful for, what codecs it supports, and which browsers support it, among other specifics.
..., internet explorer 9, opera 10.50 quicktime (mov) apple quicktime movie only older versions of safari, plus other browsers that supported apple's quicktime plugin webm web media chrome 6, edge 173 (desktop only), firefox 4, opera 10.6, safari (webrtc only) [1] unless otherwise specified, both mobile and desktop browser compatibility is implied if a browser is
listed here.
Introduction to progressive web apps - Progressive web apps (PWAs)
you can check the
list at pwa.rocks for more examples.
... particularly worth mentioning is the hnpwa.com page—this
lists an example implementation of the hacker news website (instead of the usual todomvc app), in which you can see the use of various front-end frameworks.
...this is for use in contexts such as app
listings and device home screens.
... an example application in this series of articles we will examine the source code of a super simple website that
lists information about games submitted to the a-frame category in the js13kgames 2017 competition.
Search Extension Tutorial (Draft) - Archive of obsolete content
other settings violations designed to restrict user choice will result in stronger action, such as black
listing of the add-ons in question.
...ils.name)) { services.search.addenginewithdetails.apply(services.search, ["name", "iconurl", "alias", "description", "method", "url"].map( function (k) engine_details[k])) } let engine = services.search.getenginebyname(engine_details.name); // if the engine is not hidden and this is the first run, move // it to the first position in the engine
list and select it if (selectsearch && !engine.hidden) { services.search.moveengine(engine, 0); services.search.currentengine = engine; } } function shutdown(data, reason) { // clean up the search engine on uninstall or disabled.
... removeobserver(); // if the engine is not hidden and this is the first run, move // it to the first position in the engine
list and select it if (selectsearch && !engine.hidden) { services.search.moveengine(engine, 0); services.search.currentengine = engine; } } } // observer topic const engine_added = "browser-search-engine-modified"; function startup(data, reason) { firstrun = reason == addon_install; // re-select the search engine if this is the first run // or ...
Adding preferences to an extension - Archive of obsolete content
please note that if you are using code from this tutorial to add to an existing extension, you must uninstall and reinstall your extension to enable the preferences button for your extension in the add-ons
list.
... installing the event
listeners the only thing left to do is to install the event
listeners needed to run the startup() and shutdown() routines automatically when the browser window is loaded and unloaded.
... window.addevent
listener("load", function(e) { stockwatcher.startup(); }, false); window.addevent
listener("unload", function(e) { stockwatcher.shutdown(); }, false); design the preference dialog now that we've written all the code, we need to build the xul file for the options dialog.
CSS3 - Archive of obsolete content
at each point of time, a snapshot of the css standard can be defined,
listing css2.1 and the mature modules.
... an early
list of what could be in the next iteration of the css basic user interface module is available.
... css box alignment module level 3 working draft selectors level 4 working draft css
lists module level 3 working draft extends the
list counter mechanism so that
list markers can be styled and web developers can define new
list counter schemes.
Block and Line Layout Cheat Sheet - Archive of obsolete content
these are stored as a doubly-linked
list in the mlines member of nsblockframe.
...if the flag hasn't been set in the block reflow state, then shouldapplytopmargin() will crawl the line
list to see if a block frame precedes the specified frame.
...in this case, the flag won't be set, so subsequent calls to shouldapplytopmargin() will continue crawl the line
list.) this flag is also set in the nsblockreflowstate constructor if brs_istopmarginroot is set; that is, if the frame being reflowed is a margin root by default.
Documentation for BiDi Mozilla - Archive of obsolete content
ibmbidi), written by simon montagu and posted to the mozilla-layout mailing
list.
...some support added for alignment in tables and
lists, and fixes for problems with different combinations of dir and align.
... improvements to
lists with hebrew and arabic
list-style-type summary of new classes class name xpcom interface (if applicable) implementation comments nsibidi intl\unicharutil\public\nsibidi.h intl\unicharutil\src\nsbidiimp.cpp implementation of the unicode bidi algorithm nsiubidiutils intl\unicharutil\public\nsiubidiutils.h intl\unicharutil\src\nsbidiutilsimp.cpp utilities for bidi processing, including: character classification symmetric swapping reordering shaping numeric translation conversion to/from presentation forms nsbidipresutils layout/base/nsbidipresutils.cpp utilities for the layout engine including: resolve frames by bidi level split framesreorder frames format bidi text support for deletion and insertion of frames by editor nsbiditextframe layout/generic/nsbidi...
Syncing custom preferences - Archive of obsolete content
when preferences sync is enabled, firefox sync will synchronize preferences between the same application based on a white
list.
...to sync preferences between firefoxes, fennecs, thunderbirds, etc., ensure the prefs are white
listed.
... the white
list is determined as follows: for each services.sync.prefs.sync.<pref> preference that is set to true, firefox sync will sync the <pref> preference.
Hidden prefs - Archive of obsolete content
see http://lxr.mozilla.org/mozilla/sourc...drdatabase.idl for the
list of valid attributes "c" == contains.
...mail composition "other header" pref ("mail.compose.other.header") the format for this a comma delimited
list of mail headers, like "approved,x-no-archive" an example for your prefs.js would be: user_pref("mail.compose.other.header", "approved"); this will cause "approved" to show up in the compose window address picker, under to:, cc:, bcc:, newsgroup:, etc.
...| mail & newsgroups | addressing" "other compose header" pref from mailnews.js: // you can specify a comma delimited
list of optional headers // this will show up in the address picker in the compose window // examples: "x-face" or "approved" pref("mail.compose.other.header", "approved,x-no-archive"); ...
Introducing the Audio API extension - Archive of obsolete content
o-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.addevent
listener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the mozaudioavailable event as the audio is played, sample data is made available to the audio layer and the audio buffer (size defined in mozframebufferlength) gets filled with those samples.
...th; } function audioavailable(event) { var framebuffer = event.framebuffer; var t = event.time; var text = "samples at: " + t + "\n"; text += framebuffer[0] + " " + framebuffer[1]; raw.innerhtml = text; } var raw = document.getelementbyid('raw'); var audio = document.getelementbyid('audio-element'); audio.addevent
listener('mozaudioavailable', audioavailable, false); audio.addevent
listener('loadedmetadata', loadedmetadata, false); </script> </body> </html> creating an audio stream it is also possible to create and setup an <audio> element for raw writing from script (i.e., without a src attribute).
... a2.mozsetup(a1.mozchannels, a1.mozsamplerate); } function audioavailable(event) { // write the current framebuffer var framebuffer = event.framebuffer; writeaudio(framebuffer); } a1.addevent
listener('mozaudioavailable', audioavailable, false); a1.addevent
listener('loadedmetadata', loadedmetadata, false); function writeaudio(audio) { buffers.push(audio); // if there's buffered data, write that while(buffers.length > 0) { var buffer = buffers.shift(); var written = a2.mozwriteaudio(buffer); // // if all data wasn't written, keep it in the buffers: if(written < buffe...
JavaScript crypto - Archive of obsolete content
handling smart card events web sites can make themselves more smartcard friendly by
listening for smartcard insertion and removal events.
...you can then register event handlers for these events with the document.addevent
listener() method.
...<script> function onsmartcardchange() { window.location.reload(); } function register() { window.crypto.enablesmartcardevents = true; document.addevent
listener("smartcard-insert", onsmartcardchange, false); document.addevent
listener("smartcard-remove", onsmartcardchange, false); } function deregister() { document.removeevent
listener("smartcard-insert", onsmartcardchange, false); document.removeevent
listener("smartcard-remove", onsmartcardchange, false); } document.body.onload = register; document.body.onunload = deregister; </script> with t...
Plug-n-Hack Phase1 - Archive of obsolete content
the configuration document should then
listen for a number of other events: configuresectoolstarted - this notifies the document that the browser is processing the configuration; if this event is not received within a reasonable amount of time after the configuresectool event has been fired, you might want to warn the user that pnh does not seem to be supported by this browser (perhaps prompting them to install the appropriate addon).
...e/branches/beta/src/org/zaproxy/zap/extension/plugnhack/resource/service.json firefox ui in firefox the tool commands will be made available via the developer toolbar (gcli) https://developer.mozilla.org/docs/tools/gcli a example of how the zap commands are currently displayed is: note that user specified parameters can be specified for commands, which can either be free text, a static pull down
list of options or a dynamic
list of options obtained from the tool on demand.
... so if you select the “zap scan” command then you will be prompted to select a site from the
list of sites currently known to zap.
New Skin Notes - Archive of obsolete content
--nickolay 09:19, 25 aug 2005 (pdt) (moving this to a new item) on the contrary, the
list of categories current page belongs to, should be near the footer (see mdc:policies_and_guidelines page) (dria: fix catlinks style) the arrows that appear if you select "enhanced recent changes" in your preferences have an ugly border around them.
...--callek is it possible to remove the blank space on category pages, like category:dom?by the way, it looks like this skin has the same problem as previous - the edit box, category
list on category pages, and others are always below the end of the sidebar.
...--waldo 21:09, 25 aug 2005 (pdt) not going to change (yet or possibly ever) adding pipes between buttons in horizontal nav-bar (ie: my talk | preferences | my watch
list) (stricken part is done).
Table Layout Regression Tests - Archive of obsolete content
select from the regression-test menu the add new
list...entry.
... change the source if necessary until the regression tests indicate that your patch does not fork the block and table layout submit your patch and
lists the remaining differences in the bug be prepared to cycle.
... <font serif 240 240 0 /> <color data="-16777216"/> <background data="0 2 3 -1 0 0 "/> <spacing data="left: null top: null right: null bottom: null left: null top: null right: null bottom: null left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0" /> <
list data="100 100 " /> <position data="left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto " /> <text data="0 0 0 normal normal 0[0x0]tw normal " /> <textreset data="0 10[0xa]enum " /> <display data="0 1 0 0 0 0 0 0 0 0 0 0 " /> <visibility data="0 1 1.000000" /> <table data="0 0 4 -1 1 " /> <tableborder data="1 null nu...
Running Tamarin performance tests - Archive of obsolete content
untests.py -h usage: runtests.py [options] [tests] -v --verbose enable additional output -e --avm avmplus command to use -a --asc compiler to use -g --globalabc deprecated but still works - use builtin.abc (used to be location of global.abc) -b --builtinabc location of builtin.abc -s --shellabc location of shell_toplevel.abc -x --exclude comma separated
list of directories to skip -h --help display help and exit -t --notime do not generate timestamps (cleaner diffs) -f --forcerebuild force rebuild all test files -c --config sets the config string [default os-tvm] -q --quiet display minimum output during testrun -l --log also log all output to given logfile --summaryonly only display final summary --...
...metricinfo.py this file contains a
list of metrics that the harness will look for and record.
...the command: $ adb devices
lists the device id of each phone.
The life of an HTML HTTP request - Archive of obsolete content
for html document this is an nsparser, which also implements nsistream
listener.
... this stream
listener is returned to the documentloader and connected to the nsichannel of the request.
...the parser then parses the stream it gets via its stream
listener interface and converts it to nsiparsernodes which it places in the contentsink.
Mozilla Web Developer Community - Archive of obsolete content
newsgroups, mailing
lists, and forums by topic: css - mozilla.dev.tech.css dom - mozilla.dev.tech.dom html - mozilla.dev.tech.html plugins - mozilla.dev.tech.plugins xml - mozilla.dev.tech.xml documentation - see mdc:community more at http://www.mozilla.org/community/dev...er-forums.html mozillazine forums mozilla news and development help mozilla (testing and development) mozdev.org mozillazine planet mozilla spread firefox standards communities get involved in grass-roots web standards evangelism efforts through these groups: the web standards project, a grassroots coalition fighting for standards maccaws, making a commercial ...
...case for web standards a
list apart, for people who make websites mozilla technology evangelism, get involved with mozilla evangelism you may also find helpful information on the w3c mailing
lists newsletter there is no newsletter planned at this time.
...the
list of old devedge feeds is at http://devedge-temp.mozilla.org/comm.../feed
list.html feedback hendrix mdnproduct feedback bugzilla - report a bug in a mozilla product for questions related to this website (but not technical questions), please send your message to the mdc mailing
list.
Localization - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.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="initsearch
list()" 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="©cmd.label;" accesskey="©cmd.accesskey;"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" disabled="true"/> </menupopup> <...
..."/> </toolbar> </toolbox> <tabbox> <tabs> <tab label="&searchtab;" selected="true"/> <tab label="&optionstab;"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical" context="editpopup"> <description> &finddescription; </description> <spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="&findcriteria;"/> <menu
list id="searchtype"> <menupopup> <menuitem label="&type.name;"/> <menuitem label="&type.size;"/> <menuitem label="&type.date;"/> </menupopup> </menu
list> <spacer class="springspace"/> <menu
list id="searchmode"> <menupopup> <menuitem label="&mode.is;"/> <menuitem label="&mode.isnot;"/> </menupopup> </menu
list> ...
... <spacer class="springspace"/> <menu
list id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"> <template> <menupopup> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menu
list> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="&casesensitive;"/> <checkbox id="wordscheck" label="&matchfilename;"/> </tabpanel> </tabpanels> </tabbox> <tree id="results" style="display: none;" flex="1"> <treecols> <treecol id="name" label="&results.filename;" flex="1"/> <treecol id="location" label="&results.locat...
Scrolling Menus - Archive of obsolete content
it will apply to menus on menubars, in popups or menu
lists.
...you could use it to implement a
list when you don't want it to be a drop-down.
... example - scrolling
list of buttons the following example shows how to create a scrolling
list of buttons (you will need to resize the window to see the arrow buttons): example 1 : source view <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> if you try this example, it will first open at full size.
XPCOM Interfaces - Archive of obsolete content
mozilla stores a
list of all the components that are available in its own registry.
...the interfaces property of the components object contains a
list of all the interfaces that are available.
...it allows you to add bookmarks to the user's current bookmark
list.
XUL Structure - Archive of obsolete content
for example, the messenger component has descriptions of the mail messages
list window, the composition window and the address book dialogs.
... in the
listing above, two files have been shown.
...the locale structure is similar to the others, so it won't be
listed here.
XUL Parser in Python/source - Archive of obsolete content
import sys, glob, xmllib import os, re el_
list = {} w = open('res.html', 'w') # unfortunately, i had to put this hack in here to suppress the printing out of the resolved namespace: # "xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul window", etc.
... def strip(snip): t = re.sub('http://.*?\s', '', snip) return t class xulparser(xmllib.xmlparser): def unknown_starttag(self, t, a): name = strip(t) if name not in el_
list: el_
list[name] = {} for attr,val in a.items(): el_
list[name][strip(attr)] = strip(val) def syntax_error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic table of xul elements</h3>') w.write('<table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_
list.keys() elements.sort() for item in elements: w.write...
...('<tr><td class="head">' + item + '</td></tr>\n') for a in el_
list[item]: w.write('<tr><td class="at">' + a + '</td>') w.write('</table></html>\n') w.close() ...
XULBrowserWindow - Archive of obsolete content
in order to do so it implements the following interfaces: nsisupports nsixulbrowserwindow nsiwebprogress
listener nsiwebprogress
listener2 nsisupportsweakreference note: this page is not complete at this time.
... method overview boolean hidechromeforlocation(in string alocation); attributes attribute type description incontentwhite
list string[] an array of url strings for which chrome is automatically hidden.
...by default, chrome is hidden for about:addons and any other pages in the in content white
list.
arrowscrollbox - Archive of obsolete content
scrollboxobject type: nsiscrollboxobject the scroll box object implements the nsiscrollboxobject interface, which may be used to retrieve and adjust the scroll position of the
list box.
... inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
button - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider, nsidomxulbuttonelement ...
caption - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements groupbox, checkbox ...
checkbox - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider, nsidomxulcheckboxelement ...
description - Archive of obsolete content
for user editable menu
list elements, the contents, as visible to the user, are read and set using the menu
list.value syntax.
...for textbox and user editable menu
list elements, the contents, as visible to the user, are read and set using the textbox.value and menu
list.value syntax.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributeno...
dropmarker - Archive of obsolete content
for instance the menu
list and the popup type of datepicker use a dropmarker, that when pressed, will reveal a popup menu.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
grid - Archive of obsolete content
the second column is twice as big as the first column --> <groupbox> <caption label="details"/> <grid> <columns> <column flex="1"/> <column flex="2"/> </columns> <rows> <row> <label value="user name"/> <textbox id="user"/> </row> <row> <label value="group"/> <menu
list> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem label="support"/> </menupopup> </menu
list> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containme...
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements columns, column, rows, row.
iframe - Archive of obsolete content
attributes showcaret, src, type, transparent properties accessibletype, contentdocument, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menu
list oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menu
list> <iframe id="myframe" flex="1"/> <script> function donav(obj) { var url = obj.selecte...
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related nsiaccessibleprovider ...
image - Archive of obsolete content
this applies whether the image is applied via the src attribute or the
list-style-image style property.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes alert-icon class that adds an alert icon.
notificationbox - Archive of obsolete content
allnotifications type: node
list node
list of all notifications.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), iseq...
...ualnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
observes - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the observes element can be used to
listen to a broadcaster and receive events and attributes from it.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
panel - Archive of obsolete content
autocomplete-rich
listbox specify this for a panel that provides a rich
listbox for an autocomplete element.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(),...
... hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup immediately.
progressmeter - Archive of obsolete content
for textbox and user editable menu
list elements, the contents, as visible to the user, are read and set using the textbox.value and menu
list.value syntax.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
scale - Archive of obsolete content
for user editable menu
list elements, the contents, as visible to the user, are read and set using the menu
list.value syntax.
...for textbox and user editable menu
list elements, the contents, as visible to the user, are read and set using the textbox.value and menu
list.value syntax.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributeno...
<statusbarpanel> - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
stringbundle - Archive of obsolete content
a property file is a
list of property key-value pairs each on a separate line.
... inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related xul property files ...
tab - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
...for textbox and user editable menu
list elements, the contents, as visible to the user, are read and set using the textbox.value and menu
list.value syntax.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributeno...
toolbarbutton - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider, nsidomxulbuttonelement ...
toolbaritem - Archive of obsolete content
examples <toolbaritem> <menu
list label="bus"> <menupopup> <menuitem label="car"/> <menuitem label="taxi"/> <menuitem label="bus" selected="true"/> <menuitem label="train"/> </menupopup> </menu
list> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-butt...
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
tooltip - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menu
list.value property upon user selection of the menuitem.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(),...
... hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup immediately.
treerow - Archive of obsolete content
attributes properties examples (example needed) attributes properties type: space-separated
list of property names sets the properties of the element, which can be used to style the element.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treeitem, treecell and treeseparator.
treeseparator - Archive of obsolete content
attributes properties examples (example needed) attributes properties type: space-separated
list of property names sets the properties of the element, which can be used to style the element.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treeitem, treerow and treecell.
XUL - Archive of obsolete content
xul controls
lists some of the common controls provided by xul.
... xul controls a quick
list of all of the available xul controls.
... mailing
list newsgroup rss feed #xul on irc.mozilla.org tools xul online live editor (copy & paste snippets from here and run them) xul explorer (a lightweight xul ide) xulexplorer (patched version of xul explorer) extension developer's extension (featuring a live xul editor) ...
Custom app bundles for Mac OS X - Archive of obsolete content
a xul application for mac os x should follow something similar to this basic directory structure: example.app/ contents/ info.p
list (application bundle properties are specified in this xml file.) pkginfo (this is a simple text file and is created along with the info.p
list file) macos/ (the macos folder will contain your xulrunner executable) xulrunner (this is the xulrunner stub) resources/ (this is where you place your xul application code and support files) a...
... info.p
list and pkginfo must exist in the contents directory.
... top-level directory info.p
list pkginfo see also xulrunner - tips xulrunner - mac faq external links inside application bundles property
list key reference xrtemplate ...
XULRunner tips - Archive of obsolete content
nsions.getmorethemesurl", "chrome://mozapps/locale/extensions/extensions.properties"); if your application is based on gecko 2.0, you need to register a component through the new component registration because the extension manager uses fuel, namely application.restart(), to restart your xulrunner-based application after any change (installation, removal, enabling, disabling) in the extensions'
list: copy files fuelapplication.js and fuelapplication.manifest from browser/fuel/src for instance into your components/ directory tweak the line #include ../../../toolkit/components/exthelper/extapplication.js in your copy of fuelapplication.js as needed make sure to declare the fuel module and the two files in your components/makefile.in as in browser/fuel/src/makefile.in rebuild...
...r (where the install.rdf is) like this one: /home/username/.mozilla/firefox/numbersandletters/extensions/inspector@mozilla.org/ now create a javascript file with the following code and include it in the main window of your application: function startdomi() { // load the window datasource so that browser windows opened subsequent to dom // inspector show up in the dom inspector's window
list.
... preferences needed for file download dialogs to use the unknown-content-type and file-downloads dialogs from a <browser> element, you need to add the following prefs: pref("browser.download.usedownloaddir", true); pref("browser.download.folder
list", 0); pref("browser.download.manager.showalertoncomplete", true); pref("browser.download.manager.showalertinterval", 2000); pref("browser.download.manager.retention", 2); pref("browser.download.manager.showwhenstarting", true); pref("browser.download.manager.usewindow", true); pref("browser.download.manager.closewhendone", true); pref("browser.download.manager.opendelay", 0); pref("browser.downlo...
Gecko Compatibility Handbook - Archive of obsolete content
after restarting your browser, add the the user-agent strings that you want to test to the
list (tools | user agent switcher | options | options...
... the html element cross reference provides a
list of all html elements supported in netscape 4, gecko browsers, internet explorer 4 and up and can be used to determine which html elements are supported by all browsers.
... many older versions of cross-browser apis in common use around the web such as dynapi do not support gecko for one or more of the reasons
listed above.
2006-11-22 - Archive of obsolete content
summary: mozilla.dev.accessibility - nov 17-nov 22, 2006 announcements mozilla osk project grant aaron leventhal (on behalf of michael curran) mentiond that there is now an nvda email
list you can join if you wish to keep up to date with the latest changes, or if you wish to discuss new features or talk with other nvda users.
... to join, send a blank email with subscribe in the subject field to: nvda...@free
lists.org (click here to view the original post and unmask the e-mail address) michael would like to thank stormdragon for setting this up.
... new mailing
list for nvda steve lee was pleased to announce that the mozilla foundation has approved a grant spearheaded by himself and aaron leventhal for "improved switch access to firefox".
Why use RSS - Archive of obsolete content
people are using it to syndicate all sorts of things: news articles, blogs, bookmarks, internet radio shows, internet television shows, software updates, e-mails, mailing
lists, music play
lists, and more.
...there are too many desktop and web-based rss aggregators out there to
list them all.
...(too many to
list.) and if you syndicate using rss, then all those desktop and web-based rss aggregators will be able to make use of and read your rss feed.
Version - Archive of obsolete content
the
list below is of all known rss versions.
... they are
listed in chronological order of when they were released.
... note: in the
list below, although rss 1.0 seems to be out of place, it is actually in the correct place chronologically.
Introduction to Public-Key Cryptography - Archive of obsolete content
the server maintains a
list of names and passwords; if a particular name is on the
list, and if the user types the correct password, the server grants access.
...it also simplifies network management, since administrators can control access by controlling
lists of certificate authorities (cas) rather than much longer
lists of users and passwords.
...another approach involves publishing a certificate revocation
list (crl)-that is, a
list of revoked certificates-to the directory at regular intervals and checking the
list as part of the authentication process.
Theme changes in Firefox 3 - Archive of obsolete content
the table
lists both the changed xul file and the theme's corresponding css file that you might need to update.
... filename css file details changes to the default theme the table below
lists changes made in the default theme for firefox 3; you can use this information as a starting point for figuring out the changes you need to make.
... all file
list all platforms file description of change browser/themes/*/browser/browser.css the width of the drag and drop indicator is no longer calculated during the drag (tabbrowser.xml).
Scratchpad - Archive of obsolete content
to
list autocomplete suggestions, press ctrl + space.
...for example, if you type document.addevent
listener, then press ctrl + shift + space, you'll see a popup that shows a summary of the function's syntax and a short description: the "[docs]" link takes you to the mdn documentation for the symbol.
... cmd + n ctrl + n close scratchpad ctrl + w cmd + w ctrl + w pretty print the code in scratchpad ctrl + p cmd + p ctrl + p show autocomplete suggestions ctrl + space ctrl + space ctrl + space show inline documentation ctrl + shift + space ctrl + shift + space ctrl + shift + space source editor shortcuts this table
lists the default shortcuts for the source editor.
Browser Feature Detection - Archive of obsolete content
browser sniffing via api name detection the following tables
list the api names defined for specific w3c dom apis and
lists the percentage of names that your browser actually defines followed by a
list of each of the api names tested along with an indication of whether the name was defined for your browser.
...rue font true true true fontfamily true true true fontsize true true true fontstyle true true true fontvariant true true true fontweight true true true height true true true letterspacing true true true lineheight true true true
liststyle true true true
liststyleimage true true true
liststyleposition true true true
liststyletype true true true margin true true true margintop true true true marginright true true true marginbottom true true true marginleft true true true ...
...}, {name: 'font', 'supported': false}, {name: 'fontfamily', 'supported': false}, {name: 'fontsize', 'supported': false}, {name: 'fontstyle', 'supported': false}, {name: 'fontvariant', 'supported': false}, {name: 'fontweight', 'supported': false}, {name: 'height', 'supported': false}, {name: 'letterspacing', 'supported': false}, {name: 'lineheight', 'supported': false}, {name: '
liststyle', 'supported': false}, {name: '
liststyleimage', 'supported': false}, {name: '
liststyleposition', 'supported': false}, {name: '
liststyletype', 'supported': false}, {name: 'margin', 'supported': false}, {name: 'margintop', 'supported': false}, {name: 'marginright', 'supported': false}, {name: 'marginbottom', 'supported': false}, {name: 'marginleft', 'supported': false}, {name...
Archived open Web documentation - Archive of obsolete content
the documentation
listed below is archived, obsolete material about open web topics.
... talk:background-size should not the "browser compatibility" table also
list google chrome and konqueror?
...konqueror is
listed below the table, which seems inconsistent.
RDF in Mozilla FAQ - Archive of obsolete content
by loading chunks of it into a xul ui from a remote site), don't forget to let mozilla-rdf and the rdf interest group
lists know.
... those
lists would probably also be interested in tools for cleaning / re-processing / storing the dmoz data too.
... what gets loaded when i specify "datasources=" the datasources attribute on the "root" of a template specifies a whitespace-separated
list of datasource uris to load.
Examples - Game development
this page
lists a number of impressive web technology demos for you to get inspiration from, and generally have fun with.
...the first two sections
list playable games, while the second is a catch-all area to
list demos that aren't necessarily interactive/games.
... rea
listic water simulation flowing water, like the waves on the ocean.
Audio for Web games - Game development
let's add some javascript to make this work: var myaudio = document.getelementbyid('myaudio'); var buttons = document.getelementsbytagname('button'); var stoptime = 0; for (var i = 0; i < buttons.length; i++) { buttons[i].addevent
listener('click', function() { myaudio.currenttime = this.getattribute("data-start"); stoptime = this.getattribute("data-stop"); myaudio.play(); }, false); } myaudio.addevent
listener('timeupdate', function() { if (this.currenttime > stoptime) { this.pause(); } }, false); note: you can try out our audio sprite player live on jsfiddle.
...('a'); const loadtext = el.queryselector('p'); const playbutton = el.queryselector('button'); // load file loadfile(anchor.href).then((track) => { // set loading to false el.dataset.loading = 'false'; // hide loading text loadtext.style.display = 'none'; // show button playbutton.style.display = 'inline-block'; // allow play on click playbutton.addevent
listener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } playtrack(track); playbutton.dataset.playing = true; }) }) }) note: you can see this demo in action here and view the source code here.
...the web audio api not only enables us to position a number of audio sources in three-dimensional space but it can also allow us to apply filters that make that audio appear more rea
listic.
Implementing controls using the Gamepad API - Game development
next, we set up two event
listeners to get the data: window.addevent
listener("gamepadconnected", gamepadapi.connect); window.addevent
listener("gamepaddisconnected", gamepadapi.disconnect); due to security policy, you have to interact with the controller first while the page is visible for the event to fire.
... detecting button presses the buttonpressed() method is also placed in the main game loop to
listen for button presses.
... it takes two parameters — the button we want to
listen to and the (optional) way to tell the game that holding the button is accepted.
Gecko FAQ - Gecko Redirect 1
see xulrunner hall of fame for a partial
list of application that use gecko via xulrunner.
...here are some links to
lists of reported bugs related to the standards mentioned above; be aware that these raw
lists of open in-process bugs will inevitably include some duplicate, out of date, unreproducible, invalid, and incorrectly tagged reports: the links themselves are probably outdated too.
...they have been demanding that all vendors fully support the open standards
listed above so that they can have a rich, powerful formatting system and object model at their disposal, and "write once, view anywhere." gecko's robust support for these standards makes gecko the platform of choice for web content and web application developers worldwide.
What is accessibility? - Learn web development
also, be rea
listic.
... accessibility guidelines and the law there are numerous check
lists and sets of guidelines available for basing accessibility tests on, which might seem overwhelming at first glance.
...the w3c keeps a
list of web accessibility laws & policies by country.
Combinators - Learn web development
for example, to select only <p> elements that are direct children of <article> elements: article > p in this next example, we have an unordered
list, nested inside of which is an ordered
list.
...for example if we want to select
list items with a class of "a", which are direct children of a <ul>, i could use the following.
... ul > li[class="a"] { } take care however when creating big
lists of selectors that select very specific parts of your document.
Styling tables - Learn web development
sans-serif; } thead th, tfoot th { font-family: 'rock salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: center; } tfoot th { text-align: right; } there is nothing really specific to tables here; we are generally tweaking the font styling to make things easier to read: we have set a global sans-serif font stack; this is purely a sty
listic choice.
...again, mostly a sty
listic choice.
...this causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at punk-bands-complete.html): table styling quick tips before moving on, we thought we'd provide you with a quick
list of the most useful points illustrated above: make your table markup as simple as possible, and keep things flexible, e.g.
The box model - Learn web development
the second is a
list, which is laid out using display: flex.
... this establishes flex layout for the items inside the container, however, the
list itself is a block box and — like the paragraph — expands to the full container width and breaks onto a new line.
... add display: inline-block to the rule with the .links-
list a selector, and you will see how it fixes this issue by causing the padding to be respected by other elements.
Test your skills: values and units - Learn web development
task one in this task, the first
list item has been given a background color using hex color codes.
... your task is to complete the css using the same color in different formats, plus a final
list item where you should make the background semi-opaque.
... the second
list item should use rgb color.
CSS FAQ - Learn web development
this is a
list of the most commonly used doctype declarations that will trigger standards or almost standards mode: <!doctype html> /* this is the html5 doctype.
... html elements can be assigned multiple classes by
listing the classes in the class attribute, with a blank space to separate them.
...you can use dom inspector's css style rules view to debug problems of this kind, but the most frequent instances of ignored style rules are
listed below.
What text editors are available? - Learn web development
extensible atom mit/bsd free windows, mac, linux forum online manual yes bluefish gpl 3 free windows, mac, linux mailing
list, wiki online manual yes brackets mit/bsd free windows, mac, linux forum, irc github wiki yes coda closed source $99 mac twitter, forum, e-mail ebook yes codelobster closed source free windows, mac, linux forum, e-mail no end user doc yes emacs gpl 3 free windows, mac, linux faq, mailing lis...
...t, news group online manual yes espresso closed source $75 mac faq, e-mail no end user doc, but plug-in doc yes gedit gpl free windows, mac, linux mailing
list, irc online manual yes kate lgpl, gpl free windows, mac, linux mailing
list, irc online manual yes komodo edit mpl free windows, mac, linux forum online manual yes notepad++ gpl free windows forum wiki yes pspad closed source free windows faq, forum online help yes sublime text closed source $70 windows, mac, linux forum official, unofficial yes textmate closed source $50 mac twitter, irc, mailing
list, e-mail online ...
...manual, wiki yes textwrangler closed source free mac faq, forum pdf manual no vim specific open license free windows, mac, linux mailing
list online manual yes visual studio code open source under mit licence/ specific licence for product free windows, mac, linux faq documentation yes active learning in this active learning section, we would like you to try using and/or installing a text editor of your choice.
Basic native form controls - Learn web development
for maximum usability/accessibility, you are advised to surround each
list of related items in a <fieldset>, with a <legend> providing an overall description of the
list.
... each individual pair of <label>/<input> elements should be contained in its own
list item (or similar).
...you've met some of these already, but below is a
list of those common attributes, for your reference: attribute name default value description autofocus false this boolean attribute lets you specify that the element should automatically have input focus when the page loads.
Your first form - Learn web development
forms allow users to enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a
list, or show or hide a ui feature).
...it should look like so: <style> </style> inside the style tags, add the following css: form { /* center the form on the page */ margin: 0 auto; width: 400px; /* form outline */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } ul {
list-style: none; padding: 0; margin: 0; } form li + li { margin-top: 1em; } label { /* uniform size & alignment */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; bo...
... on the server side, the script at the url "/my-handling-form-page" will receive the data as a
list of 3 key/value items contained in the http request.
Creating hyperlinks - Learn web development
this can cause problems for screen reader users, if there's a
list of links out of context that are labeled "click here", "click here", "click here".
...for a complete file
list, see the navigation-menu-start directory: index.html projects.html pictures.html social.html you should: add an unordered
list in the indicated place on one page that includes the names of the pages to link to.
... a navigation menu is usually just a
list of links, so this is semantically ok.
Introduction to HTML - Learn web development
is it a bulleted
list?
...this article looks at how to use html to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create
lists, and more.
...in this article, you'll learn about marking up quotations, description
lists, computer code and other related text, subscript and superscript, contact information, and more.
Introduction to the server side - Learn web development
some of the common uses and benefits of server-side programming are
listed below.
... a deeper analysis of user habits can be used to anticipate their interests and further customize responses and notifications, for example providing a
list of previously visited or popular locations you may want to look at on a map.
...note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the
list than more recent posts.
React resources - Learn web development
previous overview: client-side javascript frameworks next our final article provides you with a
list of react resources that you can use to go further in your learning.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo
list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a
list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo
list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Vue resources - Learn web development
previous overview: client-side javascript frameworks next now we'll round off our study of vue by giving you a
list of resources that you can use to go further in your learning, plus some other useful tips.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo
list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a
list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo
list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
AddressErrors - Web APIs
a description of the total amount being requested (including a label and the currency used), a
list of the line items (in this case only one, "original donation amount"), and a
list of shipping options available; in this case only one.
... let request; function process() { let options = {requestshipping: true}; try { request = new paymentrequest(supportedhandlers, defaultpaymentdetails, options); // add event
listeners here.
... window.addevent
listener("load", function(ev) { document.getelementbyid("pay").addevent
listener("click", process, false); }, false); see addevent
listener() for information about event handlers and how they work.
AudioParam - Web APIs
each audioparam has a
list of events, initially empty, that define when and how values change.
... when this
list is not empty, changes using the audioparam.value attributes are ignored.
... this
list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves.
AudioTrack.language - Web APIs
example this example locates all of a media element's primary language and translated audio tracks and returns a
list of objects containing each of those tracks' id, kind, and language.
... this could then be used to build a user interface for selecting the language the user would like to
listen to while watching a movie, for example.
... function getavailablelanguages(el) { var track
list = []; const wantedkinds = [ "main", "translation" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { track
list.push({ id: track.id, kind: track.kind, language: track.language }); } }); return track
list; } specifications specification status comment html living standardthe definition of 'audiotrack.language' in that specification.
BasicCardRequest - Web APIs
"amex", "mastercard"); see card network identifiers for a complete
list.
... card network identifiers the w3c maintains an official
list of approved card network identifier strings, which may be used in the supportednetworks
list.
... label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event
listeners here.
BasicCardResponse - Web APIs
label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event
listeners here.
... full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedregions preference (needs to be set to a comma-delineated
list of one or more 2-character iso country codes indicating the countries in which to support payments (for example, us,ca.).
... full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedregions preference (needs to be set to a comma-delineated
list of one or more 2-character iso country codes indicating the countries in which to support payments (for example, us,ca.).
Battery Status API - Web APIs
this is done by
listening for the chargingchange, levelchange, chargingtimechange, dischargingtimechange events.
... navigator.getbattery().then(function(battery) { function updateallbatteryinfo(){ updatechargeinfo(); updatelevelinfo(); updatecharginginfo(); updatedischarginginfo(); } updateallbatteryinfo(); battery.addevent
listener('chargingchange', function(){ updatechargeinfo(); }); function updatechargeinfo(){ console.log("battery charging?
..."yes" : "no")); } battery.addevent
listener('levelchange', function(){ updatelevelinfo(); }); function updatelevelinfo(){ console.log("battery level: " + battery.level * 100 + "%"); } battery.addevent
listener('chargingtimechange', function(){ updatecharginginfo(); }); function updatecharginginfo(){ console.log("battery charging time: " + battery.chargingtime + " seconds"); } battery.addevent
listener('dischargingtimechange', function(){ updatedischarginginfo(); }); function updatedischarginginfo(){ console.log("battery discharging time: " + battery.dischargingtime + " seconds"); } }); see also the example in the specification.
Body.json() - Web APIs
when the fetch is successful, we read and parse the data using json(), then read values out of the resulting objects as you'd expect and insert them into
list items to display our product data.
... const my
list = document.queryselector('ul'); const myrequest = new request('products.json'); fetch(myrequest) .then(response => response.json()) .then(data => { for (const product of data.products) { let
listitem = document.createelement('li');
listitem.appendchild( document.createelement('strong') ).textcontent = product.name;
listitem.append( ` can be found in ${ product.location }.
... cost: ` );
listitem.appendchild( document.createelement('strong') ).textcontent = `£${product.price}`; my
list.appendchild(
listitem); } }) .catch(console.error); specifications specification status comment fetchthe definition of 'body.json()' in that specification.
BroadcastChannel: message event - Web APIs
there are two "receiver" iframes that
listen to the broadcast message and write the result into a <div> element.
...sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addevent
listener('click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addev...
...ent
listener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addevent
listener('message', (event) => { received.textcontent = event.data; }); result specifications specification status html living standard living standard ...
CSSRule - Web APIs
there are several types of rules,
listed in the type constants section below.
... references to a cssrule may be obtained by looking at a cssstylesheet's cssrules
list.
...entrule cssrule.font_feature_values_rule 14 cssfontfeaturevaluesrule cssrule.viewport_rule 15 cssviewportrule cssrule.region_style_rule 16 cssregionstylerule cssrule.unknown_rule 0 cssunknownrule cssrule.charset_rule 2 csscharsetrule (removed in most browsers.) an up-to-date informal
list of constants can be found on the csswg wiki.
CSSStyleSheet.rules - Web APIs
functionally identical to the preferred cssrules property, it provides access to a live-updating
list of the css rules comprising the stylesheet.
... syntax var rules = cssstylesheet.rules; value a live-updating cssrule
list containing each of the css rules making up the stylesheet.
... each entry in the rule
list is a cssrule object describing one rule making up the stylesheet.
Managing screen orientation - Web APIs
nullam quis malesuada est.</p> css relies on the orientation media query to handle specific styles based on the screen orientation /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; padding: .5em; } ul {
list-style: none; font : 1em monospace; margin : 0; padding: .5em; -moz-box-sizing: border-box; box-sizing: border-box; background: black; } li { display: inline-block; margin : 0; padding: 0.5em; background: white; } once we have some common styles we can start defining a special case for the orientation /* for portrait, we want the tool bar on top */ @media screen and (...
...
listening orientation change the orientationchange event is triggered each time the device change the orientation of the screen and the orientation itself can be read with the screen.orientation property.
... screen.addevent
listener("orientationchange", function () { console.log("the orientation of the screen is: " + screen.orientation); }); preventing orientation change any web application can lock the screen to suits its own needs.
CSS Object Model (CSSOM) - Web APIs
reference animationevent caretposition css csscharsetrule cssconditionrule csscounterstylerule cssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrule
list cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle media
list mediaquery
list mediaquery
listevent mediaquery
listlistener screen stylesheet stylesheet
list transitionevent several other interfaces are also extended by the cssom-relat...
...ericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvalue
list tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era).
... css object model (cssom) view module working draft defined the screen and mediaquery
list interfaces and the mediaquery
listevent event and mediaquery
listlistener event
listener.
CacheStorage - Web APIs
use this method to iterate over a
list of all the cache objects.
... self.addevent
listener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-
list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', ...
... '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); self.addevent
listener('fetch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of success response will have value if (response !== undefined) { return response; } else { return fetch(event.request).then(function (response) { // response may be used only once // we need to save clone to put one copy in cache // and serve second one let responseclone = response.clone(); caches.open('v1').then(function (cache) { cache.put(event.request, responseclone); }); return response; }).catch(function () { return caches.match('/sw-test/ga...
Manipulating video using canvas - Web APIs
this method's job is to prepare the variables needed by the chroma-key processing code, and to set up an event
listener so we can detect when the user starts playing the video.
... var processor; processor.doload = function doload() { this.video = document.getelementbyid('video'); this.c1 = document.getelementbyid('c1'); this.ctx1 = this.c1.getcontext('2d'); this.c2 = document.getelementbyid('c2'); this.ctx2 = this.c2.getcontext('2d'); let self = this; this.video.addevent
listener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); }, false); }, this code grabs references to the elements in the xhtml document that are of particular interest, namely the video element and the two canvas elements.
... then addevent
listener() is called to begin watching the video element so that we obtain notification when the user presses the play button on the video.
Pixel manipulation with canvas - Web APIs
yle.display = 'none'; }; var color = document.getelementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.background = rgba; color.textcontent = rgba; } canvas.addevent
listener('mousemove', pick); painting pixel data into a context you can use the putimagedata() method to paint pixel data into a context: ctx.putimagedata(myimagedata, dx, dy); the dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.
...putimagedata(imagedata, 0, 0); }; var grayscale = function() { for (var i = 0; i < data.length; i += 4) { var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.putimagedata(imagedata, 0, 0); }; var invertbtn = document.getelementbyid('invertbtn'); invertbtn.addevent
listener('click', invert); var grayscalebtn = document.getelementbyid('grayscalebtn'); grayscalebtn.addevent
listener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details.
... var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesmoothingenabled = this.checked; zoomctx.webkitimagesmoothingenabled = this.checked; zoomctx.msimagesmoothingenabled = this.checked; }; smoothbtn.addevent
listener('change', togglesmoothing); var zoom = function(event) { var x = event.layerx; var y = event.layery; zoomctx.drawimage(canvas, math.min(math.max(0, x - 5), img.width - 10), math.min(math.max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); }; canvas.addeventli...
DocumentOrShadowRoot.msElementsFromRect() - Web APIs
the mselementsfromrect method returns the node
list of elements that are under a rectangle defined by left, top, width, and height.
... syntax object.mselementsfromrect(left, top, width, height, retval) parameters left [in] type: floating-point top[in] type: floating-point width[in] type: floating-point height [in] type: floating-point retval [out, reval] type: node
list example to find all of the elements under a given point, use mselementsfrompoint(x, y).
... var node
list = document.mselementsfromrect(x,y,width,height) var node
list = document.mselementsfrompoint(x,y) the returned node
list is sorted by z-index so that you can tell the relative stacking order of the elements.
Locating DOM elements using selectors - Web APIs
queryselectorall() returns a node
list containing all matching element nodes within the node's subtree, or an empty node
list if no matches are found.
... note: the node
list returned by queryselectorall() is not live, which means that changes in the dom are not reflected in the collection.
... this is different from other dom querying methods that return live node
lists.
Element: click event - Web APIs
<div>) and which also don't have event
listeners directly attached to the elements themselves (i.e.
... safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <input> <label> (but it must be associated with a form control) <textarea> this
list is incomplete; you can help mdn by doing further testing/research and expanding it.
... html <button>click</button> javascript const button = document.queryselector('button'); button.addevent
listener('click', event => { button.innerhtml = `click count: ${event.detail}`; }); result try making rapid, repeated clicks on the button to increase the click count.
Element.computedStyleMap() - Web APIs
examples we start with some simple html: a paragraph with a link, and a definition
list to which we will add all the css property / value pairs.
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition
list of all the css property values using computedstylemap().
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styles
list = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of allcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styles
list.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styles
list.appendchild(cssvalue); } in browsers that support computedstylemap(), you'll see a
list of all the c...
Element.getClientRects() - Web APIs
for html <area> elements, svg elements that do not render anything themselves, display:none elements, and generally any elements that are not directly rendered, an empty
list is returned.
...> <p> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>p's rect</strong> <p class="withclientrectsoverlay"> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>span's rect</strong> <p> <span class="withclientrectsoverlay">paragraph that spans multiple lines</span> </p> </div> example 2: this html creates three ordered
lists.
... <h3>a
list</h3> <p>note that the border box doesn't include the number, so neither do the client rects.</p> <div> <strong>original</strong> <ol> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>ol's rect</strong> <ol class="withclientrectsoverlay"> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>each li's rect</strong> <ol> <li class="withclientrectsoverlay">item 1</li> <li class="withclientrectsoverlay">item 2</li> </ol> </div> example 3: this html creates two tables with captions.
Element.getElementsByClassName() - Web APIs
return value an htmlcollection providing a live-updating
list of every element which is a member of every class in names.
...eir classes a single specified class, we just provide that class name when calling getelementsbyclassname(): element.getelementsbyclassname('test'); this example finds all elements that have a class of test, which are also a descendant of the element that has the id of main: document.getelementbyid('main').getelementsbyclassname('test'); matching multiple classes to find elements whose class
lists include both the red and test classes: element.getelementsbyclassname('red test'); examining the results you can use either the item() method on the returned htmlcollection or standard array syntax to examine individual elements in the collection.
... var matches = element.getelementsbyclassname('colorbox'); for (var i=0; i<matches.length; i++) { matches[i].class
list.remove('colorbox'); matches.item(i).class
list.add('hueframe'); } instead, use another method, such as: var matches = element.getelementsbyclassname('colorbox'); while (matches.length > 0) { matches.item(0).class
list.add('hueframe'); matches[0].class
list.remove('colorbox'); } this code finds descendant elements with the "colorbox" class, adds the class "hueframe", by calling item(0), then removes "colorbox" (using array notation).
Element.part - Web APIs
set using the part attribute), returned as a domtoken
list.
... syntax let elementpart
list = element.part examples the following excerpt is from our shadow-part example.
... let tabs = []; let children = this.shadowroot.children; for(let elem of children) { if(elem.getattribute('part')) { tabs.push(elem); } } tabs.foreach((tab) => { tab.addevent
listener('click', (e) => { tabs.foreach((tab) => { tab.part = 'tab'; }) e.target.part = 'tab active'; }) console.log(tab.part); }) specifications specification status comment shadow partsthe definition of 'element.part' in that specification.
Comparison of Event Targets - Web APIs
there are five targets to consider: property defined in purpose event.target dom event interface the dom element on the lefthand side of the call that triggered this event, eg: element.dispatchevent(event) event.currenttarget dom event interface the eventtarget whose event
listeners are currently being processed.
... min-height: 30px; } .standard { background-color: #99ff99; } .non-standard { background-color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event
listener is being processed <small>event.currenttarget</small></td> <td class="standard">identify other element (if any) involved in the event <small>event.relatedtarget</small></td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.explicitoriginaltarget</small> contains the target before retargetting (never contains anonymous targ...
...latedtarget; document.getelementbyid('explicitoriginaltarget').innerhtml = e.explicitoriginaltarget; document.getelementbyid('originaltarget').innerhtml = e.originaltarget; } function handlemouseover(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget; } document.addevent
listener('click', handleclicks, false); document.addevent
listener('mouseover', handlemouseover, false); </script> </body> </html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was previously over.
Event.msConvertURL() - Web APIs
example var blob
list = []; document.getelementbyid("pastezone").addevent
listener('paste', handlepaste, false); function handlepaste(evt) { var file
list = window.clipboarddata.files; // note that window.datatransfer.files is not applicable.
... if (!file
list) { console.log("file
list is null."); return; } for (var i = 0; i < file
list.length; i++) { var file = file
list[i]; var url = url.createobjecturl(file); if (evt.converturl) { // use standard if available.
... evt.converturl(file, "specified", url); } else { evt.msconverturl(file, "specified", url); } console.log("local file: " + file.name + " (" + file.size + ")"); blob
list.push(file); } // for } // handlepaste see also microsoft api extensions ...
Event.preventDefault() - Web APIs
the event continues to propagate as usual, unless one of its event
listeners calls stoppropagation() or stopimmediatepropagation(), either of which terminates propagation at once.
...this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addevent
listener("click", function(event) { document.getelementbyid("output-box").innerhtml += "sorry!
...first,
listen for keypress events: var mytextbox = document.getelementbyid('my-textbox'); mytextbox.addevent
listener('keypress', checkname, false); the checkname() function, which looks at the pressed key and decides whether to allow it: function checkname(evt) { var charcode = evt.charcode; if (charcode != 0) { if (charcode < 97 || charcode > 122) { evt.preventdefault(); displaywarni...
Event.stopImmediatePropagation() - Web APIs
the stopimmediatepropagation() method of the event interface prevents other
listeners of the same event from being called.
... if several
listeners are attached to the same element for the same event type, they are called in the order in which they were added.
... if stopimmediatepropagation() is invoked during one such call, no remaining
listeners will be called.
FileReader - Web APIs
file objects may be obtained from a file
list object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
... as filereader inherits from eventtarget, all those events can also be
listened for by using the addevent
listener method.
... events
listen to these events using addevent
listener() or by assigning an event
listener to the oneventname property of this interface.
GlobalEventHandlers - Web APIs
each of these interfaces can, of course, add more event handlers in addition to the ones
listed below.
... properties this interface doesn't include any properties except for the event handlers
listed below.
... globaleventhandlers.onformdata is an eventhandler for processing formdata events, fired after the entry
list representing the form's data is constructed.
HTMLAnchorElement - Web APIs
htmlanchorelement.rel
list read only returns a domtoken
list that reflects the rel html attribute, as a
list of tokens.
... htmlanchorelement.coords is a domstring representing a comma-separated
list of coordinates.
... the following properties have been added: hash, host, hostname, media, pathname, port, protocol, rel
list, search, and text.
HTMLButtonElement.labels - Web APIs
the htmlbuttonelement.labels read-only property returns a node
list of the <label> elements associated with the <button> element.
... syntax var labelelements = button.labels; return value a node
list containing the <label> elements associated with the <button> element.
... example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addevent
listener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLElement: animationend event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationend examples this example gets an element that's being animated and
listens for the animationend event: const animated = document.queryselector('.animated'); animated.addevent
listener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: const animated = document.queryselector('.animated'); animated.onanimationend = () => { console.log('animation ended'); }; live example html <div class="...
...@keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addevent
listener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addevent
listener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addevent
listener('animationend', () => { animationeventlog.textconte...
...nt = `${animationeventlog.textcontent}'animation ended'`; animation.class
list.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addevent
listener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addevent
listener('click', () => { animation.class
list.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.class
list.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationiteration event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationiteration examples this code uses animationiteration to keep track of the number of iterations an animation has completed: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.addevent
listener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; ...
...frames slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addevent
listener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addevent
listener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addevent
listener('animationend', () => { animationeventlog.textconte...
...nt = `${animationeventlog.textcontent}'animation ended'`; animation.class
list.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addevent
listener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addevent
listener('click', () => { animation.class
list.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.class
list.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationstart event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationstart examples this
listens for the animationstart event and logs a message when it is fired: const animated = document.queryselector('.animated'); animated.addevent
listener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated = document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live exam...
...frames slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addevent
listener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addevent
listener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addevent
listener('animationend', () => { animationeventlog.textconte...
...nt = `${animationeventlog.textcontent}'animation ended'`; animation.class
list.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addevent
listener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addevent
listener('click', () => { animation.class
list.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.class
list.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: change event - Web APIs
the html specification
lists the <input> types that should fire the change event.
...ocolate">chocolate</option> <option value="sardine">sardine</option> <option value="vanilla">vanilla</option> </select> </label> <div class="result"></div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addevent
listener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.
... html <input placeholder="enter some text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addevent
listener('change', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'change' in that specification.
HTMLFontElement.face - Web APIs
the obsolete htmlfontelement.face property is a domstring that reflects the face html attribute, containing a comma-separated
list of one or more font names.
...if no font
listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.
... the format of the string must follow one of the following html microsyntax: microsyntax description examples
list of one or more valid font family names a
list of font names, that have to be present on the local system courier,verdana syntax facestring = fontobj.face; fontobj.face = facestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.face = "arial"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.face .
HTMLImageElement.sizes - Web APIs
the htmlimageelement property sizes allows you to specify the layout width of the image for each of a
list of media conditions.
... syntax let sizes = htmlimageelement.sizes; htmlimageelement.sizes = sizes; value a usvstring containing a comma-separated
list of source size descriptors followed by an optional fallback size.
... let image = document.queryselector("article img"); let break40 = document.getelementbyid("break40"); let break50 = document.getelementbyid("break50"); break40.addevent
listener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addevent
listener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here.
HTMLInputElement.labels - Web APIs
the htmlinputelement.labels read-only property returns a node
list of the <label> elements associated with the <input> element.
... syntax var labelelements = input.labels; return value a node
list containing the <label> elements associated with the <input> element.
... example html <label id="label1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addevent
listener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLLIElement - Web APIs
the htmllielement interface exposes specific properties and methods (beyond those defined by regular htmlelement interface it also has available to it by inheritance) for manipulating
list elements.
...as the standard way of defining the
list type is via the css
list-style-type property, use the cssom methods to set it via a script.
... htmllielement.value is a long indicating the ordinal position of the
list element inside a given <ol>.
HTMLMeterElement.labels - Web APIs
the htmlmeterelement.labels read-only property returns a node
list of the <label> elements associated with the <meter> element.
... syntax var labelelements = meter.labels; return value a node
list containing the <label> elements associated with the <meter> element.
... example html <label id="label1" for="test">label 1</label> <meter id="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addevent
listener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLOutputElement.labels - Web APIs
the htmloutputelement.labels read-only property returns a node
list of the <label> elements associated with the <output> element.
... syntax var labelelements = output.labels; return value a node
list containing the <label> elements associated with the <output> element.
... example html <label id="label1" for="test">label 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addevent
listener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLProgressElement.labels - Web APIs
the htmlprogresselement.labels read-only property returns a node
list of the <label> elements associated with the <progress> element.
... syntax var labelelements = progress.labels; return value a node
list containing the <label> elements associated with the <progress> element.
... example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addevent
listener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.labels - Web APIs
the htmlselectelement.labels read-only property returns a node
list of the <label> elements associated with the <select> element.
... syntax var labelelements = select.labels; return value a node
list containing the <label> elements associated with the <select> element.
... example html <label id="label1" for="test">label 1</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addevent
listener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLTextAreaElement.labels - Web APIs
the htmltextareaelement.labels read-only property returns a node
list of the <label> elements associated with the <textarea> element.
... syntax var labelelements = textarea.labels; return value a node
list containing the <label> elements associated with the <textarea> element.
... example html <label id="label1" for="test">label 1</label> <textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript window.addevent
listener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
File drag and drop - Web APIs
one api is the datatransfer interface and the second api is the datatransferitem and datatransferitem
list interfaces.
...in the following drop handler, if the browser supports datatransferitem
list interface, the getasfile() method is used to access each file; otherwise the datatransfer interface's files property is used to access each file.
... function drophandler(ev) { console.log('file(s) dropped'); // prevent default behavior (prevent file from being opened) ev.preventdefault(); if (ev.datatransfer.items) { // use datatransferitem
list interface to access the file(s) for (var i = 0; i < ev.datatransfer.items.length; i++) { // if dropped items aren't files, reject them if (ev.datatransfer.items[i].kind === 'file') { var file = ev.datatransfer.items[i].getasfile(); console.log('...
IDBDatabase.objectStoreNames - Web APIs
the objectstorenames read-only property of the idbdatabase interface is a domstring
list containing a
list of the names of the object stores currently in the connected database.
... syntax var
list[] = idbdatabase.objectstorenames; value a domstring
list containing a
list of the names of the object stores currently in the connected database.
... example // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBDatabaseSync - Web APIs
path, in optional boolean autoincrement) raises (idbdatabaseexception); idbobjectstoresync openobjectstore (in domstring name, in optional unsigned short mode) raises (idbdatabaseexception); void removeobjectstore (in domstring storename) raises (idbdatabaseexception); void setversion (in domstring version); idbtransactionsync transaction (in optional domstring
list storenames, in optional unsigned int timeout) raises (idbdatabaseexception); attributes attribute type description description readonly domstring the human-readable description of the connected database.
... objectstores readonly domstring
list the names of the object stores that exist in the connected database.
... idbtransactionsync transaction ( in optional domstring
list storenames, in optional unsigned int timeout ) raises (idbdatabaseexception); parameters storenames the names of object stores and indexes in the scope of the new transaction.
IDBObjectStore.autoIncrement - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var 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(["todo
list"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); console.log(objectstore.autoincrement); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'autoincrement' in that specification.
IDBObjectStore.createIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); // two event handlers for opening the database.
... db = request.result; // run the displaydata() function to populate the task
list with // all the to-do
list data already in the idb displaydata(); }; // this handler fires when a new database is created and indicates // either that one has not been created before, or a new version // was submitted with window.indexeddb.open().
...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("todo
list", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique...
IDBObjectStore.keyPath - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var 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(["todo
list"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); console.log(objectstore.keypath); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification.
IDBObjectStore.name - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var 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(["todo
list"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); console.log(objectstore.name); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBObjectStore.transaction - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var 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(["todo
list"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); console.log(objectstore.transaction); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'transaction' in that specification.
IDBOpenDBRequest: blocked event - Web APIs
bubbles no cancelable no interface idbversionchangeevent event handler property onblocked examples using addevent
listener(): // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); obje...
...ctstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todo
list', 5); // in this case the onblocked handler will be executed req2.addevent
listener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error crea...
...ting database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todo
list', 5); // in this case the onblocked handler will be executed req2.onblocked = () => { console.log('request was block...
IDBOpenDBRequest.onblocked - Web APIs
}; example var db; // let us open our database var request = indexeddb.open("todo
list", 4); // these two event handlers act on the database being opened // successfully, or not request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = request.result; // run the displaydata() function to populate the task
list with // all the to-do
list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the // database needs to be created.
...re, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todo
list", { keypath: "tasktitle" }); ...
IDBTransaction.abort() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var 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(["todo
list"], "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.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'abort()' in that specification.
IDBTransaction.db - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var 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(["todo
list"], "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.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the database (idbdatabase) connection with which this transaction is associated transaction.db; }; specification specification status comment indexed database api 2.0the definition of 'db' in that specification.
IDBTransaction.error - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var 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(["todo
list"], "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: ' + transaction.error + '</li>'; }; // create an object store on the transa...
...ction var objectstore = transaction.objectstore("todo
list"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'error' in that specification.
IDBTransaction.mode - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var 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(["todo
list"], "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.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the mode this transaction has been opened in (should be "readwrite" in this case) transaction.mode; }; specification specification status comment indexed database api 2.0the definition of 'mode' in that specification.
IDBTransaction.objectStore() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var 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(["todo
list"], "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.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; specification specification status comment indexed database api 2.0the definition of 'objectstore()' in that specification.
IDBTransaction.onabort - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var 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(["todo
list"], "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: ' + transaction.error + '</li>'; }; // create an object store on the transac...
...tion var objectstore = transaction.objectstore("todo
list"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; transaction.onabort = function() { // report when the transaction was successfully aborted console.log("transaction aborted!"); }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'onabort' in that specification.
IDBTransaction.oncomplete - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var 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(["todo
list"], "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: ' + transaction.error + '</li>'; }; // create an object store on the transac...
...tion var objectstore = transaction.objectstore("todo
list"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.oncomplete) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'oncomplete' in that specification.
IDBTransaction.onerror - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var 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(["todo
list"], "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: ' + transaction.error + '</li>'; }; // create an object store on the transa...
...ction var objectstore = transaction.objectstore("todo
list"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'onerror' in that specification.
KeyframeEffect.setKeyframes() - Web APIs
element.animate({ opacity: [ 0, 0.9, 1 ], offset: [ 0, 0.8 ], // shorthand for [ 0, 0.8, 1 ] easing: [ 'ease-in', 'ease-out' ], }, 2000); after generating a suitable set of keyframes from the property value
lists, each supplied offset is applied to the corresponding keyframe.
... if there are insufficient values, or if the
list contains null values, the keyframes without specified offsets will be evenly spaced as with the array format described above.
... if there are too few easing or composite values, the corresponding
list will be repeated as needed.
LargestContentfulPaint - Web APIs
examples the following example shows how to create a performanceobserver that
listens for largest-contentful-paint entries and logs the lcp value to the console.
...// https://bugs.webkit.org/show_bug.cgi?id=209216 try { let lcp; const po = new performanceobserver((entry
list) => { const entries = entry
list.getentries(); const lastentry = entries[entries.length - 1]; // update `lcp` to the latest value, using `rendertime` if it's available, // otherwise using `loadtime`.
... addevent
listener('visibilitychange', function fn() { if (lcp && document.visibilitystate === 'hidden') { console.log('lcp:', lcp); removeevent
listener('visibilitychange', fn, true); } }, true); } catch (e) { // do nothing if the browser doesn't support this api.
MediaDeviceInfo - Web APIs
the
list of devices obtained by calling navigator.mediadevices.enumeratedevices() is an array of mediadeviceinfo objects, one per media device.
... example here's an example that uses enumeratedevices() to get a
list of devices.
... if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } //
list cameras and microphones.
MediaDevices.enumerateDevices() - Web APIs
the mediadevices method enumeratedevices() requests a
list of the available media input and output devices, such as microphones, cameras, headsets, and so forth.
...it simply outputs a
list of the device ids, with their labels if available.
... if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } //
list cameras and microphones.
MediaKeySystemConfiguration - Web APIs
properties mediakeysystemconfiguration.initdatatypes read only returns a
list of supported initialization data type names.
... mediakeysystemconfiguration.audiocapabilities read only returns a
list of supported audio type and capability pairs.
... mediakeysystemconfiguration.videocapabilities read only returns a
list of supported video type and capability pairs.
MediaSource.activeSourceBuffers - Web APIs
the activesourcebuffers read-only property of the mediasource interface returns a sourcebuffer
list object containing a subset of the sourcebuffer objects contained within sourcebuffers — the
list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.
... syntax var myactivesourcebuffers = mediasource.activesourcebuffers; value a sourcebuffer
list containing the sourcebuffer objects for each of the active tracks.
... example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addevent
listener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.activesourcebuffers); // will contain the source buffer that was added above, // as it is selected for playing in the video player video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaSource.addSourceBuffer() - Web APIs
the addsourcebuffer() method of the mediasource interface creates a new sourcebuffer of the given mime type and adds it to the mediasource's sourcebuffers
list.
... notsupportederror the specified mimetype isn't supported by the user agent, or is not compatible with the mime types of other sourcebuffer objects that are already included in the media source's sourcebuffers
list.
...ag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addevent
listener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addevent
listener('updateend', function (_) { mediasource.endofstream(); ...
MediaSource.sourceBuffers - Web APIs
the sourcebuffers read-only property of the mediasource interface returns a sourcebuffer
list object containing the
list of sourcebuffer objects associated with this mediasource.
... syntax var mysourcebuffers = mediasource.sourcebuffers; value a sourcebuffer
list.
... example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addevent
listener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.sourcebuffers); // will contain the source buffer that was added above video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaStreamTrack - Web APIs
properties in addition to the properties
listed below, mediastreamtrack has constrainable properties which can be set using applyconstraints() and accessed using getconstraints() and getsettings().
... mediastreamtrack.getcapabilities() returns the a
list of constrainable properties available for the mediastreamtrack.
... events
listen to these events using addevent
listener() or by assigning an event
listener to the oneventname property of this interface: ended sent when playback of the track ends (when the value readystate changes to ended).
MediaStream Recording API - Web APIs
you can
listen for error events by setting up a onerror event handler.
...to do so, you'll need to call navigator.mediadevices.enumeratedevices() to get a
list of the available media devices.
... you can then examine that
list and identify the potential input sources, and even filter the
list based on desired criteria.
Transcoding assets for Media Source Extensions - Web APIs
sample media if you're looking to follow the steps
listed here, but don't have any media to experiment with, you can grab the trailer to big buck bunny [0] here.
... to check if the browser supports a particular container, you can pass a string of the mime type to the mediasource.istypesupported method: mediasource.istypesupported('audio/mp3'); // false mediasource.istypesupported('video/mp4'); // true mediasource.istypesupported('video/mp4; codecs="avc1.4d4028, mp4a.40.2"'); // true the string is the mime type of the container, optionally followed by a
list of codecs.
... to check whether an mp4 file is a proper mp4 stream, you can again use the mp4info utility to
list the atoms of an mp4.
MessageEvent - Web APIs
using an onmessage handler as
listed above).
...if the onmessage event is attached using addevent
listener, the port is manually started using its start() method: myworker.port.start(); when the port is started, both scripts post messages to the worker and handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = fun...
... onconnect = function(e) { var port = e.ports[0]; port.addevent
listener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using addevent
listener.
MessagePort: message event - Web APIs
to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addevent
listener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start
listening for messages on it using code like this: window.addevent
listener('message', (event) => { const myport = event.ports[0]; myport.addevent
listener('message', (event) => { received.textcontent = ev...
...ent.data; }); myport.start(); }); note that the
listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addevent
listener() method: if the receiver uses onmessage instead, start() is called implicitly: window.addevent
listener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; }); specifications specification status html living standard living standard ...
MessagePort: messageerror event - Web APIs
to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addevent
listener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start
listening for messages and message errors on it using code like this: window.addevent
listener('message', (event) => { const myport = event.ports[0]; myport.addevent
listener('message', (event) => { receiv...
...ed.textcontent = event.data; }); myport.addevent
listener('messageerror', (event) => { console.error(event.data); }); myport.start(); }); note that the
listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addevent
listener() method: if the receiver uses onmessage instead, start() is called implicitly: window.addevent
listener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; myport.onmessageerror = (event) => { console.error(event.data); }; }); specifications specification status html living standard living standard ...
MessagePort.onmessage - Web APIs
the onmessage event handler of the messageport interface is an event
listener, called whenever an messageevent of type message is fired on the port — that is, when the port receives a message.
...the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is
listened to, to check when the message arrives.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addevent
listener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
NavigatorPlugins.plugins - Web APIs
returns a pluginarray object,
listing the plugin objects describing the plugins installed in the application.
... syntax var plugins = navigator.plugins; plugins is pluginarray object used to access plugin objects either by name or as a
list of items.
...a
list of plugins is also available by entering about:plugins in the browser's location bar.
Node.childNodes - Web APIs
the node.childnodes read-only property returns a live node
list of child nodes of the given element where the first child node is assigned index 0.
... syntax let node
list = elementnodereference.childnodes; examples simple usage // parg is an object reference to a <p> element // first check that the element has child nodes if (parg.haschildnodes()) { let children = parg.childnodes; for (let i = 0; i < children.length; i++) { // do something with each child as children[i] // note:
list is live!
... adding or removing children will change the
list's `length` } } remove all children from a node // this is one way to remove all children from a node // box is an object reference to an element while (box.firstchild) { //the
list is live so it will re-index each call box.removechild(box.firstchild); } notes the items in the collection of nodes are objects, not strings.
OrientationSensor - Web APIs
interfaces based on orientationsensor below is a
list of interfaces based on the orientationsensor interface.
... const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addevent
listener('reading', () => { // model is a three.js object instantiated elsewhere.
... model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addevent
listener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
PannerNode.positionZ - Web APIs
the positionz property of the pannernode interface specifies the z coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the depth axis (behind-in front of the
listener).
...if the sound is pointing toward the
listener, it will be louder than if the sound is pointed away from the
listener.
... example the following example starts an oscillator and moves it in front of the
listener after 1 second, behind the
listener after 2 seconds, and back to the
listener's position after 3 seconds.
PannerNode.refDistance - Web APIs
the refdistance property of the pannernode interface is a double value representing the reference distance for reducing volume as the audio source moves further from the
listener – i.e.
... example this example demonstrates how different values of refdistance affect how the volume of a sound decays as it moves away from the
listener.
... const context = new audiocontext(); // all our test tones will last this many seconds const note_length = 6; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given refdistance // and schedules it to move away from the
listener along the z (depth-wise) axis // at the given start time, resulting in a decrease in volume (decay) const scheduletesttone = (refdistance, starttime) => { const osc = new oscillatornode(context); const panner = new pannernode(context); panner.refdistance = refdistance; // set the initial z position, then schedule the ramp panner.positionz.setvalueattime(0, starttime); panner.pos...
PaymentRequest.onshippingaddresschange - Web APIs
syntax paymentrequest.addevent
listener('shippingaddresschange', shippingaddresschangeevent => { ...
...to make sure an updated address is included when sending payment information to the server, you should add event
listeners for a paymentrequest object after instantiation, but before the call to show().
...var payment = new paymentrequest(supportedinstruments, details, options); request.addevent
listener('shippingaddresschange', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of clarity.
PaymentRequest.onshippingoptionchange - Web APIs
syntax paymentrequest.addevent
listener('shippingoptionchange', shippingoptionchangeevent => { ...
...to make sure an updated option is included when sending payment information to the server, you should add event
listeners for a paymentrequest object after instantiation, but before the call to show().
...var request = new paymentrequest(supportedinstruments, details, options); // when user selects a shipping address request.addevent
listener('shippingaddresschange', e => { e.updatewith(((details, addr) => { var shippingoption = { id: '', label: '', amount: { currency: 'usd', value: '0.00' }, selected: true }; // shipping to us is supported if (addr.country === 'us') { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '0.00'; details.total.amount.value = '55.00'; // shipping to jp is supported } else if (addr.country === 'jp') { shippingoption.id = 'jp'; shippingoption.label = 'int...
PaymentResponse: payerdetailchange event - Web APIs
bubbles no cancelable no interface paymentrequestupdateevent event handler property onpayerdetailchange examples in the example below, onpayerdetailchange is used to set up a
listener for the payerdetailchange event in order to validate the information entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected.
...ername)); oldpayername = payername; } if (oldpayeremail !== payeremail) { promisestovalidate.push(validateemail(payeremail)); oldpayeremail = payeremail; } if (oldpayerphone !== payerphone) { promisestovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves, add the results of the // validation to the errors
list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { ...
...method: "post", body: response.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, }); addevent
listener equivalent you could also set up the event handler using the addevent
listener() method: response.addevent
listener("payerdetailchange", async ev => { ...
PaymentResponse.retry() - Web APIs
see the
list of exceptions for show() for further details.
... requestorresponse.addevent
listener(event, async function
listener(ev) { const promisetovalidate = validator(requestorresponse); ev.updatewith(promisetovalidate); const errors = await promisetovalidate; if (!errors) { // yay!
... event.removeevent
listener(event,
listener); resolve(); } }); }); } dopaymentrequest(); specifications specification status comment payment request apithe definition of 'retry()' in that specification.
Using the Payment Request API - Web APIs
const checkoutbutton = document.getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addevent
listener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
... the code looks something like this: checkoutbutton.addevent
listener('click', function() { var request = new paymentrequest(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); request.show().then(function(paymentresponse) { // here we would process the payment.
... }); the payment handler would include the following code: self.addevent
listener('canmakepayment', function(evt) { // pre-authorize here.
PerformanceObserver.takeRecords() - Web APIs
the takerecords() method of the performanceobserver interface returns the current
list of performance entries stored in the performance observer, emptying it out.
... return value a
list of performanceentry objects.
... example var observer = new performanceobserver(function(
list, obj) { var entries =
list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); var records = observer.takerecords(); console.log(records[0].name); console.log(records[0].starttime); console.log(records[0].duration); specifications specification status comment performance timeline level 2the definition of 'takerecords()' in that specification.
RTCConfiguration.certificates - Web APIs
syntax let rtcconfiguration = { certificates: certificate
list }; let rtcconfiguration.certificates = [ cert1...
...although a given dtls connection only uses a single certificate, providing multiple options in the certificates
list may improve the odds of establishing a connection by increasing the chances a mutually-compatible encryption algorithm and key size may be found.
...some browsers may simply choose the first
listed certificate and ignore the rest of the
list; others may take a different approach.
RTCDTMFSender.toneBuffer - Web APIs
the rtcdtmfsender interface's tonebuffer property returns a string containing a
list of the dtmf tones currently queued for sending to the remote peer over the rtcpeerconnection.
... tones are removed from the string as they're played, so only upcoming tones are
listed.
... syntax var tonebuffer = rtcdtmfsender.tonebuffer; value a domstring
listing the tones to be played.
RTCDataChannel: bufferedamountlow event - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold = 65536; pc.addevent
listener("bufferedamountlow", ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdatachannel() to create the data channel.
... then a
listener is created for bufferedamountlow to refill the incoming data buffer any time its contents fall below 65536 bytes.
... you can also set up a
listener for bufferedamountlow using its event handler property, onbufferedamountlow: pc.onbufferedamountlow = ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'bufferedamountlow' in that specification.
SharedWorkerGlobalScope - Web APIs
some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are
listed in the javascript reference.
... see the complete
list of functions available to workers.
... events
listen to this event using addevent
listener() or by assigning an event
listener to the oneventname property of this interface.
SpeechRecognitionEvent.results - Web APIs
the results read-only property of the speechrecognitionevent interface returns a speechrecognitionresult
list object representing all the speech recognition results for the current session.
... syntax var myresults = event.results; value a speechrecognitionresult
list object.
... recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresult
list object // the speechrecognitionresult
list object contains speechrecognitionresult objects.
SpeechRecognitionEvent - Web APIs
speechrecognitionevent.resultindex read only returns the lowest index value result in the speechrecognitionresult
list "array" that has actually changed.
... speechrecognitionevent.results read only returns a speechrecognitionresult
list object representing all the speech recognition results for the current session.
... recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresult
list object // the speechrecognitionresult
list object contains speechrecognitionresult objects.
StylePropertyMapReadOnly.get() - Web APIs
let's start by creating a link inside a paragraph in our html, and adding a definition
list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of css, including a custom property and an inhertable property: p { font-weight: bold; } a { --colour: red; color: var(--colour); } we use the element's computedstylemap() to return a stylepropertymapreadonly object.
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styles
list = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const stylemap = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--colour']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styles
list.appendchild(cssproperty); // values const c...
...ssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode( stylemap.get(ofinterest[i]))); styles
list.appendchild(cssvalue); } specifications specification status comment css typed om level 1the definition of 'get()' in that specification.
SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.class
list.add("fade-in"); sharedsecretvalue.addevent
listener("animationend", () => { sharedsecretvalue.class
list.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely con...
...] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; const bobskeypair = values[1]; const derivebitsbutton = document.queryselector(".ecdh .derive-bits-button"); derivebitsbutton.addevent
listener("click", () => { // alice then generates a secret using her private key and bob's public key.
...rypto.getrandomvalues(new uint8array(16)); const derivedbits = await window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.class
list.add("fade-in"); derivedbitsvalue.addevent
listener("animationend", () => { derivedbitsvalue.class
list.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.addevent
listener("click", () => { getderivedbits(); }); specifications ...
Touch.target - Web APIs
if there is any risk of an element being removed while it is being touched, the best practice is to attach the touch
listeners directly to the target.
...when the touchstart event handler for this element is invoked, each touch point's touch.target property is accessed via the event's touchevent.targettouches
list.
... // register a touchmove
listener for the 'source' element var src = document.getelementbyid("source"); src.addevent
listener('touchstart', function(e) { // iterate through the touch points that were activiated // for this element.
TouchEvent() - Web APIs
toucheventinit optional is a toucheventinit dictionary, having the following fields: "touches", optional and defaulting to [], of type touch[], that is a
list of objects for every point of contact currently touching the surface.
... "targettouches", optional and defaulting to [], of type touch[], that is a
list of objects for every point of contact that is touching the surface and started on the element that is the target of the current event.
... "changedtouches", optional and defaulting to [], of type touch[], that is a
list of objects for every point of contact which contributed to the event.
TrackEvent - Web APIs
events based on trackevent are always sent to one of the media track
list types: events involving video tracks are always sent to the videotrack
list found in htmlmediaelement.videotracks events involving audio tracks are always sent to the audiotrack
list specified in htmlmediaelement.audiotracks events affecting text tracks are sent to the texttrack
list object indicated by htmlmediaelement.texttracks.
... var videoelem = document.queryselector("video"); videoelem.videotracks.addevent
listener("addtrack", handletrackevent, false); videoelem.videotracks.addevent
listener("removetrack", handletrackevent, false); videoelem.audiotracks.addevent
listener("addtrack", handletrackevent, false); videoelem.audiotracks.addevent
listener("removetrack", handletrackevent, false); videoelem.texttracks.addevent
listener("addtrack", handletrackevent, false); videoelem.texttracks.addevent
listener("remov...
...etrack", handletrackevent, false); function handletrackevent(event) { var trackkind; if (event.target instanceof(videotrack
list)) { trackkind = "video"; } else if (event.target instanceof(audiotrack
list)) { trackkind = "audio"; } else if (event.target instanceof(texttrack
list)) { trackkind = "text"; } else { trackkind = "unknown"; } switch(event.type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the javascript instanceof operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being added to or removed...
VisualViewport - Web APIs
events
listen to these events using addevent
listener() or by assigning an event
listener to the relevant oneventname property of this interface.
... var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.addevent
listener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addevent
listener('scroll', viewporthandler); window.visualviewport.addevent
listener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling.
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
the webglrenderingcontext method enablevertexattribarray(), part of the webgl api, turns on the generic vertex attribute array at the specified index into the
list of attribute arrays.
...attributes are referenced by an index number into the
list of attributes maintained by the gpu.
... webglrenderingcontext.invalid_value the specified index is invalid; that is, it's greater than or equal to the maximum number of entries permitted in the context's vertex attribute
list, as indicated by the value of webglrenderingcontext.max_vertex_attribs.
Clearing by clicking - Web APIs
not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addevent
listener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
... window.removeevent
listener(evt.type, setupwebgl, false); // adding the same click event handler to both canvas and // button.
... var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-switcher"); canvas.addevent
listener("click", switchcolor, false); button.addevent
listener("click", switchcolor, false); // a variable to hold the webglrenderingcontext.
Hello vertex attributes - Web APIs
x" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addevent
listener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeevent
listener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = doc...
..." + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addevent
listener("click", function (evt) { var clickxrelativtocanvas = evt.pagex - evt.target.offsetleft; var clickxinwebglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false)...
...; } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addevent
listener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.i...
Scissor animation - Web APIs
n</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addevent
listener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
... var gl, color = getrandomcolor(), position; function setupanimation (evt) { window.removeevent
listener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1], color[2], 1.0); // unlike the browser window, vertical position in webgl is // measured from bottom to top.
... position = [0, gl.drawingbufferheight]; var button = document.queryselector("button"); var timer; function startanimation(evt) { button.removeevent
listener(evt.type, startanimation, false); button.addevent
listener("click", stopanimation, false); document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeevent
listener(evt.type, stopanimation, false); button.addevent
listener("click", startanimation, false); document.queryselector("strong").innerhtml = "start"; clearinterval(timer); } stopanimation({type: "click"}); } // variables to hold...
Simple color animation - Web APIs
vas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addevent
listener("load", function setupanimation (evt) { "use strict" window.removeevent
listener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
... var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.removeevent
listener(evt.type, startanimation, false); button.addevent
listener("click", stopanimation, false); verb.innerhtml="stop"; // setup animation loop by redrawing every second.
... drawanimation(); } function stopanimation(evt) { button.removeevent
listener(evt.type, stopanimation, false); button.addevent
listener("click", startanimation, false); verb.innerhtml="start"; // stop animation by clearing the timer.
Rendering and the WebXR frame animation callback - Web APIs
this pseudocode outlines that process: for each view in the pose's views
list: get the webxr gl layer's viewport set the webgl viewport to match for each object in the scene bindprogram() bindvertices() bindmatrices() binduniforms() bindbuffers() bindtextures() drawmyobject() put simply, this form of renderer is using view-first order.
... the resulting pseudocode looks like this: for each object in the scene bindprogram() binduniforms() bindbuffers() bindtextures() for each view in the pose's views
list get the xrwebgllayer's viewport set the webgl viewport to match bindvertices() bindmatrices() drawmyobject() by changing things up in this way, we only bind programs, uniforms, buffers, textures, and potentially other things once per frame instead of twice for each object found in the scene.
...if there's water in the scene, it needs ripples or waves to look rea
listic.
Coordinate systems - CSS: Cascading Style Sheets
whenever the mouse enters, moves around inside, or exits the inner box, the corresponding event is handled by updating a set of informational messages within the box,
listing out the current mouse coordinates in each of the four available coordinate systems.
... function update(e) { setcoords(e, "offset"); setcoords(e, "client"); setcoords(e, "page"); setcoords(e, "screen"); } inner.addevent
listener("mouseenter", update, false); inner.addevent
listener("mousemove", update, false); inner.addevent
listener("mouseleave", update, false); the event handler is in the update() method.
... our main code sets up the event handlers on the inner box by calling addevent
listener() for each of the types mouseenter, mousemove, and mouseleave.
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; } track
listings with repeat() notation large grids with many tracks can use the repeat() notation, to repeat all or a section of the track
listing.
... for example the grid definition: .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } can also be written as: .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } repeat notation can be used for a part of the track
listing.
... .wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; } repeat notation takes the track
listing, and uses it to create a repeating pattern of tracks.
Using CSS counters - CSS: Cascading Style Sheets
"section " counter(section) ": "; /* display the word 'section ', the value of section counter, and a colon before the content of each h3 */ } html <h3>introduction</h3> <h3>body</h3> <h3>conclusion</h3> result nesting counters a css counter can be especially useful for making outlined
lists, because a new instance of the counter is automatically created in child elements.
... example of a nested counter css ol { counter-reset: section; /* creates a new instance of the section counter with each ol element */
list-style-type: none; } li::before { counter-increment: section; /* increments only this instance of the section counter */ content: counters(section, ".") " "; /* combines the values of all instances of the section counter, separated by a period */ } html <ol> <li>item</li> <!-- 1 ...
... 2.3.2 --> <li>item</li> <!-- 2.3.3 --> </ol> </li> <li>item</li> <!-- 2.4 --> </ol> </li> <li>item</li> <!-- 3 --> <li>item</li> <!-- 4 --> </ol> <ol> <li>item</li> <!-- 1 --> <li>item</li> <!-- 2 --> </ol> result specifications specification status comment css
lists module level 3the definition of 'css counters' in that specification.
Shorthand properties - CSS: Cascading Style Sheets
we can look at a
list of links and explore how the universal values work.
... for example: the second
list item has the class my-class-1 applied.
... shorthand properties: animation, background, border, border-bottom, border-color, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, grid, grid-area, grid-column, grid-row, grid-template,
list-style, margin, offset, outline, overflow, padding, place-content, place-items, place-self, text-decoration, transition ...
Syntax - CSS: Cascading Style Sheets
note: the content of a css declaration block, that is a
list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an html style attribute.
... css statements rulesets are the main building blocks of a style sheet, which often consists of only a big
list of them.
... but there is other information that a web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or
list counter descriptions and many more.
font-feature-settings - CSS: Cascading Style Sheets
<feature-tag-value> when rendering text, the
list of opentype feature tag value is passed to the text layout engine to enable or disable font features.
...sty
listic alternates), the value implies a particular glyph to be selected; for boolean values, it is a switch.
...ture-settings: "hist"; } /* disable common ligatures, usually on by default */ .noligs { font-feature-settings: "liga" 0; } /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable sty
listic set 7 */ .fancystyle { font-family: gabriola; /* available on windows 7, and on mac os */ font-feature-settings: "ss07"; } specifications specification status comment css fonts module level 3the definition of 'font-feature-settings' in that specification.
text-shadow - CSS: Cascading Style Sheets
it accepts a comma-separated
list of shadows to be applied to the text and any of its decorations.
...blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* use defaults for color and blur-radius */ text-shadow: 5px 10px; /* global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; this property is specified as a comma-separated
list of shadows.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valuea color plus three absolute lengthsanimation typea shadow
list formal syntax none | <shadow-t>#where <shadow-t> = [ <length>{2,3} && <color>?
transition-delay - CSS: Cascading Style Sheets
each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master
list.
... if there are fewer delays specified than in the master
list, the
list of delay values will be repeated until there are enough.
... if there are more delays, the
list of delay values will be truncated to match the number of properties.
transition-duration - CSS: Cascading Style Sheets
you may specify multiple durations; each duration will be applied to the corresponding property as specified by the transition-property property, which acts as a master
list.
... if there are fewer durations specified than in the master
list, the user agent repeat the
list of durations.
... if there are more durations, the
list is simply truncated to the right size.
Audio and Video Delivery - Developer guides
ementbyid('my-audio'); var mycontrol = document.getelementbyid('my-control'); function switchstate() { if (myaudio.paused == true) { myaudio.play(); mycontrol.innerhtml = "pause"; } else { myaudio.pause(); mycontrol.innerhtml = "play"; } } function checkkey(e) { if (e.keycode == 32 ) { //spacebar switchstate(); } } mycontrol.addevent
listener('click', function() { switchstate(); }, false); window.addevent
listener( "keypress", checkkey, false ); } you can try this example out here.
...this returns a timeranges object
listing the ranges of times that you can seek to.
...ls> <source src="dynamicsearch.mp4" type="video/mp4"></source> <a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="dynamic app search in firefox os"> </a> <p>click image to play a video demo of dynamic app search</p> </video> var v = document.queryselector('video'), sources = v.queryselectorall('source'), lastsource = sources[sources.length-1]; lastsource.addevent
listener('error', function(ev) { var d = document.createelement('div'); d.innerhtml = v.innerhtml; v.parentnode.replacechild(d, v); }, false); audio/video javascript libraries a number of audio and video javascript libaries exist.
Media events - Developer guides
various events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section
lists them and provides some helpful information about using them.
... you can easily watch for these events, using code such as the following: var v = document.getelementsbytagname("video")[0]; v.addevent
listener("seeked", function() { v.play(); }, true); v.currenttime = 10.0; this example fetches the first video element in the document and attaches an event
listener to it, watching for the seeked event, which is sent whenever a seek operation completes.
... the
listener simply calls the element's play() method, which starts playback.
Content categories - Developer guides
they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <data
list>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <s...
... elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <data
list>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
... <button> <fieldset> <input> <keygen> <label> <meter> <object> <output> <progress> <select> <textarea> this category contains several sub-categories:
listed elements that are
listed in the form.elements and fieldset.elements idl collections.
Localizations and character encodings - Developer guides
the value should be a comma-separated
list of canonical encoding names.
... the
list should include at least the fallback encoding, windows-1252 and utf-8.
...therefore, it makes sense for the
list to be shift_jis, euc-jp, iso-2022-jp, windows-1252, utf-8.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
examples no <bdi> with only ltr this example
lists the winners of a competition using <span> elements only.
...e names only contain ltr text the results look fine: <ul> <li><span class="name">henrietta boffin</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } no <bdi> with rtl text this example
lists the winners of a competition using <span> elements only, and one of the winners has a name consisting of rtl text.
...text, and the result will be garbled: <ul> <li><span class="name">اَلأَعْشَى</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } using <bdi> with ltr and rtl text this example
lists the winners of a competition using <bdi> elements.
<img>: The Image Embed element - HTML: Hypertext Markup Language
supported image formats the html standard doesn't
list what image formats to support, so each user agent supports different formats.
...below is a
list of the image formats that are most commonly used on the web, as well as some older formats that should no longer be used, despite existing content possibly still using them.
...this must be omitted for the last item in the
list.
assign - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
bbox - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
binding - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related tbd ...
bindings - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related tbd ...
box - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements vbox, hbox ...
broadcaster - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
broadcasterset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
column - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, rows, row ...
columns - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, column, rows, row.
conditions - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
content - Archive of obsolete content
métodos inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata relacionados tbd ...
datepicker - Archive of obsolete content
methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement ...
deck - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related stack ...
dialogheader - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements dialog, window ...
editor - Archive of obsolete content
inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
grippy - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
groupbox - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
hbox - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, vbox ...
keyset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
label - Archive of obsolete content
for textbox and user editable menu
list elements, the contents, as visible to the user, are read and set using the textbox.value and menu
list.value syntax.
... methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributeno...
member - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
menubar - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements menu, menuitem, menu
list, menupopup, menuseparator interfaces nsiaccessibleprovider ...
page - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
param - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
popupset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements popup, menupopup ...
preferences - Archive of obsolete content
void observe(in nsisupports asubject, in string atopic, in wstring adata); nsiobserver method used internally to react to changes to preferences
listed as children of this element.
... inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setat...
query - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
queryset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
resizer - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
row - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, column, rows.
rows - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, column, row.
rule - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
script - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollbar - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollbox - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollcorner - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
separator - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
spacer - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements separator, splitter ...
spinbuttons - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
splitter - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
stack - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related deck ...
statusbar - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements statusbarpanel interfaces nsiaccessibleprovider ...
stringbundleset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
tabpanel - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tabbox, tabs, tab, tabpanels.
tabpanels - Archive of obsolete content
methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tabbox, tabs, tab, tabpanel.
template - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
textnode - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
timepicker - Archive of obsolete content
methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement ...
titlebar - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
toolbargrippy - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarseparator - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarset - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarspacer, toolbox ...
toolbarspacer - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarspring - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbox interfaces nsiaccessibleprovider ...
treechildren - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata example <tree flex="1"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label=...
treecols - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecol, treechildren, treeitem, treerow, treecell and treeseparator.
treeitem - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treerow, treecell and treeseparator.
triple - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
vbox - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, hbox ...
where - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addevent
listener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeevent
listener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
Element.attributes - Web APIs
<!doctype html> <html> <head> <title>attributes example</title> <script type="text/javascript"> function
listattributes() { var paragraph = document.getelementbyid("paragraph"); var result = document.getelementbyid("result"); // first, let's verify that the paragraph has some attributes if (paragraph.hasattributes()) { var attrs = paragraph.attributes; var output = ""; for(var i = attrs.length - 1; i >= 0; i--) { output += attrs[i].name + "->" + attrs[i]...
....value; } result.value = output; } else { result.value = "no attributes to show"; } } </script> </head> <body> <p id="paragraph" style="color: green;">sample paragraph</p> <form action=""> <p> <input type="button" value="show first attribute name and value" onclick="
listattributes();"> <input id="result" type="text" value=""> </p> </form> </body> </html> specifications specification status comment domthe definition of 'element.attributes' in that specification.
Element: blur event - Web APIs
lable no interface focusevent event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addevent
listener('focus', (event) => { event.target.style.background = 'pink'; }); password.addevent
listener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addevent
listener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addevent
listener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addevent
listener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element.closest() - Web APIs
syntax var closestelement = targetelement.closest(selectors); parameters selectors is a domstring containing a selector
list.
... exceptions syntaxerror is thrown if the selectors is not a valid selector
list string.
Element: compositionend event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addevent
listener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea rea...
...-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addevent
listener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addevent
listener('compositionstart', handleevent); inputelement.addevent
listener('compositionupdate', handleevent); inputelement.addevent
listener('compositionend', handleevent); result specifications specificatio...
Element: compositionstart event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addevent
listener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea r...
...-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addevent
listener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addevent
listener('compositionstart', handleevent); inputelement.addevent
listener('compositionupdate', handleevent); inputelement.addevent
listener('compositionend', handleevent); result specifications specificatio...
Element: compositionupdate event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addevent
listener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea ...
...-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addevent
listener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addevent
listener('compositionstart', handleevent); inputelement.addevent
listener('compositionupdate', handleevent); inputelement.addevent
listener('compositionend', handleevent); result specifications specificatio...
Element: focus event - Web APIs
able no interface focusevent event handler property onfocus sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addevent
listener('focus', (event) => { event.target.style.background = 'pink'; }); password.addevent
listener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addevent
listener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addevent
listener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addevent
listener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element: fullscreenchange event - Web APIs
html <h1>fullscreenchange event example</h1> <div id="fullscreen-div"> <button id="toggle-fullscreen">toggle fullscreen mode</button> </div> javascript document.getelementbyid('fullscreen-div').addevent
listener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one.
... if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id} entered fullscreen mode.`); } else { console.log('leaving full-screen mode.'); } }); document.getelementbyid('toggle-fullscreen').addevent
listener('click', (event) => { if (document.fullscreenelement) { // exitfullscreen is only available on the document object.
Element.getElementsByTagName() - Web APIs
the returned
list is live, which means it updates itself with the dom tree automatically.
... living standard changed the return value from node
list to htmlcollection document object model (dom) level 3 core specificationthe definition of 'element.getelementsbytagname()' in that specification.
Element.insertAdjacentElement() - Web APIs
example beforebtn.addevent
listener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('beforebegin',tempdiv); } set
listener(tempdiv); }); afterbtn.addevent
listener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) {...
... activeelem.insertadjacentelement('afterend',tempdiv); } set
listener(tempdiv); }); have a look at our insertadjacentelement.html demo on github (see the source code too.) here we have a sequence of <div> elements inside a container.
Element: keydown event - Web APIs
to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addevent
listener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addevent
listener keydown example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element.
... <input placeholder="click here, then press down a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addevent
listener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent input.onkeydown = logkey; specifications specification status ui events working draft ...
Element: keypress event - Web APIs
interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addevent
listener keypress example this example logs the keyboardevent.code value whenever you press a key after focussing the <input> element.
... <div> <label for="sample">focus the input and type something:</label> <input type="text" name="text" id="sample"> </div> <p id="log"></p> const log = document.getelementbyid('log'); const input = document.queryselector('input'); input.addevent
listener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent input.onkeypress = logkey; specifications specification status ui events working draft ...
Element: keyup event - Web APIs
to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addevent
listener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addevent
listener keyup example this example logs the keyboardevent.code value whenever you release a key inside the <input> element.
... <input placeholder="click here, then press and release a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addevent
listener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specifications specification status ui events working draft ...
Element.requestFullscreen() - Web APIs
to learn when other code has toggled full-screen mode on and off, you should establish
listeners for the fullscreenchange event on the document.
... it's also important to
listen for fullscreenchange to be aware when, for example, the user manually toggles full-screen mode, or when the user switches applications, causing your application to temporarily exit full-screen mode.
Element.setCapture() - Web APIs
<html> <head> <title>mouse capture example</title> <style type="text/css"> #mybutton { border: solid black 1px; color: black; padding: 2px; box-shadow: black 2px 2px; } </style> <script type="text/javascript"> function init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.addevent
listener("mousedown", mousedown, false); btn.addevent
listener("mouseup", mouseup, false); } else { document.getelementbyid("output").innerhtml = "sorry, there appears to be no setcapture support on this browser"; } } function mousedown(e) { e.target.setcapture(); e.target.addevent
listener("mousemove", mousemoved, false); } function mo...
...useup(e) { e.target.removeevent
listener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.
History.back() - Web APIs
add a
listener for the popstate event in order to determine when the navigation has completed.
... html <button id="go-back">go back!</button> javascript document.getelementbyid('go-back').addevent
listener('click', () => { history.back(); }); specifications specification status comment html living standardthe definition of 'history.back()' in that specification.
History.forward() - Web APIs
add a
listener for the popstate event in order to determine when the navigation has completed.
... html <button id='go-forward'>go forward!</button> javascript document.getelementbyid('go-forward').addevent
listener('click', e => { window.history.forward(); }) specifications specification status comment html living standardthe definition of 'history' in that specification.
Ajax navigation example - Web APIs
jsxgmlwzpeaach5bakkaaaalaaaaaaqabaaaamyclrc/jdksatlqtsckdcecajdii7hcq4emtcpyrcuubjcyrghvtqlaib1yhicnlsrkaaaowaaaaaaaaaaaa=="; ocover.appendchild(oloadingimg); oloadingbox.appendchild(ocover); onpopstate = function (oevent) { bupdateurl = false; opageinfo.title = oevent.state.title; opageinfo.url = oevent.state.url; getpage(); }; window.addevent
listener ?
... addevent
listener("load", init, false) : window.attachevent ?
IDBCursor.advance() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function advanceresult() {
list.innerhtml = ''; var transaction = db.transaction(['rushalbum
list'], "readonly"); var objectstore = transaction.objectstore('rushalbum
list'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
listitem = document.createelement('li');
listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.v...
...alue.year;
list.appendchild(
listitem); cursor.advance(2); } else { console.log('every other entry displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'advance()' in that specification.
IDBCursor.continuePrimaryKey() - Web APIs
example here’s how you can resume an iteration of all articles tagged with "javascript" since your last visit: let request = articlestore.index("tag").opencursor(); let count = 0; let unread
list = []; request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.primarykey); // preload 5 articles ...
...into the unread
list; unread
list.push(cursor.value); if (++count < 5) { cursor.continue(); } }; specifications specification status comment indexed database api draftthe definition of 'continueprimarykey()' in that specification.
IDBCursor.delete() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function deleteresult() {
list.innerhtml = ''; var transaction = db.transaction(['rushalbum
list'], 'readwrite'); var objectstore = transaction.objectstore('rushalbum
list'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { if(cursor.value.albumtitle === 'grace under pressure') { var request = cursor.delete(); request.onsuccess = function()...
...even power windows is better.'); }; } else { var
listitem = document.createelement('li');
listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year;
list.appendchild(
listitem); } cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'delete()' in that specification.
IDBCursor.direction - Web APIs
for a complete working example, see our idbcursor example (view example live.) function backwards() {
list.innerhtml = ''; var transaction = db.transaction(['rushalbum
list'], 'readonly'); var objectstore = transaction.objectstore('rushalbum
list'); objectstore.opencursor(null,'prev').onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
listitem = document.createelement('li');
listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</stro...
...ng>, ' + cursor.value.year;
list.appendchild(
listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed backwards.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'direction' in that specification.
IDBCursor.request - Web APIs
for example: function displaydata() {
list.innerhtml = ''; var transaction = db.transaction(['rushalbum
list'], 'readonly'); var objectstore = transaction.objectstore('rushalbum
list'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
listitem = document.createelement('li');
listitem.innerhtml = '<strong>' + cursor.value.album...
...title + '</strong>, ' + cursor.value.year;
list.appendchild(
listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api draftthe definition of 'request' in that specification.
IDBCursor.source - Web APIs
within each iteration we log the source of the cursor, which will log our idbobjectstore object to the console, something like this: idbobjectstore {autoincrement: false, transaction: idbtransaction, indexnames: domstring
list, keypath: "albumtitle", name: "rushalbum
list"…} the cursor does not require us to select the data based on a key; we can just grab all of it.
...for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbum
list'], "readonly"); var objectstore = transaction.objectstore('rushalbum
list'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
listitem = document.createelement('li');
listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year;
list.appendchild(
listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications ...
IDBCursor.update() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function updateresult() {
list.innerhtml = ''; const transaction = db.transaction(['rushalbum
list'], 'readwrite'); const objectstore = transaction.objectstore('rushalbum
list'); objectstore.opencursor().onsuccess = function(event) { const cursor = event.target.result; if (cursor) { if (cursor.value.albumtitle === 'a farewell to kings') { const updatedata = cursor.value; updatedata.year = 20...
...50; const request = cursor.update(updatedata); request.onsuccess = function() { console.log('a better album year?'); }; }; const
listitem = document.createelement('li');
listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year;
list.appendchild(
listitem); cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'update()' in that specification.
IDBDatabase: close event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples this example opens a database and
listens for the close event: // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('...
...hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addevent
listener('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose property instead of addevent
listener(): // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list...
IDBDatabase.createObjectStore() - Web APIs
example // let us open our database var request = window.indexeddb.open("todo
list", 4); // this handler is called when a new version of the database // is created, either when one has not been created before // or when a new version number is submitted by calling // window.indexeddb.open().
...request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; // create an objectstore for this database var objectstore = db.createobjectstore("todo
list", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); ...
IDBDatabase.name - Web APIs
// let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // this line will log the name of the database, which should be "todo
list" console.log(db.name); }; specifications specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBDatabase: versionchange event - Web APIs
bubbles no cancelable no interface event event handler property onversionchange examples this example opens a database and, on success, adds a
listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list', { 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.addevent
listener('success', event => { const db = event.target.result; db.addevent
listener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todo
list', { keypath: 'taskti...
databases - Web APIs
the databases method of the idbfactory interface returns a
list represening all the available databases, including their names and versions.
... return value a promise that resolves either to an error or a
list of dictionaries, each with two elements, name and version.
IDBFactory.open() - Web APIs
example example of calling open with the current specification's version parameter: var request = window.indexeddb.open("todo
list", 4); in the following code snippet, we make a request to open a database, and include handlers for the success and error cases.
... to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't // need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todo
list", 4); // these two event handlers act on the database being opened // successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
IDBFactory - Web APIs
idbfactory.databases a method that returns a
list of all available databases, including their names and versions.
...nces to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todo
list", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { console.error("error loading database."); }; dbopenrequest.onsuccess = function(event) { console.info("database initialised."); // store the result of opening the database in the db variable.
IDBIndex.objectStore - Web APIs
the current object store is logged to the console: it should be returned something like this: idbobjectstore { name: "contacts
list", keypath: "id", indexnames: domstring
list[7], transaction: idbtransaction, autoincrement: false } finally, we iterate through each record, and insert the data into an html table.
... for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contacts
list'], 'readonly'); var objectstore = transaction.objectstore('contacts
list'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.openKeyCursor() - Web APIs
this makes obtaining a
list of keys much more efficient.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contacts
list'], 'readonly'); var objectstore = transaction.objectstore('contacts
list'); var myindex = objectstore.index('lname'); myindex.openkeycursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.key + '</td>' + '<td>' + cursor.primarykey...
IDBObjectStore.clear() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // clear all the data form the object store cleardata(); }; function cleardata() { // open a read/write db transaction, ready for clearing the data var transaction = db.transaction(["todo
list"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); // make a request to clear all the data out of the object store var objectstorer...
IDBObjectStore.delete() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // run the deletedata() function to delete a record from the database deletedata(); }; function deletedata() { // open a read/write db transaction, ready for deleting the data var transaction = db.transaction(["todo
list"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); // make a request to delete the specified record out of the...
IDBObjectStore.deleteIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = this.result; // run the displaydata() function to populate the task
list with all the to-do
list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todo
list", { keypath: "tasktitle" }); // define what data items the objectstore will contain ...
IDBObjectStore.get() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the getdata() function to get the data from the database getdata(); }; function getdata() { // open a read/write db transaction, ready for retrieving the data var transaction = db.transaction(["todo
list"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todo
list"); // make a request to get a record by key from the object store ...
IDBOpenDBRequest: upgradeneeded event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.addevent
listener('upgradeneeded', event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false })...
... // open the database const dbopenrequest = window.indexeddb.open('todo
list', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.
IDBRequest.error - Web APIs
the
list describes problems that could occur when the request is being executed, but you might also encounter other problems when the request is being made.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todo
list'], "readwrite").objectstore('todo
list'); // get the do-do
list with the specified title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request tha...
IDBRequest: success event - Web APIs
bubbles no cancelable no interface event event handler property onsuccess examples this example tries to open a database and
listens for the success event using addevent
listener(): // open the database const openrequest = window.indexeddb.open('todo
list', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('min...
...utes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addevent
listener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todo
list', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todo
list', { keypath: 'tasktitle' }); // define what data items the objectstore ...
IDBRequest - Web APIs
events
listen to these events using addevent
listener() or by assigning an event
listener to the oneventname property of this interface.
...for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todo
list", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database.
IDBTransaction.objectStoreNames - Web APIs
the objectstorenames read-only property of the idbtransaction interface returns a domstring
list of names of idbobjectstore objects.
... syntax var mydatabase = transactionobj.objectstorenames; returns a domstring
list of names of idbobjectstore objects.
IIRFilterNode.getFrequencyResponse() - Web APIs
ts, and grab a reference to it in our javascript: <p>iir filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable
list at the bottom of the page: var feedforwardcoefficients = [0.1, 0.2, 0.3, 0.4, 0.5]; var feedbackcoefficients = [0.5, 0.4, 0.3, 0.2, 0.1]; var iirfilter = audioctx.createiirfilter(feedforwardcoefficients, feedbackcoefficients); ...
... function calcfrequencyresponse() { iirfilter.getfrequencyresponse(myfrequencyarray, magresponseoutput, phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var
listitem = document.createelement('li');
listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(
listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification.
ImageCapture - Web APIs
methods the imagecapture interface is based on eventtarget, so it includes the methods defined by that interface as well as the ones
listed below.
...h.min(canvas.width / img.width, canvas.height / img.height); let x = (canvas.width - img.width * ratio) / 2; let y = (canvas.height - img.height * ratio) / 2; canvas.getcontext('2d').clearrect(0, 0, canvas.width, canvas.height); canvas.getcontext('2d').drawimage(img, 0, 0, img.width, img.height, x, y, img.width * ratio, img.height * ratio); } document.queryselector('video').addevent
listener('play', function() { document.queryselector('#grabframebutton').disabled = false; document.queryselector('#takephotobutton').disabled = false; }); specifications specification status comment mediastream image capturethe definition of 'imagecapture' in that specification.
Window: unhandledrejection event - Web APIs
window.addevent
listener("unhandledrejection", event => { console.warn(`unhandled promise rejection: ${event.reason}`); }); you can also use the onunhandledrejection event handler property to set up the event
listener: window.onunhandledrejection = event => { console.warn(`unhandled promise rejection: ${event.reason}`); }; preventing default handling many environments (such as node.js) report unhandled prom...
... window.addevent
listener('unhandledrejection', function (event) { // ...your code here to handle the unhandled rejection...
Window: unload event - Web APIs
examples <!doctype html> <html> <head> <title>parent frame</title> <script> window.addevent
listener('beforeunload', function(event) { console.log('i am the 1st one.'); }); window.addevent
listener('unload', function(event) { console.log('i am the 3rd one.'); }); </script> </head> <body> <iframe src="child-frame.html"></iframe> </body> </html> below, the content of child-frame.html: <!doctype html> <html> <head> <title>child frame</title...
...> <script> window.addevent
listener('beforeunload', function(event) { console.log('i am the 2nd one.'); }); window.addevent
listener('unload', function(event) { console.log('i am the 4th and last one…'); }); </script> </head> <body> ☻ </body> </html> when the parent frame is unloaded, events will be fired in the order described by the console.log() messages.
WindowEventHandlers.onbeforeprint - Web APIs
syntax window.addevent
listener("beforeprint", function(event) { ...
... var mediaquery
list = window.matchmedia('print'); mediaquery
list.add
listener(function(mql) { if(mql.matches) { console.log('webkit equivalent of onbeforeprint'); } }); specification specification status comment html living standardthe definition of 'onbeforeprint' in that specification.
WindowEventHandlers.onunload - Web APIs
syntax window.addevent
listener("unload", function(event) { ...
...}; typically, it is better to use window.addevent
listener() and the unload event, instead of onunload.
Worker - Web APIs
event handlers abstractworker.onerror an event
listener called whenever an errorevent of type error bubbles through to the worker.
... worker.onmessage an event
listener called whenever a messageevent of type message bubbles through the worker — i.e.
WorkerGlobalScope.self - Web APIs
this provides a full
list of the objects available to that worker scope, so it is quite a useful test if you want to see whether something is available to your worker or not.
... we also maintain a
list of functions and classes available to web workers.
WritableStream.WritableStream() - Web APIs
const
list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var
listitem = document.createelement('li');
listitem.textcontent = "chunk decoded: " + decoded;
list.appendchild(
listitem); result += decoded; resolve(); }); }, close() { var
listitem = document.createelement('li');
listitem.textcontent = "[message received] " + result;
list.appendchild(
listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStream.getWriter() - Web APIs
const
list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var
listitem = document.createelement('li');
listitem.textcontent = "chunk decoded: " + decoded;
list.appendchild(
listitem); result += decoded; resolve(); }); }, close() { var
listitem = document.createelement('li');
listitem.textcontent = "[message received] " + result;
list.appendchild(
listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStream - Web APIs
const
list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var
listitem = document.createelement('li');
listitem.textcontent = "chunk decoded: " + decoded;
list.appendchild(
listitem); result += decoded; resolve(); }); }, close() { var
listitem = document.createelement('li');
listitem.textcontent = "[message received] " + result;
list.appendchild(
listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
const
list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var
listitem = document.createelement('li');
listitem.textcontent = "chunk decoded: " + decoded;
list.appendchild(
listitem); result += decoded; resolve(); }); }, close() { var
listitem = document.createelement('li');
listitem.textcontent = "[message received] " + result;
list.appendchild(
listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStreamDefaultWriter.close() - Web APIs
const
list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var
listitem = document.createelement('li');
listitem.textcontent = "chunk decoded: " + decoded;
list.appendchild(
listitem); result += decoded; resolve(); }); }, close() { var
listitem = document.createelement('li');
listitem.textcontent = "[message received] " + result;
list.appendchild(
listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStreamDefaultWriter.write() - Web APIs
const
list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var
listitem = document.createelement('li');
listitem.textcontent = "chunk decoded: " + decoded;
list.appendchild(
listitem); result += decoded; resolve(); }); }, close() { var
listitem = document.createelement('li');
listitem.textcontent = "[message received] " + result;
list.appendchild(
listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStreamDefaultWriter - Web APIs
const
list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwrit...
...t queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var
listitem = document.createelement('li');
listitem.textcontent = "chunk decoded: " + decoded;
list.appendchild(
listitem); result += decoded; resolve(); }); }, close() { var
listitem = document.createelement('li');
listitem.textcontent = "[message received] " + result;
list.appendchild(
listitem); }, abort(err) { console.log("sink error:", ...
XMLHttpRequest: abort event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function add
listeners(xhr) { xhr.addevent
listener('loadstart', handleevent); xhr.addevent
listener('load', handleevent); xhr.addevent
listener('loadend', handleevent); xhr.addevent
listener('progress', handleevent); xhr.addevent
listener('error', handleevent); xhr.addevent
listener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... add
listeners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addevent
listener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: error event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function add
listeners(xhr) { xhr.addevent
listener('loadstart', handleevent); xhr.addevent
listener('load', handleevent); xhr.addevent
listener('loadend', handleevent); xhr.addevent
listener('progress', handleevent); xhr.addevent
listener('error', handleevent); xhr.addevent
listener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... add
listeners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addevent
listener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: load event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function add
listeners(xhr) { xhr.addevent
listener('loadstart', handleevent); xhr.addevent
listener('load', handleevent); xhr.addevent
listener('loadend', handleevent); xhr.addevent
listener('progress', handleevent); xhr.addevent
listener('error', handleevent); xhr.addevent
listener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... add
listeners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addevent
listener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadend event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function add
listeners(xhr) { xhr.addevent
listener('loadstart', handleevent); xhr.addevent
listener('load', handleevent); xhr.addevent
listener('loadend', handleevent); xhr.addevent
listener('progress', handleevent); xhr.addevent
listener('error', handleevent); xhr.addevent
listener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... add
listeners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addevent
listener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadstart event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function add
listeners(xhr) { xhr.addevent
listener('loadstart', handleevent); xhr.addevent
listener('load', handleevent); xhr.addevent
listener('loadend', handleevent); xhr.addevent
listener('progress', handleevent); xhr.addevent
listener('error', handleevent); xhr.addevent
listener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... add
listeners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addevent
listener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: progress event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function add
listeners(xhr) { xhr.addevent
listener('loadstart', handleevent); xhr.addevent
listener('load', handleevent); xhr.addevent
listener('loadend', handleevent); xhr.addevent
listener('progress', handleevent); xhr.addevent
listener('error', handleevent); xhr.addevent
listener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... add
listeners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addevent
listener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addevent
listener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest.upload - Web APIs
it is an opaque object, but because it's also an xmlhttprequesteventtarget, event
listeners can be attached to track its process.
... the following events can be triggered on an upload object and used to monitor the upload: event event
listener description loadstart onloadstart the upload has begun.
XRBoundedReferenceSpace.boundsGeometry - Web APIs
additionally, the points must be
listed in clockwise order.
... each entry in boundsgeometry is equal to an entry in the
list of native bounds geometry points for the room, premultiplied by the inverse of the origin offset.
XRInputSourceEvent() - Web APIs
permitted values are
listed under event types below.
... xrsession.addevent
listener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourcesChangeEvent.added - Web APIs
the read-only xrinputsourceschangeevent property added is a
list of zero or more input sources, each identified using an xrinputsource object, which have been newly made available for use.
... examples the example below creates a handler for the inputsourceschange event that processes the
lists of added and removed from the webxr system.
XRInputSourcesChangeEvent.session - Web APIs
the xrinputsourceschangeevent property session specifies the xrsession to which the input source
list change event applies.
... syntax let inputssession = xrinputsourceschangeevent.session; value an xrsession indicating the webxr session to which the input source
list change applies.
XRInputSourcesChangeEventInit.added - Web APIs
the xrinputsourceschangeeventinit property added specifies a
list of input sources, each identified using an xrinputsource object, which the represented inputsourceschange event is to indicate are newly available for use.
...newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevice
list, removed: removeddevice
list }); value an array of zero or more xrinputsource objects, each representing one input device added to the xr system.
XRInputSourcesChangeEventInit.session - Web APIs
the xrinputsourceschangeeventinit property session specifies the xrsession to which the input source
list change event applies.
...newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevice
list, removed: removeddevice
list }); value an xrsession indicating the webxr session to which the input source
list change applies.
XRReferenceSpace - Web APIs
in addition to using addevent
listener(), you can establish a reset event handler by setting the onreset event handler property.
... reference space descriptors the types of reference space are
listed in the table below, with brief information about their use cases and which interface is used to implement them.
XRSession: inputsourceschange event - Web APIs
the received event, of type xrinputsourceschangeevent, contains a
list of any newly added and/or removed input devices.
... bubbles yes cancelable no interface xrinputsourceschangeevent event handler property oninputsourceschange the event object contains
lists of the newly-added and/or removed input devices in its added and removed properties.
XRSession.requestReferenceSpace() - Web APIs
reference space descriptors the types of reference space are
listed in the table below, with brief information about their use cases and which interface is used to implement them.
... exceptions rather than throwing true exceptions, requestreferencespace() rejects the returned promise with a domexception whose name is found in the
list below: notsupportederror the requested reference space is not supported.