Search completed in 1.41 seconds.
Document.createDocumentFragment() - Web APIs
creates a new empty
documentfragment into which dom nodes can be added to build an offscreen dom tree.
... syntax var fragment =
document.create
documentfragment(); value a newly created, empty,
documentfragment object, which is ready to have nodes inserted into it.
... usage notes
documentfragments are dom node objects which are never part of the main dom tree.
...And 6 more matches
DocumentTimeline.DocumentTimeline() - Web APIs
the
documenttimeline() constructor of the web animations api creates a new instance of the
documenttimeline object associated with the active
document of the current browsing context.
... syntax var sharedtimeline = new
documenttimeline(options); parameters options an object specifying options for the new timeline.
... currently the only supported option is the origintime member which specifies the zero time for the
documenttimeline as a real number of milliseconds relative to the navigationstart moment of the active
document for the current browsing context.
...And 2 more matches
Document.documentElement - Web APIs
document.
documentelement returns the element that is the root element of the
document (for example, the <html> element for html
documents).
... syntax const element =
document.
documentelement example const rootelement =
document.
documentelement; const firsttier = rootelement.childnodes; // firsttier is a nodelist of the direct children of the root element // such as <head> and <body> for (const child of firsttier) { // do something with each direct child of the root element } notes for any non-empty html
document,
documentelement will always be an <html> element.
... for any non-empty xml
document,
documentelement will always be whatever element is the root element of the
document.
... specifications specification status comment domthe definition of '
document.
documentelement' in that specification.
Document.mozSyntheticDocument - Web APIs
the
document.mozsynthetic
document property indicates whether or not the
document is a synthetic one; that is, a
document representing a standalone image, video, audio, or the like.
... syntax var issynthetic =
document.mozsynthetic
document; on return, issynthetic is true if the
document is a synthetic one; otherwise it's false.
... example this can be useful if you have a contextual menu item you only want to display for synthetic
documents (or, conversely, for
documents that aren't synthetic).
... var issynthetic =
document.mozsynthetic
document; if (issynthetic) { /* insert your menu item here */ } specifications not part of any specification.
Document.documentURI - Web APIs
the
documenturi read-only property of the
document interface returns the
document location as a string.
... syntax const uri =
document.
documenturi example javascript
document.getelementbyid("url").textcontent =
document.
documenturi; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p> result specifications specification status comment domthe definition of '
documenturi' in that specification.
Document.documentURIObject - Web APIs
the
document.
documenturiobject read-only property returns an nsiuri object representing the uri of the
document.
... syntax var uri =
document.
documenturiobject; example // check that the uri scheme of the current tab in firefox is 'http', // assuming this code runs in context of browser.xul let uriobj = content.
document.
documenturiobject; let uriport = uriobj.port; if (uriobj.schemeis('http')) { ...
Document - Web APIs
the
document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the dom tree.
...it provides functionality globally to the
document, like how to obtain the page's url and create new elements in the
document.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the
document interface describes the co...
...And 168 more matches
HTML documentation index - HTML: Hypertext Markup Language
classes allow css and javascript to select and access specific elements via the class selectors or functions like the dom method
document.getelementsbyclassname.
... 18 id global attributes, html, reference, web, id the id global attribute defines an identifier (id) which must be unique in the whole
document.
... 47 html attribute: rel attribute, attributes, constraint validation, link, form, rel the rel attribute defines the relationship between a linked resource and the current
document.
...And 37 more matches
Manipulating documents - Learn web development
previous overview: client-side web apis next when writing web pages and apps, one of the most common things you'll want to do is manipulate the
document structure in some way.
... this is usually done by using the
document object model (dom), a set of apis for controlling html and styling information that makes heavy use of the
document object.
... objective: to gain familiarity with the core dom apis, and the other apis commonly associated with dom and
document manipulation the important parts of a web browser web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using javascript.
...And 26 more matches
Document Object Model - Archive of obsolete content
« previousnext » the
document object model (dom) can be used with xul elements to get information about them or modify them.
... dom introduction the
document object model (dom) is used to store the tree of xul nodes.
... when an xul file is loaded, the tags are parsed and converted into a hierarchical
document structure of nodes, one for each tag and block of text.
...And 23 more matches
Commenting IDL for better documentation
doxygen is a system of generating
documentation from source code.
... the
documentation team has tools that convert comments from the doxygen format into the standard reference article format we use here on mdn, with certain limitations.
... this article will help you understand how you can format your comments to help ensure that the conversion process can be automated as much as possible in order to ensure that your interface gets properly
documented.
...And 23 more matches
DocumentFragment - Web APIs
the
documentfragment interface represents a minimal
document object that has no parent.
... it is used as a lightweight version of
document that stores a segment of a
document structure comprised of nodes just like a standard
document.
... the key difference is due to the fact that the
document fragment isn't part of the active
document tree structure.
...And 21 more matches
Document.evaluate() - Web APIs
syntax var xpathresult =
document.evaluate( xpathexpression, contextnode, namespaceresolver, resulttype, result ); xpathexpression is a string representing the xpath to be evaluated.
...it's common to pass
document as the context node.
...it will be used to resolve prefixes within the xpath itself, so that they can be matched with the
document.
...And 19 more matches
Accessibility documentation index - Accessibility
this
document provides a list of links to all accessibility articles on the mozilla developer network.
... 5 aria annotations aria, accessibility, wai-aria, annotations, comments, details, suggestions wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web
documents.
...an addition and/or deletion in an editable
document), and comments (e.g.
...And 18 more matches
SVG documentation index - SVG: Scalable Vector Graphics
when svg
documents are embedded within a parent html
document using the tag: 6 namespaces crash course svg, xml as an xml dialect, svg is namespaced.
... 49 contentscripttype deprecated, svg, svg attribute the contentscripttype attribute specifies the default scripting language for the given
document fragment on the <svg> element.
... 50 contentstyletype deprecated, svg, svg attribute the contentstyletype attribute specifies the style sheet language for the given
document fragment on the <svg> element.
...And 15 more matches
nsIAccessibleDocument
accessible/public/nsiaccessible
document.idlscriptable an interface for in-process accessibility clients that wish to retrieve information about a
document.
... when accessibility is turned on in gecko, there is an nsiaccessible
document for each
document whether it is xul, html or whatever.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) you can queryinterface to nsiaccessible
document from the nsiaccessible or nsiaccessnode for the root node of a
document.
...And 14 more matches
<body>: The Document Body element - HTML: Hypertext Markup Language
the html <body> element represents the content of an html
document.
... there can be only one <body> element in a
document.
... implicit aria role
document permitted aria roles no role permitted dom interface htmlbodyelement the <body> element exposes the htmlbodyelement interface.
...And 14 more matches
Archived Mozilla and build documentation - Archive of obsolete content
these articles are archived, obsolete
documents about mozilla, gecko, and the process of building mozilla projects.
... ant script to assemble an extension this ant script helps to package an extension archived spidermonkey docs this section contains old spidermonkey
documentation.
... autodial for windows nt this
document is intended to explain how the autodial helper feature implemented for bug 93002 works and why it works that way.
...And 13 more matches
Document.getElementById() - Web APIs
the
document method getelementbyid() returns an element object representing the element whose id property matches the specified string.
... syntax var element =
document.getelementbyid(id); parameters id the id of the element to locate.
... the id is case-sensitive string which is unique within the
document; only one element may have any given id.
...And 13 more matches
Document.open() - Web APIs
the
document.open() method opens a
document for writing.
...for example: all event listeners currently registered on the
document, nodes inside the
document, or the
document's window are removed.
... all existing nodes are removed from the
document.
...And 13 more matches
Document.write() - Web APIs
the
document.write() method writes a string of text to a
document stream opened by
document.open().
... note: because
document.write() writes to the
document stream, calling
document.write() on a closed (loaded)
document automatically calls
document.open(), which will clear the
document.
... syntax
document.write(markup); parameters markup a string containing the text to be written to the
document.
...And 13 more matches
DocumentOrShadowRoot - Web APIs
the
documentorshadowroot mixin of the shadow dom api provides apis that are shared between
documents and shadow roots.
... the following features are included in both
document and shadowroot.
... properties
documentorshadowroot.activeelementread only returns the element within the shadow tree that has focus.
...And 12 more matches
ARIA: document role - Accessibility
generally used in complex composite widgets or applications, the
document role can inform assistive technologies to switch context to a reading mode: the
document role tells assistive technologies with reading or browse modes to use the
document mode to read the content contained within this element.
... <div id="infotext" role="
document" tabindex="0"> <p>some informational text goes here.</p> </div> ...
... description by default, web pages are treated as
documents; assistive technologies (at) enter browse or read mode when entering a new web page.
...And 12 more matches
nsIDOMNSHTMLDocument
dom/interfaces/html/nsidomnshtml
document.idlscriptable this interface defines methods and properties supported by gecko on the
document object that are not part of dom level 2.
...rts last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring getselection(); nsidom
document open(in acstring acontenttype, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); boolean querycommandstate(in domstring commandid); boolean querycommandsupported(in domstring commandid); domstring querycommandtext(in domstring commandid); obsolete since gecko 14.0 d...
...ts(in long eventflags); void routeevent(in nsidomevent evt); void write(); obsolete since gecko 2.0 void writeln(); obsolete since gecko 2.0 attributes attribute type description alinkcolor domstring same as body.alink bgcolor domstring same as body.bgcolor compatmode domstring returns "backcompat" if the
document is in quirks mode or "css1compat" if the
document is in full standards or almost standards mode.
...And 10 more matches
Document.cookie - Web APIs
the
document property cookie lets you read and write cookies associated with the
document.
... syntax read all cookies accessible from this location allcookies =
document.cookie; in the code above allcookies is a string containing a semicolon-separated list of all cookies (i.e.
... write a new cookie
document.cookie = newcookie; in the code above, newcookie is a string of form key=value.
...And 10 more matches
DocumentType - Web APIs
the
documenttype interface represents a node containing a doctype.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
documenttype</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits propertie...
...
documenttype.entities read only a namednodemap of entities declared in the dtd.
...And 10 more matches
Document.getElementsByTagName() - Web APIs
the getelementsbytagname method of
document interface returns an htmlcollection of elements with the given tag name.
... the complete
document is searched, including the root node.
... the returned htmlcollection is live, meaning that it updates itself automatically to stay in sync with the dom tree without having to call
document.getelementsbytagname() again.
...And 9 more matches
Document.readyState - Web APIs
the
document.readystate property describes the loading state of the
document.
... when the value of this property changes, a readystatechange event fires on the
document object.
... syntax var string =
document.readystate; values the readystate of a
document can be one of following: loading the
document is still loading.
...And 9 more matches
DOMImplementation.createHTMLDocument() - Web APIs
the domimplementation.createhtml
document() method creates a new html
document.
... syntax const newdoc =
document.implementation.createhtml
document(title) parameters title optional (except in ie) a domstring containing the title to give the new html
document.
... example this example creates a new html
document and inserts it into an <iframe> in the current
document.
...And 8 more matches
Document.createTreeWalker() - Web APIs
the
document.createtreewalker() creator method returns a newly created treewalker object.
... syntax
document.createtreewalker(root, whattoshow[, filter[, entityreferenceexpansion]]); parameters root a root node of this treewalker traversal.
... typically this will be an element owned by the
document.
...And 8 more matches
Document.importNode() - Web APIs
the
document object's importnode() method creates a copy of a node or
documentfragment from another
document, to be inserted into the current
document later.
... the imported node is not yet included in the
document tree.
... to include it, you need to call an insertion method such as appendchild() or insertbefore() with a node that is currently in the
document tree.
...And 8 more matches
Document.title - Web APIs
the
document.title property gets or sets the current title of the
document.
... syntax var doctitle =
document.title; doctitle is a string containing the
document's title.
... if the title was overridden by setting
document.title, it contains that value.
...And 8 more matches
@document - CSS: Cascading Style Sheets
the @
document css at-rule restricts the style rules contained within it based on the url of the
document.
... @
document url("https://www.example.com/") { h1 { color: green; } } syntax an @
document rule can specify one or more matching functions.
... url-prefix(), which matches if the
document url starts with the value provided.
...And 8 more matches
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
however when an xhtml page is served with mime type text/xml or application/xhtml+xml, then it should be treated as an xml
document which must conform to the strict rules for authoring and displaying xml.
... internet explorer 5.5+ can not display the
document.
... (see talk:properly_using_css_and_javascript_in_xhtml_
documents of this ascertation.
...And 7 more matches
DOMImplementation.createDocument() - Web APIs
the domimplementation.create
document() method creates and returns an xml
document.
... syntax var doc =
document.implementation.create
document(namespaceuri, qualifiednamestr,
documenttype); parameters namespaceuri is a domstring containing the namespace uri of the
document to be created, or null if the
document doesn't belong to one.
... qualifiednamestr is a domstring containing the qualified name, that is an optional prefix and colon plus the local root element name, of the
document to be created.
...And 6 more matches
Document.adoptNode() - Web APIs
document.adoptnode() transfers a node from another
document into the method's
document.
... the adopted node and its subtree is removed from its original
document (if any), and its owner
document is changed to the current
document.
... the node can then be inserted into the current
document.
...And 6 more matches
Document.createNodeIterator() - Web APIs
syntax const nodeiterator =
document.createnodeiterator(root[, whattoshow[, filter]]); values root the root node at which to begin the nodeiterator's traversal.
...since attributes are never children of other nodes, they do not appear when traversing over the
document tree.
... nodefilter.show_
document 256 shows
document nodes.
...And 6 more matches
Document.getElementsByClassName() - Web APIs
the getelementsbyclassname method of
document interface returns an array-like object of all child elements which have all of the given class name(s).
... when called on the
document object, the complete
document is searched, including the root node.
... syntax var elements =
document.getelementsbyclassname(names); // or: var elements = rootelement.getelementsbyclassname(names); elements is a live htmlcollection of found elements.
...And 6 more matches
Document.querySelector() - Web APIs
the
document method queryselector() returns the first element within the
document that matches the specified selector, or group of selectors.
... note: the matching is done using depth-first pre-order traversal of the
document's nodes starting with the first element in the
document's markup and iterating through sequential nodes by order of the number of child nodes.
... syntax element =
document.queryselector(selectors); parameters selectors a domstring containing one or more selectors to match.
...And 6 more matches
Document.visibilityState - Web APIs
the
document.visibilitystate read-only property returns the visibility of the
document, that is in which context this element is now visible.
... it is useful to know if the
document is in the background or an invisible tab, or only loaded for pre-rendering.
...in practice this means that the
document is either a background tab or part of a minimized window, or the os screen lock is active.
...And 6 more matches
Document Object Model (DOM) - Web APIs
the
document object model (dom) connects web pages to scripts or programming languages by representing the structure of a
document—such as the html representing a web page—in memory.
... usually, that means javascript, although modeling html, svg, or xml
documents as objects are not part of the core javascript language, as such.
... the dom represents a
document with a logical tree.
...And 6 more matches
Archived open Web documentation - Archive of obsolete content
the
documentation listed below is archived, obsolete material about open web topics.
...it does this by providing access to the xml
document in a form that feels natural for ecmascript programmers.
... the goal is to provide an alternative, simpler syntax for accessing xml
documents than via dom interfaces.
...And 5 more matches
Document.lastModified - Web APIs
the lastmodified property of the
document interface returns a string containing the date and time on which the current
document was last modified.
... syntax var string =
document.lastmodified; examples simple usage this example alerts the value of lastmodified.
... alert(
document.lastmodified); // returns: tuesday, december 16, 2017 11:09:42 transforming lastmodified into a date object this example transforms lastmodified into a date object.
...And 5 more matches
Document.requestStorageAccess() - Web APIs
the requeststorageaccess() method of the
document interface returns a promise that resolves if the access to first-party storage was granted, and rejects if access was denied.
... conditions for granting storage access storage access is granted based on a series of checks described here: if the
document already has been granted access, resolve.
... if the
document has a null origin, reject.
...And 5 more matches
HTMLDocument - Web APIs
the html
document interface, which may be accessed through the window.html
document property, extends the window.html
document property to include methods and properties that are specific to html
documents.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="2...
...5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
document" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of web development, you can generally think of html
document as an alias for
document, upon which html
document is based.
...And 5 more matches
Mozilla Documentation Roadmap - Archive of obsolete content
« previousnext » mozilla
documentation firefox extension development is still an immature discipline, with a developer base consisting mostly of hobbyists and just a few organized development groups.
... there's a great deal of free online
documentation available on xul and extension development, but finding it and turning it into useful information can be a daunting task.
...and finally, what we mentioned in our xpcom section: almost no
documentation on xpcom components.
...And 4 more matches
Document.body - Web APIs
the
document.body property represents the <body> or <frameset> node of the current
document, or null if no such element exists.
... syntax const objref =
document.body
document.body = objref example // given this html: <body id="oldbodyelement"></body> alert(
document.body.id); // "oldbodyelement" const anewbodyelement =
document.createelement("body"); anewbodyelement.id = "newbodyelement";
document.body = anewbodyelement; alert(
document.body.id); // "newbodyelement" notes
document.body is the element that contains the content for the
document.
... in
documents with <body> contents, returns the <body> element, and in frameset
documents, this returns the outermost <frameset> element.
...And 4 more matches
Document.createElement() - Web APIs
in an html
document, the
document.createelement() method creates the html element specified by tagname, or an htmlunknownelement if tagname isn't recognized.
... syntax let element =
document.createelement(tagname[, options]); parameters tagname a string that specifies the type of element to be created.
...when called on an html
document, createelement() converts tagname to lower case before creating the element.
...And 4 more matches
Document.doctype - Web APIs
returns the
document type declaration (dtd) associated with current
document.
... the returned object implements the
documenttype interface.
... use domimplementation.create
documenttype() to create a
documenttype.
...And 4 more matches
Document.getElementsByTagNameNS() - Web APIs
the complete
document is searched, including the root node.
... syntax elements =
document.getelementsbytagnamens(namespace, name) elements is a live nodelist (but see the note below) of found elements in the order they appear in the tree.
... note that when the node on which getelementsbytagname is invoked is not the
document node, in fact the element.getelementsbytagnamens method is used.
...And 4 more matches
Document.hasFocus() - Web APIs
the hasfocus() method of the
document interface returns a boolean value indicating whether the
document or any element inside the
document has focus.
... this method can be used to determine whether the active element in a
document has focus.
... when viewing a
document, an element with focus is always the active element in the
document, but an active element does not necessarily have focus.
...And 4 more matches
Document.location - Web APIs
the
document.location read-only property returns a location object, which contains information about the url of the
document and provides methods for changing that url and loading another url.
... though
document.location is a read-only location object, you can also assign a domstring to it.
... this means that you can work with
document.location as if it were a string in most cases:
document.location = 'http://www.example.com' is a synonym of
document.location.href = 'http://www.example.com'.
...And 4 more matches
Document.timeline - Web APIs
the timeline readonly property of the
document interface represents the default timeline of the current
document.
... this timeline is a special instance of
documenttimeline that is automatically created on page load.
... this timeline is unique to each
document and persists for the lifetime of the
document including calls to
document.open().
...And 4 more matches
Document.writeln() - Web APIs
writes a string of text followed by a newline character to a
document.
... syntax
document.writeln(line); parameters line is string containing a line of text.
... example
document.writeln("<p>enter password:</p>"); notes
document.writeln is the same as
document.write but adds a newline.
...And 4 more matches
DocumentFragment.querySelector() - Web APIs
the
documentfragment.queryselector() method returns the first element, or null if no matches are found, within the
documentfragment (using depth-first pre-order traversal of the
document's nodes) that matches the specified group of selectors.
... if the selector matches an id and this id is erroneously used several times in the
document, it returns the first matching element.
... syntax element =
documentfragment.queryselector(selectors); parameters selectors is a domstring containing one or more css selectors separated by commas.
...And 4 more matches
DocumentOrShadowRoot.elementFromPoint() - Web APIs
the elementfrompoint() method—available on both the
document and shadowroot objects—returns the topmost element at the specified coordinates (relative to the viewport).
... if the element at the specified point belongs to another
document (for example, the
document of an <iframe>), that
document's parent element is returned (the <iframe> itself).
... if the method is run on another
document (like an <iframe>'s sub
document), the coordinates are relative to the
document where the method is being called.
...And 4 more matches
XMLDocument - Web APIs
the xml
document interface represents an xml
document.
... it inherits from the generic
document and does not add any specific methods or properties to it: nevertheless, several algorithms behave differently with the two types of
documents.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="2...
...And 4 more matches
Feature-Policy: document-domain - HTTP
the http feature-policy header
document-domain directive controls whether the current
document is allowed to set
document.domain.
... when this policy is enabled, attempting to set
document.domain will fail and cause a securityerror domexception to be be thrown.
... syntax feature-policy:
document-domain <allowlist>; <allowlist> an allowlist 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 4 more matches
document - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the
document finds a node-set in an external
document, or multiple external
documents, and returns the resulting node-set.
... syntax
document(uri [,node-set] ) arguments uri an absolute or relative uri of the
document to be retrieved.
... node-set (optional) an expression pointing to a node-set in the external
document that should be returned.
...And 4 more matches
nsIDocumentLoader
uriloader/base/nsi
documentloader.idlscriptable this interface responsible for tracking groups of loads that belong together (images, external scripts, and so on.) and sub
documents (iframe, frame, and so on.).
...to create an instance, use: var
documentloader = components.classes["@mozilla.org/docloaderservice;1"] .createinstance(components.interfaces.nsi
documentloader); method overview void clearparentdocloader(); obsolete since gecko 1.8 void create
documentloader(out nsi
documentloader aninstance); obsolete since gecko 1.8 void destroy(); obsolete since gecko 1.8 void fireonlocationchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri); obsolete since gecko 1.8 void fireonstatuschange(in nsiw...
...ebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); obsolete since gecko 1.8 void getcontentviewercontainer(in nsisupports a
documentid, out nsicontentviewercontainer aresult); native code only!
...And 3 more matches
Document.bgColor - Web APIs
the deprecated bgcolor property gets or sets the background color of the current
document.
... syntax color =
document.bgcolor
document.bgcolor =color parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
... example
document.bgcolor = "darkblue"; notes the default value for this property in firefox is white (#ffffff in hexadecimal).
...And 3 more matches
Document.createAttribute() - Web APIs
the
document.createattribute() method creates a new attribute node, and returns it.
... syntax attribute =
document.createattribute(name) parameters name is a string containing the name of the attribute.
... example var node =
document.getelementbyid("div1"); var a =
document.createattribute("my_attrib"); a.value = "newval"; node.setattributenode(a); console.log(node.getattribute("my_attrib")); // "newval" specifications specification status comment domthe definition of '
document.createattribute()' in that specification.
...And 3 more matches
Document.fgColor - Web APIs
fgcolor gets/sets the foreground color, or text color, of the current
document.
... syntax var color =
document.fgcolor;
document.fgcolor = color; parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
... example
document.fgcolor = "white";
document.bgcolor = "darkblue"; notes the default value for this property in mozilla firefox is black (#000000 in hexadecimal).
...And 3 more matches
Document.forms - Web APIs
the forms read-only property of the
document interface returns an htmlcollection listing all the <form> elements contained in the
document.
... syntax collection =
document.forms; value an htmlcollection object listing all of the
document's forms.
... if the
document has no forms, the returned collection is empty, with a length of zero.
...And 3 more matches
Document.head - Web APIs
the head read-only property of the
document interface returns the <head> element of the current
document.
... syntax var objref =
document.head; value an htmlheadelement.
... example <!doctype html> <head id="my-
document-head"> <title>example: using
document.head</title> </head> <script> var thehead =
document.head; console.log(thehead.id); // "my-
document-head"; console.log( thehead ===
document.queryselector("head") ); // true </script> notes
document.head is read-only.
...And 3 more matches
Document.lastStyleSheetSet - Web APIs
the
document.laststylesheetset property returns the last enabled style sheet set.
... this property's value changes whenever the
document.selectedstylesheetset property is changed.
... syntax var laststylesheetset =
document.laststylesheetset on return, laststylesheetset indicates the style sheet set that was most recently set.
...And 3 more matches
Document.querySelectorAll() - Web APIs
the
document method queryselectorall() returns a static (not live) nodelist representing a list of the
document's elements that match the specified group of selectors.
... examples obtaining a list of matches to obtain a nodelist of all of the <p> elements in the
document: var matches =
document.queryselectorall("p"); this example returns a list of all <div> elements within the
document with a class of either note or alert: var matches =
document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
... var container =
document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the
document that contain an attribute named data-src: var matches =
document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container =
document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
...And 3 more matches
Document.registerElement() - Web APIs
warning:
document.registerelement() is deprecated in favor of customelements.define().
... the
document.registerelement() method registers a new custom element in the browser and returns a constructor for the new element.
... syntax var constructor =
document.registerelement(tag-name, options); parameters tag-name the name of the custom element.
...And 3 more matches
DocumentOrShadowRoot.getSelection() - Web APIs
the getselection() property of the
documentorshadowroot interface returns a selection object representing the range of text selected by the user, or the current position of the caret.
... syntax var selection =
documentorshadowrootinstance.getselection() parameters none.
... example function foo() { var selobj =
document.getselection(); alert(selobj); var selrange = selobj.getrangeat(0); // do stuff with the range } notes string representation of the selection object in javascript, when an object is passed to a function expecting a string (like window.alert()), the object's tostring() method is called and the returned value is passed to the function.
...And 3 more matches
Node.compareDocumentPosition() - Web APIs
the node.compare
documentposition() method reports the position of the given node relative to another node in any
document — not just the given node’s
document.
... the return value is a bitmask of the following values: name value
document_position_disconnected 1
document_position_preceding 2
document_position_following 4
document_position_contains 8
document_position_contained_by 16
document_position_implementation_specific 32 syntax comparemask = node.compare
documentposition(othernode) parameters othernode the other node with which to compare the first node’s
document position.
...for example, if othernode is located earlier in the
document and contains the node on which compare
documentposition() was called, then both the
document_position_contains and
document_position_preceding bits would be set, producing a value of 10 (0x0a).
...And 3 more matches
NonDocumentTypeChildNode - Web APIs
the non
documenttypechildnode interface contains methods that are particular to node objects that can have a parent, but not suitable for
documenttype.
... non
documenttypechildnode is a raw interface and no object of this type can be created; it is implemented by element, and characterdata objects.
... non
documenttypechildnode.previouselementsibling read only returns the element immediately prior to this node in its parent's children list, or null if there is no element in the list prior to this node.
...And 3 more matches
SVGDocument - Web APIs
svg
document interface when an "svg" element is embedded inline as a component of a
document from another namespace, such as when an "svg" element is embedded inline within an xhtml
document, then an svg
document object will not exist; instead, the root object in the
document object hierarchy will be a
document object of a different type, such as an html
document object.
... also implement none methods none properties domstring domain domstring referrer svgsvgelement rootelement domstring title domstring url normative
document svg 1.1 (2nd edition) properties name type description domain domstring the domain name of the server that served the
document, or a null string if the server cannot be identified by a domain name.
... rootelement svgsvgelement the root "svg" in the
document hierarchy.
...And 3 more matches
<html>: The HTML Document / Root element - HTML: Hypertext Markup Language
the html <html> element represents the root (top-level element) of an html
document, so it is also referred to as the root element.
...this is the root element of a
document.
... version specifies the version of the html
document type definition that governs the current
document.
...And 3 more matches
Documentation for BiDi Mozilla - Archive of obsolete content
this is preliminary
documentation of the changes introduced to mozilla as part of the bidi support contributed by ibm (a.k.a.
... bidi processing for a given html
document will only take place if one of the following is true: the page includes a hebrew or arabic character or a hindi digit.
... this is determined in nstextfragment::setto the page includes a element with the attribute dir=rtl, either explicitly (nsgenerichtmlelement::mapcommonattributesinto), or as a consequence of a style rule (mapdeclarationtextinto in nscssstylerule.cpp) all these cases use ns
document::enablebidi to set the flag mbidienabled.
...And 2 more matches
Document and website structure - Learn web development
objective: learn how to structure your
document using semantic tags, and how to work out the structure of a simple website.
... basic sections of a
document webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured: header: usually a big strip across the top with a big heading, logo, and perhaps a tagline.
...we aren't asking you to do much else in this article, because the key to understanding
document layout is writing a sound html structure, and then laying it out with css.
...And 2 more matches
Mozilla Style System Documentation
see also the style techtalk for more complete although less detailed
documentation.
... style contexts and the rule tree when the style system creates a style context, it walks through the style sheets (interface nsistylesheet) attached to a
document in the order defined by the css cascade and finds the style rules (interface nsistylerule) thatmatch the content node or content node + pseudo-element pair.
... (the "non-element" style contexts are defined never to match any rules.) these interfaces nsistylesheet and nsistylerule correspond to the css concepts of style sheets and style rules, except they are more general, and are used by other code that needs to add style information to the
document.
...And 2 more matches
DOMImplementation.createDocumentType() - Web APIs
the domimplementation.create
documenttype() method returns a
documenttype object which can either be used with domimplementation.create
document upon
document creation or can be put into the
document via methods like node.insertbefore() or node.replacechild().
... syntax var doctype =
document.implementation.create
documenttype(qualifiednamestr, publicid, systemid); parameters qualifiednamestr is a domstring containing the qualified name, like svg:svg.
... example var dt =
document.implementation.create
documenttype('svg:svg', '-//w3c//dtd svg 1.1//en', 'http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd'); var d =
document.implementation.create
document('http://www.w3.org/2000/svg', 'svg:svg', dt); alert(d.doctype.publicid); // -//w3c//dtd svg 1.1//en specifications specification status comment domthe definition of 'domimplementation.create
documenttype' in that specification.
...And 2 more matches
Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html
document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
...if loaded as usual, stylesheets slow down dom parsing as they're loaded in parallel, "stealing" traffic from the main html
document.
... examples basic usage
document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); delaying domcontentloaded <script>
document.addeventlistener('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 launch later.
...And 2 more matches
Document.anchors - Web APIs
the anchors read-only property of the
document interface returns a list of all of the anchors in the
document.
... syntax nodelist =
document.anchors; value an htmlcollection.
... example if (
document.anchors.length >= 5) { dump("found too many anchors"); } the following is an example that auto populates a table of contents with every anchor on the page: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>test</title> <script> function init() { var toc =
document.getelementbyid("toc"); var i, li, newanchor; for (i = 0; i <
document.anchors.length; i++) { li =
document.createelement("li"); newanchor =
document.createelement('a'); newanchor.href = "#" +
document.anchors[i].name; newanchor.innerhtml =
document.anchors[i].text; li.appendchild(newanchor); toc.appendchild(li); } } </script> </head> <body onload="init()"> <h1>title</h1> <h2><a name="contents">contents</a></h2> <ul id="toc"></ul> <h2><a name="plants">pla...
...And 2 more matches
Document.applets - Web APIs
the applets property of the
document interface returns a list of the applets within a
document.
...since then, calling
document.applets in those browsers always returns an empty htmlcollection.
... syntax var nodelist =
document.applets; value an htmlcollection.
...And 2 more matches
Document.createElementNS() - Web APIs
syntax var element =
document.createelementns(namespaceuri, qualifiedname[, options]); parameters namespaceuri a string that specifies the namespace uri to associate with the element.
...although this is not an extremely useful xul
document, it does demonstrate the use of elements from two different namespaces within a single
document: <?xml version="1.0"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" title="||working with elements||" onload="init()"> <script type="application/javascript"><![cdata[ let container; let newdiv; let txtnode; ...
... function init(){ container =
document.getelementbyid("containerbox"); newdiv =
document.createelementns("http://www.w3.org/1999/xhtml", "div"); txtnode =
document.createtextnode("this is text that was constructed dynamically with createelementns and createtextnode then inserted into the
document using appendchild."); newdiv.appendchild(txtnode); container.appendchild(newdiv); } ]]></script> <vbox id="containerbox" flex="1"> <html:div> the script on this page will add dynamic content below: </html:div> </vbox> </page> the example given above uses inline script which is not recommended in xhtml
documents.
...And 2 more matches
Document.createProcessingInstruction() - Web APIs
the new node usually will be inserted into an xml
document in order to accomplish anything with it, such as with node.insertbefore.
... syntax pinode =
document.createprocessinginstruction(target, data) parameters pinode is the resulting processinginstruction node.
...
document object model (dom) level 3 core specificationthe definition of 'createprocessinginstruction()' in that specification.
...And 2 more matches
Document.createTouch() - Web APIs
note: before gecko 25.0, this method was defined on the
documenttouch mixin.
... the
document.createtouch() method creates and returns a new touch object.
... syntax var touch =
documenttouch.createtouch(view, target, identifier, pagex, pagey, screenx, screeny); parameters note: all parameters are optional.
...And 2 more matches
Document.createTouchList() - Web APIs
note: before gecko 25.0, this method was defined on the
documenttouch mixin.
... the
document.createtouchlist() method creates and returns a new touchlist object.
... syntax var list =
documenttouch.createtouchlist([touch1 [, touch2 [, ...]]]); parameters touches zero or more touch objects.
...And 2 more matches
Document.domain - Web APIs
the domain property of the
document interface gets/sets the domain portion of the origin of the current
document, as used by the same origin policy.
... syntax const domainstring =
document.domain
document.domain = domainstring value the domain portion of the current
document's origin.
... exceptions securityerror an attempt has been made to set domain under one of the following conditions: the
document is inside a sandboxed <iframe> the
document has no browsing context the
document's effective domain is null the given value is not equal to the
document's effective domain (or it is not a registerable domain suffix of it) the
document-domain feature-policy is enabled examples getting the domain for the uri http://developer.mozilla.org/docs/web, this example sets currentdomain to the string "developer.mozilla.org".
...And 2 more matches
Document.execCommand() - Web APIs
when an html
document has been switched to designmode, its
document object exposes an execcommand method to run commands that manipulate the current editable region, such as form inputs or contenteditable elements.
... most commands affect the
document's selection (bold, italics, etc.), while others insert new elements (adding a link), or affect an entire line (indenting).
... syntax
document.execcommand(acommandname, ashowdefaultui, avalueargument) return value a boolean that is false if the command is unsupported or disabled.
...And 2 more matches
Document.exitFullscreen() - Web APIs
the
document method exitfullscreen() requests that the element on this
document which is currently being presented in full-screen mode be taken out of full-screen mode, restoring the previous state of the screen.
... syntax exitpromise =
document.exitfullscreen(); parameters none.
... example this example causes the current
document to toggle in and out of a full-screen presentation whenever the mouse button is clicked within it.
...And 2 more matches
Document.fullscreen - Web APIs
the obsolete
document interface's fullscreen read-only property reports whether or not the
document is currently displaying content in full-screen mode.
... note: since this property is deprecated, you can determine if full-screen mode is active on the
document by checking to see if
document.fullscreenelement is not null.
... syntax var isfullscreen =
document.fullscreen; value a boolean value which is true if the
document is currently displaying an element in full-screen mode; otherwise, the value is false.
...And 2 more matches
Document: fullscreenchange event - Web APIs
bubbles yes cancelable no interface event event handler property onfullscreenchange the event is sent to the element that is transitioning into or out of full-screen mode, and this event then bubbles up to the
document.
... to find out whether the element is entering or exiting full-screen mode, check the value of
documentorshadowroot.fullscreenelement: if this value is null then the element is exiting full-screen mode, otherwise it is entering full-screen mode.
... examples in this example, a handler for the fullscreenchange event is added to the
document.
...And 2 more matches
Document.getElementsByName() - Web APIs
the getelementsbyname() method of the
document object returns a nodelist collection of elements with a given name in the
document.
... syntax var elements =
document.getelementsbyname(name); elements is a live nodelist collection, meaning it automatically updates as new elements with the same name are added to/removed from the
document.
... example <!doctype html> <html lang="en"> <title>example: using
document.getelementsbyname</title> <input type="hidden" name="up"> <input type="hidden" name="down"> <script> var up_names =
document.getelementsbyname("up"); console.log(up_names[0].tagname); // displays "input" </script> </html> notes the name attribute can only be applied in (x)html
documents.
...And 2 more matches
Document.height - Web APIs
note: starting in gecko 6.0,
document.height is no longer supported.
... instead, use
document.body.clientheight.
... returns the height of the
document object.
...And 2 more matches
Document.implementation - Web APIs
the
document.implementation property returns a domimplementation object associated with the current
document.
... syntax domimpobj =
document.implementation; example var modname = "html"; var modver = "2.0"; var conformtest =
document.implementation.hasfeature( modname, modver ); alert( "dom " + modname + " " + modver + " supported?: " + conformtest ); // alerts with: "dom html 2.0 supported?: true" if dom level 2 html module is supported.
...if available, other domimplementation methods provide services for controlling things outside of a single
document.
...And 2 more matches
Document.onfullscreenerror - Web APIs
the
document.onfullscreenerror property is an event handler for the fullscreenerror event that is sent to the
document when it fails to transition into full-screen mode after a prior call to element.requestfullscreen().
... syntax target
document.onfullscreenerror = fullscreenerrorhandler; value an event handler for the fullscreenerror event.
...since requestfullscreen() can only be called in response to user action, for security reasons, this will fail, causing the fullscreenerror to be sent to the
document.
...And 2 more matches
Document.referrer - Web APIs
the
document.referrer property returns the uri of the page that linked to this page.
... syntax var referrer =
document.referrer; value the value is an empty string if the user navigated to the page directly (not through a link, but, for example, by using a bookmark).
... because this property returns only a string, it doesn't give you
document object model (dom) access to the referring page.
...And 2 more matches
Document.rootElement - Web APIs
document.rootelement returns the element that is the root element of the
document if it is an <svg> element, otherwise null.
... it is deprecated in favor of
document.
documentelement, which returns the root element for all
documents.
... syntax const element =
document.rootelement notes if the
document is a non-empty svg
document, then the rootelement will be an svgsvgelement, identical to the
documentelement.
...And 2 more matches
Document: visibilitychange event - Web APIs
the visibilitychange event is fired at the
document when the content of its tab have become visible or have been hidden.
... bubbles yes cancelable no interface event event handler property onvisibilitychange usage notes the event doesn't include the
document's updated visibility status, but you can get that information from the
document's visibilitystate property.
... examples this example begins playing a music track when the
document becomes visible, and pauses the music when the
document is no longer visible.
...And 2 more matches
DocumentOrShadowRoot.activeElement - Web APIs
the activeelement read-only property of the
document and shadowroot interfaces returns the element within the dom or shadow dom tree that currently has focus.
... note: focus (which element is receiving user input events) is not the same thing as selection (the currently highlighted part of the
document).
... syntax element =
documentorshadowroot.activeelement value the element which currently has focus, <body> or null if there is no focused element.
...And 2 more matches
NonDocumentTypeChildNode.previousElementSibling - Web APIs
the non
documenttypechildnode.previouselementsibling read-only property returns the element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.
... syntax prevnode = elementnodereference.previouselementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <li>this is a list item</li> <li>this is another list item</li> <div id="div-03">here is div-03</div> <script> let el =
document.getelementbyid('div-03').previouselementsibling;
document.write('<p>siblings of div-03</p><ol>'); while (el) {
document.write('<li>' + el.nodename + '</li>'); el = el.previouselementsibling; }
document.write('</ol>'); </script> this example outputs the following into the page when it loads: siblings of div-03 1.
...div polyfills polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("previouselementsibling" in
document.
documentelement)){ object.defineproperty(element.prototype, "previouselementsibling", { get: function(){ var e = this.previoussibling; while(e && 1 !== e.nodetype) e = e.previoussibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/non
documenttypechildnode/previouselementsibling/previouselementsibling.md (function (arr) { arr.foreach(function (item) { if (item.
...And 2 more matches
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlmetaelement the type of metadata provided by the meta element can be one of the following: if the name attribute is set, the meta element provides
document-level metadata, applying to the whole page.
... if the charset attribute is set, the meta element is a charset declaration, giving the character encoding in which the
document is encoded.
... charset this attribute declares the
document's character encoding.
...And 2 more matches
Tamarin build documentation - Archive of obsolete content
for instructions on tamarin tracing, please see tamarin tracing build
documentation.
... in this
document replace instances of tamarin-central with tamarin-redux to operate in the redux repository.
... $ make cppflags=-davmplus_verbose additional instructions for non-android cross-platform tamarin-redux build on osx 10.6 (snow leopard) (to build tamarin-central on mac please see previous cross-platform instructions here: https://developer.mozilla.org/index.php?title=en/tamarin/tamarin_build_
documentation&revision=21 the bug when building on snow leopard (bug 537817) has been fixed in the tamarin-redux repo.
...
documentation on how to setup a user repository http://developer.mozilla.org/en/publishing_mercurial_clones.
nsIMarkupDocumentViewer
docshell/base/nsimarkup
documentviewer.idlscriptable describes the properties of a content viewer for an html or xml markup
document.
...obsolete since gecko 1.8 authorstyledisabled boolean disable entire author style level (including html presentation hints) bidicharacterset octet whether to force the user's character set 1 - use the
document character set 2 - use the character set chosen by the user.
...1 - logical 2 - visual 3 - like the containing
document.
... note: this attribute was added late in the gecko 2.0 development cycle and was implemented by the nsimarkup
documentviewer_mozilla_2_0_branch interface; it was merged into this interface in gecko 7.0.
Document.alinkColor - Web APIs
returns or sets the color of an active link in the
document body.
... syntax var color =
document.alinkcolor;
document.alinkcolor = color; color is a string containing the name of the color (e.g., blue, darkblue, etc.) or the hexadecimal value of the color (e.g., #0000ff) notes the default value for this property in mozilla firefox is red (#ee0000 in hexadecimal).
...
document.alinkcolor is deprecated in dom level 2 html.
... another alternative is
document.body.alink, although this is deprecated in html 4.01 in favor of the css alternative.
Document.all - Web APIs
the
document interface's read-only all property returns an htmlallcollection rooted at the
document node.
... in other words, it returns all of the
document's elements, accessible by order (like an array) and by id (like a regular object).
... syntax var htmlallcollection =
document.all; value an htmlallcollection which contains every element in the
document.
... conversion to boolean
document.all is the only falsy object accessible to javascript, because it has the [[ishtmldda]] internal slot.
Document.caretRangeFromPoint() - Web APIs
the caretrangefrompoint() method of the
document interface returns a range object for the
document fragment under the specified coordinates.
... syntax var range =
document.caretrangefrompoint(float x, float y); parameters x a horizontal position within the current viewport.
...stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> javascript function insertbreakatpoint(e) { let range; let textnode; let offset; if (
document.caretpositionfrompoint) { range =
document.caretpositionfrompoint(e.clientx, e.clienty); textnode = range.offsetnode; offset = range.offset; } else if (
document.caretrangefrompoint) { range =
document.caretrangefrompoint(e.clientx, e.clienty); textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode && textnode.nodetype =...
...= 3) { let replacement = textnode.splittext(offset); let br =
document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } let paragraphs =
document.getelementsbytagname("p"); for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].addeventlistener('click', insertbreakatpoint, false); } result ...
Document.compatMode - Web APIs
the
document.compatmode property indicates whether the
document is rendered in quirks mode or standards mode.
... syntax const mode =
document.compatmode value an enumerated value that can be: "backcompat" if the
document is in quirks mode.
... "css1compat" if the
document is in no-quirks (also known as "standards") mode or limited-quirks (also known as "almost standards") mode.
... example if (
document.compatmode == "backcompat") { // in quirks mode } specifications specification status comment domthe definition of 'compatmode' in that specification.
Document.createRange() - Web APIs
the
document.createrange() method returns a new range object.
... syntax range =
document.createrange(); range is the created range object.
... example let range =
document.createrange(); range.setstart(startnode, startoffset); range.setend(endnode, endoffset); notes once a range is created, you need to set its boundary points before you can make use of most of its methods.
... specifications specification status comment domthe definition of '
document.createrange' in that specification.
Document.defaultView - Web APIs
in browsers,
document.defaultview returns the window object associated with a
document, or null if none is available.
... syntax var win =
document.defaultview; this property is read-only.
... specifications specification status comment html living standardthe definition of '
document.defaultview' in that specification.
... living standard no change html5the definition of '
document.defaultview' in that specification.
Document.fullscreenEnabled - Web APIs
the read-only fullscreenenabled property on the
document interface indicates whether or not full-screen mode is available.
... full-screen mode is available only for a page that has no windowed plug-ins in any of its
documents, and if all <iframe> elements which contain the
document have their allowfullscreen attribute set.
... syntax var isfullscreenavailable =
document.fullscreenenabled; value a boolean value which is true if the
document and the elements within can be placed into full-screen mode by calling element.requestfullscreen().
... function requestfullscreen() { if (
document.fullscreenenabled) { videoelement.requestfullscreen(); } else { console.log('your browser cannot use fullscreen right now'); } } specifications specification status comment fullscreen apithe definition of '
document.fullscreenenabled' in that specification.
Document.getAnimations() - Web APIs
the getanimations() method of the
document interface returns an array of all animation objects currently in effect whose target elements are descendants of the
document.
... syntax var allanimations =
document.getanimations(); parameters none.
... return value an array of animation objects, each representing one animation currently associated with elements which are descendants of the
document on which it's called.
...
document.getanimations().foreach( function (animation) { animation.playbackrate *= .5; } ); specifications specification status comment web animationsthe definition of '
document.getanimations()' in that specification.
Document.hasStorageAccess() - Web APIs
the hasstorageaccess() method of the
document interface returns a promise that resolves with a boolean value indicating whether the
document has access to its first-party storage.
... syntax var promise =
document.hasstorageaccess(); parameters none.
... return value a promise that resolves with a boolean value indicating whether the
document has access to its first-party storage.
... examples
document.hasstorageaccess().then(hasaccess => { if (hasaccess) { // storage access has been granted already.
Document.images - Web APIs
the images read-only property of the
document interface returns a collection of the images in the current html
document.
... syntax var imagecollection =
document.images; value an htmlcollection providing a live list of all of the images contained in the current
document.
... var ilist =
document.images; for(var i = 0; i < ilist.length; i++) { if(ilist[i].src == 'banner.gif') { // found the banner } } specifications specification status comment html living standardthe definition of '
document.images' in that specification.
... living standard
document object model (dom) level 2 html specificationthe definition of '
document.images' in that specification.
Document.linkColor - Web APIs
the
document.linkcolor property gets/sets the color of links within the
document.
...another alternative is
document.body.link, although this is deprecated in html 4.01.
... syntax color =
document.linkcolor
document.linkcolor = color parameters color is a string representing the color as a word (e.g., red) or hexadecimal value (e.g., #ff0000).
... example
document.linkcolor = 'blue'; specification html5
document.linkcolor is deprecated in dom level 2 html.
Document.links - Web APIs
the links read-only property of the
document interface returns a collection of all <area> elements and <a> elements in a
document with a value for the href attribute.
... syntax nodelist =
document.links value an htmlcollection.
... example var links =
document.links; for(var i = 0; i < links.length; i++) { var linkhref =
document.createtextnode(links[i].href); var linebreak =
document.createelement("br");
document.body.appendchild(linkhref);
document.body.appendchild(linebreak); } specifications specification status comment html living standardthe definition of '
document.links' in that specification.
... living standard
document object model (dom) level 2 html specificationthe definition of '
document.links' in that specification.
Document.mozSetImageElement() - Web APIs
the
document.mozsetimageelement() method changes the element being used as the css background for a background with a given background element id.
... syntax
document.mozsetimageelement(imageelementid, imageelement); parameters imageelementid is a string indicating the name of an element that has been specified as a background image using the -moz-element css function.
... var c = 0x00; function clicked() { var canvas =
document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "#" + c.tostring(16) + "0000"; ctx.fillrect(25, 25, 75, 75); c += 0x11; if (c > 0xff) { c = 0x00; }
document.mozsetimageelement("canvasbg", canvas); } the code here is called each time the user clicks the <div> element.
... once the canvas is drawn,
document.mozsetimageelement() is called to set the background for any css using the id "canvasbg" as its background element id to be our new canvas.
Document.onfullscreenchange - Web APIs
the
document interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired immediately before a
document transitions into or out of full-screen mode.
... syntax target
document.onfullscreenchange = fullscreenchangehandler; value an event handler which is invoked whenever the
document receives a fullscreenchange event, indicating that the
document is transitioning into or out of full-screen mode.
... usage notes the fullscreenchange event does not directly specify whether the transition is into or out of full-screen mode, so your event handler should look at the value of
document.fullscreenelement.
... example
document.onfullscreenchange = function ( event ) { console.log("full screen change") };
document.
documentelement.onclick = function () { // requestfullscreen() must be in an event handler or it will fail
document.
documentelement.requestfullscreen(); } specifications specification status comment fullscreen apithe definition of 'onfullscreenchange' in that specification.
Document.popupNode - Web APIs
when a popup attached via the popup or context attributes is opened, the xul
document's popupnode property is set to the node that was clicked on.
... this property applies only to xul
documents.
... syntax var node =
document.popupnode; example <menupopup id="toolbarcontextmenu"> ...
... <menuitem oncommand="mailnewscore.deletebutton(
document.popupnode)"> ...
Document.vlinkColor - Web APIs
the
document.vlinkcolor property gets/sets the color of links that the user has visited in the
document.
... syntax color =
document.vlinkcolor
document.vlinkcolor = color parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
...
document.vlinkcolor is deprecated in dom level 2 html.
... another alternative is
document.body.vlink, although this is deprecated in html 4.01 in favor of the css alternative.
Document.width - Web APIs
note: starting in gecko 6.0,
document.width is no longer supported.
... instead, use
document.body.clientwidth.
... returns the width of the <body> element of the current
document in pixels.
... syntax pixels =
document.width; example function init() { alert("the width of the
document is " +
document.width + " pixels."); } alternatives
document.body.clientwidth /* width of <body> */
document.
documentelement.clientwidth /* width of <html> */ window.innerwidth /* window's width */ specification html5 ...
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
the caretpositionfrompoint() property of the
documentorshadowroot interface returns a caretposition object, containing the dom node, along with the caret and caret's character offset within that node.
... syntax var caretposition =
document.caretpositionfrompoint(float x, float y); parameters x the horizontal coordinate of a point.
...stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> javascript content function insertbreakatpoint(e) { var range; var textnode; var offset; if (
document.caretpositionfrompoint) { range =
document.caretpositionfrompoint(e.clientx, e.clienty); textnode = range.offsetnode; offset = range.offset; } else if (
document.caretrangefrompoint) { range =
document.caretrangefrompoint(e.clientx, e.clienty); textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode.nodetype == 3) { ...
...var replacement = textnode.splittext(offset); var br =
document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs =
document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment css object model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
DocumentOrShadowRoot.fullscreenElement - Web APIs
the
documentorshadowroot.fullscreenelement read-only property returns the element that is currently being presented in full-screen mode in this
document, or null if full-screen mode is not currently in use.
... syntax var element =
document.fullscreenelement; return value the element object that's currently in full-screen mode; if full-screen mode isn't currently in use by the
document>, the returned value is null.
... example this example presents a function, isvideoinfullscreen(), which looks at the value returned by fullscreenelement; if the
document is in full-screen mode (fullscreenelement isn't null) and the full-screen element's nodename is video, indicating a <video> element, the function returns true, indicating that the video is in full-screen mode.
... function isvideoinfullscreen() { if (
document.fullscreenelement &&
document.fullscreenelement.nodename == 'video') { return true; } return false; } specifications specification status comment fullscreen apithe definition of '
document.fullscreenelement' in that specification.
DocumentOrShadowRoot.pointerLockElement - Web APIs
the pointerlockelement property of the
document and shadowroot interfaces provides the element set as the target for mouse events while the pointer is locked.
... it is null if lock is pending, pointer is unlocked, or the target is in another
document.
... syntax var element =
document.pointerlockelement; return value an element or null.
... candidate recommendation extend the
document interface ...
DocumentTimeline - Web APIs
the
documenttimeline interface of the the web animations api represents animation timelines, including the default
document timeline (accessed via
document.timeline).
... constructor
documenttimeline() creates a new
documenttimeline object associated with the active
document of the current browsing context.
... examples we could share a single
documenttimeline among multiple animations, thus allowing us to manipulate just that group of animations via their shared timeline.
... this bit of code would start all the cats animating 500 milliseconds into their animations: const cats =
document.queryselectorall('.sharedtimelinecat'); const sharedtimeline = new
documenttimeline({ origintime: 500 }); for (const cat of cats) { const catkeyframes = new keyframeeffect(cat, keyframes, timing); const catanimation = new animation(catkeyframes, sharedtimeline); catanimation.play(); } specifications specification status comment web animationsthe definition of '
documenttimeline' in that specification.
DocumentTouch - Web APIs
the
documenttouch interface used to provide convenience methods for creating touch and touchlist objects, but
documenttouch been removed from the standards.
... these two methods now live on the
document interface.
... methods
documenttouch.createtouch() creates a new touch object.
...
documenttouch.createtouchlist() creates a new touchlist object.
Node.ownerDocument - Web APIs
the owner
document read-only property of the node interface returns the top-level
document object of the node.
... syntax var
document = element.owner
document; value
document is the top-level
document object in which all the child nodes are created.
... if this property is used on a node that is itself a
document, the value is null.
... example // given a node "p", get the top-level html // child of the
document object var d = p.owner
document; var html = d.
documentelement; specifications specification status comment domthe definition of 'node: owner
document' in that specification.
NonDocumentTypeChildNode.nextElementSibling - Web APIs
the non
documenttypechildnode.nextelementsibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.
... syntax var nextnode = elementnodereference.nextelementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <script type="text/javascript"> var el =
document.getelementbyid('div-01').nextelementsibling; console.log('siblings of div-01:'); while (el) { console.log(el.nodename); el = el.nextelementsibling; } </script> this example outputs the following into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("nextelementsibling" in
document.
documentelement)){ object.defineproperty(element.pro...
...totype, "nextelementsibling", { get: function(){ var e = this.nextsibling; while(e && 1 !== e.nodetype) e = e.nextsibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/non
documenttypechildnode/nextelementsibling/nextelementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('nextelementsibling')) { return; } object.defineproperty(item, 'nextelementsibling', { configurable: true, enumerable: true, get: function () { var el = this; while (el = el.nextsibling) { if (el.nodetype === 1) { return el; } } return null; ...
... living standard split the elementtraversal interface in childnode, parentnode, and non
documenttypechildnode.
Selection.deleteFromDocument() - Web APIs
the deletefrom
document() method of the selection interface deletes the selected text from the
document's dom.
... syntax sel.deletefrom
document() parameters none.
...upon clicking the button, the window.getselection() method gets the selected text, and the deletefrom
document() method removes it.
...once you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button =
document.queryselector('button'); button.addeventlistener('click', deleteselection); function deleteselection() { let selection = window.getselection(); selection.deletefrom
document(); } result specifications specification status comment selection apithe definition of 'selection.deletefrom
document()' in that specification.
XMLDocument.load() - Web APIs
document.load() is a part of an old version of the w3c dom level 3 load & save module.
... can be used with
document.async to indicate whether the request is synchronous or asynchronous (the default).
... as of at least gecko 1.9, this no longer supports cross-site loading of
documents (use xmlhttprequest or fetch() instead).
... examples var xmldoc =
document.implementation.create
document("", "test", null); function
documentloaded (e) { alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } xmldoc.addeventlistener("load",
documentloaded, false); xmldoc.load('querydata.xml'); see also the load sample in the xml tests directory.
DOM (Document Object Model) - MDN Web Docs Glossary: Definitions of Web-related terms
the dom (
document object model) is an api that represents and interacts with any html or xml
document.
... the dom is a
document model loaded in the browser and representing the
document as a node tree, where each node represents part of the
document (e.g.
... the dom is one of the most-used apis on the web because it allows code running in a browser to access and interact with every node in the
document.
Document.characterSet - Web APIs
the
document.characterset read-only property returns the character encoding of the
document that it's currently rendered with.
... the properties
document.charset and
document.inputencoding are legacy aliases for
document.characterset.
... syntax var string =
document.characterset; examples <button onclick="console.log(
document.characterset);"> log character encoding </button> <!-- displays
document's character encoding in the dev console, such as "iso-8859-1" or "utf-8" --> specifications specification status comment domthe definition of 'characterset' in that specification.
Document.close() - Web APIs
the
document.close() method finishes writing to a
document, opened with
document.open().
... syntax
document.close(); example // open a
document to write to it
document.open(); // write the content of the
document document.write("<p>the one and only content.</p>"); // close the
document document.close(); specifications specification status comment html living standardthe definition of '
document.close()' in that specification.
... living standard
document object model (dom) level 2 html specificationthe definition of '
document.close()' in that specification.
Document.contentType - Web APIs
the
document.contenttype read-only property returns the mime type that the
document is being rendered as.
... syntax contenttype =
document.contenttype; value contenttype is a read-only property.
... specifications specification status comment domthe definition of '
document.contenttype' in that specification.
Document.createCDATASection() - Web APIs
syntax var cdatasectionnode =
document.createcdatasection(data); cdatasectionnode is a cdata section node.
... example var docu = new domparser().parsefromstring('<xml></xml>', 'application/xml') var cdata = docu.createcdatasection('some <cdata> data & then some'); docu.getelementsbytagname('xml')[0].appendchild(cdata); alert(new xmlserializer().serializetostring(docu)); // displays: <xml><![cdata[some <cdata> data & then some]]></xml> notes this will only work with xml, not html
documents (as html
documents do not support cdata sections); attempting it on an html
document will throw not_supported_err.
... specifications specification status comment domthe definition of '
document.createcdatasection' in that specification.
Document.createEvent() - Web APIs
syntax var event =
document.createevent(type); event is the created event object.
...var event =
document.createevent('event'); // define that the event name is 'build'.
... event module standard event object gecko also supports text event module textevent textevents keyboard event module keyboardevent keyevents basic events module event events specifications specification status comment domthe definition of '
document.createevent' in that specification.
Document.createExpression() - Web APIs
syntax xpathexpr =
document.createexpression(xpathtext, namespaceurlmapper); parameters xpathtext is a string which is the xpath expression to be compiled.
... firefox 3 note prior to firefox 3, you could call this method on
documents other than the one you planned to run the xpath against.
... under firefox 3, you must call it on the same
document.
Document.createNSResolver() - Web APIs
syntax nsresolver =
document.creatensresolver(node); parameters node is the node to be used as a context for namespace resolution.
... notes adapts any dom node to resolve namespaces so that an xpath expression can be easily evaluated relative to the context of the node where it appeared within the
document.
... see also
document.evaluate introduction to using xpath in javascript specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of '
document.creatensresolver' in that specification.
Document.createTextNode() - Web APIs
syntax var text =
document.createtextnode(data); text is a text node.
... example <!doctype html> <html lang="en"> <head> <title>createtextnode example</title> <script> function addtextnode(text) { var newtext =
document.createtextnode(text), p1 =
document.getelementbyid("p1"); p1.appendchild(newtext); } </script> </head> <body> <button onclick="addtextnode('yes!
...');">we can!</button> <hr /> <p id="p1">first line of paragraph.</p> </body> </html> specifications specification status comment domthe definition of '
document: createtextnode' in that specification.
Document.designMode - Web APIs
document.designmode controls whether the entire
document is editable.
... syntax var mode =
document.designmode;
document.designmode = value; value a string indicating whether designmode is (or should be) set to on or off.
... example make an <iframe>'s
document editable: iframenode.content
document.designmode = "on"; specifications specification status comment html living standardthe definition of 'designmode' in that specification.
Document: drag event - Web APIs
iv is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable target */
document.addeventlistener("drag", function(event) { }, false);
document.addeventlistener("dragstart", function(event) { // store a ref.
... on the dragged elem dragged = event.target; // make it half transparent event.target.style.opacity = .5; }, false);
document.addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */
document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false);
document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false);
document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it if ...
...(event.target.classname == "dropzone") { event.target.style.background = ""; } }, false);
document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.
Document.embeds - Web APIs
the embeds read-only property of the
document interface returns a list of the embedded <object> elements within the current
document.
... syntax nodelist =
document.embeds value an htmlcollection.
... specifications specification status comment html living standardthe definition of '
document.embeds' in that specification.
Document.enableStyleSheetsForSet() - Web APIs
syntax
document.enablestylesheetsforset(name); parameters name the name of the style sheets to enable.
... this method never affects the values of
document.laststylesheetset or
document.preferredstylesheetset.
... example
document.enablestylesheetsforset("some style sheet set name"); ...
Document.fonts - Web APIs
the fonts property of the
document interface returns the fontfaceset interface of the
document.
... syntax let fontfaceset =
document.fonts; value the returned value is the fontfaceset interface of the
document.
... examples doing operation after all fonts are loaded
document.fonts.ready.then(function() { // any operation that needs to be done only after all the fonts // have finished loading can go here.
Document.hidden - Web APIs
the
document.hidden read-only property returns a boolean value indicating if the page is considered hidden or not.
... syntax var boolean =
document.hidden examples
document.addeventlistener("visibilitychange", function() { console.log(
document.hidden ); // modify behavior...
... }); specifications specification status comment page visibility (second edition)the definition of '
document.hidden' in that specification.
Document.onafterscriptexecute - Web APIs
the
document.onafterscriptexecute property references a function that fires when a static <script> element finishes executing its script.
... syntax
document.onafterscriptexecute = funcref; funcref is a function reference, called when the event is fired.
... example function finished(e) { logmessage(`finished script with id: ${e.target.id}`); }
document.addeventlistener('afterscriptexecute', finished, true); view live example specification html5 ...
Document.onbeforescriptexecute - Web APIs
fired when the code in a <script> element declared in an html
document is about to start executing.
... syntax
document.onbeforescriptexecute = funcref; funcref is a function reference, called when the event is fired.
... example function starting(e) { logmessage("starting script with id: " + e.target.id); }
document.addeventlistener("beforescriptexecute", starting, true); view live examples specification html5 ...
Document.ononline - Web APIs
the
document.online event is fired on the <body> of each page when the browser switches between online and offline mode.
... additionally, the events bubble up from
document.body, to
document, ending at window.
... you can register listeners for these events in a few familiar ways: using addeventlistener on the window,
document, or
document.body by setting the .ononline or .onoffline properties on
document or
document.body to a javascript function object.
Document.origin - Web APIs
the
document.origin read-only property returns the
document's origin.
... in most cases, this property is equivalent to
document.defaultview.location.origin.
... syntax var origin =
document.origin; examples var origin =
document.origin; // on this page, returns:'https://developer.mozilla.org' var origin =
document.origin; // on "about:blank", returns:'null' var origin =
document.origin; // on "data:text/html,<b>foo</b>", returns:'null' ...
Document.plugins - Web APIs
the plugins read-only property of the
document interface returns an htmlcollection object containing one or more htmlembedelements representing the <embed> elements in the current
document.
... syntax embedarrayobj =
document.plugins value an htmlcollection, or null if there are no embeds in the
document.
... specifications specification status comment html living standardthe definition of '
document.plugins' in that specification.
Document.queryCommandEnabled() - Web APIs
the
document.querycommandenabled() method reports whether or not the specified editor command is enabled by the browser.
... syntax isenabled =
document.querycommandenabled(command); parameters command the command for which to determine support.
... example var flg =
document.querycommandenabled("selectall"); if(flg) {
document.execcommand("selectall", false, null); // command is enabled, run it } specifications specification status comment execcommand ...
Document.queryCommandState() - Web APIs
the querycommandstate() method will tell you if the current selection has a certain
document.execcommand() command applied.
... syntax querycommandstate(string command) parameters command is a command from
document.execcommand() return value querycommandstate() can return a boolean value or null if the state is unknown.
... example html <div contenteditable="true">select a part of this text!</div> <button onclick="makebold();">test the state of the 'bold' command</button> javascript function makebold() { var state =
document.querycommandstate("bold"); switch (state) { case true: alert("the bold formatting will be removed from the selected text."); break; case false: alert("the selected text will be displayed in bold."); break; case null: alert("the state of the 'bold' command is indeterminable."); break; }
document.execcommand('bold'); } result specifications specification status comment execcommand ...
Document.queryCommandSupported() - Web APIs
the
document.querycommandsupported() method reports whether or not the specified editor command is supported by the browser.
... syntax issupported =
document.querycommandsupported(command); parameters command the command for which to determine support.
... notes the 'paste' command return false not only if the feature is unavailable, but also if the script calling it has insufficient privileges to perform the action [1] example var flg =
document.querycommandsupported("selectall"); if(flg) { // ...do something } specifications specification status comment execcommand ...
Document: readystatechange event - Web APIs
the readystatechange event is fired when the readystate attribute of a
document has changed.
...ass="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log =
document.queryselector('.event-log-contents'); const reload =
document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; });
document.addeventlistener('readystatechange', (event) => { log...
....textcontent = log.textcontent + `readystate: ${
document.readystate}\n`; });
document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment html living standardthe definition of 'readystatechange' in that specification.
Document.scripts - Web APIs
the scripts property of the
document interface returns a list of the <script> elements in the
document.
... syntax var scriptlist =
document.scripts; value an htmlcollection.
... let scripts =
document.scripts; if (scripts.length) { alert('this page has scripts!'); } specifications specification status comment html living standardthe definition of '
document.scripts' in that specification.
Document.scrollingElement - Web APIs
the scrollingelement read-only property of the
document interface returns a reference to the element that scrolls the
document.
... in standards mode, this is the root element of the
document,
document.
documentelement.
... syntax var element =
document.scrollingelement; example var scrollelm =
document.scrollingelement; scrollelm.scrolltop = 0; specifications specification status comment css object model (cssom) view modulethe definition of 'scrollingelement' in that specification.
Document.selectedStyleSheetSet - Web APIs
syntax currentstylesheetset =
document.selectedstylesheetset;
document.selectedstylesheet = newstylesheetset; on return, currentstylesheetset indicates the name of the style sheet set currently in use.
... setting the value of this property is equivalent to calling
document.enablestylesheetsforset() with the value of currentstylesheetset, then setting the value of laststylesheetset to that value as well.
... example console.log('current style sheet set: ' +
document.selectedstylesheetset);
document.selectedstylesheetset = 'some other style sheet'; ...
Document.tooltipNode - Web APIs
the
document.tooltipnode property returns the node which is the target of the current <xul:tooltip>.
... syntax
document.tooltipnode; specification xul-specific method.
...defined in nsidomxul
document.idl.
DocumentFragment.querySelectorAll() - Web APIs
the
documentfragment.queryselectorall() method returns a nodelist of elements within the
documentfragment (using depth-first pre-order traversal of the
document's nodes) that matches the specified group of selectors.
... syntax elementlist =
documentfragment.queryselectorall(selectors); parameters selectors is a domstring containing one or more css selectors separated by commas.
... examples this example returns a list of all div elements within the
documentfragment with a class of either "note" or "alert": var matches =
documentfrag.queryselectorall("div.note, div.alert"); specifications specification status comment selectors api level 1the definition of '
documentfragment.queryselectorall' in that specification.
DocumentOrShadowRoot.elementsFromPoint() - Web APIs
the elementsfrompoint() method of the
documentorshadowroot interface returns an array of all elements at the specified coordinates (relative to the viewport).
... syntax const elements =
document.elementsfrompoint(x, y); parameters x the horizontal coordinate of a point.
... example html <div> <p>some text</p> </div> <p>elements at point 30, 20:</p> <div id="output"></div> javascript let output =
document.getelementbyid("output"); if (
document.elementsfrompoint) { let elements =
document.elementsfrompoint(30, 20); for (var i = 0; i < elements.length; i++) { output.textcontent += elements[i].localname; if (i < elements.length - 1) { output.textcontent += " < "; } } } else { output.innerhtml = "<span style=\"color: red;\">" + "browser does not support <code>
document.elementsfrompoint()</code>" + "</span>"; } specifications specification status shadow domthe definition of 'elementsfrompoint()' in that specification...
DocumentOrShadowRoot.nodeFromPoint() - Web APIs
the nodefrompoint() property of the
documentorshadowroot interface returns the topmost node at the specified coordinates (relative to the viewport).
... syntax var node =
document.nodefrompoint(x, y); parameters x a double representing the horizontal coordinate of a point.
... examples html content <div> <p>some text</p> </div> <p>top node at point 30, 20:</p> <div id="output"></div> javascript content var output =
document.getelementbyid("output"); if (
document.nodefrompoint) { var node =
document.nodefrompoint(30, 20); output.textcontent += node.localname; } else { output.innerhtml = "<span style=\"color: red;\">" + "browser does not support <code>
document.nodefrompoint()</code>" + "</span>"; } specifications not part of any specification at present.
DocumentOrShadowRoot.nodesFromPoint() - Web APIs
the nodesfrompoint() property of the
documentorshadowroot interface returns an array of all nodes at the specified coordinates (relative to the viewport).
... syntax var nodes =
document.nodesfrompoint(x, y); parameters x the horizontal coordinate of a point.
... example html content <div> <p>some text</p> </div> <p>nodes at point 30, 20:</p> <div id="output"></div> javascript content var output =
document.getelementbyid("output"); if (
document.nodesfrompoint) { var nodes =
document.nodesfrompoint(30, 20); for(var i = 0; i < nodes.length; i++) { output.textcontent += nodes[i].localname; if (i < nodes.length - 1) { output.textcontent += " < "; } } } else { output.innerhtml = "<span style=\"color: red;\">" + "browser does not support <code>
document.nodesfrompoint()</code>" + "</span>"; } specifications not part of any specification at present.
DocumentOrShadowRoot.styleSheets - Web APIs
the stylesheets read-only property of the
documentorshadowroot interface returns a stylesheetlist of cssstylesheet objects, for stylesheets explicitly linked into or embedded in a
document.
... examples function getstylesheet(unique_title) { for (var i=0; i<
document.stylesheets.length; i++) { var sheet =
document.stylesheets[i]; if (sheet.title == unique_title) { return sheet; } } } notes the returned list is ordered as follows: stylesheets retrieved from <link> headers are placed first, sorted in header order.
... specifications specification status comment shadow domthe definition of '
documentorshadowroot' in that specification.
contentDocument - Web APIs
if the iframe and the iframe's parent
document are same origin, returns a
document (that is, the active
document in the inline frame's nested browsing context), else returns null.
... example of content
document var iframe
document =
document.getelementsbytagname("iframe")[0].content
document; iframe
document.body.style.backgroundcolor = "blue"; // this would turn the iframe blue.
... specifications specification status comment html living standardthe definition of 'htmliframeelement: content
document' in that specification.
HTMLObjectElement.contentDocument - Web APIs
the content
document read-only property of the htmlobjectelement interface returns a
document representing the active
document of the object element's nested browsing context, if any; otherwise null.
... syntax var
document = htmlobjectelement.content
document; value a
document.
... specifications specification status comment html living standardthe definition of 'content
document' in that specification.
SecurityPolicyViolationEvent.documentURI - Web APIs
the
documenturi read-only property of the securitypolicyviolationevent interface is a usvstring representing the uri of the
document or worker in which the violation was found.
... syntax let
documenturi = violationeventinstance.
documenturi; value a usvstring representing the uri of the
document or worker in which the violation was found.
... example
document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.
documenturi); }); specifications specification status comment content security policy level 3the definition of '
documenturi' in that specification.
Window.document - Web APIs
window.
document returns a reference to the
document contained in the window.
... example console.log(window.
document.title); specifications specification status comment html living standardthe definition of 'window.
document' in that specification.
... living standard html5the definition of 'window.
document' in that specification.
XMLDocument.async - Web APIs
document.async can be set to indicate whether a xml
document.load() call should be an asynchronous or synchronous request.
... true is the default value, indicating that
documents should be loaded asynchronously.
... (it has been possible to load
documents synchronously since 1.4 alpha.) example function loadxmldata(e) { alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } var xmldoc =
document.implementation.create
document("", "test", null); xmldoc.async = false; xmldoc.onload = loadxmldata; xmldoc.load('querydata.xml'); ...
<head>: The Document Metadata (Header) element - HTML: Hypertext Markup Language
the html <head> element contains machine-readable information (metadata) about the
document, like its title, scripts, and style sheets.
... permitted content if the
document is an <iframe> srcdoc
document, or if title information is available from a higher level protocol (like the subject line in html email), zero or more elements of metadata content.
... example <!doctype html> <html> <head> <title>
document title</title> </head> </html> notes html5-compliant browsers automatically create a <head> element if its tags are omitted in the markup.
documentCharsetInfo - Archive of obsolete content
« xul reference
documentcharsetinfo obsolete since gecko 12.0 type: nsi
documentcharsetinfo this read-only property contains the nsi
documentcharsetinfo object for the
document which is used to handle which character set should be used to display the
document.
... the properties of the nsi
documentcharsetinfo object were merged into the docshell in gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9).
Tamarin Tracing Build Documentation - Archive of obsolete content
for instructions on tamarin central, please see tamarin build
documentation supported platforms operating system processor status windows xp x86 supported, acceptance and performance tests automated in buildbot mac os x 10.4 x86 supported, acceptance and performance tests automated in buildbot linux - ubuntu 8.0.4 x86 supported, acceptance and performance tests automated in buildbot windows mobile (pocket pc 5.0) armv4t supported, acceptance and performance tests automated in buildbot raw image (no os) armv5 supported, acceptance and performance tests not done linux (nokia n810) armv5 supported, acceptance and performance tests not done current build status t...
...
documentation on how to setup a user repository http://developer.mozilla.org/en/publishing_mercurial_clones.
mozbrowserdocumentfirstpaint
the mozbrowser
documentfirstpaint event is fired when a new paint occurs on any
document in the browser <iframe>.
... example var browser =
document.queryselector("iframe"); browser.addeventlistener("mozbrowser
documentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertit...
SpiderMonkey Build Documentation
building spidermonkey obsolete: the canonical
documentation now lives at: https://firefox-source-docs.mozilla.org/js/build.html.
... building your application while "how to build your complete application" is clearly out of scope for this
document, here are some tips that will help get you on your way: the spidermonkey developers frequently and deliberately change the jsapi abi.
Document() - Web APIs
the
document constructor creates a new
document object that is a web page loaded in the browser and serving as an entry point into the page's content.
... syntax new
document(); specifications specification status comment domthe definition of '
document' in that specification.
Document.URL - Web APIs
the url read-only property of the
document interface returns the
document location as a string.
... syntax const url =
document.url example javascript
document.getelementbyid("url").textcontent =
document.url; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p> result specifications specification status comment domthe definition of '
document.url' in that specification.
Document: animationcancel event - Web APIs
you can listen for this event on the
document interface to handle it in the capture or bubbling phases.
...
document.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); the same, but using the onanimationcancel property instead of addeventlistener():
document.onanimationcancel = () => { console.log('animation canceled'); }; see a live example of this event.
Document: animationend event - Web APIs
you can listen for this event on the
document interface to handle it in the capture or bubbling phases.
... examples this example listens for the animationend event:
document.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property:
document.onanimationend = () => { console.log('animation ended'); }; see a live example of this event.
Document: animationiteration event - Web APIs
you can listen for this event on the
document interface to handle it in the capture or bubbling phases.
... examples this code uses animationiteration to keep track of the number of iterations an animation has completed: let iterationcount = 0;
document.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: let iterationcount = 0;
document.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; see a live example of this event.
Document: animationstart event - Web APIs
you can listen for this event on the
document interface to handle it in the capture or bubbling phases.
... examples this listens for the animationstart event and logs a message when it is fired:
document.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart:
document.onanimationstart = () => { console.log('animation started'); }; see a live example of this event.
Introduction to using XPath in JavaScript - XPath
this
document describes the interface for using xpath in javascript internally, in extensions, and from websites.
... mozilla implements a fair amount of the dom 3 xpath, which means that xpath expressions can be run against both html and xml
documents.
... the main interface to using xpath is the evaluate function of the
document object.
...And 42 more matches
nsIDocShell
instead, retrieve an nsidocshell from a browser or other
document container element.
...obsolete since gecko 1.8 nsisimpleenumerator getdocshellenumerator(in long aitemtype, in long adirection); nsidomstorage getsessionstorageforprincipal(in nsiprincipal principal, in domstring
documenturi, in boolean create); nsidomstorage getsessionstorageforuri(in nsiuri uri, in domstring
documenturi); void historypurged(in long numentries); void internalload(in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint32 aflags, in wstring awindowtarget, in string atypehint, in nsiinputstream apostdatastream, in nsiinputstream aheadersstream, in unsigned...
...setting this will make it take effect starting with the next
document loaded in the docshell.
...And 41 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.
... 29 bidi accessibility, glossary bidi (bidirectional) refers to a
document containing both right-to-left and left-to-right text.
... 43 browsing context glossary a browsing context is the environment a browser displays a
document.
...And 39 more matches
Introduction to the DOM - Web APIs
the
document object model (dom) is the data representation of the objects that comprise the structure and content of a
document on the web.
...we'll look at how the dom represents an html or xml
document in memory and how you use apis to create web content and applications.
... the
document object model (dom) is a programming interface for html and xml
documents.
...And 36 more matches
page-mod - Archive of obsolete content
for example, the following add-on displays an alert whenever the user visits any page hosted at "mozilla.org": var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'window.alert("page matches ruleset");' }); you can modify the
document in your script: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: '
document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); you can supply the content script(s) in one of two ways: as a string literal, or an array of string literals, assigned to the contentscript option, as above as separate files supplied in...
... a page-mod only attaches scripts to
documents loaded in tabs.
... attachto controls whether to attach scripts to tabs that were already open when the page-mod was created, and whether to attach scripts to iframes as well as the topmost
document.
...And 35 more matches
Index
14 introduction to xpcom for the dom developing mozilla warning: this
document has not yet been reviewed by the dom gurus, it might contain some errors.
... 61 xpconnect wrappers guide, needscontent, xpcom, xpcom:language bindings, xpconnect this
document is a high-level overview of xpconnect wrapper objects (for the more technical description see xpconnect security membranes).
... 62 appshellservice xpcom:language bindings, xpconnect quitting mozilla: 63 nsiprofile interfaces, xpcom, xpcom:language bindings, xpconnect this interface is obsolete; you should use nsitoolkitprofileservice instead; however, reference
documentation for nsiprofile is available if you're working with old code.
...And 35 more matches
jspage - Archive of obsolete content
c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]); }break;case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:return c;}return b;}var browser=$merge({engine:{name:"unknown",version:0},platform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(
document.evaluate),air:!!(window.runtime),query:!!(
document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((
document.getelementsbyclassname)?950:925)); },trident:function(){return(!window.activexobject)?false:((window.xmlhttprequest)?((
document.queryselectorall)?6:5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.fea...
...tures.xpath)?((browser.features.query)?525:420):419); },gecko:function(){return(!
document.getboxobjectfor&&window.mozinnerscreenx==null)?false:((
document.getelementsbyclassname)?19:18);}}},browser||{});browser.platform[browser.platform.name]=true; browser.detect=function(){for(var b in this.engines){var a=this.engines[b]();if(a){this.engine={name:b,version:a};this.engine[b]=this.engine[b+a]=true; break;}}return{name:b,version:a};};browser.detect();browser.request=function(){return $try(function(){return new xmlhttprequest();},function(){return new activexobject("msxml2.xmlhttp"); },function(){return new activexobject("microsoft.xmlhttp");});};browser.features.xhr=!!(browser.request());browser.plugins.flash=(function(){var a=($try(function(){return navigator.plugins["shockwave flash"].description; ...
...},function(){return new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(window.execscript){window.execscript(b);}else{var a=
document.createelement("script");a.setattribute("type","text/javascript"); a[(browser.engine.webkit&&browser.engine.version<420)?"innertext":"text"]=b;
document.head.appendchild(a);
document.head.removechild(a);}return b;}native.uid=1; var $uid=(browser.engine.trident)?function(a){return(a.uid||(a.uid=[native.uid++]))[0];}:function(a){return a.uid||(a.uid=native.uid++);};var window=new native({name:"window",legacy:(browser.engine.trident)?null:window.window,initialize:function(a){$uid(a); if(!a.element){a.elemen...
...And 34 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
the rel attribute defines the relationship between a linked resource and the current
document.
... values for the rel attribute, and the elements for which each is relevant rel value description <link> <a> and <area> <form> alternate alternate representations of the current
document.
... link link not allowed author author of the current
document or article.
...And 34 more matches
Index - Archive of obsolete content
30 browser.type xul attributes, xul reference type: one of the values below.the type of browser, which can be used to set access of the
document loaded inside the browser.
...it explains the concept of dom
documents, demonstrates a few simple examples of using dom calls to perform basic manipulations on a
document, and then demonstrates working with anonymous xbl content using mozilla-specific methods.
... 477 getbrowserfor
document method, mozilla, reference, référence(2), xul, xul methods, xul reference no summary!
...And 33 more matches
Mozilla
mozilla strives to make its software accessible; the
documents below cover the ways in which we do so.
... adding a new event this draft
document covers how to add a new event to the mozilla (firefox) source code.
...all top level
document loading (navigation) channels are set chooseapplicationcache flag, which happens in nsdocshell::douriload().
...And 32 more matches
HTML elements reference - HTML: Hypertext Markup Language
main root element description <html> the html <html> element represents the root (top-level element) of an html
document, so it is also referred to as the root element.
...
document metadata metadata contains information about the page.
... element description <base> the html <base> element specifies the base url to use for all relative urls in a
document.
...And 30 more matches
browser - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a xul <browser> element represents a frame which is expected to contain a view of a web
document.
...other urls will need to use the
document and history objects to change the displayed
document.
... attributes autocompleteenabled, autocompletepopup, autoscroll, disablehistory, disableglobalhistory, disablesecurity, droppedlinkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, content
document, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell,
documentcharsetinfo, homepage, markup
documentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser...
...And 29 more matches
tabbrowser - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used for holding a set of read-only views of web
documents.
... it is similar to the browser element, except that multiple
documents can be displayed, each in a separate tab.
... attributes autocompleteenabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, content
document, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell,
documentcharsetinfo, homepage, markup
documentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfor
document,...
...And 29 more matches
Elements - Archive of obsolete content
<!element bindings ( binding* ) > hierarchy: root element may contain: <binding> the bindings element is the root element of any xbl
document.
...each binding child element defines a unique binding that can be attached to elements in other
documents.
... default encoding in xml
documents (including xbl files) is utf-8.
...And 28 more matches
Event reference
beforeunload the window, the
document and its resources are about to be unloaded.
... unload the
document or a dependent resource is being unloaded.
... resize the
document view has been resized.
...And 28 more matches
Feature-Policy - HTTP
the http feature-policy header provides a mechanism to allow and deny the use of browser features in its own frame, and in content within any <iframe> elements in the
document.
... <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 28 more matches
Mozilla accessibility architecture
intro this
document is for people who wish to understand the architecture of mozilla's accessibility api module, which provides support for platform accessibility apis.
... accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, which need information about
document content and ui controls, as well as important events like changes of focus.
...please note, the
documentation for implementing an msaa server has moved.
...And 27 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
note: if you want to contribute to this
document please follow the guidelines on the contribute page.
... « previousnext » this
document was authored by hiroshi shimoda of clear code inc.
... because html was originally conceived as a language for marking up
documents, specifically web pages, it is inevitably lacking in functionality for marking up applications.
...And 26 more matches
Mozilla DOM Hacking Guide
in this
document i will try to outline the main aspects of the implementation, beginning with the class info mechanism, which lies at the heart of the dom, then with the description of various interfaces and classes.
...if you can contribute any time or knowledge to this
document, it is greatly appreciated!
...if you don't know xpcom yet, and would like to be able to read this
document quickly, you can read the introduction to xpcom for the dom.
...And 26 more matches
Mozilla Web Developer FAQ
this
document answers questions that web authors ask frequently specifically in connection with firefox and other gecko-based browsers.
... there are links to more general web authoring faqs at the end of this
document.
...in the standards mode gecko aims to treat
documents authored in compliance with the applicable web format specifications.
...And 26 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
practical tips for developers and how mozilla does it contents this
document is for developers working to support msaa in an application in order to make it accessible with 3rd party assistive technologies, as well as for hackers wishing to be involved in mozilla's msaa support specifically.
...they need to know about focus changes and other events, and it needs to know what objects are contained in the current
document or dialog box.
... using this information, a screen reader will speak out loud important changes to the
document or ui, and allow the user to track where they navigate.
...And 26 more matches
Introduction to XUL - Archive of obsolete content
ui designers and build engineers will need to maintain separate, platform-specific versions of at least some xul
documents.
...we don't have a current "requirements"
document.
...relative placement of widgets, their interactions with each other, and optionally some of their configuration, will be controlled by a ui layout specified in a script whose structure is defined in this and related
documents.
...And 25 more matches
Dynamically modifying XUL-based user interface - Archive of obsolete content
it explains the concept of dom
documents, demonstrates a few simple examples of using dom calls to perform basic manipulations on a
document, and then demonstrates working with anonymous xbl content using mozilla-specific methods.
...you may also want to read some introductory
documents about dom, like the about the
document object model article or the introduction page of the gecko dom reference.
...in xul applications javascript defines the behavior, using dom apis to access the xul
document.
...And 24 more matches
nsIIOService
aloadingnode the loading
document of the channel.
... this is the
document/element that will get access to the result of this request.
... for example for an image load, it's the
document in which the image will be loaded.
...And 23 more matches
Fullscreen API - Web APIs
methods the fullscreen api adds methods to the
document and element interfaces to allow turning off and on full-screen mode.
... methods on the
document interface
document.exitfullscreen() requests that the user agent switch from full-screen mode back to windowed mode.
... properties the
document interface provides properties that can be used to determine if full-screen mode is supported and available, and if full-screen mode is currently active, which element is using the screen.
...And 22 more matches
Window - Web APIs
the window interface represents a window containing a dom
document; the
document property points to the dom
document loaded in that window.
... a window for a given
document can be obtained using the
document.defaultview property.
...many of these are
documented in the javascript reference and the dom reference.
...And 22 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
margin: 5px 5%; color: #777; position: relative; float: left; } #output .property { height: 100%; width: 12%; position: absolute; left: 0; } #output .value { width: 88%; position: absolute; white-space: pre; word-wrap: break-word; display: block; right: 0; } javascript content var uicolorpicker = (function uicolorpicker() { 'use strict'; function getelembyid(id) { return
document.getelementbyid(id); } var subscribers = []; var pickers = []; /** * rgba color class * * hsv/hsb and hsl (hue, saturation, value / brightness, lightness) * @param hue 0-360 * @param saturation 0-100 * @param value 0-100 * @param lightness 0-100 */ function color(color) { if(color instanceof color === true) { this.copy(color); return; } this.r = 0; this...
... return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener('mousedown', function(e) { callback(e);
document.addeventlistener('mousemove', callback); });
document.addeventlistener('mouseup', function(e) {
document.removeeventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node) { this.color = new color(); this.node = node; this.subscribers = []; var type = this.node.getattribute('data-mode'); ...
...('hexa', 'hexa', this.inputchangehexa.bind(this)); this.setcolor(this.color); pickers[topic] = this; } /*************************************************************************/ // function for generating the color-picker /*************************************************************************/ colorpicker.prototype.createpickingarea = function createpickingarea() { var area =
document.createelement('div'); var picker =
document.createelement('div'); area.classname = 'picking-area'; picker.classname = 'picker'; this.picking_area = area; this.color_picker = picker; setmousetracking(area, this.updatecolor.bind(this)); area.appendchild(picker); this.node.appendchild(area); }; colorpicker.prototype.createhuearea = function createhuearea() { var area = docume...
...And 22 more matches
Introduction to XPCOM for the DOM
warning: this
document has not yet been reviewed by the dom gurus, it might contain some errors.
... this
document is an introduction to the use of xpcom in the context of the dom code.
... the use of xpcom and nscomptr's described in this
document covers about 80% of what you need to know to read the dom code, and even write some.
...And 21 more matches
Color picker tool - CSS: Cascading Style Sheets
; opacity: 0; top: -10000px; left: 0; color: #777; float: left; transition: opacity 1s; } #zindex input { border: 1px solid #ddd; font-size: 16px; color: #777; } #zindex .ui-input-slider-info { width: 60px; } #zindex[data-active='true'] { top: 0; opacity: 1; } javascript content 'use strict'; var uicolorpicker = (function uicolorpicker() { function getelembyid(id) { return
document.getelementbyid(id); } var subscribers = []; var pickers = []; /** * rgba color class * * hsv/hsb and hsl (hue, saturation, value / brightness, lightness) * @param hue 0-360 * @param saturation 0-100 * @param value 0-100 * @param lightness 0-100 */ function color(color) { if(color instanceof color === true) { this.copy(color); return; } this.r = 0; this...
... return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener('mousedown', function(e) { callback(e);
document.addeventlistener('mousemove', callback); });
document.addeventlistener('mouseup', function(e) {
document.removeeventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node) { this.color = new color(); this.node = node; this.subscribers = []; var type = this.node.getattribute('data-mode'); ...
...('hexa', 'hexa', this.inputchangehexa.bind(this)); this.setcolor(this.color); pickers[topic] = this; } /*************************************************************************/ // function for generating the color-picker /*************************************************************************/ colorpicker.prototype.createpickingarea = function createpickingarea() { var area =
document.createelement('div'); var picker =
document.createelement('div'); area.classname = 'picking-area'; picker.classname = 'picker'; this.picking_area = area; this.color_picker = picker; setmousetracking(area, this.updatecolor.bind(this)); area.appendchild(picker); this.node.appendchild(area); }; colorpicker.prototype.createhuearea = function createhuearea() { var area = docume...
...And 21 more matches
Getting started with CSS - Learn web development
previous overview: first steps next in this article we will take a simple html
document and apply css to it, learning some practical things about the language along the way.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to understand the basics of linking a css
document to an html file, and be able to do simple text formatting with css.
... starting with some html our starting point is an html
document.
...And 20 more matches
HTML parser threading
(there's currently one parser thread serving all parser instances.) data received from
document.write() is parsed on the main thread.
... main objects nshtml5parser contains the code for dealing with data from
document.write().
...parsers created using
document.open()) don't have an nshtml5streamparser instance.
...And 20 more matches
Layout System Overview - Archive of obsolete content
layout's job: provide the presentation layout is primarily concerned with providing a presentation to an html or xml
document.
...the decision about when to apply css-specified formatting and when to apply legacy formatting is controlled by the
document's doctype specification.
...in other words, the same html or xml
document could be viewed as a normal galley presentation in a browser window, while simultaneously being presented in a paged presentation to a printer, or even an aural presentation to a speech-synthesizer.
...And 19 more matches
XML in Mozilla - Archive of obsolete content
supported core xml w3c recommendations the core xml support includes parsing xml without validation (we use the expat parser), displaying xml with css, manipulating xml
documents with scripts via dom, associating stylesheets with xml
documents, and namespaces in xml.
...another exception is an entity whose system identifier is a relative path, and the xml declaration states that the
document is not standalone (default), in which case mozilla will try to look for the entity under <bin>/res/dtd directory.
... mozilla may also make an exception with xhtml
documents, see below.
...And 19 more matches
Performance best practices for Firefox front-end engineers
hide your panels if you’re adding a new xul <xul:popup> or <xul:panel> to a
document, set the hidden attribute to true by default.
... by doing so, you cause the binding applied on demand rather than at load time, which makes initial construction of the xul
document faster.
... when css is applied to a
document (html or xul, it doesn’t matter), the browser does calculations to figure out which css styles will apply to each element.
...And 19 more matches
nsIEditor
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) method overview [noscript] void init(in nsidom
document doc, in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags); void setattributeorequivalent(in nsidomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframes); ...
... selected content removal void deleteselection(in short action, in short stripwrappers);
document info and file methods void resetmodificationcount(); long getmodificationcount(); void incrementmodificationcount(in long amodcount); void incrementmodificationcount(in long amodcount); transaction methods void dotransaction(in nsitransaction txn); void enableundo(in boolean enable); void undo(in unsigned long count); void canundo(out boolean isenabled, out boolean canundo); void redo(in unsigned long count); void canredo(out boolean isenabled, out boolean canredo); void begintransaction(); void endtransaction(); void beginplaceholdertransaction(in nsiato...
...te); void syncrealtimespell(); void setspellcheckuseroverride(in boolean enable); clipboard methods void cut(); boolean cancut(); void copy(); boolean cancopy(); void paste(in long aselectiontype); boolean canpaste(in long aselectiontype); selection methods void selectall(); void beginningof
document(); void endof
document(); drag/drop methods boolean candrag(in nsidomevent aevent); void dodrag(in nsidomevent aevent); void insertfromdrop(in nsidomevent aevent); node manipulation methods void setattribute(in nsidomelement aelement, in astring attributestr,in astring attvalue); boolean getattributevalue(in nsidomelement aele...
...And 19 more matches
Timing element visibility with the Intersection Observer API - Web APIs
the intersection observer api makes it easy to be asynchronously notified when elements of interest become more or less obscured by a shared ancestor node or element, including the
document itself.
... 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).
... setting up to set things up, we run the startup() function below when the page loads: window.addeventlistener("load", startup, false); function startup() { contentbox =
document.queryselector("main");
document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.75] }; adobserver = new intersectionobserver(intersectioncallback, observeroptions); buildcontents(); refreshintervalid = window.setinterval(handlerefreshinterval, 1000); } fi...
...And 19 more matches
SVGSVGElement - Web APIs
if no parent element exists (i.e., <svg> element represents the root of the
document tree), if this svg
document is embedded as part of another
document (e.g., via the html <object> element), then the position and size are unitless values in the coordinate system of the parent
document.
... svgsvgelement.usecurrentview the initial view (i.e., before magnification and panning) of the current innermost svg
document fragment can be either the "standard" view, i.e., based on attributes on the <svg> element such as viewbox) or on a "custom" view (i.e., a hyperlink into a particular <view> or other element).
... svgsvgelement.currentview an svgviewspec defining the initial view (i.e., before magnification and panning) of the current innermost svg
document fragment.
...And 19 more matches
Rich-Text Editing in Mozilla - Developer guides
note: this
document is out-of-date; you are advised to consult the more up-to-date
document available at making content editable.
...the rich-text editing support in mozilla 1.3 supports the designmode feature which turns html
documents into rich-text editors.
... setting up rich-text editing rich-text editing is initialized by setting the designmode property of a
document to "on", such as the
document inside an iframe.
...And 19 more matches
dev/panel - Archive of obsolete content
"dev/panel"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool", icon: "./my-devtool.png", url: "./my-devtool.html", setup: function(options) { // my setup goes here }, dispose: function() { // my teardown goes here }, onready: function() { // i can send messages to // the panel
document here } }); alternatively, you can use the extend function: const { extend } = require("sdk/core/heritage"); function mypanel() {}; mypanel.prototype = extend(panel.prototype, { label: "my panel", tooltip: "...", ....
... optional onready function an event handler that will be called when the
document in the panel becomes interactive.
... it's equivalent to
document.readystate === "interactive".
...And 18 more matches
Using the Editor from XUL - Archive of obsolete content
overview the editor in xul lives on top of a xul <iframe> element; it observes
document loading in this <iframe>, and, when
document loading is complete, it instantiates an editor on the loaded
document.
...having an id attribute, id="content-frame", allows us to find this element with
document.getelementbyid("content-frame"), and to style it from css.
...we could either pass
document.getelementbyid("content-frame") or window._content here.
...And 18 more matches
Writing JavaScript for XHTML - Archive of obsolete content
in practise, very few xhtml
documents are served over the web with the correct mime media type, application/xhtml+xml.
... (note that xhtml
documents which behave correctly in both application/xhtml+xml and text/html environments are sometimes known as 'polyglot'
documents.) to test the following examples locally, use firefox's extension switch.
...before processing the file, all comments will be stripped from the
document, so enclosing your script in them is like throwing your lunch in a piranha pool.
...And 18 more matches
nsIDOMWindowUtils
an 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 nsicyclecollectorlistener alistener); short getcursortype(); astring get
documentmetadata(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 aflushlayout, out long ascrollx, out long ascrolly); astring getvisiteddepe...
...ng type); nsidomnodelist 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 render
document(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext athebescontext); native code only!
... doccharsetisforced boolean whether the charset of the window's current
document has been forced by the user.
...And 18 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
if the user clicks on a link item, the script will be responsible to load the information from the data source and to apply that into the current
document.
...data bind: mutation in the current
document this step takes care of applying the changes into the current
document, based on the data loaded, and uses dom interfaces.
... the mechanism can be as simple as copying new content to the current
document, or as complex as performing dynamic transformations on the data source before applying the changes into the current
document.
...And 17 more matches
Binding Attachment and Detachment - Archive of obsolete content
an individual url in the set consists of the binding
document's url and the binding's
document-unique identifier.
... whenever an element is removed from a
document, any bindings attached via css loaded by the
document will be detached.
... note: some older papers mentioned dom methods
document.addbinding and
document.removebinding; these were subsequently discarded as redundant and not implemented.
...And 17 more matches
Index - Learn web development
beginner,
document, guide, needsactivelearning, web, web development, webmechanics, troubleshooting so you've published your website online?
...this article doesn't attempt to
document all the possible methods.
... 46 how to contribute to the learning area on mdn beginner, contribute,
documentation, guide, learn, mdn meta, l10n:priority on this page, you'll find everything you need to start helping improve mdn's learning content.
...And 17 more matches
source-editor.jsm
sourceeditor.modes.html "html" html
document.
... sourceeditor.modes.text "text" utf-8 text
document.
... sourceeditor.modes.xml "xml" xml
document.
...And 17 more matches
nsIHTMLEditor
id increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidom
document asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alisttype, in boolean entirelist, in astring abullettype); boolean nodeisblock(in nsidomnode node); ...
... void pastenoformatting(in long aselectiontype); void rebuild
documentfromsource(in astring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void removeinlineproperty(in nsiatom aproperty, in astring aattribute); void removeinsertionlistener(in nsicontentfilter infilter); void removelist(in astring alisttype); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void setbackgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafterelement(in nsidomelement aelem...
...ent); void setcssinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void set
documenttitle(in astring atitle); void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setparagraphformat(in astring aparagraphformat); void updatebaseurl(); attributes attribute type description iscssenabled boolean a boolean which is true is the htmleditor has been instantiated with css knowledge and if the css pref is currently checked.
...And 17 more matches
nsIWebProgressListener
note: for
document requests, a second state_stop is generated (see the description of state_is_window for more details).
... constant value description state_is_request 0x00010000 this flag indicates that the state transition is for a request, which includes but is not limited to
document requests.
... (see below for a description of
document requests.) other types of requests, such as requests for inline content (for example images and stylesheets) are considered normal requests.
...And 17 more matches
Working with windows in chrome code
so, for example, to access the dom
document corresponding to the window, you can use win.
document.
... note however, that the open() call returns before the window is fully loaded, so some calls, like win.
document.getelementbyid() will fail.
... you can get a window object from a
document using
document.defaultview.
...And 17 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
the dom methods presented here are part of the
document object model (core) level 1 specification.
... dom level 1 includes both methods for generic
document access and manipulation (dom 1 core) as well as methods specific to html
documents (dom 1 html).
... example: creating an html table dynamically (sample1.html) html <input type="button" value="generate a table." onclick="generate_table()"> javascript function generate_table() { // get the reference for the body var body =
document.getelementsbytagname("body")[0]; // creates a <table> element and a <tbody> element var tbl =
document.createelement("table"); var tblbody =
document.createelement("tbody"); // creating all cells for (var i = 0; i < 2; i++) { // creates a table row var row =
document.createelement("tr"); for (var j = 0; j < 2; j++) { // create a <td> element and a text node, make the text // node the contents of the <td>, and put the <td> at // the end of the table row var cell =
document.createelement("td"); var celltex...
...And 17 more matches
Index - HTTP
29 csp: base-uri csp, directive,
document directive, http, security the http content-security-policy base-uri directive restricts the urls which can be used in a
document's <base> element.
... 42 csp: plugin-types csp, directive, flash, http, java, plugins, security the http content-security-policy (csp) plugin-types directive restricts the set of plugins that can be embedded into a
document by limiting the types of resources which can be loaded.
...these violation reports consist of json
documents sent via an http post request to the specified uri.
...And 17 more matches
Authoring MathML - 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.
...this is out of the scope of this
document but anyone with basic knowledge of web languages will easily be able to mix these features with mathml.
... using mathml mathml in html pages you can use presentation mathml inside html5
documents: <!doctype html> <html> <head> <title>mathml in html5</title> </head> <body> <h1>mathml in html5</h1> <p> square root of two: <math> <msqrt> <mn>2</mn> </msqrt> </math> </p> </body> </html> content mathml is not supported by browsers.
...And 17 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
t/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes found 54 pages: # page tags and summary 1 xslt: extensible stylesheet language transformations landing, web, xslt extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml
documents.
... 8 interface list needscontent, reference see xsltprocessor in the web api
documentation section.
...javascript can enable a web application to load xml data, process it via xslt into a presentable form and then add it into an existing
document.
...And 17 more matches
nsIContentViewer
[noscript,notxpcom] nsi
documentptr get
document(); void hide(); void init(in nsiwidgetptr aparentwidget, [const] in nsintrectref abounds); native code only!
... void set
documentinternal(in nsi
documentptr a
document, in boolean aforcereuseinnerwindow); native code only!
... [noscript,notxpcom,nostdcall] void setnavigationtiming(in nsdomnavigationtimingptr atiming); void setpagemode(in boolean apagemode, in nsiprintsettings aprintsettings); void show(); void stop(); void unload(); obsolete since gecko 1.8 attributes attribute type description container nsisupports dom
document nsidom
document enablerendering boolean obsolete since gecko 2.0 historyentry nsishentry get the history entry that this viewer will save itself into when destroyed.
...And 16 more matches
The HTML DOM API - Web APIs
can be found in the
documentation for those apis.
... structure of an html
document the
document object model (dom) is an architecture that describes the structure of a
document; each
document is represented by an instance of the interface
document.
... a
document, in turn, consists of a hierarchical tree of nodes, in which a node is a fundamental record representing a single object within the
document (such as an element or text node).
...And 16 more matches
Node - Web APIs
most notable are
document, element, and
documentfragment.
...these include attr, characterdata (which text, comment, and cdatasection are all based on), processinginstruction,
documenttype, notation, entity, and entityreference.
... node.baseuriread only returns a domstring representing the base url of the
document containing the node.
...And 16 more matches
Border-image generator - CSS: Cascading Style Sheets
0%; font-weight: bold; text-align: right; float: left; } #output .css-property .value { width: 65%; padding: 0 2.5%; word-break: break-all; float: left; } javascript content 'use strict'; /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input =
document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); r...
...eturn input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider =
document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) {
document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value;
document.body.style.cursor = "e-resize";
document.addeventlistener("mouseup", slideend);
document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) {
document.removeeventlistener("mousemove", slidermotion);
document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = fu...
...this.min : value; var input = new inputcomponent(this); var slider_left = new slidercomponent(this, -1); var slider_right = new slidercomponent(this, 1); slider_left.classname = 'ui-input-slider-left'; slider_right.classname = 'ui-input-slider-right'; if (name) { var info =
document.createelement('span'); info.classname = 'ui-input-slider-info'; info.textcontent = name; node.appendchild(info); } node.appendchild(slider_left); node.appendchild(input); node.appendchild(slider_right); this.input = input; sliders[topic] = this; setvalue(topic, value); }; inputslider.prototype.setinputvalue = function setinputvalue() { this.input.value = this.value.t...
...And 16 more matches
HTML5 Parser - Developer guides
calling
document.write() during parsing prior to html5, gecko and webkit allowed calls to
document.write() during parsing to insert content into the source stream.
...if the call happened after the parser was done, the inserted content replaced the
document.
... in ie, such calls are either ignored or imply a call to
document.open(), replacing the
document.
...And 16 more matches
Navigation and resource timings - Web Performance
navigation timings are metrics measuring a browser's
document navigation events.
...both provide the same read-only properties, but navigation timing measures the main
document's timings whereas the resource timing provides the times for all the assets or resources called in by that main
document and the resources' requested resources.
... the order is: performance timings details navigationstart when the prompt for unload terminates on the previous
document in the same browsing context.
...And 16 more matches
editor - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a frame which is expected to contain an editable
document.
... set the value of the editortype attribute to html to create an editor
document.
... to specify the
document to load in the editor use the src attribute.
...And 15 more matches
Examples - Archive of obsolete content
this page contains the source code of the examples related to the "properly using css and javascript in xhtml
documents" article.
... } </script> </head> <body> <h1>problem 1 - < in xhtml</h1> <p> this
document is not well formed due to the use of a raw <.
...e" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> <!-- body {background-color: blue; color: yellow; } --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> </head> <body> <h1>problem 2 - comments in xhtml</h1> <p> this
document is valid xhtml 1.0 strict served as <code>application/xhtml+xml</code>.
...And 15 more matches
Windows Media in Netscape - Archive of obsolete content
the windows media 9 series sdk
documentation for netscape browsers says that versions of netscape (including 6.2 and 7.0) support the embedding of the windows media player control using a java applet.
...player.mediaplayer.1"); } else { // plugin code using navigator.mimetypes player = navigator.mimetypes["application/x-mplayer2"].enabledplugin; } } catch(e) { // handle error -- no wmp control // download: http://www.microsoft.com/windows/windowsmedia/download/default.asp } if (player) { // windows media player control exists } currently, dynamically writing out markup using
document.write after using detection mechanisms won't work owing to a bug in netscape 7.1.
... activexobject is used by many web developers to detect the presence of internet explorer in much the same fashion as
document.all is used.
...And 15 more matches
Mozilla’s UAAG evaluation report
the uaag
document contains a very rich set of accessibility guidelines, that broadly define how accessibility should be implemented by any user agent, i.e.
...this
document is based on the september 12, 2001 candidate recommendation of uaag 1.0.
...look to the "techniques"
document for real-world implementation examples of each checkpoint.
...And 15 more matches
Index
the templates are usually closely aligned to definitions found in rfc
documents.
...in order to verify a digital signature, we have to look at the application data (e.g., a
document that was signed), the signature data block (the digital signature), and a public key (as found in a certificate that is believed to be the signer, e.g., identified by metadata received together with the signature).
...instead of simply verifying that the requester of a certificate is in control of an administrative email address at the desired web site's domain, it's required that the ca performs a verification of real world identity
documents (such as a company registration
document with the country's authority), and it's also required that a browser software performs a revocation check with the ca, prior to granting validity to the certificate.
...And 15 more matches
Box-shadow generator - CSS: Cascading Style Sheets
true : false; this.topic = topic; this.node = node; var pointer =
document.createelement('div'); pointer.classname = 'ui-slider-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 =...
...tent = '-'; node.addeventlistener("click", function() { decrement(topic); }); } if (type === "add") { node.textcontent = '+'; node.addeventlistener("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.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { setvalue(topic, e.target.value | 0); }); subscribe(topic, function(value) {...
...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.addeventlistener("mousedown", function(e) { callback(e);
document.addeventlistener("mousemove", callback); });
document.addeventlistener("mouseup", function(e) {
document.removeeventlistener("mousemove", callback); }); } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); } var unsubscribe = function unsubscribe(topic, callback) { subscri...
...And 15 more matches
Connecting to Remote Content - Archive of obsolete content
if the response is an xml
document, the responsexml property will hold an xml
document object that can be manipulated using dom methods.
...let's assume that the xml returned from remote server is this: <?xml version="1.0"?> <data> <shops> <shop> <name>apple</name> <code>a001</code> </shop> <shop> <name>orange</name> </shop> </shops> <total>2</total> </data> when a valid xml response comes back from the remote server, the xml
document object can be manipulated using different dom methods, to display the data in the ui or store it into a local datasource.
... request.onload = function(aevent) { let responsexml = aevent.target.responsexml; let rootelement = responsexml.
documentelement; if (rootelement && "parseerror" != rootelement.tagname) { let shopelements = rootelement.getelementsbytagname("shop"); let totalelement = rootelement.getelementsbytagname("total")[0]; window.alert(shopelements[1].getelementsbytagname("name")[0].firstchild.nodevalue); // => orange window.alert(totalelement.firstchild.nodevalue); // => 2 } }; using dom functions is good for simple xml
documents, but dom manipulation code can become too complicated if the
documents are more complex.
...And 14 more matches
Guide to the Fullscreen API - Web APIs
let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen mode as follows: var elem =
document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it.
... notification when fullscreen mode is successfully engaged, the
document which contains the element receives a fullscreenchange event.
... when fullscreen mode is exited, the
document again receives a fullscreenchange event.
...And 14 more matches
TextRange - Web APIs
a textrange object represents a fragment of text in a
document, similar to the standard defined range interface.
... this object is used to represent a specific piece of text in the
document.
...it is implemented in ie, then a textrange object can be created by element.createtextrange() or
document.selection.createrange().
...And 14 more matches
JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
the stylesheet has to be passed in as an xml
document, which means that the .xsl file has to be loaded by the page before calling xsltprocessor.importstylesheet().
... this can be done via xmlhttprequest or xml
document.load().
... // load the xsl file using synchronous (third param is set to false) xmlhttprequest var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example.xsl", false); myxmlhttprequest.send(null); var xslref = myxmlhttprequest.responsexml; // finally import the .xsl xsltprocessor.importstylesheet(xslref); for the actual transformation, xsltprocessor requires an xml
document, which is used in conjunction with the imported xsl file to produce the final result.
...And 14 more matches
Using Remote XUL - Archive of obsolete content
[***aw: we should have a screenshot here of a xul
document loaded in a content window***] this tutorial walks you through the process of building xul-based navigation for the mozilla.org web site.
... after completing the tutorial you should understand how to: create xul
documents; serve them from a web server; use cascading style sheets (css) to change their appearance; use javascript to define their behavior.
... <?php header('content-type: application/vnd.mozilla.xul+xml'); ?> <!-- xul markup starts here --> note that you don't need a web server for this tutorial; you can load the
document you create on your computer via a "file" url or the "open file" function of your browser.
...And 13 more matches
Accessibility API cross-reference
fill out tagged pdf column (relevant
documents from pdf association) add missing aria properties fill out events cross reference table use this info to expand mozilla's accessibility api coverage to include mac, so that we can start to freeze them talk about the fact that msaa uses one interface (iaccessible), wherease gnome accessibility uses a lot of different interfaces depending on the type of object go through the atk info and make...
... alert alert alert alert, alertdialog content changes over time, such as animated gif animation n/a no spec n/a a section that forms an independent part of a
document, page, or site.
...aria role denotes interactive (not browsable) content operable in ways that differ from any of the other interactive aria roles, and may be only a part of the main
document.
...And 13 more matches
Embedding the editor
introduction this
document describes the current state of editor embeddability, problems with the existing implementation, some possible embedding scenarios that we need to deal with, and an embedding solution that will fulfill them.
...<htmlarea> is intended as a shorthand for a rich-text multiline text widget embedded in an html
document, and is not meant to infer that future versions of mozilla will support this specific tag.
...composer embedded in a native application in this application, the <iframe> on which the editor lives is embedded directly in the native application; this is equivalent to embedding the browser via nsiwebbrowser, but instead having an editable
document.
...And 13 more matches
nsIAccessibleRole
role_internal_frame 10 a sub-
document or iframe.
... role_
document 15 represents a
document window.
... a
document window is always contained within an application window.
...And 13 more matches
AbstractRange - Web APIs
a range is an object that indicates the start and end points of a section of content within the
document.
... usage notes range types all ranges of content within a
document are described using instances of interfaces based on abstractrange.
...in order to set a range endpoint within the text of an element, be sure to find the text node inside the element: let startelem =
document.queryselector("p"); let endelem = startelem.queryselector("span"); let range =
document.createrange(); range.setstart(startelem, 0); range.setend(endelem, endelem.childnodes[0].length/2); let contents = range.clonecontents();
document.body.appendchild(contents); this example creates a new range, rng, and sets its starting point to the third child node of the first element whose class is eleme...
...And 13 more matches
Window: popstate event - Web APIs
these methods and their corresponding events can be used to add data to the history stack which can be used to reconstruct a dynamically generated page, or to otherwise alter the state of the content being presented while remaining on the same
document.
... note: when writing functions that process popstate event it is important to take into account that properties like window.location will already reflect the state change (if it affected the current url), but
document might still not.
... if the goal is to catch the moment when the new
document state is already fully in place, a zero-delay settimeout() method call should be used to effectively put its inner callback function that does the processing at the end of the browser event loop: window.onpopstate = () => settimeout(dosomething, 0); when popstate is sent when the transition occurs, either due to the user triggering the browser's "back" button or otherwise, the popstate event is near the end of the process to transition to the new location.
...And 13 more matches
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
the ultimate aim being that we could create a semantic and well structured
document, then apply css to create the layout we desired.
... grid layout gives authors great powers of rearrangement over the
document.
... however, these are not a substitute for correct ordering of the
document source.
...And 13 more matches
Standard metadata names - HTML: Hypertext Markup Language
the <meta> element can be used to provide
document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.
...it is different from the <title> element, which usually contain the application name, but may also contain information like the
document name or a status.
... author: the name of the
document's author.
...And 13 more matches
Link prefetching FAQ - HTTP
link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch
documents that the user might visit in the near future.
... a web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified
documents and stores them in its cache.
... when the user visits one of the prefetched
documents, it can be served up quickly out of the browser's cache.
...And 13 more matches
iframe - Archive of obsolete content
this content is a separate
document.
... warning: when used in chrome-privileged
documents (either html or xul) such as firefox addons, the contents of the frame may have the same permissions as firefox itself.
... attributes showcaret, src, type, transparent properties accessibletype, content
document, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist...
...And 12 more matches
What’s in the head? Metadata in HTML - Learn web development
previous overview: introduction to html next the head of an html
document is the part that is not displayed in the web browser when the page is loaded.
... it contains information such as the page <title>, links to css (if you choose to style your html content with css), links to custom favicons, and other metadata (data about the html, such as the author, and important keywords that describe the
document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup.
... objective: to learn about the html head, its purpose, the most important items it can contain, and what effect it can have on the html
document.
...And 12 more matches
Inner and outer windows
consider that when the user is looking at a
document in a browser window, not only can the
document the user is currently viewing change, but the
document's contents can change.
... then add to that the concept of frames, whereby a
document in a window can itself contain other
documents, which in turn can contain more
documents.
...windows and the bfcache an outer window is a browsing context; that is, the actual environment in which a
document is presented to the user.
...And 12 more matches
Midas
midas can be enabled via javascript on an html
document.
... when midas is enabled, the
document becomes editable by the user.
...internet explorer supports the ability to make an entire
document editable by setting the designmode property of the
document object; this is how midas is invoked in gecko.
...And 12 more matches
Gecko Roles
role_internal_frame a sub-
document.
... role_
document represents a
document window.
... a
document window is always contained within an application window.
...And 12 more matches
Applying styles and colors - Web APIs
function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillstyle = 'rgb(' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ', 0)'; ctx.fillrect(j * 25, i * 25, 25, 25); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshot...
... function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.strokestyle = 'rgb(0, ' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ')'; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample transparency in addition to drawing opaq...
... function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw semi transparent...
...And 12 more matches
Examples of web and XML development using the DOM - Web APIs
wherever possible, the examples use common apis, tricks, and patterns in javascript for manipulating the
document object.
... example 1: height and width the following example shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] =
document.getelementbyid("image1"); arrimages[1] =
document.getelementbyid("image2"); arrimages[2] =
document.getelementbyid("image3"); var objoutput =
document.getelementbyid("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (i+1) + ": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width ...
...ge 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50px; width: 500px;"> </p> <div id="output"> </div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) {
document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="s...
...And 12 more matches
EventTarget.addEventListener() - Web APIs
common targets are element,
document, and window, but the target may be any object that supports events (such as xmlhttprequest).
... html <table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </table> javascript // function to change the content of t2 function modifytext() { const t2 =
document.getelementbyid("t2"); if (t2.firstchild.nodevalue == "three") { t2.firstchild.nodevalue = "two"; } else { t2.firstchild.nodevalue = "three"; } } // add event listener to table const el =
document.getelementbyid("outside"); el.addeventlistener("click", modifytext, false); in this code, modifytext() is a listener for click events registered using addeventlistener().
... html <table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </table> javascript // function to change the content of t2 function modifytext(new_text) { const t2 =
document.getelementbyid("t2"); t2.firstchild.nodevalue = new_text; } // function to add event listener to table const el =
document.getelementbyid("outside"); el.addeventlistener("click", function(){modifytext("four")}, false); notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the modifytext() function, which is responsible for ...
...And 12 more matches
Viewport concepts - CSS: Cascading Style Sheets
that is, the part of the
document you are viewing.
...
documents like this article may be very long.
...content outside the viewport, such as the see also section in this
document, is likely to not be visible onscreen until scrolled into view.
...And 12 more matches
Parsing and serializing XML - Developer guides
domparser constructs a dom tree by parsing a string containing xml, returning a xml
document or
document as appropriate based on the input data.
... xmlhttprequest loads content from a url; xml content is returned as an xml
document object with a dom tree built from the xml itself.
... xpath a technology for creating strings that contain addresses for specific portions of an xml
document, and locating xml nodes based on those addresses.
...And 12 more matches
ui/frame - Archive of obsolete content
constructing frames the frame constructor takes one mandatory option, which is a url pointing to an html
document supplied under your add-ons "data" directory.
... for example, this html
document defines a <select> element and a couple of <span> elements, and includes a css file to style the content and a javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="text/javascript" src="city-info.js"></script> </body> </html> if we save this
document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url...
...the targetorigin argument can be either the uri of the
document hosted by the target, or the wildcard "*".
...And 11 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
sending data from unprivileged
document to chrome an easy way to send data from a web page to an extension is by using custom dom events.
... var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); } }
document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event.
...to trigger the alert() in the listener and pass the data from the web page, write code such as this in the web page: var element =
document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world");
document.
documentelement.appendchild(element); var evt =
document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom.
...And 11 more matches
Tabbed browser - Archive of obsolete content
furthermore another meaning of 'browser' in this
document and in some firefox source is "the tabbrowser element" in a firefox xul window.
... // wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.content
document.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.addeventlistener("load", function () { newtabbrowser.content
document.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).
... reusing by url/uri a common feature found in many extensions is to point the user to chrome:// uris in a browser window (for example, help or about information) or external (on-line http(s)://) html
documents when the user clicks an extension's button or link.
...And 11 more matches
The life of an HTML HTTP request - Archive of obsolete content
the webshell then tells its
documentloader to load (command "view") the specified url.
... [note: passes nswebshell.mobserver as nsistreamobserver and the webshell as nsicontentviewercontainer to the docloader.] (2) the
document loader calls ns_openuri with the url to begin transfering the requested file.
...now the channel knows the content type of the incoming data, so the
documentloader can find an nsi
documentloaderfactory for the "text/html" content type (in this case an nslayoutdlf).
...And 11 more matches
XUL Structure - Archive of obsolete content
the mozilla rendering engine takes the content in the form of html source and transforms it into a
document tree.
... in fact, in mozilla, all
document types, whether they are html or xul, or even svg, are all handled by the same underlying code.
...http://localhost/~username/ ), regardless of whether they are html or xul or another
document type, are limited in the type of operations they can perform, for security reasons.
...And 11 more matches
Using the W3C DOM - Archive of obsolete content
« previousnext » the
document object has properties for accessing collections of elements, such as
document.images and
document.forms.
... some browsers have non-standard properties, such as internet explorer's
document.all[], that are not part of the w3c
document object model (dom) standards and may cause javascript errors in standards-compliant browsers.
... the w3c
document object model provides interfaces dom elements to scriptable objects.
...And 11 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
an example of this approach involved testing for the existence of the
document.images object.
...the existence of
document.layers was sufficient to be sure that the browser was netscape navigator 4 while the existence of
document.all was sufficient to be sure that the browser was microsoft internet explorer 4.
...if (
document.all) { // internet explorer 4+
document.write('<link rel="stylesheet" type="text/css" src="style-ie.css">'); } else if (
document.layers) { // navigator 4
document.write('<link rel="stylesheet" type="text/css" src="style-nn.css">'); } note how the above example only provided stylesheets for internet explorer and navigator 4 and even then only if the visitor has javascript support turned on in th...
...And 11 more matches
HTML text fundamentals - Learn web development
each element represents a different level of content in the
document; <h1> represents the main heading, <h2> represents subheadings, <h3> represents sub-subheadings, and so on.
...
documents with many levels (i.e., a deep heading hierarchy) become unwieldy and difficult to navigate.
...this
document's body currently contains multiple pieces of content—they aren't marked up in any way, but they are separated with linebreaks (enter/return pressed to go onto the next line).
...And 11 more matches
Looping code - Learn web development
itle> <style> html { width: 100%; height: inherit; background: #ddd; } canvas { display: block; } body { margin: 0; } button { position: absolute; top: 5px; left: 5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn =
document.queryselector('button'); const canvas =
document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); let width =
document.
documentelement.clientwidth; let height =
document.
documentelement.clientheight; canvas.width = width; canvas.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { c...
... const cats = ['bill', 'jeff', 'pete', 'biggles', 'jasmin']; let info = 'my cats are called '; const para =
document.queryselector('p'); for (let i = 0; i < cats.length; i++) { info += cats[i] + ', '; } para.textcontent = info; this gives us the following output: hidden code 2 <!doctype html> <html> <head> <meta charset="utf-8"> <title>basic for loop example</title> <style> </style> </head> <body> <p></p> <script> const cats = ['bill', 'jeff', 'pete', 'biggles', 'jasm...
...in']; let info = 'my cats are called '; const para =
document.queryselector('p'); for (let i = 0; i < cats.length; i++) { info += cats[i] + ', '; } para.textcontent = info; </script> </body> </html> note: you can find this example code on github too (also see it running live).
...And 11 more matches
What is JavaScript? - Learn web development
; letter-spacing: 1px; text-transform: 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.addeventlistener('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: the dom (
document object model) api allows you to manipulate html and css, creating, removing and changing html, dynamically applying new styles to your page, etc.
... a very common use of javascript is to dynamically modify html and css to update a user interface, via the
document object model api (as mentioned above).
...And 11 more matches
Server-side web frameworks - Learn web development
the field definitions may also specify their maximum size, default values, selection list options, help text for
documentation, label text for forms etc.
...these allow you to specify the structure of an output
document, using placeholders for data that will be added when a page is generated.
... templates are often used to create html, but can also create other types of
document.
...And 11 more matches
Application cache implementation overview
loading a top level
document from offline cache this happens in nshttpchannel::opencacheentry().
... all top level
document loading (navigation) channels are set chooseapplicationcache flag, which happens in nsdocshell::douriload().
...associating the top level
document with offline cache this happens between
document load start and the first sub-resource download start and is not about associating nsiapplicationcache object with the channel, but with the
document object the load is performed for.
...And 11 more matches
NSPR Contributor Guide
abstract: nspr accepts contributions in the form of bugfixes, new features, libraries, platform ports,
documentation, test cases and other items from many sources.
...nspr wishes to
document some guidelines for those who would contribute to nspr.
... coding style nspr does not have a
documented coding style guide.
...And 11 more matches
NSS functions
other sources of information: the nss_reference
documents the functions most commonly used by applications to support ssl.
... the nss home page links to additional ssl
documentation.
... 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.
...And 11 more matches
Using files from web applications - Web APIs
accessing the first selected file using a classical dom selector: const selectedfile =
document.getelementbyid('input').files[0]; accessing selected file(s) on a change event it is also possible (but not mandatory) to access the filelist through the change event.
... you need to use eventtarget.addeventlistener() to add the change event listener, like this: const inputelement =
document.getelementbyid("input"); inputelement.addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ } getting information about selected file(s) the filelist object provided by the dom lists all of the files selected by the user, each specified as a file object.
... } let soutput = nbytes + " bytes"; // optional code for multiples approximation const amultiples = ["kib", "mib", "gib", "tib", "pib", "eib", "zib", "yib"]; for (nmultiple = 0, napprox = nbytes / 1024; napprox > 1; napprox /= 1024, nmultiple++) { soutput = napprox.tofixed(3) + " " + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code
document.getelementbyid("filenum").innerhtml = nfiles;
document.getelementbyid("filesize").innerhtml = soutput; }
document.getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script> </body> </html> using hidden file input elements using the click() method you can hide the admittedly ugly file <input> element and present your own interface for opening the file pick...
...And 11 more matches
Intersection Observer API - Web APIs
the intersection observer api provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level
document's viewport.
... creating an intersection observer create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other: let options = { root:
document.queryselector('#scrollarea'), rootmargin: '0px', threshold: 1.0 } let observer = new intersectionobserver(callback, options); a threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.
... targeting an element to be observed once you have created the observer, you need to give it a target element to watch: let target =
document.queryselector('#listitem'); observer.observe(target); // the callback we setup for the observer will be executed now for the first time // it waits until we assign a target to our observer (even if the target is currently not visible) whenever the target meets a threshold specified for the intersectionobserver, the callback is invoked.
...And 11 more matches
JavaScript modules - JavaScript
see node's ecmascript modules
documentation for more details.
...see node's ecmascript modules
documentation for more details.disabled from version 12.0.0: this feature is behind the --experimental-modules runtime flag.
...see node's ecmascript modules
documentation for more details.disabled from version 8.5.0: this feature is behind the --experimental-modules runtime flag.dynamic importchrome full support 63edge full support 79firefox full support 67 full support 67 no support 66 — 67disabled disabled from version 66 until version 67 (exclusive): this feature is behind the javascript.options.dynamicimport preference (needs to be set to true).
...And 11 more matches
Mozilla Crypto FAQ - Archive of obsolete content
in this
document i try to answer some frequently asked questions about the mozilla web browser and mail/news client and its support for ssl, s/mime, and related features based on cryptographic technology.
... note that this
document is for your information only and is not intended as legal advice.
... yes,
documentation of the database format is available; however we cannot guarantee that the format of the database will remain unchanged in the future.
...And 10 more matches
XUL Questions and Answers - Archive of obsolete content
more
documentation on search plugins is available in the search plugins category.
... loading remote dtds for xml
documents is currenty not supported in xul.
...json string) from the server, parsing it on client, and building the menupopup using dom methods (such as
document.createelementns).
...And 10 more matches
Browser Feature Detection - Archive of obsolete content
it is clear from these test results that netscape 7.0x and mozilla firefox have the greatest dom support although internet explorer, safari, and opera have sufficient dom css 1 and dom level 1 & 2
document property and method support to enable cross browser web development.
...0% 75% / 91% 75% / 75% dom core 2 100% 100% 100% 70% / 94% 58% / 58% dom 1 html 100% 100% 100% 100% / 100% 100% / 100% dom css 1 100% 100% 100% 100% / 100% 96% / 96% dom css 2 100% 98% 67% 71% / 83% 38% / 42% test results cross reference dom core level 1 support for properties/methods in
document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01
document.doctype true true true
document.implementation true true true
document.
documentelement true true true
document.createelement() true true true
document.create
documentfragment() true true true
document.createtextnode() true ...
...true true
document.createcomment() true true true
document.createcdatasection() true false true
document.createprocessinginstruction() true false true
document.createattribute() true true true
document.createentityreference()obsolete since gecko 7 (method present but only returns null: bug 9850) false false
document.getelementsbytagname() true true true dom core level 2 support for properties/methods in
document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01
document.doctype true true true
document.implementation true true true
document.
documentelement true true true
document.createelement() true ...
...And 10 more matches
The Business Benefits of Web Standards - Archive of obsolete content
storing css in a separate
document (aka style sheet) and applying it to a set of html
documents permits a complete change of presentation for all these
documents in a snap.
... strict html (as opposed to the often-used transitional html markup), forces the designer not to use presentation tags in the html
documents, naturally enforcing the separation of content from presentation.
... by locating all the style and design issues in one
document - the style sheet - whole sites can be rethemed in one go.
...And 10 more matches
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
this
document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.
... to make speculative loads of linked scripts, style sheets and images successful, avoid
document.write.
... if you use a <base> element to override the base uri of your page, put the element in the non-scripted part of the
document.
...And 10 more matches
Python binding for NSS
nspr api
documentation.
... every module, class, function, and method has associated
documentation and is exposed via the standard python methodology.
... this
documentation is available via the numerous python
documentation extraction tools.
...And 10 more matches
nsIWebBrowserPersist
embedding/components/webbrowserpersist/nsiwebbrowserpersist.idlscriptable interface for persisting dom
documents and uris to local or remote storage.
...to create an instance, use: var webbrowserpersist = components.classes["@mozilla.org/embedding/browser/nswebbrowserpersist;1"] .createinstance(components.interfaces.nsiwebbrowserpersist); method overview void cancelsave(); void savechannel(in nsichannel achannel, in nsisupports afile); void save
document(in nsidom
document a
document, in nsisupports afile, in nsisupports adatapath, in string aoutputcontenttype, in unsigned long aencodingflags, in unsigned long awrapcolumn); void saveuri(in nsiuri auri, in nsisupports acachekey, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcontext aprivacycontext); ...
... encode_flags_selection_only 1 output only the current selection as opposed to the whole
document.
...And 10 more matches
DOM Inspector FAQ - Firefox Developer Tools
the file menu contains approaches which will allow you to inspect a
document.
... inspect content
document inspect content, e.g., unprivileged web pages loaded in a browser tab.
... inspect chrome
document inspect application chrome, including open xul windows, e.g., the browser window.
...And 10 more matches
MediaDevices.getUserMedia() - Web APIs
try { stream = await navigator.mediadevices.getusermedia(constraints); /* use the stream */ } catch(err) { /* handle the error */ } } similarly, using the raw promises directly, the code looks like this: navigator.mediadevices.getusermedia(constraints) .then(function(stream) { /* use the stream */ }) .catch(function(err) { /* handle the error */ }); note: if the current
document isn't loaded securely, navigator.mediadevices will be undefined, and you cannot use getusermedia().
... securityerror user media support is disabled on the
document on which getusermedia() was called.
...only a window's top-level
document context for a valid origin can even request permission to use getusermedia(), unless the top-level context expressly grants permission for a given <iframe> to do so using feature policy.
...And 10 more matches
Page Visibility API - Web APIs
the page visibility api provides events you can watch for to know when a
document becomes visible or hidden, as well as features to look at the current visibility state of the page.
... notes: the page visibility api is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the
document isn't visible.
... visibility states of an <iframe> are the same as the parent
document.
...And 10 more matches
Web accessibility for seizures and physical reactions - Accessibility
the fact that static images may cause seizures and other disorders is
documented in such articles as “gamma oscillations and photosensitive epilepsy”, where it is noted “certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy” the epilepsy foundation, in its article, "shedding light on photosensitivity, one of epilepsy's most complex conditions" talks about static images and patterns.
...selim benbadis of usf's comprehensive epilepsy program notes, "the only thing that is really
documented is flashing lights, which can trigger seizures in patients with photosensitive epilepsy.
...see the mdn
document, "accessibility: what users can to to browse more safely" to see more details of how a user accesses the controls.
...And 10 more matches
Using CSS transitions - CSS: Cascading Style Sheets
ight background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; ...
...th height background-color font-size left top -webkit-transform transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 1s; transition-timing-function: ease-in-out; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; ...
...th height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 2s; transition-timing-function: ease-in-out; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; ...
...And 10 more matches
Same-origin policy - Web security
the same-origin policy is a critical security mechanism that restricts how a
document or script loaded from one origin can interact with a resource from another origin.
... it helps isolate potentially malicious
documents, reducing possible attack vectors.
...e path differs https://store.company.com/page.html failure different protocol http://store.company.com:81/dir/page.html failure different port (http:// is port 80 by default) http://news.company.com/dir/page.html failure different host inherited origins scripts executed from pages with an about:blank or javascript: url inherit the origin of the
document containing that url, since these types of urls do not contain information about an origin server.
...And 10 more matches
An Overview - XSLT: Extensible Stylesheet Language Transformations
an xslt stylesheet is an xml
document.
... unlike css, which has its own specialized syntax, an xslt stylesheet is an xml
document, which must conform to all xml rules, including well-formedness.
... so the model for transformation is that one xml
document is used to transform another xml
document.
...And 10 more matches
tabs - Archive of obsolete content
te', function(tab) { tab.url = "http://www.example.com"; }); run scripts in a tab you can attach a content script to the page hosted in a tab, and use that to access and manipulate the page's content (see the modifying the page hosted by a tab tutorial): var tabs = require("sdk/tabs"); tabs.on('activate', function(tab) { var worker = tab.attach({ contentscript: 'self.port.emit("html",
document.body.innerhtml);' }); worker.port.on("html", function(message) { console.log(message) }) }); note that tab.attach is tab-centric: if the user navigates to a new page in the same tab, then the worker and content scripts will be reattached to the new page.
... to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the
documentation for the private-browsing module.
... viewfor } = require("sdk/view/core"); var tabs = require("sdk/tabs"); var tab_utils = require("sdk/tabs/utils"); function maphighleveltolowlevel(tab) { // get the xul tab that corresponds to this high-level tab var lowleveltab = viewfor(tab); // now we can, for example, access the tab's content directly var browser = tab_utils.getbrowserfortab(lowleveltab); console.log(browser.content
document.body.innerhtml); // get the high-level tab back from the xul tab var highleveltab = modelfor(lowleveltab); console.log(highleveltab.url); } tabs.on("ready", maphighleveltolowlevel); note that directly accessing xul objects and web content like this means you're no longer protected by the compatibility guarantees made by the sdk's high-level apis.
...And 9 more matches
window/utils - Archive of obsolete content
to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the
documentation for the private-browsing module.
...it takes the uri of the window
document as its first argument and an optional hash of options as its second argument.
... parameters uri : string uri of the
document to be loaded into the window.
...And 9 more matches
The Essentials of an Extension - Archive of obsolete content
they are
documented in the chrome registration page.
...other xul
documents use the window or dialog tag.
...you only need to change namespace declarations when you mix different types of content in the same
document, such as xul with html or svg.
...And 9 more matches
The Implementation of the Application Object Model - Archive of obsolete content
purpose - the purpose of this
document is two-fold.
... the first section of the
document describes the motivation and reasoning behind using rdf as the foundation of xul.
...where html describes the contents of a single
document, xul describes the contents of an entire window (which could itself contain multiple html
documents).
...And 9 more matches
nsIContentPolicy - Archive of obsolete content
warning: do not block the caller in your implementations of shouldload() or shouldprocess() (for example, by launching a dialog to prompt the user for something).") note: in reality, much of this interface is defined in the nsicontentpolicybase interface, but for now is
documented here until someone has time to split things up.
... type_
document 6 indicates a dom
document at the top-level (that is, directly within a browser tab).
... type_sub
document 7 indicates a
document contained within another
document (for example, <iframe> and <frame> elements).
...And 9 more matches
Common causes of memory leaks in extensions - Extensions
while bug 695480 should prevent most of these compartment leaks, add-ons still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from
documents which no longer exist.
... a similar problem is holding onto window objects or dom nodes (such as window.
document) for too long by storing them in a javascript module.
...for example: function implicitdeclarationleak(window) { // implicit variable declaration in the js global, holding a strong ref to the
document doc = window.
document; } implicitly declared variables can be avoided by using ecmascript 5's strict mode.
...And 9 more matches
What is a URL? - Learn web development
such resources can be an html page, a css
document, an image, etc.
...let's see the most important parts using the following url: http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#somewhereinthe
document http is the protocol.
... #somewhereinthe
document is an anchor to another part of the resource itself.
...And 9 more matches
Introduction to events - Learn web development
in the case of the web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the html
document loaded in the current tab, or the entire browser window.
...in the following example, we have a single <button>, which when pressed, makes the background change to a random color: <button>change color</button> button { margin: 10px }; the javascript looks like so: const btn =
document.queryselector('button'); function random(number) { return math.floor(math.random() * (number+1)); } btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundcolor = rndcol; } in this code, we store a reference to the button inside a constant called btn, using the
document.queryselector() function.
...returning to the above example: const btn =
document.queryselector('button'); btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundcolor = rndcol; } the onclick property is the event handler property being used in this situation.
...And 9 more matches
XML Extras
not as just another
document format.
... see also: xml in mozilla
document.load() a few examples dealing with xml from mozillazine knowledge base.
...
documentation probably the best way to learn how to use these technologies is through examples.
...And 9 more matches
nsICookieService
string getcookiestring( in nsiuri auri, in nsichannel achannel ); parameters auri the uri of the
document for which cookies are being queried.
... achannel the channel used to load the
document.
...getcookiestring() will query the
documenturi property off of nsihttpchannelinternal if supported, so getcookiestring() can be used in place of this method.
...And 9 more matches
DOMParser - Web APIs
the domparser interface provides the ability to parse xml or html source code from a string into a dom
document.
... note: xmlhttprequest can parse xml and html directly from a url-addressable resource, returning a
document in its response property.
... in the case of an html
document, you can also replace portions of the dom with new dom trees built from html by setting the value of the element.innerhtml and outerhtml properties.
...And 9 more matches
Using the W3C DOM Level 1 Core - Web APIs
the w3c's dom level 1 core is an api for manipulating the dom trees of html and xml
documents (among other tree-like types of
documents).
... a dom tree is a kind of tree whose nodes represent an html or xml
document's contents.
... each html or xml
document has a unique dom tree representation.
...And 9 more matches
Microdata DOM API - Web APIs
you can't use them anymore and this
document is kept as information only.
...the
document.getitems(typenames) method provides access to the top-level microdata items.
... methods
document .
...And 9 more matches
Node.appendChild() - Web APIs
if the given child is a reference to an existing node in the
document, appendchild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).
... this means that a node can't be in two points of the
document simultaneously.
... if the given child is a
documentfragment, the entire contents of the
documentfragment are moved into the child list of the specified parent node.
...And 9 more matches
TreeWalker - Web APIs
the treewalker object represents the nodes of a
document subtree and a position within them.
... a treewalker can be created using the
document.createtreewalker() method.
...since attributes are never children of other nodes, they do not appear when traversing over the
document tree.
...And 9 more matches
Using Web Workers - Web APIs
note: see the web workers api landing page for reference
documentation on workers and additional guides.
... note: in firefox, shared workers cannot be shared between
documents loaded in private and non-private windows (bug 1177621).
... content security policy workers are considered to have their own execution context, distinct from the
document that created them.
...And 9 more matches
ARIA: Main role - Accessibility
the main landmark role is used to indicate the primary content of a
document.
... the main content area consists of content that is directly related to or expands upon the central topic of a
document, or the central functionality of an application.
... <div id="main" role="main"> <h1>avocados</h1> <!-- main section content --> </div> this is the main section of a
document that discusses avocados.
...And 9 more matches
Border-radius generator - CSS: Cascading Style Sheets
er: 1px dashed #999; border-radius: 3px; -moz-user-select: text; -webkit-user-select: 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.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('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 = v...
...alue + obj.unit; }); return input; } var slidercomponent = function slidercomponent(obj, sign) { var slider =
document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value;
document.body.style.cursor = "e-resize";
document.addeventlistener("mousemove", slidermotion); });
document.addeventlistener("mouseup", function(e) {
document.removeeventlistener("mousemove", slidermotion);
document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var del...
...sensivity : 5; var input = new inputcomponent(this); var slider_left = new slidercomponent(this, -1); var slider_right = new slidercomponent(this, 1); slider_left.classname = 'ui-input-slider-left'; slider_right.classname = 'ui-input-slider-right'; if (name) { var info =
document.createelement('span'); info.classname = 'ui-input-slider-info'; info.textcontent = name; node.appendchild(info); } node.appendchild(slider_left); node.appendchild(input); node.appendchild(slider_right); node.classname = 'ui-input-slider ui-input-slider-container'; this.input = input; sliders[topic] = this; setvalue(topic, value); } var setvalue = function setvalue(to...
...And 9 more matches
MIME types (IANA media types) - HTTP
a media type (also known as a multipurpose internet mail extensions or mime type) is a standard that indicates the nature and format of a
document, file, or assortment of bytes.
...a multipart type is one which represents a
document that's comprised of multiple component parts, each of which may have its own individual mime type; or, a multipart type may encapsulate multiple files being sent together in one transaction.
...these should never be used outside of sample code listings and
documentation.
...And 9 more matches
An overview of HTTP - HTTP
http is a protocol which allows the fetching of resources, such as html
documents.
...a complete
document is reconstructed from the different sub-
documents fetched, for instance text, layout description, images, videos, scripts, and more.
...due to its extensibility, it is used to not only fetch hypertext
documents, but also images and videos or to post content to servers, like with html form results.
...And 9 more matches
Using custom elements - Web Components
high-level view the controller of custom elements on a web
document is the customelementregistry object — this object allows you to register a custom element on the page, return information on what custom elements are registered, etc.
...for example, connectedcallback is invoked each time the custom element is appended into a
document-connected element, while attributechangedcallback is invoked when one of the custom element's attributes is added, removed, or changed.
...for example <popup-info>, or
document.createelement("popup-info").
...And 9 more matches
XML introduction - XML: Extensible Markup Language
structure of an xml
document this sub-article in process writing...
...it is used for the transmission of the meta-data of a
document.
... <?xml version="1.0" encoding="utf-8"?> attributes: version : used version xml in this
document.
...And 9 more matches
XPath snippets - XPath
the first argument is a dom node or
document object, while the second is a string defining an xpath expression.
... example: defining a custom node-specific evaluatexpath() utility function // evaluate an xpath expression aexpression against a given dom node // or
document object (anode), returning the results as an array // thanks wanderingstan at morethanwarm dot mail dot com for the // initial work.
... function evaluatexpath(anode, aexpr) { var xpe = new xpathevaluator(); var nsresolver = xpe.creatensresolver(anode.owner
document == null ?
...And 9 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
« previousnext » this
document was authored by taiga (gomita) gomibuchi and was originally published in japanese for the firefox developers conference summer 2007.
... preference description value nglayout.debug.disable_xul_cache (not present in firefox 3.5+) ordinarily, firefox will cache xul
documents after they have been read in once, to speed subsequent displays.
... disabling this cache forces xul
documents to be reloaded any every time they are displayed.
...And 8 more matches
Intercepting Page Loads - Archive of obsolete content
gbrowser.removeeventlistener("load", this._loadhandler, true); finally, the actual code for the handler, which is very simple: _onpageload : function(event) { // this is the content
document of the loaded page.
... let doc = event.originaltarget; if (doc instanceof html
document) { // is this an inner frame?
... // find the root
document: while (doc.defaultview.frameelement) { doc = doc.defaultview.frameelement.owner
document; } } } } the second if validation is necessary if you need to make a distinction for html
documents being loaded in inner page frames.
...And 8 more matches
XPCOM Objects - Archive of obsolete content
you'll usually know what string to use by reading examples and
documentation.
...in most cases it is very clear which one to call, but in case of doubt, look for
documentation on it.
...we'll look at its
documentation in a very old xul site called xul planet.
...And 8 more matches
Creating reusable content with CSS and XBL - Archive of obsolete content
but you must link those files from the
document as a whole.
...you can use xbl to link selected elements to their own: stylesheets content properties and methods event handlers because you avoid linking everything at the
document level, you can make self-contained parts that are easy to maintain and reuse.
... action: an xbl demonstration make a new html
document, doc6.html.
...And 8 more matches
A XUL Bestiary - Archive of obsolete content
object models: dom and aom the
document object model is the representation of a
document as a series of scriptable objects.
... when a scripting language like javascript accesses various parts of an html
document, it does so by means of the dom.
... the parts of the
document, such as the head, the links, the body, any tags, are available as nodes whose attributes can be got and set.
...And 8 more matches
Reference - Archive of obsolete content
inheritance and private variables the guide section links to an interesting
document discussing how to create and use private variables in objects, which is great if you want to protect the various properties within an object from being poked at accidentally.
... i also just read a
document on proper inheritance using apply().
...so how should this be
documented?
...And 8 more matches
Correctly Using Titles With External Stylesheets - Archive of obsolete content
external stylesheets are often associated with html
documents using the <link rel="stylesheeet"> element, but it is important to use the element's title attribute properly.
... why titles matter the title attribute affects how your external stylesheet is applied to a
document.
...by including a title attribute, you can control whether a particular stylesheet always affects a
document, or if it is only used under certain circumstances.
...And 8 more matches
Gecko FAQ - Gecko Redirect 1
formally, a layout engine defines the placement policy for a
document and places content on a page.
...gecko also offers the ability to parse various
document types (html, xml, svg, etc), advanced rendering capabilities including compositing and transformations, and support for embedded javascript and plugins.
...in other words, gecko will not only be displaying the
document's content, but it will also be painting the scrollbars, toolbars, and menus on the screen as well.
...And 8 more matches
Pseudo-classes and pseudo-elements - Learn web development
they tend to act as if you had applied a class to some part of your
document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.
...if we wanted to make the first paragraph in an article larger and bold, we could add a class to that paragraph and then add css to that class, as shown in the first example below: however, this could be annoying to maintain — what if a new paragraph got added to the top of the
document?
...they target some bit of your
document that is in a certain state, behaving as if you had added a class into your html.
...And 8 more matches
What is CSS? - Learn web development
in the introduction to html module we covered what html is, and how it is used to mark up
documents.
... these
documents will be readable in a web browser.
... as we have mentioned before, css is a language for specifying how
documents are presented to users — how they are styled, laid out, etc.
...And 8 more matches
Getting started with HTML - Learn web development
rea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; 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.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; sol...
... inline elements are contained within block-level elements, and surround only small parts of the
document’s content.
... (not entire paragraphs or groupings of content) an inline element will not cause a new line to appear in the
document.
...And 8 more matches
Third-party APIs - Learn web development
const audioelement =
document.queryselector('audio'); ...
... adding a custom marker adding a marker (icon) at a certain point on the map is easy — you just use the l.marker() method (which seems to be
documented in the related leaflet.js docs).
... have a play with the other options shown in the
documentation and see what you can come up with!
...And 8 more matches
Useful string methods - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 290px; width: 95%"> const list =
document.queryselector('.output ul'); list.innerhtml = ''; let greetings = ['happy birthday!', 'merry christmas my love', 'a happy christmas to all the family', 'you\'re all i want for christmas', 'get well soon']; for (let i = 0; i < greetings.length; i++) { let input = greetings[i]; // your conditional test needs to go inside the p...
...arentheses // in the line below, replacing what's currently there if (greetings[i]) { let listitem =
document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea =
document.getelementbyid('code'); const reset =
document.getelementbyid('reset'); const solution =
document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { ...
...a.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list =
document.queryselector(\'.output ul\');' + '\nlist.innerhtml = \'\';' + '\nlet greetings = [\'happy birthday!\',' + '\n \'merry christmas my love\',' + '\n \'a happy christmas to all the family\',' + '\n \'you\\\'re all i want for christmas\',' + '\n \'get well soon\'];' + '\n' + '\nfor (let i = 0; i < greetings.length; i++) {' + '\n let inp...
...And 8 more matches
Creating reftest-based unit tests
see the build
documentation for details on doing that.
... testing invalidation testing that a
document displays correctly once it has loaded is only one part of testing rendering.
... another part is testing invalidation - testing that when a
document is changed after it has finished loading and displaying, that the browser correctly "invalidates" the parts of the screen that should change so that the screen displays the correct output the next time it is repainted.
...And 8 more matches
Storage access policy: Block cookies from trackers
this
documentation describes the policy that we intend to ship to firefox release users, but may not match what is implemented in the current release version of firefox.
... that's because we
document new aspects of the policy as soon as they land in firefox nightly, our pre-release channel.
... firefox nightly may also contain experimental features that we don't yet plan to ship to release users; experimental features will not be included in this
documentation, but may nevertheless impact the functionality of domains classified as trackers.
...And 8 more matches
Overview of Mozilla embedding APIs
see the nsiweakreference
document for more information.
...contract-id: ns_pref_contractid implemented interfaces: nsiprefservice nsiprefbranch related interfaces: nsipreflistener profile manager service contract-id: implemented interfaces:
document loader service (webprogress) eventually, this service will be replaced by thewebprogress service...
... contract-id: ns_
document_loader_service_contractid implemented interfaces: nsiwebprogress nsi
documentloader related interfaces: nsiwebprogresslistener public components nswebbrowser the nswebbrowser is the main embedding component which gecko exposes.
...And 8 more matches
Index
2 creating javascript tests automated testing, build
documentation, guide, qa, spidermonkey in which test suite does your new test belong?
... 5 future directions guide, mozilla, spidermonkey this article
documents future directions in functionality, design, and coding practices for spidermonkey.
...that means the code as it is today won't match this
document, and that's ok.
...And 8 more matches
nsIFocusManager
ts from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) implemented by: @mozilla.org/focus-manager;1 as a service: var focusmanager = components.classes["@mozilla.org/focus-manager;1"] .getservice(components.interfaces.nsifocusmanager); method overview void clearfocus(in nsidomwindow awindow); void contentremoved(in nsi
document a
document, in nsicontent aelement); native code only!
... obsolete since gecko 2.0 void firedelayedevents(in nsi
document a
document); native code only!
...this will always be an element within the
document loaded in focusedwindow or null if no element in that
document is focused.
...And 8 more matches
nsISHistory
oid addshistorylistener(in nsishistorylistener alistener); nsishentry getentryatindex(in long index, in boolean modifyindex); void purgehistory(in long numentries); void reloadcurrententry(); void removeshistorylistener(in nsishistorylistener alistener); attributes attribute type description count long the number of toplevel
documents currently available in session history.
... index long the index of the current
document in session history.
... maxlength long used to get/set the maximum number of toplevel
documents, session history can hold for each instance.
...And 8 more matches
nsIXSLTProcessor
content/xslt/public/nsixsltprocessor.idlscriptable xslt processor inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/
document-transformer;1?type=xslt.
... to create an instance, use: var xsltprocessor = components.classes["@mozilla.org/
document-transformer;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); method overview void clearparameters(); nsivariant getparameter(in domstring namespaceuri, in domstring localname); void importstylesheet(in nsidomnode style); void removeparameter(in domstring namespaceuri, in domstring localname); void reset(); void setparameter(in domstring namespaceuri, in domstring localname, in nsivariant value); nsidom
document transformto
document(in nsidomnode source); nsidom
documentfragment transformtofragment(in nsidomnode source, in nsidom
document output); methods clearparameters() removes all set parameters from this nsixsltprocessor.
...this can be either a
document node or an element node.
...And 8 more matches
Introduction to DOM Inspector - Firefox Developer Tools
inspecting a
document when the dom inspector opens, it may or may not load an associated
document, depending on the host application.
... if the dom inspector doesn't automatically load a
document or loads a
document other than the one you'd like to inspect, you can select the desired
document a few different ways.
... inspecting content
documents the inspect content
document menupopup can be accessed from the file menu, and it will list currently loaded content
documents.
...And 8 more matches
DOMImplementation - Web APIs
the domimplementation interface represents an object providing methods which are not dependent on any particular
document.
... such an object is returned by the
document.implementation property.
... domimplementation.create
document() creates and returns an xml
document.
...And 8 more matches
Key Values - Web APIs
learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys |
document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character.
... media controller keys because modern remote controls for media devices often include buttons beyond the basic controls covered elsewhere in this
document, key values are defined for a broad array of these additional buttons.
...those keys' values will match what's
documented in those tables.
...And 8 more matches
NodeIterator - Web APIs
the nodes will be returned in
document order.
... syntax a nodeiterator can be created using the
document.createnodeiterator() method, as follows: const nodeiterator =
document.createnodeiterator(root, whattoshow, filter); properties this interface doesn't inherit any property.
...since attributes are never children of other nodes, they do not appear when traversing over the
document tree.
...And 8 more matches
PerformanceNavigationTiming - Web APIs
the performancenavigationtiming interface provides methods and properties to store and retrieve metrics regarding the browser's
document navigation events.
... for example, this interface can be used to determine how much time it takes to load or unload a
document.
... performanceentry.name read only returns the
document's address.
...And 8 more matches
PerformanceTiming - Web APIs
performancetiming.navigationstart read only when the prompt for unload terminates on the previous
document in the same browsing context.
... if there is no previous
document, this value will be the same as performancetiming.fetchstart.
... performancetiming.unloadeventstart read only when the unload event has been thrown, indicating the time at which the previous
document in the window began to unload.
...And 8 more matches
Pointer Lock API - Web APIs
ixed, you would currently declare it something like this, for example if you wanted to request pointer lock on a canvas element: canvas.requestpointerlock = canvas.requestpointerlock || canvas.mozrequestpointerlock; canvas.requestpointerlock() if a user has exited pointer lock via the default unlock gesture, or pointer lock has not previously been entered for this
document, an event generated as a result of an engagement gesture must be received by the
document before requestpointerlock will succeed.
... (from https://w3c.github.io/pointerlock/#extensions-to-the-element-interface) pointerlockelement and exitpointerlock() the pointer lock api also extends the
document interface, adding both a new property and a new method.
... the new property is used for accessing the currently locked element (if any), and is named pointerlockelement and the new method on
document is exitpointerlock() and, as the name implies, it is used to exit the pointer lock.
...And 8 more matches
ShadowRoot - Web APIs
the shadowroot interface of the shadow dom api is the root node of a dom subtree that is rendered separately from a
document's main dom tree.
... properties included from
documentorshadowroot the shadowroot interface includes the following properties defined on the
documentorshadowroot mixin.
... note that this is currently only implemented by chrome; other browsers still implement them on the
document interface.
...And 8 more matches
Starting up and shutting down a WebXR session - Web APIs
there is a global xrsystem object available for use by your
document through the the navigator property xr, which returns the xrsystem object if suitable xr hardware is available for your use given the hardware available and your
document's environment.
...
documentation for ar is forthcoming shortly here on mdn.
... context requirements a webxr compatible environment starts with a securely-loaded
document.
...And 8 more matches
position - CSS: Cascading Style Sheets
the position css property sets how an element is positioned in a
document.
... values static the element is positioned according to the normal flow of the
document.
... relative the element is positioned according to the normal flow of the
document, and then offset relative to itself based on the values of top, right, bottom, and left.
...And 8 more matches
Using HTML sections and outlines - Developer guides
therefore the outline algorithm should not be used to convey
document structure to users.
... authors are advised to use heading rank (h1-h6) to convey
document structure.
... the html5 specification introduced several semantic sectioning elements to help organize the structure of
documents.
...And 8 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead
documented on those types' pages.
... no more than one element in the
document may have the autofocus attribute.
...this string's value, if present, must match the id of a <form> element in the same
document.
...And 8 more matches
Large-Allocation - HTTP
the large-allocation tells the browser that the web content in the to-be-loaded page is going to want to perform a large contiguous memory allocation and the browser can react to this header by starting a dedicated process for the to-be-loaded
document, for example.
... when a post request is used to load a
document, that load cannot currently be redirected into a new process.
... this error is displayed when loading a
document with a large-allocation header with a non-get http method.
...And 8 more matches
Scripting - SVG: Scalable Vector Graphics
function myrect(x,y,w,h,message){ this.message=message this.rect=
document.createelementns("http://www.w3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h)
document.
documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert...
...(this.message) break; } } } inter-
document scripting: referencing embedded svg when using svg within html, adobe's svg viewer 3.0 automatically includes a window property called svg
document that points to the svg
document.
... this is not the case for mozilla's native svg implementation; therefore, using window.svg
document does not work in mozilla.
...And 8 more matches
Index - XPath
it uses a non-xml syntax to provide a flexible way of addressing (pointing to) different parts of an xml
document.
... it can also be used to test addressed nodes within a
document to determine whether they match a pattern or not.
... 2 axes transforming_xml_with_xslt, xpath, xpath_reference, xslt, xslt_reference for further information on using xpath expressions, please see the for further reading section at the end of transforming xml with xslt
document.
...And 8 more matches
Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button =
document.getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
...riptobject; the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works =
document.getelementbyid("works"); works.addeventlistener("click", function() { alert(clonedcontentscriptobject.greeting); }, false); var fails =
document.getelementbyid("fails"); fails.addeventlistener("click", function() { alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example, clicking "i will work" ...
...js var salutation = "hello, "; function greetme(user) { return salutation + user; } exportfunction(greetme, unsafewindow, {defineas: "greetme"}); finally, the "page.html" file adds a button and a page script that calls the exported function when the user pushes the button: <html> <head> </head> <body> <input id="test" type="button" value="click me"/> <script> var test =
document.getelementbyid("test"); test.addeventlistener("click", function() { alert(window.greetme("page script")); }, false); </script> </body> </html> exportfunction() works by structured cloning the arguments and return value of the function from one scope to the other.
...And 7 more matches
Content Scripts - Archive of obsolete content
the content script simply replaces the content of the page: // main.js var tabs = require("sdk/tabs"); var contentscriptstring = '
document.body.innerhtml = "<h1>this page has been eaten</h1>";' tabs.activetab.attach({ contentscript: contentscriptstring }); the following high-level sdk modules can use content scripts to modify web pages: page-mod: enables you to attach content scripts to web pages that match a specific url pattern.
...to learn about how to interact with the content for a given user interface module, please see the module-specific
documentation: panel, sidebar, frame.
...the contentscript option treats the string itself as a script: // main.js var pagemod = require("sdk/page-mod"); var contentscriptvalue = '
document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";'; pagemod.pagemod({ include: "*.mozilla.org", contentscript: contentscriptvalue }); the contentscriptfile option treats the string as a resource:// url pointing to a script file stored in your add-on's data directory.
...And 7 more matches
JavaScript Daemons Management - Archive of obsolete content
|*| |*| https://developer.mozilla.org/docs/dom/window.setinterval |*| |*| syntax: |*| var timeoutid = window.settimeout(func, delay, [param1, param2, ...]); |*| var timeoutid = window.settimeout(code, delay); |*| var intervalid = window.setinterval(func, delay[, param1, param2, ...]); |*| var intervalid = window.setinterval(code, delay); |*| \*/ /* if (
document.all && !window.settimeout.ispolyfill) { var __nativest__ = window.settimeout; window.settimeout = function (vcallback, ndelay) { var aargs = array.prototype.slice.call(arguments, 2); return __nativest__(vcallback instanceof function ?
... function () { vcallback.apply(null, aargs); } : vcallback, ndelay); }; window.settimeout.ispolyfill = true; } if (
document.all && !window.setinterval.ispolyfill) { var __nativesi__ = window.setinterval; window.setinterval = function (vcallback, ndelay) { var aargs = array.prototype.slice.call(arguments, 2); return __nativesi__(vcallback instanceof function ?
...; oletter.elem.style.top = math.sin(oletter.pos) * ndist + "px"; oletter.elem.style.left = math.cos(oletter.pos) * ndist * 5 + "px"; } } function prepare () { // build letters list // http://tyleregeto.com/text-animation-in-javascript this.textcontent = ""; aletters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan =
document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var nmaxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon(
document.createelement("p"), perform, 33,...
...And 7 more matches
Custom XUL Elements with XBL - Archive of obsolete content
« previousnext » xml binding language (xbl, sometimes also called extensible bindings language) is a language for describing bindings that can be attached to elements in other
documents.
... let person =
document.createelement("xshelloperson"); // ...
... <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the bindings element is the root of the
document, and it's a container for binding elements.
...And 7 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
if (array.isarray(elemnameorarray)) { var frag = doc.create
documentfragment(); array.foreach(arguments, function(thiselem) { frag.appendchild(tag.apply(null, thiselem)); }); return frag; } // single element?
...event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {};
document.
documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]],
document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow)...
...["xul:toolbarbutton", { id: "mytestbutton", class: "toolbarbutton-1", type: "menu", label: "test button label", tooltiptext: "test button tooltip", removable: true, key: "mytestbutton123" }, [ "menupopup", { onpopupshowing: function(event) { addentrytopopup(this,
document, window); } }, null ] ]; var capturednodes = {}; var toolbox = doc.getelementbyid("navigator-toolbox"); var palette = toolbox.palette; var domfragment = jsontodom(jsontemplatebtn,
document, capturednodes); palette.appendchild(domfragment); alert("capturednodes contains any created nodes that have optionally been captured (for later convenient javascript acces...
...And 7 more matches
Source code directories overview - Archive of obsolete content
this
document is a guide for developers to the directory structure of the mozilla source code tree.
...it is a good
document for a new mozilla developer to start learning about the mozilla code base.
... this
document contains material for seamonkey, firefox, and toolkit.
...And 7 more matches
XUL accessibility guidelines - Archive of obsolete content
these users require easy, predictable, and well-
documented keyboard control.
...they are well
documented in the xul tutorial:keyboard shortcuts.
... function movefocus(element) { if(element ==
document.commanddispatcher.focusedelement) {
document.commanddispatcher.advancefocus(); return true; } return false; } changing focus unexpectedly can confuse or disorient users.
...And 7 more matches
Mozilla release FAQ - Archive of obsolete content
this
document may be distributed and modified freely.
...to start understanding the issues with this example, you should dig up the rfcs for the relevant protocols, any
documents written on the subject, etc.
...the specific area that you can find this is on the mozilla owners
document.
...And 7 more matches
Archive of obsolete content
there are many reasons older
documentation can be useful.
... so, we've established this area into which we can archive older
documentation.
... 2015 mdn fellowship program add-ons archived add-ons
documentation.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
objective: to gain familiarity with the features of html that have accessibility benefits and how to use them appropriately in your web
documents.
...than keywords included in non-semantic <div>s, etc., so your
documents will be more findable by customers.
...an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my
document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my
document.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
objective: to gain familiarity with the features of html that have accessibility benefits and how to use them appropriately in your web
documents.
...than keywords included in non-semantic <div>s, etc., so your
documents will be more findable by customers.
...an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my
document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my
document.
...And 7 more matches
From object to iframe — other embedding technologies - Learn web development
these were embedded in a master
document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table.
... finally, the <iframe> element appeared (along with other ways of embedding content, such as <canvas>, <video>, etc.) this provides a way to embed an entire web
document inside another one, as if it were an <img> or other such element, and is used regularly today.
...%;min-height: 100px;"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea =
document.getelementbyid('code'); const reset =
document.getelementbyid('reset'); const solution =
document.getelementbyid('solution'); const output =
document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value;...
...And 7 more matches
Making decisions in your code — conditionals - Learn web development
ample, which could be part of a simple weather forecast application: <label for="weather">select 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.addeventlistener('change', setweather); function setweather() { const choice = select.value; if (choice === 'sunny') { para.textcontent = 'it is nice and sunny outside today.
... our weather forecast application to use a switch statement instead: <label for="weather">select 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.addeventlistener('change', setweather); function setweather() { const choice = select.value; switch (choice) { case 'sunny': para.textcontent = 'it is nice and sunny outside today.
... <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my website</h1> const select =
document.queryselector('select'); const html =
document.queryselector('html');
document.body.style.padding = '10px'; function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; } select.onchange = function() { ( select.value === 'black' ) ?
...And 7 more matches
Setting up your own test automation environment - Learn web development
we are going to choose selenium's official selenium-webdriver, as the
documentation seems fairly up-to-date and it is well-maintained.
...webdriver will then wait for 2 seconds; the
document title is then accessed, and if it is "webdriver - google search", we will return a message to claim the test is passed.
...for more complete details, you should consult the selenium-webdriver javascript api reference for a detailed reference, and the selenium main
documentation's selenium webdriver and webdriver: advanced usage pages, which contain multiple examples to learn from written in different languages.
...And 7 more matches
NSS Tools
the links for each tool take you to the source code,
documentation, plans, and related links for each tool.
... source,
documentation, tasks/plans cmsutil 1.0 performs basic cms operations such as encrypting, decrypting, and signing messages.
... source,
documentation crlutil manage certificate revocation lists (crls).
...And 7 more matches
nsIDOMParser
note: if you're a web developer, please refer to the domparser
documentation instead.
...to create a domparser when the constructor is not available (e.g., from a js xpcom component, a js module, or an xpcshell test), use: var parser = components.classes["@mozilla.org/xmlextras/domparser;1"] .createinstance(components.interfaces.nsidomparser); // optionally, call parser.init(principal,
documenturi, baseuri); principals,
document and base uri note: this section covers changes introduced to domparser in gecko 1.9.
... (this section is only relevant to firefox extensions--not to web content.) to create a
document, the parser needs to specify a principal (see security check basics), a base uri (see
document.baseuriobject), and a
documenturi.
...And 7 more matches
nsISelectionController
methods native code only!characterextendforbackspace will extend the selection one character cell backward in the
document.
...native code only!characterextendfordelete will extend the selection one character cell forward in the
document.
...charactermove() will move the selection one character forward/backward in the
document.
...And 7 more matches
Index
these pages
document thunderbird and the mailnews backend which is also used in other projects such as seamonkey and postbox.
...see nsiactivitymanager.idl and nsiactivity.idl files for source
documentation.
...pizzarro <rhp@netscape.com> 10 autoconfiguration in thunderbird administration, enterprise author: ben bucksch please do not change this
document without consulting the author 11 autoconfig file format no summary!
...And 7 more matches
Using images - Web APIs
using images from the same page we can obtain a reference to images on the same page as the canvas by using one of: the
document.images collection the
document.getelementsbytagname() method if you know the id of the specific image you wish to use, you can use
document.getelementbyid() to retrieve that specific image using images from other domains using the crossorigin attribute of an <img> element (reflected by the htmlimageelement.crossorigin property), you can request permission to load an image from another domain...
... using other canvas elements just as with normal images, we access other canvas elements using either the
document.getelementsbytagname() or
document.getelementbyid() method.
...for example, if you have a <video> element with the id "myvideo", you can do this: function getmyvideo() { var canvas =
document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); return
document.getelementbyid('myvideo'); } } this returns the htmlvideoelement object for the video, which, as covered earlier, is one of the objects that can be used as a canvasimagesource.
...And 7 more matches
CharacterData - Web APIs
" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode and non
documenttypechildnode interface.
... non
documenttypechildnode.nextelementsibling read only returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.
... non
documenttypechildnode.previouselementsibling read only returns the element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.
...And 7 more matches
Element.innerHTML - Web APIs
to insert the html into the
document rather than replace the contents of an element, use the method insertadjacenthtml().
... nomodificationallowederror an attempt was made to insert the html into a node whose parent is a
document.
... for example, you can erase the entire contents of a
document by clearing the contents of the
document's body attribute:
document.body.innerhtml = ""; this example fetches the
document's current html markup and replaces the "<" characters with the html entity "<", thereby essentially converting the html into raw text.
...And 7 more matches
Element.requestFullscreen() - Web APIs
if the element has been detached from the original
document, then the
document receives these events instead.
... earlier implementations of the fullscreen api would always send these events to the
document rather than the element, and you may need to be able to handle that situation.
...the rejection handler receives one of the following exception values: typeerror the typeerror exception may be delivered in any of the following situations: the
document containing the element isn't fully active; that is, it's not the current active
document.
...And 7 more matches
Element - Web APIs
objects that represent elements) in a
document inherit.
...it implements the properties of parentnode, childnode, non
documenttypechildnode, and animatable.
... non
documenttypechildnode.nextelementsibling read only is an element, the element immediately following the given one in the tree, or null if there's no sibling node.
...And 7 more matches
Capabilities, constraints, and settings - Web APIs
determining if a constraint is supported if you need to know whether or not a given constriant is supported by the user agent, you can find out by calling navigator.mediadevices.getsupportedconstraints() to get a list of the constrainable properties which the browser knows, like this: let supported = navigator.mediadevices.getsupportedconstraints();
document.getelementbyid("framerateslider").disabled = !supported["framerate"]; in this example, the supported constraints are fetched, and a control that lets the user configure the frame rate is disabled if the framerate constraint isn't supported.
...constraints are a way to specify what values you need, want, and are willing to accept for the various constrainable properties (as described in the
documentation for mediatrackconstraints), while settings are the actual values of each constrainable property at the current time.
... let videoelement =
document.getelementbyid("video"); let logelement =
document.getelementbyid("log"); let supportedconstraintlist =
document.getelementbyid("supportedconstraints"); let videoconstrainteditor =
document.getelementbyid("videoconstrainteditor"); let audioconstrainteditor =
document.getelementbyid("audioconstrainteditor"); let videosettingstext =
document.getelementbyid("videosettingstext"); let audiosettingstex...
...And 7 more matches
Node.insertBefore() - Web APIs
if the given node already exists in the
document, insertbefore() moves it from its current position to the new position.
... (that is, it will automatically be removed from its existing parent before appending it to the specified new parent.) this means that a node cannot be in two locations of the
document simultaneously.
... if the given child is a
documentfragment, the entire contents of the
documentfragment are moved into the child list of the specified parent node.
...And 7 more matches
Node.nodeType - Web APIs
node.processing_instruction_node 7 a processinginstruction of an xml
document, such as <?xml-stylesheet … ?>.
... node.
document_node 9 a
document node.
... node.
document_type_node 10 a
documenttype node, such as <!doctype html>.
...And 7 more matches
Selection - Web APIs
a user may make a selection from left to right (in
document order) or right to left (reverse of
document order).
...can return null if selection never existed in the
document (e.g., an iframe that was never clicked on).
...can return null if selection never existed in the
document (for example, in an iframe that was never clicked on).
...And 7 more matches
Window.scrollY - Web APIs
the read-only scrolly property of the window interface returns the number of pixels that the
document is currently scrolled vertically.
...you can get the number of pixels the
document is scrolled horizontally from the scrollx property.
... syntax var y = window.scrolly value in practice, the returned value is a double-precision floating-point value indicating the number of pixels the
document is currently scrolled vertically from the origin, where a positive value means the content is scrolled to upward.
...And 7 more matches
Visual formatting model - CSS: Cascading Style Sheets
in css the visual formatting model describes how user agents take the
document tree, and process and display it for visual media.
... this includes continuous media such as a computer screen and paged media such as a book or
document printed by browser print functions.
... in the visual formatting model, each element in the
document tree generates zero or more boxes according to the box model.
...And 7 more matches
Getting Started - Developer guides
} the full list of the readystate values is
documented at xmlhttprequest.readystate and is as follows: 0 (uninitialized) or (request not initialized) 1 (loading) or (server connection established) 2 (loaded) or (request received) 3 (interactive) or (processing request) 4 (complete) or (request finished and response is ready) next, check the http response status codes of the http response.
...you have two options to access that data: httprequest.responsetext – returns the server response as a string of text httprequest.responsexml – returns the response as an xml
document object you can traverse with javascript dom functions note that the steps above are valid only if you used an asynchronous request (the third parameter of open() was unspecified or set to true).
...our javascript will request an html
document, test.html, which contains the text "i'm a test." then we'll alert() the contents of the response.
...And 7 more matches
Creating a cross-browser video player - Developer guides
var supportsvideo = !!
document.createelement('video').canplaytype; if (supportsvideo) { // set up custom controls // ...
...a number of variables pointing to html elements are required: var videocontainer =
document.getelementbyid('videocontainer'); var video =
document.getelementbyid('video'); var videocontrols =
document.getelementbyid('video-controls'); as mentioned earlier, the browser's default controls now need to be disabled, and the custom controls need to be displayed: // hide the default controls video.controls = false; // display the user defined video controls videocontrols.style.display = 'block'; with that done, a variable pointing to each of the buttons is now required: var playpause =
document.getelementbyid('playpause'); var stop =
document.getelementbyid('stop'); var mute ...
...=
document.getelementbyid('mute'); var volinc =
document.getelementbyid('volinc'); var voldec =
document.getelementbyid('voldec'); var progress =
document.getelementbyid('progress'); var progressbar =
document.getelementbyid('progress-bar'); var fullscreen =
document.getelementbyid('fs'); using these handles, events can now be attached to each of the custom control buttons making them interactive.
...And 7 more matches
<input type="button"> - HTML: Hypertext Markup Language
a simple button we'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <form> <input type="button" value="start machine"> </form> <p>the machine is stopped.</p> const button =
document.queryselector('input'); const paragraph =
document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script...
... <form> <input type="button" value="start machine" accesskey="s"> </form> <p>the machine is stopped.</p> const button =
document.queryselector('input'); const paragraph =
document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } note: ...
... hidden code 1 <input type="button" value="enabled"> const button =
document.queryselector('input'); button.addeventlistener('click', disablebutton); function disablebutton() { button.disabled = true; button.value = 'disabled'; window.settimeout(function() { button.disabled = false; button.value = 'enabled'; }, 2000); } if the disabled attribute isn't specified, the button inherits its disabled state from its parent element.
...And 7 more matches
Link types - HTML: Hypertext Markup Language
in html, link types indicate the relationship between two
documents, in which one links to the other using an <a>, <area>, <form>, or <link> element.
...an alternative page, of one of these types: for another medium, like a handheld device (if the media attribute is set) in another language (if the hreflang attribute is set), in another format, such as a pdf (if the type attribute is set) a combination of these <a>, <area>, <link> <form> archives defines a hyperlink to a
document that contains an archive link to this one.
... <a>, <area>, <link> <form> license indicates that the hyperlink leads to a
document describing the licensing information.
...And 7 more matches
Evolution of HTTP - HTTP
built over the existing tcp and ip protocols, it consisted of 4 building blocks: a textual format to represent hypertext
documents, the hypertext markup language (html).
... a simple protocol to exchange these
documents, the hyperttext transfer protocol (http).
... a client to display (and accidentally edit) these
documents, the first web browser called worldwideweb.
...And 7 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
volume is set to 0 the user has interacted with the site (by clicking, tapping, pressing keys, etc.) if the site has been whitelisted; 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.
...that could happen if the video is paused and resumed by the user or automatically by the browser when the
document is in a background tab.
... example: playing video this simple example plays the first <video> element found in the
document.
...And 7 more matches
Using templates and slots - Web Components
let's look at a trivial quick example: <template id="my-paragraph"> <p>my paragraph</p> </template> this won't appear in your page until you grab a reference to it with javascript and then append it to the dom, using something like the following: let template =
document.getelementbyid('my-paragraph'); let templatecontent = template.content;
document.body.appendchild(templatecontent); although trivial, you can already start to see how this could be useful.
...we'll call it <my-paragraph>: customelements.define('my-paragraph', class extends htmlelement { constructor() { super(); let template =
document.getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } } ); the key point to note here is that we append a clone of the template content to the shadow root, created using the node.clonenode() method.
... so for example: <template id="my-paragraph"> <style> p { color: white; background-color: #666; padding: 5px; } </style> <p>my paragraph</p> </template> now we can use it by just adding it to our html
document: <my-paragraph></my-paragraph> note: templates are well-supported in browsers; the shadow dom api is supported by default in firefox (version 63 onwards), chrome, opera, safari, and edge (starting with version 79).
...And 7 more matches
Web Components
shadow dom: a set of javascript apis for attaching an encapsulated "shadow" dom tree to an element — which is rendered separately from the main
document dom — and controlling associated functionality.
... in this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the
document.
... reference custom elements customelementregistry contains functionality related to custom elements, most notably the customelementregistry.define() method used to register new custom elements so they can then be used in your
document.
...And 7 more matches
Communicating With Other Scripts - Archive of obsolete content
content scripts content scripts loaded into the same
document at the same time using the same method can interact with each other directly as well as with the web content itself.
... however, content scripts which have been loaded into different
documents cannot interact directly with each other.
... content scripts that have been loaded into the same
document by different methods, or the same method called more than once, can pass messages directly to each other using the dom postmessage() api or a customevent.
...And 6 more matches
Forms related code snippets - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function datepicker (otarget) { const otable =
document.createelement("table"), ohrow =
document.createelement("tr"), othead =
document.createelement("thead"), ocapt =
document.createelement("caption"), odecryear =
document.createelement("span"), oincryear =
document.createelement("span"), odecrmonth =
document.createelement("span"), oincrmonth =
document.createelement("span"); var nid = ainstances.length, oth; this.
...target = otarget; this.display =
document.createelement("span"); this.current = new date(); this.container = otable; this.display.classname = sprefs + "-current-month"; this.id = nid; otable.classname = sprefs + "-calendar"; otable.id = sprefs + "-cal-" + nid; odecryear.classname = sprefs + "-decrease-year"; odecrmonth.classname = sprefs + "-decrease-month"; oincrmonth.classname = sprefs + "-increase-month"; oincryear.classname = sprefs + "-increase-year"; odecryear.innerhtml = "\u00ab"; /* « */ odecrmonth.innerhtml = "\u003c"; /* < */ oincrmonth.innerhtml = "\u003e"; /* > */ oincryear.innerhtml = "\u00bb"; /* » */ odecryear.id = sprefs + "-decr-year-" + nid; odecrmonth.id = sprefs + "-decr-month-" + nid; oin...
...crmonth.id = sprefs + "-incr-month-" + nid; oincryear.id = sprefs + "-incr-year-" + nid; odecryear.onmousedown = oincryear.onmousedown = odecrmonth.onmousedown = oincrmonth.onmousedown = onheadclick; for (var nthid = 0; nthid < 7; nthid++) { oth =
document.createelement("th"); oth.innerhtml = sdays[nthid]; ohrow.appendchild(oth); } othead.appendchild(ohrow); ocapt.appendchild(odecryear); ocapt.appendchild(odecrmonth); ocapt.appendchild(oincryear); ocapt.appendchild(oincrmonth); ocapt.appendchild(this.display); this.container.appendchild(ocapt); this.container.appendchild(othead); this.current.setdate(1); this.writedays(); otarget.onclick = function () { if (otable.parentnode) { otable.parentnode.removechild(otable); ...
...And 6 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
this
document was authored by yutaka kachi and was originally published in japanese for the firefox developers conference summer 2007.
...this means that the author is granting users the use of the work in the strong, authorial sense, and when i write “use” in the rest of this
document it is generally in that sense.
...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.
...And 6 more matches
XML data - Archive of obsolete content
you create a sample xml
document, and a stylesheet that you can use to display it in your browser.
...by linking a css stylesheet with the xml
document, you can define other ways to display it.
... to do this, your stylesheet uses rules that map tags in the xml
document to the display types used by html.
...And 6 more matches
Index of archived content - Archive of obsolete content
between privileged and non-privileged pages jetpack processes legacy add-ons legacy extensions for firefox for android api accounts.jsm browserapp addtab closetab deck getbrowserfor
document getbrowserforwindow gettabforbrowser gettabforid gettabforwindow loaduri quit selecttab tabs helperapps.jsm home.jsm banner panels ...
...tion (html & xul) appendix f: monitoring dom changes connecting to remote content custom xul elements with xbl getting started with firefox extensions handling preferences intercepting page loads introduction javascript object management local storage mozilla
documentation roadmap observer notifications setting up a development environment the box model the essentials of an extension useful mozilla community sites user notifications and alerts xpcom objects performance best practices in extensions ...
... updating addons broken by private browsing changes using dependent libraries in extension components using the stylesheet service bookmarks.export() bookmarks.import() adding preferences to an extension an interview with douglas bowman of wired news archived mozilla and build
documentation activex control for hosting netscape plug-ins in ie archived spidermonkey docs file object open merging tracemonkey repo spidermonkey coding conventions autodial for windows nt automated testi...
...And 6 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
there's another obvious fix, which is to make sure your
document doesn't trigger the "standards"rendering mode.
... you can do this by using a doctype that will trigger either "quirks" mode or "almost standards" mode, or not having a doctype appear in your
document at all.
...for authors who are working with legacy
documents, a "quirks" mode doctype is the best choice.
...And 6 more matches
Creating a Help Content Pack - Archive of obsolete content
the previous
document had a lot of places where ideas were simply introduced without explanation, and i've tried to go through things a bit more slowly with better descriptions.
... this
document describes how to integrate html help
documentation into your application using the mozilla help viewer.
...
documentation contained in the help viewer can be accessed using any xul application or program that embeds mozilla.
...And 6 more matches
New Skin Notes - Archive of obsolete content
-- dria when a page is redirected, need to say-so and what it was redirected from, (see
document for an example of such.) this is only an issue in mw1.5 so far.
...we're a
documentation site.
...this is not what user expects (well, i don't expect sites to style visited and non-visited links the same), and it's false that other
documentation sites do this (i just checked apple's and microsoft's sites).
...And 6 more matches
Anonymous Content - Archive of obsolete content
an element declared in a bound
document using a single tag can then be constructed out of multiple child elements, and this implementation is hidden from the bound
document.
...all anonymous nodes' owner
document pointers are set to the bound
document at the time of generation.
... in effect the anonymous content exists in its own insulated pocket within the
document.
...And 6 more matches
DOM Interfaces - Archive of obsolete content
the nsidom
documentxbl interface the nsidom
documentxbl interface contains methods for manipulating xbl bindings.
... the interface is implemented by all dom
documents.
... idl definition interface nsidom
documentxbl { nodelist getanonymousnodes(in element elt); element getanonymouselementbyattribute(in element elt, in domstring attrname, in domstring attrvalue); element getbindingparent(in node node); void loadbinding
document(in domstring
documenturl); }; methods getanonymousnodes the getanonymousnodes method retrieves the anonymous children of the specified element.
...And 6 more matches
Building accessible custom components in XUL - Archive of obsolete content
this has all been well-
documented for some time.
...in html
documents, you can make any element focusable with the tabindex attribute.
...<code> grid.spreadsheet { border: thin solid; -moz-user-focus: normal; } </code> in html
documents, firefox draws a focus rectangle around the currently focused element.
...And 6 more matches
Modifying a XUL Interface - Archive of obsolete content
« previousnext » the dom provides various functions to modify the
document.
... creating new elements you can create new elements using the createelement() function of the
document.
...you can then set attributes of the element using the setattribute() function and append it to the xul
document using the appendchild() function.
...And 6 more matches
Drawing graphics - Learn web development
now add the following lines of javascript inside the <script> element: const canvas =
document.queryselector('.mycanvas'); const width = canvas.width = window.innerwidth; const height = canvas.height = window.innerheight; here we have stored a reference to the canvas in the canvas constant.
... if you save and load your example in a browser now, you'll see nothing, which is fine, but you'll also see scrollbars — this is a problem for us, which happens because the <body> element has a margin that, added to our full-window-size canvas, results in a
document that's wider than the window.
...add the following into the <head> of your
document: <style> body { margin: 0; overflow: hidden; } </style> the scrollbars should now be gone.
...And 6 more matches
Properly configuring server MIME types - Learn web development
examples of mime types are: text/html for normal web pages text/plain for plain text text/css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf
documents technical background registered values for mime types are available in iana | mime media types.
... serving content using the correct mime type can also be important for security reasons; it's possible for malicious content to affect the user's computer by pretending to be a safe type of
document when it is in fact not.
... note: historically, firefox has loaded css files even if they had the wrong mime type, as long as the html
document that requested them was being processed in quirks mode.
...And 6 more matches
Introduction to client-side frameworks - Learn web development
a brief history when javascript debuted in 1996, it added occasional interactivity and excitement to a web that was, up until then, composed of static
documents.
...that could look something like this: function buildtodoitemel(id, name) { const item =
document.createelement('li'); const span =
document.createelement('span'); const textcontent =
document.createtextnode(name); span.appendchild(textcontent) item.id = id; item.appendchild(span); item.appendchild(builddeletebuttonel(id)); return item; } here, we use the
document.createelement() method to make our <li>, and several more lines of code to create the properties and children it...
...it follows a similar pattern to the one we used to build a list item element: function builddeletebuttonel(id) { const button =
document.createelement('button'); const textcontent =
document.createtextnode('delete'); button.setattribute('type', 'button'); button.appendchild(textcontent); return button; } this button doesn't do anything yet, but it will later once we decide to implement our delete feature.
...And 6 more matches
Displaying Places information using views
every xul
document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one ...
... getservice(ci.nsinavhistoryservice); var query = histserv.getnewquery(); query.searchterms = "mozilla"; query.onlybookmarked = true; var opts = histserv.getnewqueryoptions(); opts.querytype = opts.query_type_bookmarks; var uri = histserv.queriestoquerystring([query], 1, opts); var tree =
document.getelementbyid("mytree"); tree.place = uri; these two examples use the built-in tree view, but the point is to demonstrate the use of the place attribute and property.
...this
document describes places views.
...And 6 more matches
Cross Process Object Wrappers
this
document describes cross process object wrappers (cpows), which enable chrome code to synchronously access content in multiprocess firefox.
...to learn more about this, see the
documentation on using the message manager.
...one of these shims provides the following behavior: whenever chrome code tries to access content directly (for example, through window.content or browser.content
document), it is given back a cpow that wraps the content object.
...And 6 more matches
MozScrolledAreaChanged
the mozscrolledareachanged event is fired when the
document view has been scrolled or resized.
... note: while you can poll the values of
document.scrollwidth and
document.scrollheight to watch for changes to the
document size, reading these properties can trigger
document reflow, which can make them computationally expensive.
... specification mozilla specific interface uievent bubbles yes cancelable yes target defaultview,
document default action none properties property type description targetread only eventtarget the event target (the topmost target in the dom tree).
...And 6 more matches
Following the Android Toasts Tutorial from a JNI Perspective
this article teaches developers how to port java code to jni by reading the java and android
documentation.
... toasts do not have to be created with jni; they are exposed by the nativewindow feature on firefox for android, see toast
documentation.
...the class signature is looked up on the android
documentation.
...And 6 more matches
nsIAccessibleEvent
accessible
document nsiaccessible
document the nsiaccessible
document that the event target nsiaccessible resides in.
... this can be used to get the dom window, the dom
document and the window handler, among other things.
... event_
document_load_complete 0x002b 0x0027 the loading of the
document has completed.
...And 6 more matches
Working with Multiple Versions of Interfaces
in the extension that prompted this note, i needed to obtain the hwnd of the
document (yes its on windows) in order to identify each particular extension instance.
... nscomptr<nsiaccessible> accnode; rv = refp->getaccessiblefor(node, getter_addrefs(accnode)); if(ns_failed(rv)){ return self; } void *wh = null; nscomptr<nsiaccessible
document> accdocnode; accdocnode = do_queryinterface(accnode, &rv); if(ns_failed(rv)){ return self; } rv = accdocnode->getwindowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } this approach worked, as is, for versions as early as firefox 1.5.
...efs(compmgr)); if (ns_failed(rv)){ return self; } nscomptr<nsiaccessibleretrieval> refp; rv = compmgr->createinstancebycontractid(accretcid, 0, iar_iid_old, getter_addrefs(refp)); if (ns_failed(rv)){ return self; } nscomptr<nsiaccessible> accnode; rv = refp->getaccessiblefor(node, getter_addrefs(accnode)); if(ns_failed(rv)){ return self; } void *wh = null; nscomptr<nsiaccessible
document> accdocnode; rv = accnode->queryinterface(iad_iid_old, getter_addrefs(accdocnode)); if(ns_failed(rv)){ return self; } rv = accdocnode->getwindowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } there is good news and bad news.
...And 6 more matches
DOM Inspector internals - Firefox Developer Tools
one panel reacts to changes to the inspected
document, and the other panel reacts to changes to the selection in the first panel.
... these are the
document panel and the object panel, respectively.
...this comparison turns out to be quite apt, since each panel actually contains an anonymous browser, and individual viewers exist in separate
documents loaded in the browser.
...And 6 more matches
The JavaScript input interpreter - Firefox Developer Tools
working with iframes if a page contains embedded iframes, you can use the cd() function to change the console's scope to a specific iframe, and then you can execute functions defined in the
document hosted by that iframe.
... there are three ways to select an iframe using cd(): you can pass the iframe dom element: var frame =
document.getelementbyid("frame1"); cd(frame); you can pass a css selector that matches the iframe: cd("#frame1"); you can pass the iframe's global window object: var frame =
document.getelementbyid("frame1"); cd(frame.contentwindow); to switch the context back to the top-level window, call cd() with no arguments: cd(); for example, suppose we have a
document that embeds an iframe: <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> </body> </html> the iframe defines a new function: <!doctype html> <html> <head> <meta charset="utf-8"> <script> function whoareyou() { ...
...return "i'm frame1"; } </script> </head> <body> </body> </html> you can switch context to the iframe like this: cd("#frame1"); now you'll see that the global window's
document is the iframe: and you can call the function defined in the iframe: helper commands the javascript command line provided by the web console offers a few built-in helper functions that make certain tasks easier.
...And 6 more matches
Web Console remoting - Firefox Developer Tools
introduction this
document describes the way web console remoting works.
...this
document describes the latest protocol, with changes that have been made since then.
...these will be explained in the following sections of this
document.
...And 6 more matches
Background Tasks API - Web APIs
this code draws any pending updates to the
document currently being displayed, runs any javascript code the page needs to run, accepts events from input devices, and dispatches those events to the elements that should receive them.
...in addition, this example demonstrates how to schedule updates to the
document content using requestanimationframe().
... .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; margin-top: 0; color: white; background-color: darkgreen; } #progress { width: 100%; padding-top: 6px; } javascript content now that the
document structure is defined, construct the javascript code that will do the work.
...And 6 more matches
Using dynamic styling information - Web APIs
note also that, as with individual element's dom styles, when speaking of manipulating the stylesheets, this is not actually manipulating the physical
document(s), but merely the internal representation of the
document.
... to get to the style objects from the
document, you can use the
document.stylesheets property and access the individual objects by index (e.g.,
document.stylesheets[0] is the first stylesheet defined for the
document, etc.).
... modify a stylesheet rule with cssom <html> <head> <title>modifying a stylesheet rule with cssom</title> <style type="text/css"> body { background-color: red; } </style> <script type="text/javascript"> var stylesheet =
document.stylesheets[0]; stylesheet.cssrules[0].style.backgroundcolor="blue"; </script> </head> <body> the stylesheet declaration for the body's background color is modified via javascript.
...And 6 more matches
Using the CSS Typed Object Model - Web APIs
// get the element const myelement =
document.queryselector('a'); // get the <dl> we'll be populating const styleslist =
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)); styleslist.appendchild(cssproperty); // values const cssvalue =
document.createelement('dd'); cssvalue.appendchild(
document.createtextnode(val)); styleslist.appendchild(cssvalue); } the computedstylemap() method returns a stylepropertymapreadonly object containing the size property, which indicates how many properties are in the map.
...om property and an inhertable property: p { font-weight: bold; } a { --color: red; color: var(--color); } instead of getting all the properties, we create an array of properties of interest and use the stylepropertymapreadonly.get() method to get each of their values: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> // get the element const myelement =
document.queryselector('a'); // get the <dl> we'll be populating const styleslist =
document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--color']; // iterate through our properties of interest ...
...And 6 more matches
Basic animations - Web APIs
var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.g...
... function clock() { var now = new date(); var ctx =
document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 150, 150); ctx.translate(75, 75); ctx.scale(0.4, 0.4); ctx.rotate(-math.pi / 2); ctx.strokestyle = 'black'; ctx.fillstyle = 'white'; ctx.linewidth = 8; ctx.linecap = 'round'; // hour marks ctx.save(); for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(10...
... // image larger than canvas x = canvasxsize - imgw; } if (imgw > canvasxsize) { // image width larger than canvas clearx = imgw; } else { clearx = canvasxsize; } if (imgh > canvasysize) { // image height larger than canvas cleary = imgh; } else { cleary = canvasysize; } // get canvas context ctx =
document.getelementbyid('canvas').getcontext('2d'); // set refresh rate return setinterval(draw, speed); } function draw() { ctx.clearrect(0, 0, clearx, cleary); // clear the canvas // if image is <= canvas size if (imgw <= canvasxsize) { // reset, start from beginning if (x > canvasxsize) { x = -imgw + x; } // draw additional image1 ...
...And 6 more matches
Drawing shapes with canvas - Web APIs
rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas =
document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillrect(25, 25, 100, 100); ctx.clearrect(45, 45, 60, 60); ctx.strokerect(50, 50, 50, 50); } } this example's output is shown below.
... drawing a triangle for example, the code for drawing a triangle would look something like this: <html> <body onload="draw();"> <canvas id="canvas" width="100" height="100"></canvas> </body> </html> function draw() { var canvas =
document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(75, 50); ctx.lineto(100, 75); ctx.lineto(100, 25); ctx.fill(); } } the result looks like this: screenshotlive sample moving the pen one very useful function, which doesn't actually draw anything but becomes part of the path list described above, is th...
... <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas =
document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(75, 75, 50, 0, math.pi * 2, true); // outer circle ctx.moveto(110, 75); ctx.arc(75, 75, 35, 0, math.pi, false); // mouth (clockwise) ctx.moveto(65, 65); ctx.arc(60, 65, 5, 0, math.pi * 2, true); // left eye ctx.moveto(95, 65); ctx.arc(90, 65, 5, ...
...And 6 more matches
HTMLScriptElement - Web APIs
htmlscriptelement.event is a domstring; an obsolete way of registering event handlers on elements in an html
document.
...these algorithms describe the core ideas, but they rely on the parsing rules for <script> start and end tags in html, in foreign content, and in xml; the rules for the
document.write() method; the handling of scripting; and so on.
... note: when inserted using the
document.write() method, <script> elements execute (typically synchronously), but when inserted using innerhtml or outerhtml, they do not execute at all.
...And 6 more matches
NodeIterator.whatToShow - Web APIs
since attributes are never children of other nodes, they do not appear when traversing over the
document tree.
... nodefilter.show_
document 256 shows
document nodes.
... nodefilter.show_
document_fragment 1024 shows
documentfragment nodes.
...And 6 more matches
NodeList - Web APIs
nodelist objects are collections of nodes, usually returned by properties such as node.childnodes and methods such as
document.queryselectorall().
...this can be circumvented by using array.prototype.foreach() — see this
document's example.
... for example, node.childnodes is live: const parent =
document.getelementbyid('parent'); let child_nodes = parent.childnodes; console.log(child_nodes.length); // let's assume "2" parent.appendchild(
document.createelement('div')); console.log(child_nodes.length); // outputs "3" static nodelists in other cases, the nodelist is static, where any changes in the dom does not affect the content of the collection.
...And 6 more matches
Range - Web APIs
the range interface represents a fragment of a
document that can contain nodes and parts of text nodes.
... a range can be created by using the
document.createrange() method.
... range objects can also be retrieved by using the getrangeat() method of the selection object or the caretrangefrompoint() method of the
document object.
...And 6 more matches
Window.pageYOffset - Web APIs
the read-only window property pageyoffset is an alias for scrolly; as such, it returns the number of pixels the
document is currently scrolled along the vertical axis (that is, up or down) with a value of 0.0, indicating that the top edge of the
document is currently aligned with the top edge of the window's content area.
... syntax yoffset = window.pageyoffset; value a floating-point number specifying the number of pixels the
document is scrolled vertically within its containing window.
...a value of 0.0 indicates that the window is not scrolled vertically, and that the top of the
document is located at the top edge of the window's content area.
...And 6 more matches
XPathResult - Web APIs
it is true if resulttype is unordered_node_iterator_type or ordered_node_iterator_type and the
document has been modified since this result was returned.
...unlike the iterator result, the snapshot does not become invalid, but may not correspond to the current
document if it is mutated.
...the nodes may not necessarily be in the same order that they appear in the
document.
...And 6 more matches
XSLTProcessor - Web APIs
an xsltprocessor applies an xslt stylesheet transformation to an xml
document to produce a new xml
document as output.
... it has methods to load the xslt stylesheet, to manipulate <xsl:param> parameter values, and to apply the transformation to
documents.
...if the given node is a
document node, you can pass in a full xsl transform or a literal result element transform; otherwise, it must be an <xsl:stylesheet> or <xsl:transform> element.
...And 6 more matches
ARIA Test Cases - Accessibility
documenting and filing bugs review the information on how to file a bug on an aria implementation.
... when
documenting an issue, please also list it in the relevant compatibility table below.
... markup used: role="listbox", "option" (listitem should only be used with list, which is for static
document structures, could someone please make sure our examples follow this rule) aria-activedescendant notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) ...
...And 6 more matches
Text labels and names - Accessibility
you can change your details at any time in the user account section.</p> <button>close</button> </div> see also role="dialog" role="alertdialog" aria-label aria-labelledby wai-aria: dialog role dialog authoring practices
documents must have a title it is important on each html
document to include a <title> that describes the page's purpose.
... examples the title for the reference article about the <title> element is as follows: <title><title>: the
document title element - html: hypertext markup language</title> another example might look like so: <title>fill in your details to register — mygov services</title> to help the user, you can update the page title value to reflect significant page state changes (such as form validation problems): <title>2 errors — fill in your details to register — mygov services</title> see also <title> embed...
...the caption describes the purpose of the figure in the
document, which may be different from a simple description of a visual item, as provided by the alternative text.
...And 6 more matches
Audio and Video Delivery - Developer guides
a <video> element, or
document.createelement('video') perhaps?) deliver the media file to the player.
... javascript audio var myaudio =
document.createelement('audio'); if (myaudio.canplaytype('audio/mpeg')) { myaudio.setattribute('src','audiofile.mp3'); } else if (myaudio.canplaytype('audio/ogg')) { myaudio.setattribute('src','audiofile.ogg'); } myaudio.currenttime = 5; myaudio.play(); we set the source of the audio depending on the type of audio file the browser supports, then set the play-head 5 seconds in and attempt to play it...
... javascript video var myvideo =
document.createelement('video'); if (myvideo.canplaytype('video/mp4')) { myvideo.setattribute('src','videofile.mp4'); } else if (myvideo.canplaytype('video/webm')) { myvideo.setattribute('src','videofile.webm'); } myvideo.width = 480; myvideo.height = 320; we set the source of the video depending on the type of video file the browser supports we then set the width and height of the video.
...And 6 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
the html external resource link element (<link>) specifies relationships between the current
document and an external resource.
...the rel stands for "relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is related to the containing
document.
... webtv supports the use of the value next for rel to preload the next page in a
document series.
...And 6 more matches
HTTP conditional requests - HTTP
such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a
document, like when resuming a download, or when preventing to lose updates when uploading or modifying a
document on the server.
... the different behaviors are defined by the method of the request used, and by the set of headers used for a precondition: for safe methods, like get, which usually tries to fetch a
document, the conditional request can be used to send back the
document, if relevant only.
... for unsafe methods, like put, which usually uploads a
document, the conditional request can be used to upload the
document, only if the original it is based on is the same as that stored on the server.
...And 6 more matches
HTTP headers - HTTP
actual
documentation can be found on the website of the http working group.
...this ensures the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing
documents.
... range indicates the part of a
document that the server should return.
...And 6 more matches
Closures - JavaScript
here's the javascript: function makesizer(size) { return function() {
document.body.style.fontsize = size + 'px'; }; } var size12 = makesizer(12); var size14 = makesizer(14); var size16 = makesizer(16); size12, size14, and size16 are now functions that resize the body text to 12, 14, and 16 pixels, respectively.
...
document.getelementbyid('size-12').onclick = size12;
document.getelementbyid('size-14').onclick = size14;
document.getelementbyid('size-16').onclick = size16; <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id="size-16">16</a> run the code using jsfiddle.
... <p id="help">helpful notes will appear here</p> <p>e-mail: <input type="text" id="email" name="email"></p> <p>name: <input type="text" id="name" name="name"></p> <p>age: <input type="text" id="age" name="age"></p> function showhelp(help) {
document.getelementbyid('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 16)'} ]; for (var i = 0; i < helptext.length; i++) { var item = helptext[i];
document.getelementbyid(item.id).onfocus = function() { s...
...And 6 more matches
Introduction - JavaScript
where to find javascript information the javascript
documentation on mdn includes the following: learn web development provides information for beginners and introduces basic concepts of programming and the internet.
...core javascript can be extended for a variety of purposes by supplementing it with additional objects; for example: client-side javascript extends the core language by supplying objects to control a browser and its
document object model (dom).
...the ecmascript standard is
documented in the ecma-262 specification.
...And 6 more matches
JavaScript technologies overview - JavaScript
one of them is the core language (ecmascript), another is the collection of the web apis, including the dom (
document object model).
...the initial standard was approved in december 2012; the status of implementations in browsers is tracked in the
documentation of the intl object.
... the core of the dom the
document object model (dom) is a cross-platform, language-independent convention for representing and interacting with objects in html, xhtml and xml
documents.
...And 6 more matches
Media - Progressive web apps (PWAs)
example a
document on a website has a navigation area that contains the primary site menu.
...(in html5, this can be marked up with the <nav> element instead of <div> with an id attribute.) when printing the
document, the navigation area has no purpose.
... this css (below) removes the navigation area when printing the
document: @media print { #nav-area {display: none;} } some common media types are: screen color device display print printed paged media projection projected display all all media (the default) more details there are other ways to specify the media type for a set of rules.
...And 6 more matches
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
this
document describes the javascript interface in mozilla 1.2 and up to the xslt processing engine (transformiix).
... var testtransform =
document.implementation.create
document("", "test", null); // just an example to get a transform into a script as a dom // xml
document.load is asynchronous, so all processing happens in the // onload handler testtransform.addeventlistener("load", onload, false); testtransform.load("test-transform.xml"); function onload() { processor.importstylesheet(testtransform); } xsltprocessor.importstylesheet() re...
...if that node is a
document node, you can pass in a full xsl transform or a literal result element transform, otherwise it must be an xsl:stylesheet or xsl:transform element.
...And 6 more matches
XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml
documents.
... although the process is referred to as "transformation," the original
document is not changed; rather, a new xml
document is created based on the content of an existing
document.
... then, the new
document may be serialized (output) by the processor in standard xml syntax or in another format, such as html or plain text.
...And 6 more matches
page-worker - Archive of obsolete content
this can point to a remote file: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(
document.body.innerhtml);", contenturl: "http://en.wikipedia.org/wiki/internet" }); it can also point to an html file which you've packaged with your add-on.
... to do this, save the file in your add-on's data directory and create the url using the data.url() method of the self module: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(
document.body.innerhtml);", contenturl: require("sdk/self").data.url("myfile.html") }); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
... so you can rewrite the above code like this: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(
document.body.innerhtml);", contenturl: "./myfile.html" }); you can load a new page by setting the page worker's contenturl property.
...And 5 more matches
widget - Archive of obsolete content
next, we write a content script that listens for click events on each icon and sends the corresponding message to the main add-on code: var play_button =
document.getelementbyid("play-button"); play_button.onclick = function() { self.port.emit("play"); } var pause_button =
document.getelementbyid("pause-button"); pause_button.onclick = function() { self.port.emit("pause"); } var stop_button =
document.getelementbyid("stop-button"); stop_button.onclick = function() { self.port.emit("stop"); } we save this file in the add-on's data directory as "but...
... first, in the content script, change self to addon, and wrap it in a function: function init() { var play_button =
document.getelementbyid("play-button"); play_button.onclick = function() { addon.port.emit("play"); } var pause_button =
document.getelementbyid("pause-button"); pause_button.onclick = function() { addon.port.emit("pause"); } var stop_button =
document.getelementbyid("stop-button"); stop_button.onclick = function() { addon.port.emit("stop"); } } next, add a script tag to ref...
... to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the
documentation for the private-browsing module.
...And 5 more matches
HTML to DOM - Archive of obsolete content
function htmlparser(ahtmlstring){ var html =
document.implementation.create
document("http://www.w3.org/1999/xhtml", "html", null), body =
document.createelementns("http://www.w3.org/1999/xhtml", "body"); html.
documentelement.appendchild(body); body.appendchild(components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(ahtmlstring, false, null, body)); return ...
...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).
... parsing complete html to dom loading an html
document seems much simpler if it's loaded using the xmlhttprequest object.
...And 5 more matches
View Source for XUL Applications - Archive of obsolete content
importing gviewsourceutils xul applications wanting to show the source code for
documents should import the viewsourceutils.js script instead of attempting to open the viewsource.xul window themselves: <script type="application/javascript" src="chrome://global/content/viewsourceutils.js"/> viewsourceutils.js exposes a gviewsourceutils global into the scope of the window that imports that script.
... void viewsource(aobject); methods viewsource opens a viewer to the source code for some
document or uri.
...the object can include the following properties: url (required) a string url for the
document to view the source of.
...And 5 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.
...this
document lays out some alternatives which do not have such severe performance impacts.
... * @param {
document} doc the
document in which to watch for new nodes.
...And 5 more matches
Positioning - Learn web development
previous overview: css layout next positioning allows you to take elements out of the normal
document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.
... introducing positioning the whole idea of positioning is to allow us to override the basic
document flow behavior described above, to produce interesting effects.
... static positioning static positioning is the default that every element gets — it just means "put the element into its normal position in the
document layout flow — nothing special to see here." to demonstrate this, and get your example set up for future sections, first add a class of positioned to the second <p> in the html: <p class="positioned"> ...
...And 5 more matches
What are hyperlinks? - Learn web development
back in 1989, tim berners-lee, the web's inventor, spoke of the three pillars on which the web stands: url, an address system that keeps track of web
documents http, a transfer protocol to find
documents when given their urls html, a
document format allowing for embedded hyperlinks as you can see in the three pillars, everything on the web revolves around
documents and how to access them.
... the web's original purpose was to provide an easy way to reach, read, and navigate through text
documents.
... before the web, it was quite hard to access
documents and move from one to another.
...And 5 more matches
JavaScript basics - Learn web development
add this code to the main.js file: const myheading =
document.queryselector('h1'); myheading.textcontent = 'hello world!'; make sure the html and javascript files are saved.
... note: both of the features you used in this exercise are parts of the
document object model (dom) api, which has the capability to manipulate
documents.
... let myvariable =
document.queryselector('h1'); all of the above examples too.
...And 5 more matches
Debugging HTML - Learn web development
it isn't clear where the first <strong> element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the
document!
...in a small example like the one seen above, it is easy to search through the lines and find the errors, but what about a huge, complex html
document?
...this webpage takes an html
document as an input, goes through it, and gives you a report to tell you what is wrong with your html.
...And 5 more matches
Client-side storage - Learn web development
this lets you persist data for long-term storage, save sites or
documents for offline use, retain user-specific settings for your site, and more.
... saving web application generated
documents locally for use offline often client-side and server-side storage are used together.
...add the following lines to your javascript file: // create needed constants const rememberdiv =
document.queryselector('.remember'); const forgetdiv =
document.queryselector('.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-gr...
...And 5 more matches
Introduction to web APIs - Learn web development
common browser apis in particular, the most common categories of browser apis you'll use (and which we'll cover in this module in greater detail) are: apis for manipulating
documents loaded into the browser.
... the most obvious example is the dom (
document object model) api, which allows you to manipulate html and css — creating, removing and changing html, dynamically applying new styles to your page, etc.
...find out more about these types of api in manipulating
documents.
...And 5 more matches
Arrays - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 150px;"> <ul> </ul> <p></p> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 410px;width: 95%"> const list =
document.queryselector('.output ul'); const totalbox =
document.queryselector('.output p'); let total = 0; list.innerhtml = ''; totalbox.textcontent = ''; // number 1 'underpants:6.99' 'socks:5.99' 't-shirt:14.99' 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // num...
...ber 5 let itemtext = 0; const listitem =
document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } totalbox.textcontent = 'total: $' + total.tofixed(2); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea =
document.getelementbyid('code'); const reset =
document.getelementbyid('reset'); const solution =
document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); });...
... solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list =
document.queryselector(\'.output ul\');\nconst totalbox =
document.queryselector(\'.output p\');\nlet total = 0;\nlist.innerhtml = \'\';\ntotalbox.textcontent = \'\';\n\nlet products = [\'underpants:6.99\',\n \'socks:5.99\',\n \'t-shirt:14.99\',\n \'trousers:31.99\',\n \'shoes:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subarray = products[i].split(\':\');\n let name = subarray[0];\n let price = number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + ...
...And 5 more matches
Handling common accessibility problems - Learn web development
semantic structure the most important quick win in semantic html is to use a structure of headings and paragraphs for your content; this is because screen reader users tend to use the headings of a
document as signposts to find the content they need more quickly.
...examples of bad and good html: <font size="7">my heading</font> <br><br> this is the first section of my
document.
...<br><br> <font size="5">my subheading</font> <br><br> this is the first subsection of my
document.
...And 5 more matches
Embedding Tips
how do i save a
document or data to disk?
... query for the nsiwebbrowserpersist interface implemented on the web browser object and call the saveuri() or save
document() methods on that.
... alternatively, create a standalone webbrowser persist object and call the nsiwebbrowserpersist interface on that to save uris and
documents.
...And 5 more matches
JavaScript-DOM Prototypes in Mozilla
as an example of this let's look at an html image element in a
document.
... var obj =
document.images[0]; here, obj will not really have any properties (except for the standard jsobject properties such as constructor, and the non-standard __parent__, __proto__, etc.), all the dom functionality of obj comes from obj's prototype (obj.__proto__) that xpconnect sets up when exposing the first image in
document to javascript.
...because of this, the following holds true (assuming img1 and img2 are two different image objects in the same
document): img1.__proto__ === img2.__proto__ if img1 would come from one
document and img2 from another
document, then the above would not be true.
...And 5 more matches
CustomizableUI.jsm
when a customizable toolbar's xbl binding is constructed (generally, that is when a <toolbar customizable="true"/> node is appended to the
document and isn't invisible), the binding will call into customizableui and register the toolbar's node as being one of the concrete instances of its area.
... onwidgetinstanceremoved(awidgetid, a
document) fired when a window is unloaded and a widget's instance is destroyed because of this.
... awidgetid is the widget whose instance is being destroyed, a
document the
document in which this is happening.
...And 5 more matches
Index
9 localization content best practices apps, extensions, internationalization, localization, mozilla, l10n, l12y this
document provides best practices for developers to create localizable code, and describes how to avoid some localizability (l12y) common mistakes.
...there is an established format for those, which is described in this
document.
...for more detailed
documentation about localization in general, see our localization page.
...And 5 more matches
NSS API Guidelines
nss api guidelines newsgroup: mozilla.dev.tech.crypto introduction this
document describes how the nss code is organized, the libraries that get built from the nss sources, and guidelines for writing nss code.
... some of the guidelines in this
document, are more forward-looking than
documentary.
...this section of the
document should grow as we develop our api.
...And 5 more matches
nsIContentView
contentwidth float dimensions of scrolled content in chrome-
document css pixels.
... id nscontentviewid id that can be used in conjunction with nsidomwindowutils to change the actual
document, instead of just how it is transformed; this is a 64-bit unsigned integer.
... scrollx float horizontal scroll offset in chrome-
document css pixels.
...And 5 more matches
nsIDOMXPathResult
dom/interfaces/xpath/nsidomxpathresult.idlscriptable this interface describes an xpath result returned by nsidomxpathevaluator or
document.evaluate inherits from: nsisupports last changed in gecko 1.7 method overview nsidomnode iteratenext(); nsidomnode snapshotitem(in unsigned long index); attributes attribute type description booleanvalue boolean if resulttype is boolean_type, the boolean value.
...the nodes may not necessarily be in the same order that they appear in the
document.
...the nodes in the result set are in the same order that they appear in the
document.
...And 5 more matches
nsISHEntry
docshell/shistory/public/nsishentry.idlscriptable each
document or subframe in session history will have a nsishentry associated with it which will hold all information required to recreate the
document from history.
... contenttype acstring indicates the content-type of the
document that this is a session history entry for.
... docidentifier unsigned long long an integer that should be the same for two entries attached to the same docshell if and only if the two entries are entries for the same
document.
...And 5 more matches
nsISHistoryListener
onhistorynewentry() called when a new
document is added to session history.
... new
documents are added to session history by the docshell when new pages are loaded in a frame or content area; for example by calling nsiwebnavigation.loaduri().
...void onhistorynewentry( in nsiuri anewuri ); parameters anewuri the uri of the
document to be added to session history.
...And 5 more matches
XUL Overlays
overlays provide a general mechanism for: adding ui for additional components, as described in the example above overriding small pieces of a xul file without having to resupply the whole ui reusing particular pieces of the ui xul files and overlays work together to describe a single master
document.
...loading overlays explicitly a processing instruction is used to load overlay files explicitly into the master
document.
...the layout engine loads any overlay files and then flows the resulting xul
document, so problems associated with incremental insertion in menus, boxes, tables, and forms are avoided.
...And 5 more matches
Examine and edit HTML - Firefox Developer Tools
this shows the complete hierarchy through the
document for the branch containing the selected element: hovering over a breadcrumb highlights that element in the page.
... searching the page inspector's search box matches all markup in the current
document and in any frames.
... (paste) before paste the clipboard contents into the
document immediately before this node.
...And 5 more matches
CSSStyleSheet - Web APIs
ownerrule read only if this stylesheet is imported into the
document using an @import rule, the ownerrule property returns the corresponding cssimportrule; otherwise, this property's value is null.
... a stylesheet is associated with at most one
document, which it applies to (unless disabled).
... a list of cssstylesheet objects for a given
document can be obtained using the
document.stylesheets property.
...And 5 more matches
HTMLFormElement - Web APIs
usage notes obtaining a form element object to obtain an htmlformelement object, you can use a css selector with queryselector(), or you can get a list of all of the forms in the
document using its forms property.
...
document.forms returns an array of htmlformelement objects listing each of the forms on the page.
... you can then use any of the following syntaxes to get an individual form:
document.forms[index] returns the form at the specified index into the array of forms.
...And 5 more matches
Working with the History API - Web APIs
the referrer will be the url of the
document whose window is this at the time of creation of the xmlhttprequest object.
... if the user clicks back once again, the url will change to http://mozilla.org/foo.html, and the
document will get a popstate event, this time with a null state object.
... here too, going back doesn't change the
document's contents from what they were in the previous step, although the
document might update its contents manually upon receiving the popstate event.
...And 5 more matches
Basic concepts - Web APIs
about this
document this introduction discusses essential concepts and terminology in indexeddb.
... for the reference
documentation on the indexeddb api, refer back to the main indexeddb api article and its subpages, which
document the types of objects used by indexeddb.
...an origin is the domain, application layer protocol, and port of a url of the
document where the script is being executed.
...And 5 more matches
MediaQueryList - Web APIs
a mediaquerylist object stores information on a media query applied to a
document, with support for both immediate and event-driven matching against the state of the
document.
... this is very useful for adaptive design, since this makes it possible to observe a
document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a
document based on media query status.
... matchesread only a boolean that returns true if the
document currently matches the media query list, or false if not.
...And 5 more matches
MouseEvent - Web APIs
mouseevent.pagex read only the x coordinate of the mouse pointer relative to the whole
document.
... mouseevent.pagey read only the y coordinate of the mouse pointer relative to the whole
document.
... html <p><label><input type="checkbox" id="checkbox"> checked</label> <p><button id="button">click me</button> javascript function simulateclick() { var evt = new mouseevent("click", { bubbles: true, cancelable: true, view: window }); var cb =
document.getelementbyid("checkbox"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault alert("canceled"); } else { // none of the handlers called preventdefault alert("not canceled"); } }
document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications specification status...
...And 5 more matches
Screen Wake Lock API - Web APIs
only visible (active)
documents can acquire the screen wake lock.
...a request may be rejected for a number of reasons, including system settings (such as power save mode or low battery level) or if the
document is not active or visible.
...it can be released by the system, again if the battery power is too low or the
document is not active or visible.
...And 5 more matches
SubtleCrypto.exportKey() - Web APIs
*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput =
document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
... */ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton =
document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
...*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyoutput =
document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
...And 5 more matches
SubtleCrypto.verify() - Web APIs
*/ function getmessageencoding() { const messagebox =
document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature.
...*/ async function verifymessage(publickey) { const signaturevalue =
document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ function getmessageencoding() { const messagebox =
document.queryselector(".rsa-pss #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature.
...And 5 more matches
TreeWalker.whatToShow - Web APIs
since attributes are never children of other nodes, they do not appear when traversing over the
document tree.
... nodefilter.show_
document 256 shows
document nodes.
... nodefilter.show_
document_fragment 1024 shows
documentfragment nodes.
...And 5 more matches
Signaling and video calling - Web APIs
in this article, we will further enhance the websocket chat first created as part of our websocket
documentation (this article link is forthcoming; it isn't actually online yet) to support opening a two-way video call between users.
... function handleuserlistmsg(msg) { var i; var listelem =
document.queryselector(".userlistbox"); while (listelem.firstchild) { listelem.removechild(listelem.firstchild); } msg.users.foreach(function(username) { var item =
document.createelement("li"); item.appendchild(
document.createtextnode(username)); item.addeventlistener("click", invite, false); listelem.appendchild(item); }); } after getting a reference to the <ul> which con...
...that would be weird."); return; } targetusername = clickedusername; createpeerconnection(); navigator.mediadevices.getusermedia(mediaconstraints) .then(function(localstream) {
document.getelementbyid("local_video").srcobject = localstream; localstream.gettracks().foreach(track => mypeerconnection.addtrack(track, localstream)); }) .catch(handlegetusermediaerror); } } this begins with a basic sanity check: is the user already connected?
...And 5 more matches
Window.scrollX - Web APIs
the read-only scrollx property of the window interface returns the number of pixels that the
document is currently scrolled horizontally.
...you can get the number of pixels the
document is scrolled vertically from the scrolly property.
... syntax var x = window.scrollx; value in practice, the returned value is a double-precision floating-point value indicating the number of pixels the
document is currently scrolled horizontally from the origin, where a positive value means the content is scrolled to the left.
...And 5 more matches
Generating HTML - Web APIs
the second example will transform the input
document (example2.xml), which again contains information about an article, into an html
document.
...the xml
document contains both html elements and xml elements, but only one namespace is needed, namely for the xml elements.
... since there is no html namespace, and using the xhtml namespace would force the xsl to create an xml
document that would not behave like a html
document, the xsl:output in the xsl stylesheet will make sure the resulting
document will be handled as html.
...And 5 more matches
ARIA annotations - Accessibility
wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web
documents.
...an addition and/or deletion in an editable
document), and comments (e.g.
... an editorial comment related to a part of a
document under review).
...And 5 more matches
Cognitive accessibility - Accessibility
this
document introduces cognitive accessibility and improving accessibility of the web for people with cognitive and learning differences.
...in this
document, we focus on steps developers should take to improve the cognitive accessibility of their web sites and applications.
... navigation guideline 2.4 states "provide ways to help users navigate, find content, and determine where they are," and provides 10 guidelines to ensure the site is navigable and content is findable: include a <title> make sure to include a <title> for the
document, as titles provide a quick and easy to reference description of the screen's main point.
...And 5 more matches
Coordinate systems - CSS: Cascading Style Sheets
this is the entire viewing area in which the
document is presented.
...the top-left corner of the window is always (0, 0), regardless of the content of the
document or any scrolling that may have been done.
... in other words, scrolling the
document will change the client coordinates of a given position within the
document.
...And 5 more matches
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
note: css versions 1 and 2 were a single monolithic specification where all of css was defined in one large
document.
...we need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our
document.
... it is worth noting that we might want to change the writing mode of our
document for reasons other than publishing content in a language that uses a different writing mode.
...And 5 more matches
Making content editable - Developer guides
</div> here's the above html in action: executing commands when an html element has contenteditable set to true, the
document.execcommand() method is made available.
...most commands affect the
document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting).
... if you want to use a different paragraph separator, the above browsers all support
document.execcommand, which provides a defaultparagraphseparator command to allow you to change it.
...And 5 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
each embedded browsing context has its own session history and
document.
... because each browsing context is a complete
document environment, every <iframe> in a page requires increased memory and other computing resources.
... implicit aria role no corresponding role permitted aria roles application,
document, img, none, presentation dom interface htmliframeelement attributes this element includes the global attributes.
...And 5 more matches
Example - SVG: Scalable Vector Graphics
</p> <div> (c) 2006 <a id='emailme' href='#'>nick johnson</a> <script type='text/javascript'> <![cdata[ // foil spam bots var email = '@riovia.net'; email ='nick' + email;
document.getelementbyid('emailme').href = 'mailto:'+email; ]]> </script> this software is free for you to use in any way whatsoever, and comes with no warranty at all.
... function display() { return
document.getelementbyid('display'); } // determine dimensions of the display element.
...{ // our rendering element var display = display(); var width = parseint( display.getattributens(null,'width') ); var height = parseint( display.getattributens(null,'height') ); return [width,height]; } // this is called by mouse move events var mouse_x = 200, mouse_y = 150; function onmousemove(evt) { mouse_x = evt.clientx; mouse_y = evt.clienty; var widget =
document.getelementbyid('cursor'); widget.setattributens(null,'cx',mouse_x); widget.setattributens(null,'cy',mouse_y); }
document.onmousemove = onmousemove; // determine (x,y) of the cursor function cursor() { return [mouse_x, mouse_y]; } // determine average (x,y) of the swarm function averagemoteposition() { if( !motes ) return [0,0]; if( motes.length == 0 ) r...
...And 5 more matches
context-menu - Archive of obsolete content
for example, this item appears whenever the context menu is invoked on a page that contains at least one image: require("sdk/context-menu").item({ label: "this page has images", contentscript: 'self.on("context", function (node) {' + ' return !!
document.queryselector("img");' + '});' }); note that the listener function has a parameter called node.
... to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the
documentation for the private-browsing module.
... show an "edit page source" item when the user right-clicks a non-interactive part of the page: require("sdk/context-menu").item({ label: "edit page source", contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(
document.url);' + '});', onmessage: function (pageurl) { editsource(pageurl); } }); show an "edit image" item when the menu is invoked on an image: var cm = require("sdk/context-menu"); cm.item({ label: "edit image", context: cm.selectorcontext("img"), contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(node.src);' + ...
...And 4 more matches
panel - Archive of obsolete content
s.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } updating panel content you can update the panel's content by: sending a message to a content script that updates the dom in the same
document.
... embedding an iframe in the panel, and changing its
document setting the panel's contenturl property.
...var textarea =
document.getelementbyid("edit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline.
...And 4 more matches
On page load - Archive of obsolete content
if you need finer control over custom code execution—for example, as
documents are loading or when tabs are switched—see progress listeners.
... progress listeners allow extensions to be notified of events associated with
documents loading in the browser and with tab switching events.
... creating an overlay first, you need to create an overlay to one (or more, depending on which applications you target) of the following xul
documents: application uri to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script attach a script to your overlay (see "attaching a script to an overlay") that adds a load event listener to appcontent element (browsers) or messagepane (mail): window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.
...And 4 more matches
Sidebar - Archive of obsolete content
to open a page in the "viewwebpanelssidebar" from chrome code (browser/addon/extension) such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a
document separate from the main browser
document (the sidebar is actually implemented as a xul browser element).
... to access your sidebar's window or
document objects, you need to use the contentwindow or content
document properties of
document.getelementbyid("sidebar") respectively.
... for example the code below calls a function defined in the sidebar's context: var sidebarwindow =
document.getelementbyid("sidebar").contentwindow; // verify that our sidebar is open at this moment: if (sidebarwindow.location.href == "chrome://yourextension/content/whatever.xul") { // call "yournotificationfunction" in the sidebar's context: sidebarwindow.yournotificationfunction(anyarguments); } testing which sidebar is open the sidebar content may contain different panels (bookmarks, history, webpanel, etc.) and sometimes one wants to only act on the sidebar when it contains a specific panel.
...And 4 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
« previousnext » this
document was authored by hiroshi shimoda of clear code inc.
... css: a style language to alter the display of xml
documents like xml, cascading style sheets (css) is a technical specification established by the w3c; it is a style-description language defining the display of data marked up in xml and html.
... listing 3: an example of a class definition in javascript function myclass() { } myclass.prototype = { property1 : true, property2 : 'string', method : function() { alert('hello, world!'); } }; var obj = new myclass(); obj.method(); dom: an api for manipulating xml
documents the
document object model (dom) is a technical standard promulgated by the w3c, and is an api for manipulating the contents of xml
documents as objects.
...And 4 more matches
Security best practices in extensions - Archive of obsolete content
this
document is intended as a guide for developers to promote best practices in securing your extension.
... the privileges that a
document gets also depend on where it comes from.
... regardless of where the
document comes from, you can further restrict what it can do by applying properties to the
document holder, known as the docshell.
...And 4 more matches
Frequently Asked Questions - Archive of obsolete content
we currently maintain two
documents to help answer this question: a status page for svg in firefox 1.5+ and a status page for svg in the development trunk.
... this is an xml debugging message to help xml authors correct errors in their xml
documents.
...correct this mistake or ask the
document maintainer to correct it.
...And 4 more matches
browser.type - Archive of obsolete content
the type of browser, which can be used to set access of the
document loaded inside the browser.
... if this is not set, the loaded
document has the same access as the window containing the browser.
... more precisely: the
document loaded into a chrome window is always of chrome type.
...And 4 more matches
Namespaces - Archive of obsolete content
in addition to this
document, see namespaces crash course.
...duplicates element and attribute names can occur when an xml
document contains elements and attributes from two or more different xml schemas (or dtds).
...this distinguishes it from, for example, <foobar:textbox/> which might occur in the same
document.
...And 4 more matches
XML Templates - Archive of obsolete content
an xml
document will be loaded and xpath expressions may be used to take portions of the xml
document and generate content from these.
... the datasources attribute should be set to the url of an xml
document, either a local file or a remote web site.
... the ref attribute isn't currently used for xml sources, as the root of the
document is always the starting point for xml queries; you should just set the ref attribute to a dummy value, for example '*' which is typically used.
...And 4 more matches
XBL Example - Archive of obsolete content
<property name="page" onget="return parseint(
document.getanonymousnodes(this)[0].childnodes[0].getattribute('selectedindex'));" onset="return this.setpage(val);"/> the page property gets its value by looking at the first element of the anonymous array.
... <method name="setpage"> <parameter name="newidx"/> <body> <![cdata[ var thedeck=
document.getanonymousnodes(this)[0].childnodes[0]; var totalpages=this.childnodes.length; if (newidx<0) return 0; if (newidx>=totalpages) return totalpages; thedeck.setattribute("selectedindex",newidx);
document.getanonymousnodes(this)[0].childnodes[1].childnodes[1] .setattribute("value",(newidx+1)+" of "+totalpages); return newidx; ]]> </body> </me...
... var thedeck=
document.getanonymousnodes(this)[0].childnodes[0]; get the first element of the anonymous content array, which will be the vertical box, then get its first child, which will be the deck element.
...And 4 more matches
Gecko Compatibility Handbook - Archive of obsolete content
upgrade web authoring tool to versions that support the w3 standards and gecko browsers content differs in gecko browsers and internet explorer the javascript console in netscape 6.x and netscape 7.x displays errors about
document.all,
document.layers,
document.<property> not being defined because of an incorrect browser sniffing, or use of proprietary javascript.
...internet explorer tries to guess the mime type of
documents while gecko browsers relies upon the web server to specify the correct mime type.
... gecko does not try to 'sniff' the mime type for a
document in order to reduce the possibility of unsecure, dangerous content masquerading as as a safe mime type.
...And 4 more matches
Introduction - Archive of obsolete content
var element2 = <foo> <bar/> </foo>; additionally, you can specify all of the normal attributes on elements that you would normally include in an xml
document.
... var element3 = <foo baz="1"/>; manipulating elements the goal of e4x was to provide an easier way for javascript programmers to manipulate an xml
document, without going through the dom interfaces.
...the most basic is appendchild var element1 = <foo/>; var element2 = <bar/>; element1.appendchild(element2); which produces exactly the xml
document you'd expect <foo> <bar/> </foo> javascript variables the true power of e4x only begins to come to light, however, when the xml
document can interact closely with other javascript.
...And 4 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
it is assumed that you have already downloaded, extracted, and consumed the necessary
documentation to get up and running with some basic rhino scripts.
...this gives you added control to interrogate and manage the
document structure before it's pushed to the client.
... listing 7 - manipulating the dom server-side <script runat="server"> window.onserverload = function() {
document.getelementbyid( "out-logger" ).innerhtml = jaxer.file.read( "dump.txt" ); } </script> the code in listing 7 is executed server-side and takes advantage of the onserverload event which ensures that we have a complete dom before trying to access it.
...And 4 more matches
Mozilla XForms Specials - Archive of obsolete content
in the mozilla xforms extension we added a getinstance
documents() function to the model which returns all the model's instance
documents.
... this is
documented in nsixformsnsmodelelement.
...that is, if instancenode is a node in an instance
document, then: instancenode.getfeature("org.mozilla.xforms.instanceowner", "1.0") will return the <instance> element (in the main
document) that the node belongs to.
...And 4 more matches
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
for example: :hover {color: red;} this is equivalent to the css2 rule: *:hover {color: red;} ..which translates as "any element that is being hovered should have its foreground colored red." thus, hovering over paragraphs, tables, headings, and any other element in a
document will cause text to become red.
... gecko behavior in browsers based on netscape gecko builds later than 20020410 (netscape 6.1+), :hover styles can be applied to any element in a
document.
...the most reliable fix is to add the anchor element to the selectors, like this: a:hover {color: red;} a.nav:hover {color: red;} in an attempt to avoid causing problems for legacy
documents, browsers based on mozilla 1.0 and later (netscape 7+) include code that causes bare pseudo-classes to be restricted only to links if the
document is rendered in "quirks" mode.
...And 4 more matches
Type, class, and ID selectors - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the different css selectors we can use to apply css to a
document.
... type selectors a type selector is sometimes referred to as a tag name selector or element selector, because it selects an html tag/element in your
document.
... the universal selector the universal selector is indicated by an asterisk (*) and selects everything in the
document (or inside the parent element if it is being chained together with another element and a descendant combinator).
...And 4 more matches
How CSS is structured - Learn web development
applying css to html first, let's examine three methods of applying css to a
document: with an external stylesheet, with an internal stylesheet, and with inline styles.
...this is the most common and useful method of bringing css to a
document.
...in the example above, the css file is in the same folder as the html
document, but you could place it somewhere else and adjust the path.
...And 4 more matches
How CSS works - Learn web development
when a browser displays a
document, it must combine the
document's content with its style information.
... it processes the
document in a number of stages, which we've listed below.
... it converts the html into a dom (
document object model).
...And 4 more matches
Advanced text formatting - Learn web development
a light brown color.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea =
document.getelementbyid('code'); const reset =
document.getelementbyid('reset'); const solution =
document.getelementbyid('solution'); const output =
document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.va...
...ositive thinking.)</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea =
document.getelementbyid('code'); const reset =
document.getelementbyid('reset'); const solution =
document.getelementbyid('solution'); const output =
document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.va...
...= textarea.value; } updatecode(); }; abbreviations another fairly common element you'll meet when looking around the web is <abbr> — this is used to wrap around an abbreviation or acronym, and provide a full expansion of the term (included inside a title attribute.) let's look at a couple of examples: <p>we use <abbr title="hypertext markup language">html</abbr> to structure our web
documents.</p> <p>i think <abbr title="reverend">rev.</abbr> green did it in the kitchen with the chainsaw.</p> these will come out looking something like this (the expansion will appear in a tooltip when the term is hovered over): note: there is another element, <acronym>, which basically does the same thing as <abbr>, and was intended specifically for acronyms rather than abbreviations.
...And 4 more matches
Creating hyperlinks - Learn web development
hyperlinks allow us to link
documents to other
documents or resources, link to specific parts of
documents, or make apps available at a web address.
... note: a url can point to html files, text files, images, text
documents, video and audio files, or anything else that lives on the web.
... active learning: creating your own example link create an html
document using your local code editor and our getting started template.
...And 4 more matches
Choosing the right approach - Learn web development
ample an example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image =
document.createelement('img'); image.src = objecturl;
document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); pitfalls nested callbacks can be cumbersome and hard to read (i.e.
...refer to the reference
documentation for the api you're using for more specific support info.
...we then run it once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source): function displaytime() { let date = new date(); let time = date.tolocaletimestring();
document.getelementbyid('demo').textcontent = time; } const createclock = setinterval(displaytime, 1000); pitfalls the frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient.
...And 4 more matches
A first splash into JavaScript - Learn web development
ess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> </div> <div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </div> <script> // your javascript goes here let randomnumber = math.floor(math.random() * 100) + 1; const guesses =
document.queryselector('.guesses'); const lastresult =
document.queryselector('.lastresult'); const loworhi =
document.queryselector('.loworhi'); const guesssubmit =
document.queryselector('.guesssubmit'); const guessfield =
document.queryselector('.guessfield'); let guesscount = 1; let resetbutton; function checkguess() { let userguess = number(guessfield.value); ...
...hi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.addeventlistener('click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton =
document.createelement('button'); resetbutton.textcontent = 'start new game';
document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const resetparas =
document.queryselectorall('.resultparas p'); for(let i = 0 ; i < resetparas.length ; i++) { resetparas[i].textcontent = ''; } ...
...first of all, add the following lines inside your <script> element: let randomnumber = math.floor(math.random() * 100) + 1; const guesses =
document.queryselector('.guesses'); const lastresult =
document.queryselector('.lastresult'); const loworhi =
document.queryselector('.loworhi'); const guesssubmit =
document.queryselector('.guesssubmit'); const guessfield =
document.queryselector('.guessfield'); let guesscount = 1; let resetbutton; this section of the code sets up the variables and constants we need to store the data our program will ...
...And 4 more matches
Implementing feature detection - Learn web development
give it the following contents: const conditional =
document.queryselector('.conditional'); const testelem =
document.createelement('div'); if (testelem.style.flex !== undefined && testelem.style.flexflow !== undefined) { conditional.setattribute('href', 'flex-layout.css'); } else { conditional.setattribute('href', 'float-layout.css'); } here we are grabbing a reference to the second <link> element, and creating a <div> element as part of our test.
...the problem here is browser support — @supports is not supported at all in ie, and only supported in very recent versions of safari/ios webkit (9+/9.2+), whereas the javascript version should work in much older browsers (probably back to ie8 or 9, although older versions of ie will have additional problems, such as not supporting
document.queryselector, and having a messed up box model).
...} property on element create an element in memory using
document.createelement() and then check if a property exists on it.
...And 4 more matches
How Mozilla's build system works
this
documentation is for mozilla developers who need to work on mozilla's build system.
...this
document explains how the build system works.
... note: this
document is not intended for developers who just want to build mozilla.
...And 4 more matches
mozbrowserasyncscroll
details the details property returns an anonymous javascript object with the following properties: top the scroll top position in css pixels of the
document within the browser <iframe>.
... left the scroll left position in css pixels of the
document within the browser <iframe>.
... width the width in css pixels of the visible part of the
document within the browser <iframe>.
...And 4 more matches
Mozilla Projects
here you'll find links to
documentation about these projects.
...midas can be enabled via javascript on an html
document.
... when midas is enabled, the
document becomes editable by the user.
...And 4 more matches
Avoiding leaks in JavaScript XPCOM components
this
document attempts to help them do so, first by explaining the underlying concepts, and second by describing a number of common javascript patterns that cause leaks.
...(this is roughly equivalent to making all the properties roots, but simpler.) once this happens, it remains a root until the
document stops being displayed.
... this means that neither the element nor any of the properties nor any of the objects reachable from those properties can be freed until the
document is no longer displayed.
...And 4 more matches
Observer Notifications
documents these topics indicate notifications you can monitor related to dom
documents.
... topic subject data description chrome-
document-global-created nsidomwindow null sent immediately after a chrome
document window has been set up, but before any script code has been executed.
... content-
document-global-created nsidomwindow origin sent immediately after a web content
document window has been set up, but before any script code has been executed.
...And 4 more matches
nsIDOMWindowInternal
note: because most of nsidomwindowinternal's functions and attributes are well
documented in window, those articles are linked to rather than re-
documented.
... however, they are not guaranteed to
document all available arguments (i.e.
... location nsidomlocation readonly: returns a nsidomlocation object, which contains information about the url of the
document.
...And 4 more matches
Thunderbird Configuration Files
just browse to c:\
documents and settings\[user name]\application data\thunderbird\profiles\ on windows xp/2000 or c:\users\[user name]\appdata\roaming\thunderbird\profiles\ on windows vista, and the rest should be obvious.
...you will be taken to the "real" folder, which is normally c:\
documents and settings\[user name]\application data on windows xp/2000, c:\users\[user name]\appdata\roaming on windows vista.
...now, go to your profile folder and select file > new > text
document.
...And 4 more matches
DevTools API - Firefox Developer Tools
zoomin() increases the zoom level of the toolbox
document.
... zoomout() decreases the zoom level of the toolbox
document.
... zoomreset() resets the zoom level of the toolbox
document.
...And 4 more matches
Index - Firefox Developer Tools
6 dom inspector dom, dom:tools, dom_inspector, extensions, extensions:tools, themes, themes:tools, tools, web development, web development:tools, xul, xul:tools the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the
document object model of
documents - usually web pages or xul windows.
... the dom hierarchy can be navigated using a two-paned window that allows a variety of different views on the
document and all nodes within.
... 7 dom inspector faq dom_inspector the file menu contains approaches which will allow you to inspect a
document.
...And 4 more matches
Attr - Web APIs
as that doesn't hold true in cases like attr objects being returned by
document.evaluate, the dom living standard reintroduced the property.
...originally, it returned true if the attribute was explicitly specified in the source code or by a script, and false if its value came from the default one defined in the
document's dtd.
...an "id attribute" being an attribute which value is expected to be unique across a dom
document.
...And 4 more matches
Element: fullscreenchange event - Web APIs
if
document.fullscreenelement has a value it will exit full-screen mode.
...so if the change is to full-screen mode,
document.fullscreenelement will point to the element that is now in full-screen mode.
... on the other hand, if
document.fullscreenelement is null, full-screen mode has been canceled.
...And 4 more matches
Element.getElementsByTagName() - Web APIs
when called on an html element in an html
document, getelementsbytagname lower-cases the argument before searching for it.
... this is undesirable when trying to match camel-cased svg elements (such as <lineargradient>) in an html
document.
... element.getelementsbytagname is similar to
document.getelementsbytagname(), except that it only searches for elements that are descendants of the specified element.
...And 4 more matches
HTMLImageElement.loading - Web APIs
this helps to optimize the loading of the
document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial page load.
...for instance, if the user is scrolling through the
document, a value of lazy will cause the image to only be loaded shortly before it will appear in the window's visual viewport.
... usage notes timing of the load event the load event is fired when the
document has been fully processed.
...And 4 more matches
Drag Operations - Web APIs
the drag operations described in this
document use the datatransfer interface.
... this
document does not use the datatransferitem interface nor the datatransferitemlist interface.
... it is also possible to use images and canvases that are not in a
document.
...And 4 more matches
Node.cloneNode() - Web APIs
the newclone has no parent and is not part of the
document, until it is added to another node that is part of the
document (using node.appendchild() or a similar method).
... example let p =
document.getelementbyid("para1") let p_prime = p.clonenode(true) notes cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners.
... warning: clonenode() may lead to duplicate element ids in a
document!
...And 4 more matches
Range.extractContents() - Web APIs
the range.extractcontents() method moves contents of the range from the
document tree into a
documentfragment.
...html id attributes are also cloned, which can lead to an invalid
document if a partially-selected node is extracted and appended to the
document.
... partially selected nodes are cloned to include the parent tags necessary to make the
document fragment valid.
...And 4 more matches
SecurityPolicyViolationEvent - Web APIs
the securitypolicyviolationevent interface inherits from event, and represents the event object of an event sent on a
document or worker when its content security policy is violated.
... securitypolicyviolationevent.columnnumberread only the column number in the
document or worker at which the violation occurred.
... securitypolicyviolationevent.
documenturiread only a usvstring representing the uri of the
document or worker in which the violation was found.
...And 4 more matches
Using the Storage Access API - Web APIs
the storage access api should be used by embedded cross-origin
documents to verify whether they have access to their first-party storage and, if not, to request access.
...this is particularly true for
document.cookie access, as browsers will often return an empty cookie jar when third-party cookies are blocked.
...</iframe> now on to the code executed inside the embedded
document.
...And 4 more matches
Text.splitText() - Web APIs
html <p>foobar</p> javascript const p =
document.queryselector('p'); // get contents of <p> as a text node const foobar = p.firstchild; // split 'foobar' into two text nodes, 'foo' and 'bar', // and save 'bar' as a const const bar = foobar.splittext(3); // create a <u> element containing ' new content ' const u =
document.createelement('u'); u.appendchild(
document.createtextnode(' new content ')); // add <u> before 'bar' p.insertbefore(u, b...
... living standard no change from
document object model (dom) level 3 core specification.
...
document object model (dom) level 3 core specificationthe definition of 'text.splittext' in that specification.
...And 4 more matches
Text - Web APIs
new
documents have a single text node for each block of text.
... over time, more text nodes may be created as the
document's content changes.
... text.wholetext read only returns a domstring containing the text of all text nodes logically adjacent to this node, concatenated in
document order.
...And 4 more matches
Touch events - Web APIs
function startup() { var el =
document.getelementbyid("canvas"); el.addeventlistener("touchstart", handlestart, false); el.addeventlistener("touchend", handleend, false); el.addeventlistener("touchcancel", handlecancel, false); el.addeventlistener("touchmove", handlemove, false); }
document.addeventlistener("domcontentloaded", startup); this simply sets up all the event listeners for our <canvas> element so we can handle the...
... function handlestart(evt) { evt.preventdefault(); console.log("touchstart."); var el =
document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { console.log("touchstart:" + i + "..."); ongoingtouches.push(copytouch(touches[i])); var color = colorfortouch(touches[i]); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey, 4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle = color; ctx.fill(); co...
... function handlemove(evt) { evt.preventdefault(); var el =
document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { var color = colorfortouch(touches[i]); var idx = ongoingtouchindexbyid(touches[i].identifier); if (idx >= 0) { console.log("continuing touch "+idx); ctx.beginpath(); console.log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " ...
...And 4 more matches
Using the Web Animations API - Web APIs
bring the pieces together now it’s time to bring them both together with the element.animate() method:
document.getelementbyid("alice").animate( alicetumbling, alicetiming ) and boom: the animation starts playing (see the finished version on codepen).
...instead of making objects for keyframes and timing properties, we could just pass their values in directly, like so:
document.getelementbyid("alice").animate( [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ], { duration: 3000, iterations: infinity } ); what’s more, if we only wanted to specify the duration of the animation and not its iterations (by default, animations iterate once), we could pass in the milliseconds alone:
document.getelementbyid("alice").animate( [ { transform: 'rotate(0) translate3d(-5...
... pausing and playing animations we’ll talk more about alice’s animation later, but for now, let’s look closer at the cupcake’s animation: var nommingcake =
document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); the element.animate() method will immediately run after it is called.
...And 4 more matches
Using XMLHttpRequest - Web APIs
note: the constructor function xmlhttprequest isn't limited to only xml
documents.
... analyzing and manipulating the responsexml property if you use xmlhttprequest to get the content of a remote xml
document, the responsexml property will be a dom object containing a parsed xml
document.
...there are four primary ways of analyzing this xml
document: using xpath to address (or point to) parts of it.
...And 4 more matches
XPathResult.resultType - Web APIs
the nodes may not necessarily be in the same order that they appear in the
document.
...the nodes in the result set are in the same order that they appear in the
document.
...the nodes may not necessarily be in the same order that they appear in the
document.
...And 4 more matches
@viewport - CSS: Cascading Style Sheets
the @viewport css at-rule lets you configure the viewport through which the
document is viewed.
... min-width used in the determination of the width of the viewport when the
document is first displayed.
... max-width used in the determination of the width of the viewport when the
document is first displayed.
...And 4 more matches
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
when a url points at a specific piece of a
document, it can be difficult for the user to notice.
...thus, the example url would point to the heading "example" in this
document.
...this is simple enough: h2:target { font-weight: bold; } it's also possible to create styles that are specific to a particular fragment of the
document.
...And 4 more matches
<color> - CSS: Cascading Style Sheets
activetext text of active links buttonface background of push buttons buttontext text of push buttons canvas background of application content or
documents canvastext text in application content or
documents field background of input fields fieldtext text in input fields graytext text that is disabled highlight background of items that are selected in a control highlighttext text of items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links ...
... appworkspace background color of multiple
document interface.
...should be used with the default
document background color.
...And 4 more matches
Guide to scroll anchoring - CSS: Cascading Style Sheets
scroll anchoring is a browser feature that aims to solve this problem of content jumping, which happens if content loads in after the user has already scrolled to a new part of the
document.
...this means that the point in the
document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how far they have moved through the
document.
... the specification provides a new property, overflow-anchor, which can be used to disable scroll anchoring on all or part of the
document.
...And 4 more matches
writing-mode - CSS: Cascading Style Sheets
when set for an entire
document, it should be set on the root element (html element for html
documents).
... lr deprecated except for svg1
documents.
... lr-tb deprecated except for svg1
documents.
...And 4 more matches
Overview of events and handlers - Developer guides
"eventprototype" : "objectprototype"; alert("we got a click event at " + ev.timestamp + " with an argument object derived from: " + objkind ); }; and second register our function with the the button object, either on the scripting side using the dom (
document object model) representation of the html page: var buttondomelement =
document.queryselector('#buttonone'); buttondomelement.addeventlistener('click', example_click_handler); or within the html page by adding the function as the value of the 'onclick' attribute, although this second approach is usually only used in very simple web pages.
...for example, code might be attached as: var funcinit = function(){ // user code goes here and can safely address all the html elements from the page // since the
document has successfully been 'loaded' }
document.addeventlistener('domcontentloaded', funcinit); so that this code will only be executed after the
document object emits the 'domcontentloaded' event because the html has been parsed and javasript objects created representing each of the nodes of the html
document.
... in general, we can distinguish events of different kinds based on the object emitting the event including: the window object, such as due to resizing the browser, the window.screen object, such as due to changes in device orientation, the
document object, including the loading, modification, user interaction, and unloading of the page, the objects in the dom (
document object model) tree including user interactions or modifications, the xmlhttprequest objects used for network requests, and the media objects such as audio and video, when the media stream players change state.
...And 4 more matches
<input type="time"> - HTML: Hypertext Markup Language
you can set a default value for the input by including a valid time in the value attribute when creating the <input> element, like so: <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time" value="13:30"> you can also get and set the date value in javascript using the htmlinputelement.value property, for example: var timecontrol =
document.queryselector('input[type="time"]'); timecontrol.value = '15:30'; time value format the value of the time input is always in 24-hour format that includes leading zeros: hh:mm, regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent).
... var starttime =
document.getelementbyid("starttime"); var valuespan =
document.getelementbyid("value"); starttime.addeventlistener("input", function() { valuespan.innertext = starttime.value; }, false); when a form including a time input is submitted, the value is encoded before being included in the form's data.
... list the values of the list attribute is the id of a <datalist> element located in the same
document.
...And 4 more matches
<main> - HTML: Hypertext Markup Language
the html <main> element represents the dominant content of the <body> of a
document.
... the main content area consists of content that is directly related to or expands upon the central topic of a
document, or the central functionality of an application.
... a
document mustn't have more than one <main> element that doesn't have the hidden attribute specified.
...And 4 more matches
<script>: The Script element - HTML: Hypertext Markup Language
defer this boolean attribute is set to indicate to a browser that the script is meant to be executed after the
document has been parsed, but before firing domcontentloaded.
... scripts with the defer attribute will execute in the order in which they appear in the
document.
... strict-origin: only send the origin of the
document as the referrer when the protocol security level stays the same (e.g.
...And 4 more matches
<style>: The Style Information element - HTML: Hypertext Markup Language
the html <style> element contains style information for a
document, or part of a
document.
... it contains css, which is applied to the contents of the
document containing the <style> element.
... the <style> element must be included inside the <head> of the
document.
...And 4 more matches
Using the application cache - HTML: Hypertext Markup Language
loading
documents the use of an application cache modifies the normal process of loading a
document: if an application cache exists, the browser loads the
document and its associated resources directly from the cache, without accessing the network.
... this speeds up the
document load time.
... the process for loading
documents and updating the application cache is specified in greater detail below: when the browser visits a
document that includes the manifest attribute, if no application cache exists, the browser loads the
document and then fetches all the entries listed in the manifest file, creating the first version of the application cache.
...And 4 more matches
HTTP caching - HTTP
a browser cache holds all
documents downloaded via http by the user.
... this cache is used to make visited
documents available for back/forward navigation, saving, viewing-as-source, etc.
...common forms of caching entries are: successful results of a retrieval request: a 200 (ok) response to a get request containing a resource like html
documents, images or files.
...And 4 more matches
Content-Security-Policy - HTTP
document directives
document directives govern the properties of a
document or worker environment to which a policy applies.
... base-uri restricts the urls which can be used in a
document's <base> element.
... plugin-types restricts the set of plugins that can be embedded into a
document by limiting the types of resources which can be loaded.
...And 4 more matches
Cross-Origin-Opener-Policy - HTTP
the http cross-origin-opener-policy (coop) response header allows you to ensure a top-level
document does not share a browsing context group with cross-origin
documents.
... coop will process-isolate your
document and potential attackers can't access to your global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks.
... if a cross-origin
document with coop is opened in a new window, the opening
document will not have a reference to it, and the window.opener property of the new window will be null.
...And 4 more matches
Feature-Policy: fullscreen - HTTP
the http feature-policy header fullscreen directive controls whether the current
document is allowed to use element.requestfullscreen().
... by default, top-level
documents and their same-origin child frames can request and enter fullscreen mode.
... syntax feature-policy: fullscreen <allowlist>; <allowlist> an allowlist 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 4 more matches
Feature-Policy: geolocation - HTTP
the http feature-policy header geolocation directive controls whether the current
document is allowed to use the geolocation interface.
... by default, the geolocation api can be used within top-level
documents and their same-origin child frames.
... syntax feature-policy: geolocation <allowlist>; <allowlist> an allowlist 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 4 more matches
Referrer-Policy - HTTP
origin only send the origin of the
document as the referrer.
... for example, a
document at https://example.com/page.html will send the referrer https://example.com/.
... origin-when-cross-origin send the origin, path, and query string when performing a same-origin request, but only send the origin of the
document for other cases.
...And 4 more matches
xlink:href - SVG: Scalable Vector Graphics
value <iri> default value none animatable yes altglyph for <altglyph>, xlink:href defines the reference either to a <glyph> element in an svg
document fragment or to an <altglyphdef> element.
... the target element must be part of the current svg
document fragment.
... value <iri> default value none animatable yes filter for <filter>, xlink:href defines the reference to another <filter> element within the current svg
document fragment.
...And 4 more matches
XPath
it uses a non-xml syntax to provide a flexible way of addressing (pointing to) different parts of an xml
document.
... it can also be used to test addressed nodes within a
document to determine whether they match a pattern or not.
... xpath is mainly used in xslt, but can also be used as a much more powerful way of navigating through the dom of any xml-like language
document using xpathexpression, such as html and svg, instead of relying on the
document.getelementbyid() or parentnode.queryselectorall() methods, the node.childnodes properties, and other dom core features.
...And 4 more matches
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:output> element controls the characteristics of the output
document.
... version specifies the value of the version attribute of the xml or html declaration in the output
document.
... encoding specifies the value of the encoding attribute in the output
document.
...And 4 more matches
Miscellaneous - Archive of obsolete content
</div> <script type="text/javascript"> var elm =
document.getelementbyid("scrollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withco...
...tchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext =
document.commanddispatcher.focusedwindow.getselection().tostring(); or: content.getselection(); // |window| object is implied; i.e., window.content.getselection() or: getbrowserselection(); // |window| object is implied; i.e., window.getbrowserselection() this final option massages the selection to remove leading and trailing whitespace.
... see also http://mxr.mozilla.org/seamonkey/source/browser/base/content/browser.js#4674 discovering which element in the loaded
document has focus // focusedcontrol stores the focused field, or null if there is none.
...And 3 more matches
Add-ons - Archive of obsolete content
archived add-ons
documentation.
...all of these
documents currently assume, however, that you are developing your extension using xul and javascript only.
... firefox addons developer guide the original
document is in japanese and distributed via the xuldev.org website.
...And 3 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
as network design manager at lycos for the last two years, i've been creating and
documenting design standards for our network of sites.
...both presented and
documented viable means of producing multi-column layouts without a single table.
...is it important that your
documents be backward-compatible with older or specialized browsing environments?
...And 3 more matches
XUL user interfaces - Archive of obsolete content
action: a xul demonstration make a new xul
document as a plain text file, doc7.xul.
...copy and paste the content from here, making sure that you scroll to get all of it: // xul demonstration var datebox, daybox, currentday, status; // elements // called by window onload function init() { datebox =
document.getelementbyid("date-text") daybox =
document.getelementbyid("day-box") status =
document.getelementbyid("status") settoday(); } // called by clear button function cleardate() { datebox.value = "" refresh() } // called by today button function settoday() { var d = new date() datebox.value = (d.getmonth() + 1) + "/" + d.getdate() + "/" + d.getfullyear() refresh() } ...
...open the
document in your mozilla browser and use the interface.
...And 3 more matches
Case Sensitivity in class and id Names - Archive of obsolete content
the most common case is where the name uses different case in the
document source than is found in the css or javascript.
...(for a detailed explanation of what html 4.01 says, see the following section, "why so case-sensitive?") the only way to avoid this particular problem is to make sure that your class and id names have consistent case throughout the entire
document, and with respect to your css and javascript.
... it is also important to avoid using class or id names which are a case-insensitive match within the same
document.
...And 3 more matches
Creating a Microsummary - Archive of obsolete content
beginnings generators are expressed as xml
documents whose root element is the <generator> element in the http://www.mozilla.org/microsummaries/0.1 namespace.
...xslt is a powerful language for transforming
documents into different representations of the same information.
...ith the xslt <output> element: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> </transform> </template> </generator> using a simple xslt <template> the xslt processor transforms
documents by comparing each xslt <template> element in the transform sheet to a set of nodes in the
document.
...And 3 more matches
Menu - Archive of obsolete content
note: this page
documents the jetpack prototype, which has since been replaced by the add-on sdk.
... please see the wiki page and online
documentation for more information on how to use the add-on sdk.
... for example, to add an item to the tabs' context menu, try: jetpack.menu.context.browser.beforeshow = function (menu, context) { menu.reset(); if (context.node.localname === "tab") menu.add("hey, a tab!"); }; (the reason this problem exists is because
document.queryselectorall() does not match anonymous content in xul.
...And 3 more matches
Plug-n-Hack Phase1 - Archive of obsolete content
the tool configures itself by serving an html
document (we’ll call this the configuration
document) to the browser.
... 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 appr...
... configuresectoolfailed - this notifies the
document that configuration has failed for some reason.
...And 3 more matches
Tamarin - Archive of obsolete content
documentation adobe actionscript virtual machine 2 (avm2) overview (pdf, 400k) the instructions, architecture, and file format supported by the avm2.
... tamarin build
documentation how to get, build, and use tamarin.
... tamarin build system
documentation
documentation on how the tamarin build system works and how to modify.
...And 3 more matches
XBL 1.0 Reference - Archive of obsolete content
abstract this
document describes extensible binding language (xbl) 1.0 as implemented in gecko browsers.
... extensible binding language is a xml-based markup language to implement reusable components (bindings) that can be bound to elements in other
documents.
... there are numerous adjustments in the current implementation in comparison of earlier xbl proposals, and not all of them are reflected yet in this
document.
...And 3 more matches
ContextMenus - Archive of obsolete content
function checkcontextmenu(event) { if (event.target.localname == "textbox") event.preventdefault(); } function init() { var container =
document.getelementbyid("container"); container.addeventlistener("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 value of the context attribute should be the id of a context menu within the same
document.
... one technique is to attach a context menu to an entire
document area.
...And 3 more matches
OpenClose - Archive of obsolete content
here is a complete example which uses a button to open a menu: <button label="open menu" oncommand="
document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag.
...that means that a
document in a background tab cannot open a menu or popup.
... menus and popups are also closed when the
document or window they are contained within is closed, or if the menupopup element is removed from the
document.
...And 3 more matches
Adding Methods to XBL-defined Elements - Archive of obsolete content
for example, the following code will probably fail: var element =
document.createelement("my_element"); element.getmaximum() // this will fail by the way, it is safe to call methods from the constructor, other methods on the object and event handlers.
...instead, you must call the
document's getanonymousnodes() method: var value=
document.getanonymousnodes(element); here, 'element' should be set to a reference to the element that you want to get the anonymous content of.
... xul: <box id="num" class="labeledbutton" title="number of things:" value="52"/> <button label="show" oncommand="
document.getelementbyid('num').showtitle(true)"/> <button label="hide" oncommand="
document.getelementbyid('num').showtitle(false)"/> xbl: <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> </content> <implementation> <method name="showtitle"> <parameter name="state"/> <body> if (state) { documen...
...And 3 more matches
Box Objects - Archive of obsolete content
the dom is generally used only to get and modify information pertaining to the content or structure of the
document.
...x, y the x and y coordinates are referenced from the top left corner of the
document in the window (that portion which excludes the window border and title bar) and refer to the top left corner of the element, including css padding.
... the top left corner of the
document is that which is obtained from screen.mozinnerscreenx, screen.mozinnerscreeny screenx, screeny the screenx and screeny coordinates are referenced from the absolute top left corner of the screen (screen.top,screen.left) and refer to the top left corner of the element, including css padding and borders.
...And 3 more matches
XUL Template Primer - Bindings - Archive of obsolete content
see xul:template guide for up to date
documentation.
... overview this
document expands on the xul template primer by introducing the <bindings> element in the extended xul template syntax.
... example to illustrate how <bindings> work, we'll examine this xul
document, which builds a simple content model an rdf/xml file.
...And 3 more matches
2006-10-06 - Archive of obsolete content
hence, they are looking for a mac user to test out the new features by building a mac.rdf file with all of the various .mac account properties mentioned in the
document here.
... a: robert helmer pointed out the mozilla.org's config file could be found here and to look for -->mozconfig<---------------------------------------- -->end mozconfig<---------------------------------------- updated: developer
documentation issues for thunderbird 2 eric shepherd has requested feedback for any developer
documentation issues that might need dealing with for thunderbird 2.
... discussion highlights: ziga sancin suggests writing an introductory article for potential developers containing basic project information (history, list of main developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb,
documentation on source structure as well as links to help one get started on the project.
...And 3 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
this
document introduces the basic concepts of public-key cryptography.
... certificates and authentication managing certificates certificates and authentication a certificate identifies someone or something authentication confirms an identity how certificates are used contents of a certificate how ca certificates are used to establish trust a certificate identifies someone or something a certificate is an electronic
document used to identify an individual, a server, a company, or some other entity and to associate that identity with a public key.
...as discussed at the beginning of this
document, this kind of assurance is known as nonrepudiation.
...And 3 more matches
XForms Custom Controls - Archive of obsolete content
for example, you might want to render images that are held inside an instance
document or you would like to show a disabled trigger when its bound node becomes irrelevant rather than having it not display (the current default behavior).
... var control = this; var refreshstub = function() { control.refresh(); } this.ref1.refresh = refreshstub; this.ref2.refresh = refreshstub; </constructor> <property name="ref1" readonly="true" onget="return this.owner
document.getanonymouselementbyattribute(this, 'anonid', 'ref1');"/> <property name="ref2" readonly="true" onget="return this.owner
document.getanonymouselementbyattribute(this, 'anonid', 'ref2');"/> </implementation> new host language the mozilla xforms implementation currently only supports xforms hosted in xhtml or xul
documents.
... if you need to have xforms in other kinds of
documents like svg, mathml or some other tag language that mozilla supports, then you'll need to implement xforms controls for your desired
document format.
...And 3 more matches
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
when used in conjunction with xpointer (firefox supports a subset of it, and is used in the code sample below), xinclude can also target just specific portions of a
document for inclusion.
... firefox does not support it natively, but the following function aims to allow its use with
documents passed into it.
... code sample the following code aims to let <xi:include> and <xi:fallback> tags (the two elements in the language) with all of the attributes of <xi:include> be included in an xml
document so as to be resolvable into a single xml
document.
...And 3 more matches
Responsive design - Learn web development
for example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed
document) and the viewport is at least 800 pixels wide.
... find out more in the mdn
documentation for media queries.
... .col { width: 6.25%; /* 60 / 960 = 0.0625 */ } this approach will be found in many places across the web today, and it is
documented here in the layout section of our legacy layout methods article.
...And 3 more matches
Fundamental text and font styling - Learn web development
rems: these work just like em, except that 1 rem is equal to the font size set on the root element of the
document (i.e.
...this all starts with the root element of the entire
document — <html> — the font-size of which is set to 16px as standard across browsers.
... <!--
document base font-size is 16px --> <article> <!-- if my font-size is 1.5em --> <p>my paragraph</p> <!-- how do i compute to 20px font-size?
...And 3 more matches
What text editors are available? - Learn web development
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.
... try digging through the settings of your editor and read the manual or
documentation to see what its capabilities are.
...as you saw when starting a new html
document, many technologies use the same
document structure over and over.
...And 3 more matches
What is a web server? - Learn web development
(for example, html
documents, images, css stylesheets, and javascript files) a web server connects to the internet and supports physical data interchange with other devices connected to the web.
...when the request reaches the correct (hardware) web server, the (software) http server accepts the request, finds the requested
document, and sends it back to the browser, also through http.
... (if the server doesn't find the requested
document, it returns a 404 response instead.) to publish a website, you need either a static or a dynamic web server.
...And 3 more matches
Sending forms through JavaScript - Learn web development
a form is not always a form with progressive web apps, single page apps, and framework based apps, it's common to use html forms to send data without loading a new
document when response data is received.
... let's look at an example: <button>click me!</button> and now the javascript: const btn =
document.queryselector('button'); function senddata( data ) { console.log( 'sending data' ); const xhr = new xmlhttprequest(); let urlencodeddata = "", urlencodeddatapairs = [], name; // turn the data object into an array of url-encoded key/value pairs.
...now for the javascript: const btn =
document.queryselector('button'); function senddata( data ) { const xhr = new xmlhttprequest(), fd = new formdata(); // push our data into our formdata object for( name in data ) { fd.append( name, data[ name ] ); } // define what happens on successful data submission xhr.addeventlistener( 'load', function( event ) { alert( 'yeah!
...And 3 more matches
Adding vector graphics to the Web - Learn web development
prerequisites: you should know the basics of html and how to insert an image into your
document.
... how to include svg code inside your html you can also open up the svg file in a text editor, copy the svg code, and paste it into your html
document — this is sometimes called putting your svg inline, or inlining svg.
... make sure your svg code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) here's a very simple example of what you might paste into your
document: <svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> pros putting your svg inline saves an http request, and therefore can reduce a bit your loading time.
...And 3 more matches
Making asynchronous programming easier with async and await - Learn web development
status: ${response.status}`); } else { return response.blob(); } }) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image =
document.createelement('img'); image.src = objecturl;
document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); by now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things: async function myfetch() { let response = a...
...status: ${response.status}`); } else { let myblob = await response.blob(); let objecturl = url.createobjecturl(myblob); let image =
document.createelement('img'); image.src = objecturl;
document.body.appendchild(image); } } myfetch() .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); it makes code much simpler and easier to understand — no more .then() blocks everywhere!
...status: ${response.status}`); } else { return await response.blob(); } } myfetch().then((blob) => { let objecturl = url.createobjecturl(blob); let image =
document.createelement('img'); image.src = objecturl;
document.body.appendchild(image); }).catch(e => console.log(e)); you can try typing in the example yourself, or running our live example (see also the source code).
...And 3 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
it then runs the function once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source): function displaytime() { let date = new date(); let time = date.tolocaletimestring();
document.getelementbyid('demo').textcontent = time; } const createclock = setinterval(displaytime, 1000); just like settimeout(), setinterval() returns an identifying value you can use later when you need to clear the interval.
... const spinner =
document.queryselector('div'); let rotatecount = 0; let starttime = null; let raf; below the previous code, insert a draw() function that will be used to contain our animation code, which includes the timestamp parameter: function draw(timestamp) { } inside draw(), add the following lines.
... some hints: a click event handler can be added to most elements, including the
document <body>.
...And 3 more matches
Accessibility Features in Firefox
tabbed browsing helps keyboard users by putting all of the browsed
documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation within the entire windows os much simpler.
... the accessibility extension may be installed on top of firefox, allowing keyboard access to
document structure.
...you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config related properties or by editing accordingly the user.js file as explained in this "disable other javascript window features"
document.
...And 3 more matches
A bird's-eye view of the Mozilla framework
content (dom) the mozilla
document object model (dom) specifies a logical tree structure for storing ui and
document content, and provides an api (application programming interface) for accessing and manipulating the content.
... an application such as the browser may have one or more open
documents accessible via dom apis.
... when an html, xml, svg or other type of
document is loaded, the nglayout engine (also known as gecko) parses the contents into a dom tree, and handles the layout and rendering of the
document pages.
...And 3 more matches
Error codes returned by Mozilla APIs
document and node errors the following errors can occur when using
documents, nodes and elements.
... ns_error_dom_wrong_
document_err (0x80530004) an operation was performed on a
document involving a node that was created in a different
document.
... the
document.importnode method may need to be used to import the node into the
document first.
...And 3 more matches
IME handling guide
this
document explains how gecko handles ime.
..."closed" is also called "inactive" or "turned off") so, this
document is useful when you're try to fix a bug for text input in gecko.
...itionend ecompositionchange new composition string widget (or textcomposition) must not be nullptr text ecompositioncommitasis n/a (must be empty) nobody nullptr none ecompositioncommit commit string widget (or textcomposition) nullptr none presshell presshell receives the widget events and decides an event target from focused
document and element.
...And 3 more matches
Introduction to Layout in Mozilla
overview basic data flow key data structures detailed walk-through incrementalism future tech-talks wrap-up, q&a basic data flow source
document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, compute style, render; repeat css used for rendering all content content theoretically separate from “presentation” key data structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame ...
...view clipping, z-order, transparency [0..1] per frame, owned by frame widget native window [0..1] per view, owned by view key data structures the
document owns the content model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views, widgets presentation has media type, dimensions, etc.
... may not be directly manipulated detailed walk-through setting up content model construction frame construction 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 nsdsuricontentlistener invokes nsidlf::createinstance, passes mime type to dlf nscontentdlf creates a nshtml
document object, invokes start
documentload.
...And 3 more matches
NSS_3.12.1_release_notes.html
nss 3.12.1 release notes 2008-09-05 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.1 bugs fixed
documentation compatibility feedback introduction network security services (nss) 3.12.1 is a patch release for nss 3.12.
... see the
documentation section for the build instructions.
... bug 311432: ecc's ecl_use_fp code (for linux x86) fails pairwise consistency test bug 330622: certutil's usage messages incorrectly
document certain options bug 330628: coreconf/linux.mk should _not_ default to x86 but result in an error if host is not recognized bug 359302: remove the sslsample code from nss source tree bug 372241: need more versatile form of cert_nametoascii bug 390296: nss ignores subject cn even when san contains no dnsname bug 401928: support generalized pkcs#5 v2 pbes bug 403543: pkix: need a way to ...
...And 3 more matches
NSS_3.12_release_notes.html
nss 3.12 release notes 17 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12 bugs fixed
documentation compatibility feedback introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
... see the
documentation section for the build instructions.
...ks in jar_parse_any (security/nss/lib/jar/jarver.c) bug 338453: leaks in security/nss/lib/jar/jarfile.c bug 351408: leaks in jar_jar_sign_archive (security/nss/lib/jar/jarjart.c) bug 351443: remove unused code from mozilla/security/nss/lib/jar bug 351510: remove use_moz_thread code from mozilla/security/lib/jar bug 118830: nss public header files should be c++ safe bug 123996: certutil -h doesn't
document certutil -c -a bug 178894: quick decoder updates for lib/certdb and lib/certhigh bug 220115: ckm_invalid_mechanism should be an unsigned long constant.
...And 3 more matches
PKCS11 Implement
implementing pkcs #11 for nss note: this
document was originally for the netscape security library that came with netscape communicator 4.0.
... this note will be removed once the
document is updated for the current version of nss.
... this
document supplements the information in pkcs #11: cryptographic token interface standard, version 2.0 with guidelines for implementors of cryptographic modules who want their products to work with mozilla client software: how nss calls pkcs #11 functions.
...And 3 more matches
The Necko HTTP module
notes class overview this
document provides an overview of the classes used to implement the http module.
... transaction model this
document describes the lifetime of a http transaction, the threads involved, and the relevant objects.
... pipelining faq this
document gives an overview of http/1.1 pipelining by answering some frequently asked questions.
...And 3 more matches
Gecko events
ialog_end a dialog box has been closed is supported: no event_scrolling_start scrolling has started on a scroll bar is supported: yes event_scrolling_end scrolling has ended on a scroll bar is supported: yes event_minimize_start a window object is about to be minimized or maximized is supported: no event_minimize_end a window object has been minimized or maximized is supported: no event_
document_load_start is supported: yes event_
document_load_complete the loading of the
document has completed.
... is supported: yes event_
document_reload the
document contents are being reloaded.
... is supported: yes event_
document_load_stopped the loading of the
document was interrupted.
...And 3 more matches
Using XPCOM Components
findbackwards boolean attribute that adjusts findnext() to search backwards up the
document.
... searchframes boolean attribute that indicates whether to search subframes of current
document.
...kiemanager), getter_addrefs(cookiemanager)); if (ns_failed(rv)) return -1; pruint32 len; deletedcookies->getlength(&len); for (int c=0; c<len; c++) cookiemanager->remove(deletedcookies[c].host, deletedcookies[c].name, deletedcookies[c].path, pr_false); xxx: in the original
document, there were only the first three parameters to the |remove| call.
...And 3 more matches
mozIRegistry
it appears to be a design
document for something that never got implemented.
... introduction the title of this
document is completely misleading.
...i'll be explaining the rationale for the design and implementation of these components in this
document.
...And 3 more matches
mozIStorageStatement
inherits from: mozistoragevaluearray last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) for an introduction on how to use this interface, see the storage overview
document.
... see the overview
document on storage for more details.
... sample code var statement = dbconn.createstatement( "select * " + "from table_name " + "where column_name like :userinput escape '/'" ); statement.params.userinput = statement.escapestringforlike(someuserinput, "/"); binding functions these functions are discussed in more detail with sample code in the overview
document.
...And 3 more matches
nsIFeedTextConstruct
method overview nsidom
documentfragment create
documentfragment(in nsidomelement element); astring plaintext(); attributes attribute type description base nsiuri if the text construct contains html or xhtml, relative references in the content should be resolved against this base uri.
... methods create
documentfragment() creates a new
document fragment on a given dom element, containing the text and (if the text construct contains html or xhtml) its markup.
... nsidom
documentfragment create
documentfragment( in nsidomelement element ); parameters element the element in which to create the new
document fragment.
...And 3 more matches
nsIParserUtils
implemented by: @mozilla.org/parserutils;1 as a service: var parserutils = components.classes["@mozilla.org/parserutils;1"] .getservice(components.interfaces.nsiparserutils); method overview astring converttoplaintext(in astring src, in unsigned long flags, in unsigned long wrapcol); nsidom
documentfragment parsefragment(in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in nsidomelement element); astring sanitize(in astring src, in unsigned long flags); constants constant value description sanitizerallowcomments (1 << 0) flag for sanitizer: allow comment nodes.
... astring converttoplaintext( in astring src, in unsigned long flags, in unsigned long wrapcol ); parameters src the html source to parse (c++ callers are allowed but not required to use the same string for the return value.) flags conversion option flags defined in nsi
documentencoder.
... parsefragment() parses markup into a sanitized
document fragment.
...And 3 more matches
Address Book examples
use the nsiabcollection.readonly attribute to determine the read-only status of an address book adding contacts create a card and set its properties using the nsiabcard interface (see the interface
documentation for property names supported by the application): let card = components.classes["@mozilla.org/addressbook/cardproperty;1"] .createinstance(components.interfaces.nsiabcard); card.setproperty("firstname", "john"); card.setproperty("lastname", "smith"); card.primaryemail = "john@invalid.com"; now add the card to an address book via its nsiabdirectory interface: let n...
...for example, in order to register a load listener for a contact, the following should take place within the scope of the contact editor dialog: /* an example load listener for a contact * acard the nsiabcard being loaded * a
document a reference to the contact editor
document */ function foo(acard, a
document) { // do something useful, like disabling // input fields that cards for this // address book type do not support.
...each photo handler must implement the following interface: /* * onload: function(acard, a
document): * called when the editor wants to populate the contact editor * input fields with information about acard's photo.
...And 3 more matches
Standard OS Libraries
this article allows you to find out what types to give to values/arguments by supplying links to the
documentation of the os libraries.
...
documentation for gdk functions are found here: gnome developer :: gdk 2 reference manual.
... for gdk3
documentation is found here: gnome developer :: gdk 3 reference manual.
...And 3 more matches
URLs - Plugins
wais (wide area information servers) locates wais databases and their
documents.
... wysiwyg placed before another url; displays a page that javascript has updated using
document.write.
...this is the way that plug-ins provide hyperlinks to other
documents or retrieve data from the network.
...And 3 more matches
Debugger.Source - Firefox Developer Tools
a debugger.source instance may represent only a portion of a larger source
document.
... for example, an html
document can contain javascript in multiple <script> elements and event handler content attributes.
... in this case, there may be either a single debugger.source instance for the entire html
document, with each debugger.script referring to its substring of the
document; or there may be a separate debugger.source instance for each <script> element and attribute.
...And 3 more matches
Web Console Helpers - Firefox Developer Tools
if unspecified, element defaults to
document.
... equivalent to
document.queryselector() or calls the $ function in the page, if it exists.
...if unspecified, element defaults to
document.
...And 3 more matches
CSSStyleSheet.ownerRule - Web APIs
the read-only cssstylesheet property ownerrule returns the cssimportrule corresponding to the @import at-rule which imported the stylesheet into the
document.
... if the stylesheet wasn't imported into the
document using @import, the returned value is null.
... syntax var ownerrule = cssstylesheet.ownerrule; value a cssimportrule corresponding to the @import rule which imported the stylesheet into the
document.
...And 3 more matches
Advanced animations - Web APIs
var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var ball = { x: 100, y: 100, 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(); } }; ball.draw(); nothing special here, the ball is actually a simple circle and gets drawn wi...
... var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, 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.hei...
... <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, 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.hei...
...And 3 more matches
Element.attributes - Web APIs
syntax var attr = element.attributes; example basic examples // get the first <p> element in the
document var para =
document.getelementsbytagname("p")[0]; var atts = para.attributes; enumerating elements attributes numerical indexing is useful for going through all of an element's attributes.
... the following example runs through the attribute nodes for the element in the
document with id "paragraph", and prints each attribute's value.
... <!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...
...And 3 more matches
Element.classList - Web APIs
examples const div =
document.createelement('div'); div.classname = 'foo'; // our starting state: <div class="foo"></div> console.log(div.outerhtml); // use the classlist api to remove and add classes div.classlist.remove("foo"); div.classlist.add("anotherclass"); // <div class="anotherclass"></div> console.log(div.outerhtml); // if visible is set remove it, otherwise add it div.classlist.toggle("visible"); // add/remove...
...implement the barebones domtokenlist livelyness polyfill if (typeof domtokenlist !== "function") (function(window){ var
document = window.
document, object = window.object, hasownprop = object.prototype.hasownproperty; var defineproperty = object.defineproperty, allowtokenlistconstruction = 0, skippropchange = 0; function domtokenlist(){ if (!allowtokenlistconstruction) throw typeerror("illegal constructor"); // internally let it through } domtokenlist.prototype.tostring = domtokenlist.prototype.tolo...
...
document.
documentelement.firstchild.appendchild(
document.createelement('style')).stylesheet.csstext=( '_*{x-uclp:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' + // ie6 '[class]{x-uclp/**/:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' //ie7-8 ); } })(window); // 3.
...And 3 more matches
Element.getAttributeNS() - Web APIs
examples the following svg
document reads the value of the foo attribute in a custom namespace.
... <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle =
document.getelementbyid( 'target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an html5
document the attribute has to be accessed with test:foo since namespaces are not supported.
... <!doctype html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="foo value"/> </svg> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle =
document.getelementbyid( 'target' ); console.log('attribute value: ' + circle.getattribute('test:foo')); </script> </body> </html> notes namespaces are only supported in xml
documents.
...And 3 more matches
Element.getElementsByTagNameNS() - Web APIs
it is similar to
document.getelementsbytagnamens, except that its search is restricted to descendants of the specified element.
... example // check the alignment on a number of cells in a table in an xhtml
document.
... var table =
document.getelementbyid("forecast-table"); var cells = table.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "td"); for (var i = 0; i < cells.length; i++) { var axis = cells[i].getattribute("axis"); if (axis == "year") { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagnamens()' in that specification.
...And 3 more matches
Element.id - Web APIs
if the id value is not the empty string, it must be unique in a
document.
...another common case is to use an element's id as a selector when styling the
document with css.
... living standard no change from
document object model (dom) level 2 html specification.
...And 3 more matches
Element.querySelectorAll() - Web APIs
examples dataset selector & attribute selectors <section class="box" id="sect1"> <div class="funnel-chart-percent1">10.900%</div> <div class="funnel-chart-percent2">3700.00%</div> <div class="funnel-chart-percent3">0.00%</div> </section> // dataset selectors const refs = [...
document.queryselectorall(`[data-name*="funnel-chart-percent"]`)]; // attribute selectors // const refs = [...
document.queryselectorall(`[class*="funnel-chart-percent"]`)]; // const refs = [...
document.queryselectorall(`[class^="funnel-chart-percent"]`)]; // const refs = [...
document.queryselectorall(`[class$="funnel-chart-percent"]`)]; // const refs = [...
document.queryselectorall(`[class~="funnel-chart...
...-percent"]`)]; obtaining a list of matches to obtain a nodelist of all of the <p> elements contained within the element "mybox": var matches = mybox.queryselectorall("p"); this example returns a list of all <div> elements within "mybox" with a class of either "note" or "alert": var matches = mybox.queryselectorall("div.note, div.alert"); here, we get a list of the
document's <p> elements whose immediate parent element is a div with the class "highlighted" and which are located inside a container whose id is "test".
... var container =
document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the iframe elements in the
document that contain an attribute named "data-src": var matches =
document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is "userlist" which have a "data-active" attribute whose value is "1": var container =
document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
...And 3 more matches
Introduction to the File and Directory Entries API - Web APIs
about this
document this introduction discusses essential concepts and terminology in the file and directory entries api.
... for the reference
documentation on the file and directory entries api, see the reference landing page and its subpages.
... how storage space is granted or allocated and how you can manage storage are idiosyncratic to the browser, so you need to check the respective
documentation of the browser.
...And 3 more matches
HTMLBaseElement - Web APIs
the htmlbaseelement interface contains the base uri for a
document.
... htmlbaseelement.href is a domstring that reflects the href html attribute, containing a base url for relative urls in the
document.
... recommendation no change from
document object model (dom) level 2 html specification.
...And 3 more matches
HTMLIFrameElement - Web APIs
htmliframeelement.content
document read only returns a
document, the active
document in the inline frame's nested browsing context.
... htmliframeelement.csp specifies the content security policy that an embedded
document must agree to enforce upon itself.
... htmliframeelement.featurepolicy read only returns the featurepolicy interface which provides a simple api for introspecting the feature policies applied to a specific
document.
...And 3 more matches
HTMLImageElement - Web APIs
when called without parameters, new image() is equivalent to calling
document.createelement("img").
... htmlimageelement.loading a domstring providing a hint to the browser used to optimize loading the
document by determining whether to load the image immediately (eager) or on an as-needed basis (lazy).
...read the
documentation on the sizes page for details on the format of this string.
...And 3 more matches
HTMLMetaElement - Web APIs
the htmlmetaelement interface contains descriptive metadata about a
document.
... httpequiv domstring gets or sets the name of an http response header to define for a
document.
... name domstring gets or sets the name of a meta-data property to define for a
document.
...And 3 more matches
HTMLScriptElement.referrerPolicy - Web APIs
origin only send the origin of the
document as the referrer in all cases.
... the
document https://example.com/page.html will send the referrer https://example.com/.
... origin-when-cross-origin send a full url when performing a same-origin request, but only send the origin of the
document for other cases.
...And 3 more matches
HTMLTableElement.insertRow() - Web APIs
to insert the row into a specific <tbody>: let specific_tbody =
document.getelementbyid(tbody_id); let row = specific_tbody.insertrow(index) note: insertrow() inserts the row directly into the table.
... the row does not need to be appended separately as would be the case if
document.createelement() had been used to create the new <tr> element.
...(to be valid html, a <tr> must have at least one <td> element.) finally, we add some text to the cell using
document.createtextnode() and node.appendchild().
...And 3 more matches
HTMLTextAreaElement - Web APIs
if this element is not contained in a form element, it can be the id attribute of any <form> element in the same
document or the value null.
... tabindex long: returns / sets the position of the element in the tabbing navigation order for the current
document.
... javascript function insertmetachars(sstarttag, sendtag) { var bdouble = arguments.length > 1, omsginput =
document.myform.mytxtarea, nselstart = omsginput.selectionstart, nselend = omsginput.selectionend, soldtext = omsginput.value; omsginput.value = soldtext.substring(0, nselstart) + (bdouble ?
...And 3 more matches
HTMLTitleElement - Web APIs
the htmltitleelement interface contains the title for a
document.
... htmltitleelement.text is a domstring representing the text of the
document's title.
... recommendation no change from
document object model (dom) level 2 html specification.
...And 3 more matches
Location - Web APIs
both the
document and window interface have such a linked location, accessible via
document.location and window.location respectively.
...bsolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(
document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(
document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.h...
...ash = ''; }); }); result properties location.ancestororigins is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the
document associated with the given location object.
...And 3 more matches
MouseEvent.initMouseEvent() - Web APIs
the mouseevent.initmouseevent() method initializes the value of a mouse event once it's been created (normally using the
document.createevent() method).
... events initialized in this way must have been created with the
document.createevent() method.
... example html <div style="background:red; width:180px; padding:10px;"> <div id="out"></div> <input type="text"> </div> javascript
document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase();
document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt =
document.createevent("mouseevents"); evt.initmouseevent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
document.body.dispatchevent(evt); } simulateclick(); ...
...And 3 more matches
MouseEvent.pageX - Web APIs
the pagex read-only property of the mouseevent interface returns the x (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire
document.
... this includes any portion of the
document not currently visible.
... being based on the edge of the
document as it is, this property takes into account any horizontal scrolling of the page.
...And 3 more matches
Node.baseURI - Web APIs
in most cases the base url is simply the location of the
document, but it can be affected by many factors, including the <base> element in html and the xml:base attribute in xml.
... details the base url of a
document the base url of a
document defaults to the
document's address (as displayed by the browser and available in window.location), but it can be changed: when an html <base> tag is found in the
document when the
document is new (created dynamically) see the base urls section of the html living standard for details.
... you can use
document.baseuri to obtain the base url of a
document.
...And 3 more matches
Node.firstChild - Web APIs
if the node is a
document, it returns the first node in the list of its direct children.
... <p id="para-01"> <span>first span</span> </p> <script> var p01 =
document.getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> in the above, the console will show '#text' because a text node is inserted to maintain the whitespace between the end of the opening <p> and <span> tags.
... <p id="para-01"><span>first span</span></p> <script> var p01 =
document.getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> now the console will show 'span'.
...And 3 more matches
Node.namespaceURI - Web APIs
when the node is a
document, it returns the xml namespace for the current
document.
... in firefox 3.5 and earlier, the namespace uri for html elements in html
documents is null.
... you can create an element with the specified namespaceuri using the dom level 2 method
document.createelementns and attributes with the method element.setattributens.
...And 3 more matches
ParentNode.querySelectorAll() - Web APIs
note: this method is implemented as element.queryselectorall(),
document.queryselectorall(), and
documentfragment.queryselectorall() syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to match against.
... examples to obtain a nodelist of all of the <p> elements in the
document: var matches =
document.queryselectorall("p"); this example returns a list of all <div> elements within the
document with a class of either note or alert: var matches =
document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
... var container =
document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the
document that contain an attribute named data-src: var matches =
document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container =
document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active=1]"); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results.
...And 3 more matches
Pointer events - Web APIs
typically, this is determined by considering the pointer's location and also the visual layout of elements in a
document on screen media.
...ndler(event) { } function enter_handler(event) { } function down_handler(event) { } function move_handler(event) { } function up_handler(event) { } function cancel_handler(event) { } function out_handler(event) { } function leave_handler(event) { } function gotcapture_handler(event) { } function lostcapture_handler(event) { } function init() { var el=
document.getelementbyid("target"); // register pointer event handlers el.onpointerover = over_handler; el.onpointerenter = enter_handler; el.onpointerdown = down_handler; el.onpointermove = move_handler; el.onpointerup = up_handler; el.onpointercancel = cancel_handler; el.onpointerout = out_handler; el.onpointerleave = leave_handler; el.gotpointe...
...tertype " + ev.pointertype + " is not suported"); } // call the tilt handler if (ev.tiltx != 0 && ev.tilty != 0) process_tilt(ev.tiltx, ev.tilty); // call the pressure handler process_pressure(ev.pressure); // if this event is not primary, call the non primary handler if (!ev.isprimary) process_non_primary(ev); } function init() { var el=
document.getelementbyid("target"); // register pointerdown handler el.onpointerdown = down_handler; } </script> <body onload="init();"> <div id="target"> touch me ...
...And 3 more matches
Storage Access API - Web APIs
the storage access api is intended to solve this problem; embedded cross-origin content can request unrestricted access to its first-party storage on a site-by-site basis via the
document.requeststorageaccess() method, and check whether it already has access via the
document.hasstorageaccess() method.
... user prompts when requeststorageaccess() is called by an embedded, cross-origin
document, the user agent may choose to involve the user in the decision of whether to grant storage access to the requesting origin.
...see
document.requeststorageaccess() for more details.
...And 3 more matches
WebXR permissions and security - Web APIs
the
document is considered trustworthy, in that it is responsible and is both currently active and has focus.
...otherwise, an appropriate exception is thrown, such as securityerror if the
document doesn't have permission to enter immersive mode.
... if the
document making the request isn't the one which is responsible for the script, the request is denied.
...And 3 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
l for="attack">attack</label> <input name="attack" id="attack" 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.addeventlistener('input', function() { attacktime = number(this.value); }, false); let releasetime = 0.5; const releasecontrol =
document.queryselector('#release'); releasecontrol.addeventlistener('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.addeventlistener('input', function() { pulsehz = number(this.value); }, false); let lfohz = 30; const lfocontrol =
document.queryselector('#lfo'); lfocontrol.addeventlistener('input', function() { lfohz = number(this.value); }, false); the final playpulse() function here's the entire playpulse() function: let pulsetime = 1; function playpulse() { le...
...and, allowing the user to adjust them via range inputs and event handlers just like in previous sections: <label for="duration">duration</label> <input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> <label for="band">band</label> <input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" /> let noiseduration = 1; const durcontrol =
document.queryselector('#duration'); durcontrol.addeventlistener('input', function() { noiseduration = number(this.value); }, false); let bandhz = 1000; const bandcontrol =
document.queryselector('#band'); bandcontrol.addeventlistener('input', function() { bandhz = number(this.value); }, false); the final playnoise() function here's the entire playnoise() function: function playnoise() { c...
...And 3 more matches
window.location - Web APIs
the window.location read-only property returns a location object with information about the current location of the
document.
... syntax var oldlocation = location; location = newlocation; examples basic example alert(location); // alerts "/docs/web/api/window/location" example #1: navigate to a new page whenever a new value is assigned to the location object, a
document will be loaded using the url as if location.assign() had been called with the modified url.
...l: <button onclick="showloc();">show location properties</button> example #5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current
document is reloaded with the modified search string).
...And 3 more matches
HTML in XMLHttpRequest - Web APIs
also, html support is only available if the responsetype property has been set to "
document".
... usage retrieving an html resource as a dom using xmlhttprequest works just like retrieving an xml resource as a dom using xmlhttprequest, except you can't use the synchronous mode and you have to explicitly request a
document by assigning the string "
document" to the responsetype property of the xmlhttprequest object after calling open() but before calling send().
... var xhr = new xmlhttprequest(); xhr.onload = function() { console.log(this.responsexml.title); } xhr.open("get", "file.html"); xhr.responsetype = "
document"; xhr.send(); feature detection method 1 this method relies on the "force async" nature of the feature.
...And 3 more matches
ARIA: contentinfo role - Accessibility
landmarks can be used by assistive technology to quickly identify and navigate to large sections of the
document.
...content is available under <a href="#">these licenses</a>.</p> </div> </body> accessibility concerns use sparingly landmark roles are intended to identify larger overall sections of the
document.
... one contentinfo landmark per page the <body> element there should be only one contentinfo landmark per
document, used as the immediate descendant of the <body> element.
...And 3 more matches
ARIA: grid role - Accessibility
border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables =
document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs =
document.queryselectorall('table tbody tr'), row = 0, col = 0, maxrow = trs.length - 1, maxcol = 0; array.prototype.foreach.call(trs, function(gridrow, i){ array.prototype.foreach.call(gridrow.queryselectorall('td'), function(el, i){ el.dataset.row = row; el.dataset.co...
...l = col; col = col + 1; }); if (col>maxcol) { maxcol = col - 1; } col = 0; row = row + 1; }); function moveto(newrow, newcol) { var tgt =
document.queryselector('[data-row="' + newrow + '"][data-col="' + newcol + '"]'); if (tgt && (tgt.getattribute('role')==='gridcell') ) { array.prototype.foreach.call(
document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } }
document.queryselector('table').addeventlistener("keydown", function(event) { switch (event.key) { case "arrowright": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) + 1); break; case "arrowleft": ...
...target.dataset.row, 10), 0); } break; case "end": if (event.ctrlkey) { var i = maxrow; var result; do { var j = maxcol; do { result = moveto(i, j); j--; } while (result == false); i--; } while (result == false); } else { moveto(parseint(event.target.dataset.row, 10),
document.queryselector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); } break; case "pageup": var i = 0; var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.targe...
...And 3 more matches
ARIA: Region role - Accessibility
the region landmark role is used to identify an area in the
document that the author has identified as significant.
... region landmark roles content should make sense if separated from the main content of the
document.
...landmark roles are intended to be used sparingly, to identify larger overall sections of the
document.
...And 3 more matches
ARIA: search role - Accessibility
landmarks can be used by assistive technology to quickly identify and navigate to large sections of the
document.
...if a
document includes more than one search, each should have a unique label.
... examples <form id="search" role="search"> <label for="search-input">search this site</label> <input type="search" id="search-input" name="search" spellcheck="false"> <input value="submit" type="submit"> </form> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the
document.
...And 3 more matches
WAI-ARIA Roles - Accessibility
this role should only be used to define very dynamic and desktop-like web applications.aria: article rolethe article role indicates a section of a page that could easily stand on its own on a page, in a
document, or on a website.
...dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).aria:
document rolegenerally used in complex composite widgets or applications, the
document role can inform assistive technologies to switch context to a reading mode: the
document role tells assistive technologies with reading or browse modes to use the
document mode to read the content contained within this element.aria: feed rolea feed is a dynamic scrollable list of articles in which articles are added to ...
...it is normally used in conjunction with the list role, which is used to identify a list container.aria: main rolethe main landmark role is used to indicate the primary content of a
document.
...And 3 more matches
Accessibility Information for Web Authors - Accessibility
how-to's key-navigable custom dhtml widgets in mozilla & ie this
document discusses how to use tabindex, element.focus() and onkeypress to make custom dhtml widgets such as menus or tree views keyboard accessible.
...you can view the structure and order view of the
document.
... you can see a text-only view and and outline view of the
document.
...And 3 more matches
CSS Animations tips and tricks - CSS: Cascading Style Sheets
css animations make it possible to do incredible things with the elements that make up your
documents and apps.
... function play() {
document.queryselector(".box").classname = "box"; window.requestanimationframe(function(time) { window.requestanimationframe(function(time) {
document.queryselector(".box").classname = "box changing"; }); }); } this looks weird, doesn't it?
... that's because the only way to play an animation again is to remove the animation effect, let the
document recompute styles so that it knows you've done that, then add the animation effect back to the element.
...And 3 more matches
Ordering Flex Items - CSS: Cascading Style Sheets
reverse the display of the items the flex-direction property can take one of four values: row column row-reverse column-reverse the first two values ​​keep the items in the same order that they appear in the
document source order and display them sequentially from the start line.
...this allows authors to manipulate the visual presentation while leaving the source order intact for non-css uas and for linear models such as speech and sequential navigation.” - ordering and orientation if your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the
document source — not your visual order.
...the specification continues with a warning not to use reordering to fix issues in your source: “authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the
document.” note: for some years firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers.
...And 3 more matches
Cubic Bezier Generator - CSS: Cascading Style Sheets
ut onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x1 =
document.getelementbyid('x1').value; var y1 =
document.getelementbyid('y1').value; var x2 =
document.getelementbyid('x2').value; var y2 =
document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5; // size of 0.1 tick on the rulers var scaling; //limitati...
...on: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element using the dom var canvas =
document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); scaling = math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); canvas.onmousedown = mousedown; canvas.onmouseup = mouseup; } else { alert('you need safari or firefox 1.5+ to see this demo.'); } } function cx(x) { return x * scaling + rulers; } function ...
...result + 0.5 : result; } function drawbeziercurve(x1, y1, x2, y2) { // get the canvas element using the dom var canvas =
document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw the rulers ctx.beginpath(); ctx.strokestyle = "black"; ...
...And 3 more matches
Ajax - Developer guides
documentation getting started this article guides you through the ajax basics and gives you two simple hands-on examples to get you started.
...possible values are the empty string (default), arraybuffer, blob,
document, json, and text.
... the response property will contain the entity body according to responsetype, as an arraybuffer, blob,
document, json, or string.
...And 3 more matches
<button>: The Button element - HTML: Hypertext Markup Language
the html <button> element represents a clickable button, used to submit forms or anywhere in a
document for accessible, standard button functionality.
...only one element in a
document can have this attribute.
...the value of this attribute must be the id of a <form> in the same
document.
...And 3 more matches
<input type="color"> - HTML: Hypertext Markup Language
here's an example that watches changes over time to the color value: colorpicker.addeventlistener("input", updatefirst, false); colorpicker.addeventlistener("change", watchcolorpicker, false); function watchcolorpicker(event) {
document.queryselectorall("p").foreach(function(p) { p.style.color = event.target.value; }); } selecting the value if the <input> element's implementation of the color type on the user's browser doesn't support a color well, but is instead a text field for entering the color string directly, you can use the select() method to select the text currently in the edit field.
... example let's create an example which does a little more with the color input by tracking the change and input events to take the new color and apply it to every <p> element in the
document.
... var colorwell; var defaultcolor = "#0000ff"; window.addeventlistener("load", startup, false); initialization once the page is loaded, our load event handler, startup(), is called: function startup() { colorwell =
document.queryselector("#colorwell"); colorwell.value = defaultcolor; colorwell.addeventlistener("input", updatefirst, false); colorwell.addeventlistener("change", updateall, false); colorwell.select(); } this gets a reference to the color <input> element in a variable called colorwell, then sets the color input's value to the value in defaultcolor.
...And 3 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
you can also get and set the date value in javascript using the htmlinputelement.value property, for example: var datecontrol =
document.queryselector('input[type="datetime-local"]'); datecontrol.value = '2017-06-01t08:30'; there are several methods provided by javascript's date that can be used to convert numeric date information into a properly-formatted string, or you can do it manually.
... // define variables var nativepicker =
document.queryselector('.nativedatetimepicker'); var fallbackpicker =
document.queryselector('.fallbackdatetimepicker'); var fallbacklabel =
document.queryselector('.fallbacklabel'); var yearselect =
document.queryselector('#year'); var monthselect =
document.queryselector('#month'); var dayselect =
document.queryselector('#day'); var hourselect =
document.queryselector('#hour'); var minuteselect = docum...
...ent.queryselector('#minute'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new datetime-local input falls back to a text input or not var test =
document.createelement('input'); try { test.type = 'datetime-local'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the days and years dynamically // (the months are always the same, therefore hardcoded) populatedays(monthselect.value); populateyears(); populatehours(); populateminutes(); } function po...
...And 3 more matches
<input type="file"> - HTML: Hypertext Markup Language
for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-office
document.wordprocessingml.
document"> capture the capture attribute value is a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.
...(many mobile devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-office
document.wordprocessingml.
document" — accept anything that smells like an ms word
document.
... notes you cannot set the value of a file picker from a script — doing something like the following has no effect: const input =
document.queryselector("input[type=file]"); input.value = "foo"; when a file is chosen using an <input type="file">, the real path to the source file is not shown in the input's value attribute for obvious security reasons.
...And 3 more matches
<template>: The Content Template element - HTML: Hypertext Markup Language
think of a template as a content fragment that is being stored for subsequent use in the
document.
... however, the htmltemplateelement has a content property, which is a read-only
documentfragment containing the dom subtree which the template represents.
... note that directly using the value of the content could lead to unexpected behavior, see avoiding
documentfragment pitfall section below.
...And 3 more matches
Common MIME types - HTTP
here is a list of mime types, associated by type of
documents, ordered by their common extensions.
...this table lists some important mime types for the web: extension kind of
document mime type .aac aac audio audio/aac .abw abiword
document application/x-abiword .arc archive
document (multiple files embedded) application/x-freearc .avi avi: audio video interleave video/x-msvideo .azw amazon kindle ebook format application/vnd.amazon.ebook .bin any kind of binary data application/oc...
...z bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css) text/css .csv comma-separated values (csv) text/csv .doc microsoft word application/msword .docx microsoft word (openxml) application/vnd.openxmlformats-office
document.wordprocessingml.
document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) application/epub+zip .gz gzip compressed archive application/gzip .gif graphics interchange format (gif) image/gif .htm .html hypertext markup language (html) text/html .ico icon forma...
...And 3 more matches
Content Security Policy (CSP) - HTTP
content-security-policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com here, by default, content is only permitted from the
document's origin, with the following exceptions: images may load from anywhere (note the "*" wildcard).
... content-security-policy: default-src https://onlinebanking.jumbobank.com the server permits access only to
documents being loaded specifically over https through the single origin onlinebanking.jumbobank.com.
...if the blocked uri is from a different origin than the
document-uri, then the blocked uri is truncated to contain just the scheme, host, and port.
...And 3 more matches
Using Feature Policy - HTTP
for every feature controlled by feature policy, the feature is only enabled in the current
document or frame if its origin matches the allowed list of origins.
... allowlist an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 3 more matches
Feature-Policy: display-capture - HTTP
the http feature-policy header display-capture directive controls whether or not the
document is permitted to use screen capture api, i.e.,getdisplaymedia() to capture the screen's contents.
... if display-capture is disabled in a
document, the
document will not be able to initiate screen capture via getdisplaymedia().
... syntax feature-policy: display-capture <allowlist>; <allowlist> an allowlist 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 3 more matches
Planned changes to shared memory - JavaScript
starting with firefox 79, the features described in this
document are enabled by default.
... new http header bonanza as a baseline requirement,
documents will need to be in a secure context.
... for top-level
documents, two headers will need to be set: cross-origin-opener-policy with same-origin as value (protects your origin from attackers) cross-origin-embedder-policy with require-corp as value (protects victims from your origin) with these two headers set, postmessage() will no longer throw for sharedarraybuffer objects and shared memory across threads is therefore available.
...And 3 more matches
Property accessors - JavaScript
const variable = object.property_name; object.property_name = value; const object = {}; object.$1 = 'foo'; console.log(object.$1); // 'foo' object.1 = 'bar'; // syntaxerror console.log(object.1); // syntaxerror here, the method named createelement is retrieved from
document and is called.
...
document.createelement('pre') if you use a method for a numeric literal, and the numeric literal has no exponent and no decimal point, you should leave white-space(s) before the dot preceding the method call, so that the dot is not interpreted as a decimal point.
...
document['createelement']('pre') a space before bracket notation is allowed.
...And 3 more matches
Populating the page: how browsers work - Web Performance
if the
document is well-formed, parsing it is straightforward and faster.
... the parser parses tokenized input into the
document, building up the
document tree.
... the dom tree describes the content of the
document.
...And 3 more matches
Privacy, permissions, and information security
hnologies and features used to enforce security and privacy technology or feature description certificate transparency an open standard for monitoring and auditing certificates, creating a database of public logs that can be used to help identify incorrect or malicious certificates content security policy provides the ability to define the extent to which a
document's content can be accessed by other devices over the web; used in particular to prevent or mitigate attacks on the server feature policy lets web developers selectively enable, disable, and modify the behavior of certain features and apis both for a
document and for sub
documents loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow att...
...ribute on an <iframe> specifies which web features the
document in the frame should be allowed to access http public key pinning (hpkp) hpkp is used by servers to instruct a client to associate a specific public key with the server going forward in order to decrease the likelihood of man-in-the-middle attacks http strict transport security (hsts) hsts is used by servers to let them protect themselves from protocol downgrade and cookie hijack attacks by letting sites tell clients that they can only use https to communicate with the server http/2 while http/2 technically does not have to use encryption, most browser developers are only supporting it when used with https, so it can be thought of in that regard as being security-related permissions api p...
... keeping personal data safe managing site permissions bringing it all together <using feature policy with permissions and so forth; how to use them together, how they interact, etc> permission requests in <iframe> elements things can get tricky when your web app uses the <iframe> element to embed content from another site inside your own, especially if the
document you load into the frame has its own permission needs to consider.
...And 3 more matches
href - SVG: Scalable Vector Graphics
if the url points to multiple target elements, if the given target element is not capable of being a target of the given animation element, or if the given target element is not part of the current
document, then the animation element will not affect any target element.
... note that if the target element is not part of the current svg
document fragment, then whether the target element will be removed or not is defined by the host language.
... value <url> default value none animatable no pattern for <pattern>, href defines a url referring to a different <pattern> element within the current svg
document.
...And 3 more matches
target - SVG: Scalable Vector Graphics
the target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent
document is embedded within an html or xhtml
document, or is viewed with a tabbed browser.
... this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a
document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla.org" target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or window</text> </a> <...
...use _self to replace the current svg
document.
...And 3 more matches
Namespaces crash course - SVG: Scalable Vector Graphics
for example, svg and mathml might be incorporated directly into an xhtml based scientific
document.
...the problem with mixing content from different xml dialects in a single xml
document is that the elements defined by one dialect may have the same name as elements defined by another.
...this xlink parameter is also frequently used in svg on the <a>, <use> and <image> elements among others, so it's a good idea to always include the xlink declaration in your
documents.
...And 3 more matches
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
the structure of an xml
document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented.
... yet eventually much of the content stored in xml
documents will need to be presented to human readers.
...built from the ground up utilizing a wide variety of xml technologies, firefox incorporates within itself all of the mechanisms needed to process both original xml
documents and the specialized stylesheets used to style and lay them out for html display, reducing server load with client-side processing.
...And 3 more matches
port - Archive of obsolete content
this article
documents the port object, which is used to communicate between a content script and the main add-on code.
... this example rewrites the content script in the port.removelistener() 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); removelistener() you can use port.on() to listen for messages.
...when it receives this message, the script logs the first paragraph of the
document and then calls removelistener() to stop listening.
...And 2 more matches
tabs/utils - Archive of obsolete content
to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the
documentation for the private-browsing module.
... url : string url for the
document to load.
... gettabtitle(tab) get the title of the
document hosted by the specified tab, or the tab's label if the tab doesn't host a
document.
...And 2 more matches
package.json - Archive of obsolete content
see the program id
documentation.
... see the
documentation for how to localize the add-on's meta data.
...see the
documentation for the private-browsing module.
...And 2 more matches
Modifying Web Pages Based on URL - Archive of obsolete content
a simple code snippet where content script is supplied as contentscript option and url pattern is given as include option is as follows: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscript: '
document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); do as follows: create a new directory and navigate to it.
...the message will contain the new content to insert into the
document.
... the content script now needs to look like this: // "self" is a global object in content scripts // listen for a message, and replace the
document's // contents with the message payload.
...And 2 more matches
Canvas code snippets - Archive of obsolete content
function canvas2dcontext(canvas) { if (typeof canvas === 'string') { canvas =
document.getelementbyid(canvas); } if (!(this instanceof canvas2dcontext)) { return new canvas2dcontext(canvas); } this.context = this.ctx = canvas.getcontext('2d'); if (!canvas2dcontext.prototype.arc) { canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath'...
...f gettermethods) { let method = m; canvas2dcontext.prototype[method] = function() { return this.ctx[method].apply(this.ctx, arguments); }; } for (let p of props) { let prop = p; canvas2dcontext.prototype[prop] = function(value) { if (value === undefined) return this.ctx[prop]; this.ctx[prop] = value; return this; }; } }; var canvas =
document.getelementbyid('canvas'); // use context to get access to underlying context var ctx = canvas2dcontext(canvas) .strokestyle('rgb(30, 110, 210)') .transform(10, 3, 4, 5, 1, 0) .strokerect(2, 10, 15, 20) .context; // use property name as a function (but without arguments) to get the value var strokestyle = canvas2dcontext(canvas) .strokestyle('rgb(50, 110, 210)') .strokestyle(); cod...
... remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe =
document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens...
...And 2 more matches
LookupNamespaceURI - Archive of obsolete content
this function is not necessary for gecko-based browsers (though the function will quickly return the standard value for mozilla browsers) when used to reflect on static
documents.
... /*globals
document, html
document */ (function () { 'use strict'; var doc = typeof
document !== 'undefined' ?
...
document : html
document; // support html
document if
document not present // if
document is present, is this method also present?
...And 2 more matches
Listening to events in Firefox extensions - Archive of obsolete content
there are several different categories of events; this article will help you learn about them and direct you to more specific
documentation covering each of them.
... some of the more interesting dom events you may wish to monitor are listed here: event description domlinkadded dispatched when a new html <link> element is detected in the
document.
...frames are treated the same way as the top-level
document.
...And 2 more matches
Adding windows and dialogs - Archive of obsolete content
it indicates that a chrome
document is being opened, not a web page.
... this means that the
document defines the whole window, and not only the inner content area.
...luckily, you still get a great deal of help from the platform if you use the dialog element as the
document root instead of the more generic window element.
...And 2 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
triggering event handlers sometimes scripts might want to manually trigger an event handler that is defined directly in the xul
document.
... // do not use eval(
document.getelementbyid("mymenu").getattribute("oncommand")); eval(
document.getelementbyid("mylabel").getattribute("onclick")); alternative: dispatch real events dispatching real events has the added bonus that all other event listeners for that element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event.
... // fake a command event var event =
document.createevent("events"); event.initevent("command", true, true);
document.getelementbyid("mymenu").dispatchevent(event); // fake a mouse click var mouseevent =
document.createevent("mouseevents"); event.initmouseevent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getelementbyid("mylabel").dispatchevent(mouseevent); please see the corresponding
documentation on how to use and initialize particular event types.
...And 2 more matches
Notes on HTML Reflow - Archive of obsolete content
elements later "in the flow" typically do not affect the geometry of elements that are earlier "in the flow", so layout can proceed left-to-right, top-to-bottom through the
document.
...all html reflow, including the initial reflow , begins at the root frame , which corresponds to the <html> element of the html
document.
...some reflows are immediate in response to user or script actions; for example, resizing the window or changing the
document's default font.
...And 2 more matches
Using XML Data Islands in Mozilla - Archive of obsolete content
internet explorer had an "xml data islands" feature that allows web authors include xml data inline in html
documents using the <xml> tag.
...e embedded like this: <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> the xml source text can then be retrieved like this: var ordersource =
document.getelementbyid("purchase-order").textcontent; the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera, webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
...> <head> <title>xml data block demo</title> <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> <script> function rundemo() { var ordersource =
document.getelementbyid("purchase-order").textcontent; var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); var lineitems = doc.getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent;
document.body.textcon...
...And 2 more matches
Block and Line Layout Cheat Sheet - Archive of obsolete content
the details of block and line layout are tricky; this
document serves as a "cheat sheet" that describes how the vagary of different state flags control what's going on.
...if you know the answer, please pass it along to me so i can update the
document.
...this is set by default for
document, table cell inner, and absolutely positioned wrapper frames.
...And 2 more matches
JavaScript crypto - Archive of obsolete content
to enable your
document to receive these events, you must first tell the crypto system you are interested by setting window.crypto.enablesmartcardevents to true.
... you can then register event handlers for these events with the
document.addeventlistener() method.
...<script> function onsmartcardchange() { window.location.reload(); } function register() { window.crypto.enablesmartcardevents = true;
document.addeventlistener("smartcard-insert", onsmartcardchange, false);
document.addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() {
document.removeeventlistener("smartcard-insert", onsmartcardchange, false);
document.removeeventlistener("smartcard-remove", onsmartcardchange, false); }
document.body.onload = register;
document.body.onunload = deregister; </scr...
...And 2 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
other features of xpcom: xpidl, a language for defining interfaces in a language-neutral way and the xpidl compiler can create header files, binary type libraries,
documentation, and even generate stub c++ code for your component implementations.
...
documentation.
... more information using the mozilla soap api (an article written for the apple developer connection) xml extras (the home page for the xml extras code module, which contains mozilla's web services support) soap scripts in mozilla (
documentation on soap in mozilla from the engineer who implemented it) xpinstall, mozilla's cross platform installation technology one of the many things that makes the mozilla platform easy for both users and developers is that applications can be installed, extended, or upgraded with simple web page links.
...And 2 more matches
RDF Datasource How-To - Archive of obsolete content
this
document is a cookbook that describes how to create a native, client-side datasource that works with mozilla's rdf implementation.
... it supersedes (and borrows from) the original
document put together by robert churchill.
... constructing a dll for a component is beyond the scope of this
document; the reader is referred to the rdf factory as a guideline.
...And 2 more matches
MenuButtons - Archive of obsolete content
<toolbarbutton type="menu-button" label="save" oncommand="alert('save');"> <menupopup> <menuitem label="save this
document"/> <menuitem label="save all" oncommand="alert('save all'); event.stoppropagation();"/> </menupopup> </toolbarbutton> here, the 'save' button has a type of 'menu-button', so a small arrow button will appear which will open the menu when pressed.
... when the command is fired, it bubbles up through the chain of elements to the top of the
document.
... when the first item on the menu ('save this
document') is activated, it will also display the 'save' alert as the command event bubbles up to the button.
...And 2 more matches
Template Builder Interface - Archive of obsolete content
« previousnext » when inserting an element into a xul
document, the element is checked to see if it has a datasources attribute.
...templates can only be used in xul
documents, however, there is no requirement that the templates generate xul elements.
... getservice(components.interfaces.nsirdfservice); var ds = rdf.getdatasource("http://www.xulplanet.com/ndeakin/tests/xul/template-guide-streets.rdf"); var tree =
document.getelementbyid("thetree"); tree.database.adddatasource(ds); tree.builder.rebuild(); this is the typical way to add a datasource to an element, in this case to the tree with the id 'thetree'.
...And 2 more matches
Adding Event Handlers - Archive of obsolete content
in the capturing phase, the event is first sent to the window, then to the
document, followed by each ancestor of the xul element where the event occured downwards until it reaches that element.
... for example, when the mouse is moved over a button that is inside a box, a 'mousemove' event is generated, and sent first to the window, followed by the
document, and then the box.
...finally, the bubbling phase causes the event to be sent to the box,
document and window.
...And 2 more matches
Focus and Selection - Archive of obsolete content
example 2 : source view <script> function displayfocus(){ var elem=
document.getelementbyid('sbar'); elem.setattribute('value','enter your phone number.'); } </script> <textbox id="tbox1"/> <textbox id="tbox2" onfocus="displayfocus();"/> <description id="sbar" value=""/> the focus event, when it occurs, will call the displayfocus function.
...you can retrieve the command dispatcher from a window using the
document's commanddispatcher property.
...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(){ addeventlistener("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 focus-"/> </window> in this example, a focus event handler is attached the window.
...And 2 more matches
The First Install Problem - Archive of obsolete content
this is an old working
document; see en/gecko_plugin_api_reference/plug-in_development_overview for current information.
...this
document presents a consistent way to do that.
...this
document presents windows solutions for plugin vendors.
...And 2 more matches
Introduction to SSL - Archive of obsolete content
introduction this
document introduces the secure sockets layer (ssl) protocol.
... this
document is primarily intended for administrators of red hat server products, but the information it contains may also be useful for developers of applications that support ssl.
... the
document assumes that you are familiar with the basic concepts of public-key cryptography, as summarized in "introduction to public-key cryptography." the ssl protocol the transmission control protocol/internet protocol (tcp/ip) governs the transport and routing of data over the internet.
...And 2 more matches
Processing XML with E4X - Archive of obsolete content
first introduced in javascript 1.6, e4x introduces a native xml object to the javascript language, and adds syntax for embedding literal xml
documents in javascript code.
... while one can interpolate attribute names as well as attribute values: var a = 'att'; var b = <b {a}='value'/>; alert(b); // gives: <b att="value"/> ...one cannot interpolate a whole expression at once (e.g., <b {a}>.) after executing the above example, the variable languages references an xml object corresponding to the <languages> node in the xml
document.
... it is possible to create an xmllist using xml literal syntax without needing to create a well-formed xml
document, using the following syntax: var xmllist = <> <lang>javascript</lang> <lang>python</lang> </>; the += operator can be used to append new elements to an xmllist within a
document: languages.lang += <lang>ruby</lang>; note that unlike node lists returned by regular dom methods, xmllists are static and are not automatically updated to reflect changes in the dom.
...And 2 more matches
RDF in Mozilla FAQ - Archive of obsolete content
the rdf back-end architecture
document describes in more detail how mozilla's rdf implementation works, and gives a quick overview of the interfaces that are involved.
... xul templates xul templates are created by specifying a datasources attribute on an element in a xul
document.
... xul that is loaded from an "untrusted" url can only specify an rdf/xml
document from the same codebase (in the java sense of the word) that the xul
document originated from.
...And 2 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
some plugins don't understand all the param elements that their
documentation suggests should configure them in mozilla-based browsers.
...here is an example of some javascript which does this: if (window.activexobject) { // browser supports activex // create object element with // download url for ie ocx
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"');
document.write(' codebase="http://download.macromedia.com');
document.write('/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"');
document.write(' width="366" height="142" id="myflash">');
document.write(' <param name="movie" value="javascript-to-flash.swf" />');
document.write(' <param name="quality" value="high" />'); d...
...ocument.write(' <param name="swliveconnect" value="true" />');
document.write('<\/object>'); } else { // browser supports netscape plugin api
document.write('<object id="myflash" data="javascript-to-flash.swf"');
document.write(' type="application/x-shockwave-flash"');
document.write(' width="366" height="142">');
document.write('<param name="movie" value="javascript-to-flash.swf" />');
document.write('<param name="quality" value="high" />');
document.write('<param name="swliveconnect" value="true" />');
document.write('<p>you need flash for this.');
document.write(' get the latest version from');
document.write(' <a href="http://www.macromedia.com/downloads">here<\/a>.');
document.write('<\/p>');
document.write('<\/object>'); } see also: flash satay the object element and java mozilla-ba...
...And 2 more matches
Building up a basic demo with Three.js - Game development
open the three.js
documentation in a separate tab — it is useful to refer to.
...> <meta charset="utf-8"> <title>mdn games: three.js demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="three.min.js"></script> <script> var width = window.innerwidth; var height = window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the
document <title>, and some css to set the width and height of the <canvas> element, that three.js will insert on the page to 100% to fill the entire available viewport space.
... var renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); renderer.setclearcolor(0xdddddd, 1);
document.body.appendchild(renderer.domelement); we are creating a new webgl renderer, setting its size to fit the whole available space on the screen, and appending the dom structure to the page.
...And 2 more matches
Combinators - Learn web development
previous overview: building blocks next the final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the
document.
...to select all <img> elements that come anywhere after <p> elements, we'd do this: p ~ img in the example below we are selecting all <p> elements that come after the <h1>, and even though there is a <div> in the
document as well, the <p> that comes after it is selected.
... using combinators you can combine any of the selectors that we discovered in previous lessons with combinators in order to pick out part of your
document.
...And 2 more matches
Introduction to CSS layout - Learn web development
starting with a well-structured html
document is very important, as you can then work with the way things are laid out by default rather than fighting against it.
...for example, the <li> element is display: block by default, meaning that list items display one below the other in our english
document.
...by default these would display as block elements, below one another, in our english language
document.
...And 2 more matches
Using CSS generated content - Learn web development
this article describes some ways in which you can use css to add content when a
document is displayed.
... one of the important advantages of css is that it helps you to separate a
document's style from its content.
... however, there are situations where it makes sense to specify certain content as part of the stylesheet, not as part of the
document.
...And 2 more matches
What is the difference between webpage, website, web server, and search engine? - Learn web development
we'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you: web page a
document which can be displayed in a web browser such as firefox, google chrome, opera, microsoft internet explorer or edge, or apple's safari.
... web page a web page is a simple
document displayable by a browser.
... such
documents are written in the html language (which we look into in more detail in other articles).
...And 2 more matches
How to build custom form controls - Learn web development
window.addeventlistener("load", function () {
document.body.classlist.remove("no-widget");
document.body.classlist.add("widget"); }); without js with js check out the source code note: if you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the <select> elements, and to dynamically add the dom tree representing the...
... next, we bind these functions to the appropriate events: // we handle the event binding when the
document is loaded.
... window.addeventlistener('load', function () { var selectlist =
document.queryselectorall('.select'); // each custom control needs to be initialized selectlist.foreach(function (select) { // as well as all its `option` elements var optionlist = select.queryselectorall('.option'); // each time a user hovers their mouse over an option, we highlight the given option optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { // note: the `select` and `option` variable are closures // available in the scope of our function call.
...And 2 more matches
Introduction to HTML - Learn web development
at its heart, html is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a
document (is it a paragraph?
...is it part of a table?), structure a
document into logical sections (does it have a header?
...metadata in html the head of an html
document is the part that is not displayed in the web browser when the page is loaded.
...And 2 more matches
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.addeventlistener('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.
... finally, we append the paragraph to the
document body.
... an example of an async callback is the second parameter of the addeventlistener() method (as we saw in action above): btn.addeventlistener('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 fired.
...And 2 more matches
Build your own function - Learn web development
finally, add the following code inside the curly braces: const html =
document.queryselector('html'); const panel =
document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); const msg =
document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn =
document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); closebtn.onclick = function() { panel.parentn...
... the first line uses a dom api function called
document.queryselector() to select the <html> element and store a reference to it in a constant called html, so we can do things to it later on: const html =
document.queryselector('html'); the next section uses another dom api function called
document.createelement() to create a <div> element and store a reference to it in a constant called panel.
... const panel =
document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); the next two sections make use of the same createelement() and appendchild() functions we've already seen to create two new elements — a <p> and a <button> — and insert them in the page as children of the panel <div>.
...And 2 more matches
Accessibility/LiveRegionDevGuide
for more information about live regions, please read the aria properties spec or the live region report to learn about aria live region markup and the live region api support
document for the latest firefox api with regards to live regions.
...these "non-live" events may be events originating from the chrome, user interaction in the chrome or
document,
document loading events, or real live region events from hidden tabs.
...(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.
...And 2 more matches
Listening to events on all tabs
removing a listener to remove a previously installed progress listener, call removetabsprogresslistener(): gbrowser.removetabsprogresslistener(myprogresslistener); implementing a listener the listener object itself has five methods it can implement to handle various events: onlocationchange called when the uri of the
document displayed in the tab changes.
...optional from gecko 10 onprogresschange called when updated progress information for the download of a
document is available.
...this method will be called on security transitions (eg http -> https, https -> http, foo -> https) and after
document load completion.
...And 2 more matches
Limitations of chrome scripts
the rest of this page
documents patterns that don't work in multiprocess firefox as well as how are shims try to paper over the problem.
...for example: // chrome code gbrowser.contentwindow; // null gbrowser.content
document; // null gbrowser.selectedbrowser.contentwindow; // null window.content; // null content; // null as a special note, docshells live in the content process, so they are also inaccessible: gbrowser.docshell; // null gbrowser.selectedbrowser.docshell; // null with the shim the sh...
...in this case, the shim will return a javascript object that looks somewhat like a window or a
document for about:blank.
...And 2 more matches
Localizing without a specialized tool
from the create a new localization
document, an interested localizer can follow a technical step-by-step process that starts the localization process by focusing on how to localize two of the primary types of localization files (dtd and properties) used in the mozilla source code.
... with that
document, users can see immediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation.
...if you choose to localize mozilla with nothing more than a text editing application and not a specialized tool, this
document (along with create a new localization) will enable you to learn just what needs to be done.
...And 2 more matches
Basics
mathml basics this
document illustrates some basic mathml constructions.
...however, mathml
documents tend to be verbose and you might get lost trying to locate a mathml fragment with the usual view source.
...you can right-click on any math fragment of interest throughout this
document.
...And 2 more matches
Mozilla Web Services Security Model
overview (this
document is being compiled from scattered
documentation and source code and most of the information in it has not been verified.
... web-scripts-access.xml file format the web-scripts-access.xml file is an xml
document.
... any errors in xml syntax, as well as many failures to follow the format, will cause the
document to be ignored.
...And 2 more matches
Mozilla Development Strategies
make sure
documentation gets updated if the bug you're fixing is likely to require an update to developer
documentation once it's fixed, be sure to add the dev-doc-needed keyword to the bug (or ask someone to do it, if you don't have editbugs privileges on bugzilla).
... this puts the bug on the radar of our
documentation team to ensure that once the bug is resolved, the
documentation will be updated appropriately.
... of course, our
documentation is a wiki; you can really help by updating the
documentation yourself.
...And 2 more matches
DMD
instructions on how to root your device is outside the scope of this
document.
...d.cpp:1286) #02: malloc (/home/njn/moz/mi5/go64dmd/memory/build/../../../memory/build/replace_malloc.c:153) #03: moz_xmalloc (/home/njn/moz/mi5/memory/mozalloc/mozalloc.cpp:84) #04: nscyclecollectingautorefcnt::incr(void*, nscyclecollectionparticipant*) (/home/njn/moz/mi5/go64dmd/dom/xul/../../dist/include/nsisupportsimpl.h:250) #05: nsxulelement::create(nsxulprototypeelement*, nsi
document*, bool, bool,mozilla::dom::element**) (/home/njn/moz/mi5/dom/xul/nsxulelement.cpp:287) #06: nsxblcontentsink::createelement(char16_t const**, unsigned int, mozilla::dom::nodeinfo*, unsigned int, nsicontent**, bool*, mozilla::dom::fromparser) (/home/njn/moz/mi5/dom/xbl/nsxblcontentsink.cpp:874) #07: nscomptr<nsicontent>::startassignment() (/home/njn/moz/mi5/go64dmd/dom/xml/../../dist/inclu...
...udingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/fragmentorelement.cpp:2337) #05: nsinode::sizeofincludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/go64dmd/parser/html/../../../dom/base/nsinode.h:307) #06: mozilla::dom::nodeinfo::nodetype() const (/home/njn/moz/mi5/go64dmd/dom/base/../../dist/include/mozilla/dom/nodeinfo.h:127) #07: nshtml
document::docaddsizeofexcludingthis(nswindowsizes*) const (/home/njn/moz/mi5/dom/html/nshtml
document.cpp:3710) #08: nsi
document::docaddsizeofincludingthis(nswindowsizes*) const (/home/njn/moz/mi5/dom/base/ns
document.cpp:12820) } } the choice of whether to record an allocation stack trace for all blocks is controlled by an option (see below).
...And 2 more matches
Firefox Sync
documentation this
document serves as an index for all technical
documentation related to sync.
... servers
documentation for the various servers, including information on how to host your own.
...there are also some notes in a google
document (that we really must move to its own wiki page) there's also information available to help debug and diagnose android sync issues.
...And 2 more matches
An overview of NSS Internals
the templates are usually closely aligned to definitions found in rfc
documents.
...in order to verify a digital signature, we have to look at the application data (e.g., a
document that was signed), the signature data block (the digital signature), and a public key (as found in a certificate that is believed to be the signer, e.g., identified by metadata received together with the signature).
...instead of simply verifying that the requester of a certificate is in control of an administrative email address at the desired web site's domain, it's required that the ca performs a verification of real world identity
documents (such as a company registration
document with the country's authority), and it's also required that a browser software performs a revocation check with the ca, prior to granting validity to the certificate.
...And 2 more matches
JSS FAQ
is there any sample code and
documentation?
...see also the
document using jss.
... is there any sample code and
documentation?
...And 2 more matches
NSS 3.12.4 release notes
you can check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_4_rtm nss see the
documentation section for the build instructions.
...currently nss 3.12.4 is in the "review pending" state in the fips 140-2 pre-validation list at http://csrc.nist.gov/groups/stm/cmvp/
documents/140-1/140inprocess.pdf added crl distribution point support (see cert.h).
... cert_decodecrlissuingdistributionpoint cert_findcrlissuingdistpointexten the old
documentation of the expression matching syntax rules was incorrect, and the new corrected
documentation is as follows for public nssutil functions (see portreq.h): port_regexpvalid port_regexpsearch port_regexpcasesearch these functions will match a string with a shell expression.
...And 2 more matches
NSS 3.12.5 release_notes
you can check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_5_rtm nss see the
documentation section for the build instructions.
... additional
documentation in pk11pub.h: the caller of pk11_derencodepublickey should free the returned secitem with a secitem_freeitem(..., pr_true) call.
... bug 525056: timing attack against ssl3ext.c:ssl3_serverhandlesessionticketxtn() bug 526689: ssl3 & tls renegotiation vulnerability
documentation for a list of the primary nss
documentation pages on mozilla.org, see nss
documentation.
...And 2 more matches
NSS_3.12.3_release_notes.html
nss 3.12.3 release notes 2009-04-01 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.3 bugs fixed
documentation compatibility feedback introduction network security services (nss) 3.12.3 is a patch release for nss 3.12.
... see the
documentation section for the build instructions.
...see
documentation at this link.
...And 2 more matches
Network Security Services
if you're a developer and would like to contribute to nss, you might want to read the
documents highlevel overview of internal details of nss and getting started with nss.
...
documentation background information overview of nss provides a brief summary of nss and its capabilities.
... nss api guidelines explains how the libraries and code are organized, and guidelines for developing code (naming conventions, error handling, thread safety, etc.) nss technical notes links to nss technical notes, which provide latest information about new nss features and supplementary
documentation for advanced topics in programming with nss.
...And 2 more matches
Places Developer Guide
this
document is for extension and application developers who want to use the bookmarks and history apis in firefox 3.
... other bookmarks apis note: this
document covers the toolkit places services.
... if (type == ci.nsinavhistoryresultnode.result_type_uri) { var uri = childnode.uri; } else if (type == ci.nsinavhistoryresultnode.result_type_folder) { childnode.queryinterface(ci.nsinavhistorycontainerresultnode); childnode.containeropen = true; // now you can iterate over a subfolder's children } } ther available node types are
documented in the idl.
...And 2 more matches
nsIChannel
note: the content type can often be wrongly specified (for example wrong file extension, wrong mime type, wrong
document type stored on a server and so on.), and the caller most likely wants to verify with the actual data.
... this is also used as the ri of the
document resulting from the channel, unless the channel has the load_replace flag set.
... constant value description load_
document_uri 16 set (for example by the docshell) to indicate whether or not the channel corresponds to a
document uri.
...And 2 more matches
nsIDOMNode
dom/interfaces/core/nsidomnode.idlscriptable this interface is the primary datatype for the entire
document object model.
... it represents a single node in the
document tree.
... nodevalue domstring owner
document nsidom
document read only.
...And 2 more matches
nsIDOMXPathEvaluator
note: prior to gecko 1.9, you could call this method on
documents other than the one you planned to run the xpath against; starting with gecko 1.9, however, you must call it on the same
document.
...it is used to resolve prefixes within the xpath itself, so that they can be matched with the
document.
... null is common for html
documents or when no name space prefixes are used.
...And 2 more matches
nsIEditorSpellCheck
getnextmisspelledword() when interactively spell checking the
document, this will return the value of the next word that is misspelled.
...return value the next misspelled word in the
document.
...ignorewordalloccurrences() tells the spell checker to ignore all occurrences of the specified word when spell checking the
document.
...And 2 more matches
nsILocalFileMac
launchwithdoc() launch the application that this file points to with a
document.
...if no
document, use nsilocalfile::launch.
... opendocwithapp() open the
document that this file points to with the given application.
...And 2 more matches
nsIScriptableUnescapeHTML
implemented by: @mozilla.org/feed-unescapehtml;1 as a service: var scriptableunescapehtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml); method overview nsidom
documentfragment parsefragment(in astring fragment, in prbool isxml, in nsiuri baseuri, in nsidomelement element); astring unescape(in astring src); methods parsefragment() parses a string of html or xml source into a sanitized
documentfragment.
... nsidom
documentfragment parsefragment( in astring fragment, in prbool isxml, in nsiuri baseuri, in nsidomelement element ); parameters fragment a string of html or xml source to parse as a fragment.
... return value an nsidom
documentfragment of the element with the new text appended.
...And 2 more matches
Autoconfiguration in Thunderbird
author: ben bucksch please do not change this
document without consulting the author thunderbird 3.1 and later (and 3.0 to some degree) includes mail account autoconfiguration functionality.
... the configuration file description and definition the original project page on the mozilla wiki for background, design, implementation and project details this
document describes how autoconfiguration in thunderbird works, and what to do to allow mail servers to be autoconfigured.
...
documentroot /var/www/autoconfig/ servername autoconfig.hoster.com <directory /var/www/autoconfig> order allow,deny allow from all </directory> </virtualhost> place the configuration file at the url /mail/config-v1.1.xml on that host.
...And 2 more matches
Browser Console - Firefox Developer Tools
here is an example on how to clear the contents of the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.getbrowserconsole(); hud.jsterm.clearoutput(true); if you would like to access the content
document of the browser console this can be done with the hudservice.
... this example here makes it so that when you mouse over the "clear" button it will clear the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.getbrowserconsole(); var clearbtn = hud.chromewindow.
document.queryselector('.webconsole-clear-console-button'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically.
...try running this code in the browser console's command line (remember that to send multiple lines to the browser console, use shift+enter): var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.selectedtab); newtabbrowser.addeventlistener("load", function() { newtabbrowser.content
document.body.innerhtml = "<h1>this page has been eaten</h1>"; }, true); newtabbrowser.content
document.location.href = "https://mozilla.org/"; it adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.
...And 2 more matches
Basic usage of canvas - Web APIs
if this tag is not present, the rest of the
document would be considered the fallback content and wouldn't be displayed.
... var canvas =
document.getelementbyid('tutorial'); var ctx = canvas.getcontext('2d'); the first line in the script retrieves the node in the dom representing the <canvas> element by calling the
document.getelementbyid() method.
...our code snippet from above becomes something like this: var canvas =
document.getelementbyid('tutorial'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); // drawing code here } else { // canvas-unsupported code here } a skeleton template here is a minimalistic template, which we'll be using as a starting point for later examples.
...And 2 more matches
Transformations - Web APIs
function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); // draw a rectangle with default settings ctx.save(); // save the default state ctx.fillstyle = '#09f'; // make changes to the settings ctx.fillrect(15, 15, 120, 120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fillstyle = '#fff'; ...
... function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotliv...
... function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30, 100, 100); ctx.rotate((math.pi / 180) * 25); // grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(30, 30, 100, 100); ctx.restore(); // right rectangles, rotate from rectangle center // draw blue rect ctx.fills...
...And 2 more matches
ChildNode.after() - Web APIs
examples inserting an element var parent =
document.createelement("div"); var child =
document.createelement("p"); parent.appendchild(child); var span =
document.createelement("span"); child.after(span); console.log(parent.outerhtml); // "<div><p></p><span></span></div>" inserting text var parent =
document.createelement("div"); var child =
document.createelement("p"); parent.appendchild(child); child.after("text"); console.log(parent.outer...
...html); // "<div><p></p>text</div>" inserting an element and text var parent =
document.createelement("div"); var child =
document.createelement("p"); parent.appendchild(child); var span =
document.createelement("span"); child.after(span, "text"); console.log(parent.outerhtml); // "<div><p></p><span></span>text</div>" childnode.after() is unscopable the after() method is not scoped into the with statement.
...om/jserz/js_piece/blob/master/dom/childnode/after()/after().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('after')) { return; } object.defineproperty(item, 'after', { configurable: true, enumerable: true, writable: true, value: function after() { var argarr = array.prototype.slice.call(arguments), docfrag =
document.create
documentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appendchild(isnode ?
...And 2 more matches
Element: cut event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property oncut the event's default action is to copy the current selection (if any) to the system clipboard and remove it from the
document.
... note though that cancelling the default action will also prevent the
document from being updated.
... so an event handler which wants to emulate the default action for "cut" while modifying the clipboard must also manually remove the selection from the
document.
...And 2 more matches
Element.getBoundingClientRect() - Web APIs
if you need the bounding rectangle relative to the top-left corner of the
document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollx and window.scrolly) to get a bounding rectangle which is independent from the current scrolling position.
...scripts without access to these properties can use code like this: // for scrollx (((t =
document.
documentelement) || (t =
document.body.parentnode)) && typeof t.scrollleft == 'number' ?
... t :
document.body).scrollleft // for scrolly (((t =
document.
documentelement) || (t =
document.body.parentnode)) && typeof t.scrolltop == 'number' ?
...And 2 more matches
Element.tagName - Web APIs
for example, if the element is an <img>, its tagname property is "img" (for html
documents; it may be cased differently for xml/xhtml
documents).
...this string's capitalization depends on the
document type: for dom trees which represent html
documents, the returned tag name is always in the canonical upper-case form.
...if an xml
document includes a tag "<sometag>", then the tagname property's value is "sometag".
...And 2 more matches
Event.initEvent() - Web APIs
the event.initevent() method is used to initialize the value of an event created using
document.createevent().
... events initialized in this way must have been created with the
document.createevent() method.
...var event =
document.createevent('event'); // create a click event that bubbles up and // cannot be canceled event.initevent('click', true, false); // listen for the event.
...And 2 more matches
HTMLAnchorElement - Web APIs
htmlhyperlinkelementutils.href is a usvstring that is the result of parsing the href html attribute relative to the
document, containing a valid url of a linked resource.
... htmlelement.tabindex is a long containing the position of the element in the tabbing navigation order for the current
document.
...
document object model (dom) level 2 html specificationthe definition of 'htmlanchorelement' in that specification.
...And 2 more matches
HTMLAreaElement - Web APIs
htmlareaelement.rel is a domstring that reflects the rel html attribute, indicating relationships of the current
document to the linked resource.
... htmlareaelement.rellist read only returns a domtokenlist that reflects the rel html attribute, indicating relationships of the current
document to the linked resource, as a list of tokens.
...
document object model (dom) level 2 html specificationthe definition of 'htmlareaelement' in that specification.
...And 2 more matches
HTMLButtonElement - Web APIs
only one form-associated element in a
document can have this attribute specified.
... if the button is not a descendant of a form element, then the attribute can be the id of any form element in the same
document it is related to, or the null value if none matches.
...
document object model (dom) level 2 html specificationthe definition of 'htmlbuttonelement' in that specification.
...And 2 more matches
HTMLElement.dir - Web APIs
example var parg =
document.getelementbyid("para1"); parg.dir = "rtl"; // change the text direction on a paragraph identified as "para1" specifications specification status comment html living standardthe definition of 'dir' in that specification.
... living standard no change from
document object model (dom) level 2 html specification.
...
document object model (dom) level 2 html specificationthe definition of 'dir' in that specification.
...And 2 more matches
HTMLElement.title - Web APIs
syntax var str = element.title; element.title = str; example const link =
document.createelement('a'); link.innertext = 'grapes'; link.href = 'https://en.wikipedia.org/wiki/grape'; link.title = 'wikipedia page on grapes'; specifications specification status comment html living standardthe definition of 'title' in that specification.
... living standard no change from
document object model (dom) level 2 html specification.
...
document object model (dom) level 2 html specificationthe definition of 'title' in that specification.
...And 2 more matches
HTMLElement - Web APIs
eight="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from
documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
... event handlers most event handler properties, of the form onxyz, are defined on the
documentandelementeventhandlers, globaleventhandlers or toucheventhandlers interfaces and implemented by htmlelement.
... methods inherits methods from its parent, element, and implements those from
documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
...And 2 more matches
HTMLHtmlElement - Web APIs
the htmlhtmlelement interface serves as the root node for a given html
document.
... you can retrieve the htmlhtmlelement object for a given
document by reading the value of the
document.
documentelement property.
... htmlhtmlelement.version is a domstring representing the version of the html
document type definition (dtd) that governs this
document.
...And 2 more matches
HTMLIFrameElement.referrerPolicy - Web APIs
origin only send the origin of the
document as the referrer in all cases.
... the
document https://example.com/page.html will send the referrer https://example.com/.
... origin-when-cross-origin send a full url when performing a same-origin request, but only send the origin of the
document for other cases.
...And 2 more matches
HTMLLinkElement - Web APIs
the htmllinkelement interface represents reference information for external resources and the relationship of those resources to a
document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by htmlanchorelement).
... htmllinkelement.rel is a domstring representing the forward relationship of the linked resource from the
document to the resource.
... htmllinkelement.rev is a domstring representing the reverse relationship of the linked resource from the resource to the
document.
...And 2 more matches
HTMLObjectElement - Web APIs
htmlobjectelement.content
document read only returns a
document representing the active
document of the object element's nested browsing context, if any; otherwise null.
... htmlobjectelement.tabindex is a long representing the position of the element in the tabbing navigation order for the current
document.
...
document object model (dom) level 2 html specificationthe definition of 'htmlobjectelement' in that specification.
...And 2 more matches
HTMLElement.focus() - Web APIs
this object may contain the following property: preventscroll optional a boolean value indicating whether or not the browser should scroll the
document to bring the newly-focused element into view.
... examples focus on a text field javascript focusmethod = function getfocus() {
document.getelementbyid("mytextfield").focus(); } html <input type="text" id="mytextfield" value="text field."> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the text field!</button> result focus on a button javascript focusmethod = function getfocus() {
document.getelementbyid("mybutton").focus(); } html <button type="button" id="mybutton">click me!</button> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the button!</button> result fo...
...cus with focusoption javascript focusscrollmethod = function getfocus() {
document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() {
document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="focusnoscrollmethod()">click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" style="margin-top: 500px;">click me!</button> </div> result specification specification status comment html living standardthe definition of 'focus' in that specif...
...And 2 more matches
HTMLOrForeignElement.tabIndex - Web APIs
syntax element.tabindex = index; var index = element.tabindex; value index is an integer example const b1 =
document.getelementbyid('button1'); b1.tabindex = 1; specifications specification status comment html living standardthe definition of 'tabindex' in that specification.
... living standard no change from
document object model (dom) level 2 html specification.
...
document object model (dom) level 2 html specificationthe definition of 'tabindex' in that specification.
...And 2 more matches
HTMLSelectElement.add() - Web APIs
examples creating elements from scratch var sel =
document.createelement("select"); var opt1 =
document.createelement("option"); var opt2 =
document.createelement("option"); opt1.value = "1"; opt1.text = "option: value 1"; opt2.value = "2"; opt2.text = "option: value 2"; sel.add(opt1, null); sel.add(opt2, null); /* produces the following, conceptually: <select> <option value="1">option: value 1</option> <option value="2">option: value 2<...
... append to an existing collection var sel =
document.getelementbyid("existinglist"); var opt =
document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, null); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> */ the before parameter is optional.
... inserting to an existing collection var sel =
document.getelementbyid("existinglist"); var opt =
document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, sel.options[1]); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> <option value="2">option: value 2</option> </select> */ specifications specification status comment html living standardthe definition of 'htmlselectelement.add()' in that spec...
...And 2 more matches
HTMLSelectElement - Web APIs
only one form-associated element in a
document can have this attribute specified.
... example get information about the selected option /* assuming we have the following html <select id='s'> <option>first</option> <option selected>second</option> <option>third</option> </select> */ var select =
document.getelementbyid('s'); // return the index of the selected option console.log(select.selectedindex); // 1 // return the value of the selected option console.log(select.options[select.selectedindex].value) // second a better way to track changes to the user's selection is to watch for the change event to occur on the <select>.
...see the example provided in the
documentation for the change event for details.
...And 2 more matches
KeyboardEvent.initKeyEvent() - Web APIs
the keyboardevent.initkeyevent() method is used to initialize the value of an event created using
document.createevent("keyboardevent").
... events initialized in this way must have been created with the
document.createevent("keyboardevent") method.
... this method is based on early drafts of
document object model (dom) level 2 events specification and is implemented in gecko-based browsers; other browsers implemented keyboardevent.initkeyboardevent based on early drafts of
document object model (dom) level 3 events specification.
...And 2 more matches
MutationEvent - Web APIs
the mutationevent interface provides event properties that are specific to modifications to the
document object model (dom) hierarchy and nodes.
... performance adding dom mutation listeners to a
document profoundly degrades the performance of further dom modifications to that
document (making them 1.5 - 7 times slower!).
... the performance effect is limited to the
documents that have the mutation event listeners.
...And 2 more matches
Node.childNodes - Web APIs
(for example, to get the name of the first childnode: elementnodereference.childnodes[1].nodename.) the
document object itself has 2 children: the doctype declaration and the root element, typically referred to as
documentelement.
... (in (x)html
documents this is the html element.) childnodes includes all child nodes—including non-element nodes like text and comment nodes.
... living standard no change
document object model (dom) level 3 core specificationthe definition of 'node.childnodes' in that specification.
...And 2 more matches
Using Pointer Events - Web APIs
function startup() { var el =
document.getelementsbytagname("canvas")[0]; el.addeventlistener("pointerdown", handlestart, false); el.addeventlistener("pointerup", handleend, false); el.addeventlistener("pointercancel", handlecancel, false); el.addeventlistener("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 t...
... function handlestart(evt) { log("pointerdown."); var el =
document.getelementsbytagname("canvas")[0]; var ctx = el.getcontext("2d"); log("pointerdown: id = " + evt.pointerid); ongoingtouches.push(copytouch(evt)); var color = colorfortouch(evt); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey, 4, 0, 2 * math.pi, false); // a circle at the start ctx.arc(evt.clientx, evt.clienty, 4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle = color; ctx.fill(); } after storing some of the event's processing in t...
... function handlemove(evt) { var el =
document.getelementsbytagname("canvas")[0]; var ctx = el.getcontext("2d"); var color = colorfortouch(evt); var idx = ongoingtouchindexbyid(evt.pointerid); log("continuing touch: idx = " + idx); if (idx >= 0) { ctx.beginpath(); log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " + ongoingtouches[idx].pagey + ");"); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); ...
...And 2 more matches
Range.cloneContents() - Web APIs
the range.clonecontents() returns a
documentfragment copying the objects of type node included in the range.
...html id attributes are also cloned, which can lead to an invalid
document through cloning.
... partially selected nodes include the parent tags necessary to make the
document fragment valid.
...And 2 more matches
Range.setStart() - Web APIs
setting the start point below (lower in the
document) the end point will result in a collapsed range with the start and end points both set to the specified start position.
...main st.<br> dodge city, ks<br> 67801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address =
document.getelementbyid('address'); const log =
document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li =
document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city const startoffset = 2; // start at third node: 101 e.
...const endoffset = 5; // end at fifth node: dodge city, ks const range =
document.createrange(); range.setstart(address, startoffset); range.setend(address, endoffset); const mark =
document.createelement('mark'); range.surroundcontents(mark); result get characters from a text node this example uses the range.setstart() and range.setend() methods to define the contents of a range.
...And 2 more matches
SVGElement - Web APIs
t="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from:
documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
... methods this interface has no methods, but inherits methods from:
documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance events listen to these events using addeventlistener() or by assigning an event listener to the equivalent on...
... resize fired when an svg
document is being resized.
...And 2 more matches
ScreenOrientation - Web APIs
the screenorientation interface of the the screen orientation api provides information about the current orientation of the
document.
... properties screenorientation.typeread only returns the
document's current orientation type, one of "portrait-primary", "portrait-secondary", "landscape-primary", or "landscape-secondary".
... screenorientation.angleread only returns the
document's current orientation angle.
...And 2 more matches
Using Service Workers - Web APIs
a
document starts life with or without a service worker and maintains that for its lifetime.
... so
documents will have to be reloaded to actually be controlled.
... when we come to call the imgload() function, we call it with the url to the image we want to load, as we might expect, but the rest of the code is a little different: let body =
document.queryselector('body'); let myimage = new image(); imgload('mylittlevader.jpg').then((response) => { var imageurl = window.url.createobjecturl(response); myimage.src = imageurl; body.appendchild(myimage); }, (error) => { console.log(error); }); on to the end of the function call, we chain the promise then() method, which contains two functions — the first one is executed when the promi...
...And 2 more matches
UIEvent.pageY - Web APIs
the uievent.pagey read-only property returns the vertical coordinate of the event relative to the whole
document.
... syntax var pagey = event.pagey; pagey is an integer value in pixels for the y-coordinate of the mouse pointer, relative to the whole
document, when the mouse event fired.
... example <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form =
document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; paddi...
...And 2 more matches
Web Animations API - Web APIs
this interface exists to define timeline features (inherited by
documenttimeline and future timeline objects) and is not itself accessed by developers.
...
documenttimeline represents animation timelines, including the default
document timeline (accessed using the
document.timeline property).
... extensions to other interfaces the web animations api adds some new features to
document and element.
...And 2 more matches
Using the Web Storage API - Web APIs
so, for example, initially calling localstorage on a
document will return a storage object; calling sessionstorage on a
document will return a different storage object.
...for example: function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image');
document.getelementbyid('bgcolor').value = currentcolor;
document.getelementbyid('font').value = currentfont;
document.getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } here, the first three lines grab the values from local storage.
... function populatestorage() { localstorage.setitem('bgcolor',
document.getelementbyid('bgcolor').value); localstorage.setitem('font',
document.getelementbyid('font').value); localstorage.setitem('image',
document.getelementbyid('image').value); setstyles(); } the populatestorage() function sets three items in local storage — the background color, font, and image path.
...And 2 more matches
Window.matchMedia() - Web APIs
the window interface's matchmedia() method returns a new mediaquerylist 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.
... usage notes you can use the returned media query to perform both instantanteous and event-driven checks to see if the
document matches the media query.
... to perform a one-time, instantaneous check to see if the
document matches the media query, look at the value of the matches property, which will be true if the
document meets the media query's requirements.
...And 2 more matches
Window: resize event - Web APIs
the resize event fires when the
document view (window) has been resized.
...returned by
document.defaultview).
...see resize observer to read the draft
document, and github issues to read the on-going discussions.
...And 2 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>setinterval/clearinterval example</title> <script> var nintervid; function changecolor() { nintervid = setinterval(flashtext, 1000); } function flashtext() { var oelem =
document.getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ?
... nchild < this.parts.length; nchild++) { onode.removechild(this.parts[nchild]); this.parts[nchild] = new sheet(this.parts[nchild]); } } var nintervid, ocurrent = null, btyping = false, bstart = true, nidx = 0, spart = "", asheets = [], amap = []; this.rate = nrate || 100; this.play = function () { if (btyping) { return; } if (bstart) { var aitems =
document.queryselectorall(sselector); if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* uncomment the following line if you have previously hidden your elements via css: */ // aitems[nitem].style.visibility = "visible"; } bstart = false; } nintervid = setinterval(t...
...|*| |*| /docs/web/api/window.setinterval |*| https://developer.mozilla.org/user:fusionchess |*| |*| syntax: |*| var timeoutid = window.settimeout(func, delay[, arg1, arg2, ...]); |*| var timeoutid = window.settimeout(code, delay); |*| var intervalid = window.setinterval(func, delay[, arg1, arg2, ...]); |*| var intervalid = window.setinterval(code, delay); |*| \*/ if (
document.all && !window.settimeout.ispolyfill) { var __nativest__ = window.settimeout; window.settimeout = function (vcallback, ndelay /*, argumenttopass1, argumenttopass2, etc.
...And 2 more matches
XMLHttpRequest.responseXML - Web APIs
the xmlhttprequest.responsexml read-only property returns a
document containing the html or xml retrieved by the request; or null if the request was unsuccessful, has not yet been sent, or if the data can't be parsed as xml or html.
...if the responsetype is set to "
document" and the request was made asynchronously, instead the response is parsed as "text/html".
... syntax var data = xmlhttprequest.responsexml; value a
document from parsing the xml or html received using xmlhttprequest, or null if no data was received or if the data is not xml/html.
...And 2 more matches
XMLSerializer - Web APIs
examples serializing xml into a string the first, basic, example just serializes an entire
document into a string containing xml.
... var s = new xmlserializer(); var d =
document; var str = s.serializetostring(d); savexml(str); this involves creating a new xmlserializer object, then passing the
document to be serialized into serializetostring(), which returns the xml equivalent of the
document.
... inserting nodes into a dom based on xml this example uses the element.insertadjacenthtml() method to insert a new dom node into the body of the
document, based on xml created by serializing an element object.
...And 2 more matches
Introduction - Web APIs
css is a simple way to apply style rules to a web
document.
... these style rules define how the
document (the content) should be laid out.
...xslt takes an xml
document (the content) and creates a brand new
document based on the rules in the xsl stylesheet.
...And 2 more matches
XSL Transformations in Mozilla FAQ - Web APIs
what about
document.write?
... just like for xhtml,
document.write is not supported during xslt transformations.
... when printing a
document, mozilla tries to render the page on paper as closely to what you see as possible.
...And 2 more matches
ARIA: Complementary role - Accessibility
landmarks can be used by assistive technology to quickly identify and navigate to large sections of the
document.
... content listed within a container with the complementary landmark role should make sense if separated from the main content of the
document.
... <li><a href="#">the time has come to finally decide what we should be calling these foods</a></li> <li><a href="#">17 really good posts we saw on tumblr this week</a></li> <li><a href="#">10 parent hacks we know work because we tried them</a></li> </ul> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the
document.
...And 2 more matches
Keyboard-navigable JavaScript widgets - Accessibility
this
document describes techniques to make javascript widgets accessible with the keyboard.
...tabindex="0") yes in tab order relative to element's position in
document (note that interactive elements like <a> have this behavior by default, they don't need the attribute).
...there is no standard dom interface to get the current
document focus.
...And 2 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
for the purposes of this
document, we'll use terminlogy as it is defined in the w3c, in the css color module level 3 when working with color, it's important to know which "color space" you are working in, as different color spaces map to different measurement systems.
...because of the current domination of the rgb color space in measuring color output, most calculations in this
document are presumed to be in the rgb color space, and very specifically, in the srgb color space.
... the srgb color space the mdn
document, <color> notes "the css data type represents a color in the srgb color space." color has many ways of being defined, including rgb, rgb decimal, rgb percent, hsl, cmyk among others.
...And 2 more matches
Keyboard - Accessibility
note: one important exception to this rule is if the element has role="
document" applied to it, inside an interactive context (such as role="application").
... in such a case, focusing the nested
document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").
...a value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the html
document.
...And 2 more matches
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
in this guide, we look at how flow layout behaves when used with different
document writing modes.
... this is not a comprehensive guide to the use of writing modes in css, the aim here is to
document the areas where flow layout interacts with writing modes in possibly unanticipated ways.
... the external resources and see also sections of this
document link to more writing modes resources.
...And 2 more matches
Introducing the CSS Cascade - CSS: Cascading Style Sheets
while the declarations contained in most at-rules — such as those in @media, @
document, or @supports — participate in the cascade, declarations contained in @keyframes don't.
... user-agent stylesheets the browser has a basic style sheet that gives a default style to any
document.
...the author of the page defines the styles for the
document using one or more stylesheets, which define the look and feel of the website — its theme.
...And 2 more matches
Cross-browser audio basics - Developer guides
</audio> you can grab the <audio> element like this: var myaudio =
document.getelementbyid('my-audio'); alternatively, you can create a new element.
... here's an example of creating an <audio> element, setting the media to play, playing and pausing, and then playing from 5 seconds into the audio: var myaudio =
document.createelement('audio'); if (myaudio.canplaytype('audio/mpeg')) { myaudio.setattribute('src','audiofile.mp3'); } if (myaudio.canplaytype('audio/ogg')) { myaudio.setattribute('src','audiofile.ogg'); } alert('play'); myaudio.play(); alert('stop'); myaudio.pause(); alert('play from 5 seconds in'); myaudio.currenttime = 5; myaudio.play(); let's explore the available properties and methods in more detail.
...="audiofile.ogg" type="audio/ogg"> <!-- place fallback here as <audio> supporting browsers will ignore it --> <p>download<a href="audiofile.mp3">audiofile.mp3</a></p> </audio> <!-- custom play and pause buttons --> <button id="play">play</button> <button id="pause">pause</button> next, we attach some functionality to the player using javascript: window.onload = function(){ var myaudio =
document.getelementbyid('my-audio'); var play =
document.getelementbyid('play'); var pause =
document.getelementbyid('pause'); // associate functions with the 'onclick' events play.onclick = playaudio; pause.onclick = pauseaudio; function playaudio() { myaudio.play(); } function pauseaudio() { myaudio.pause(); } } media loading events above we have shown how you can create ...
...And 2 more matches
Audio and video manipulation - Developer guides
var processor = { timercallback: function() { if (this.video.paused || this.video.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.addeventlistener("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.w...
... html <video id="my-video" controls src="https://udn.realityripple.com/samples/6f/08625b424a.m4v"> </video> javascript var myvideo =
document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edi...
...t" /> <input id="reset" type="button" 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.addeventlistener('click', function() { textarea.value = code; setplaybackrate(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setplaybackrate); window.addeventlistener('load', setplaybackrate); note: try the playbackrate example live.
...And 2 more matches
Creating and triggering events - Developer guides
the following shows an example with
document.createevent(): // create the event.
... const event =
document.createevent('event'); // define that the event name is 'build'.
...elem.dispatchevent(event); event bubbling it is often desirable to trigger an event from a child element, and have an ancestor catch it; optionally, with data: <form> <textarea></textarea> </form> const form =
document.queryselector('form'); const textarea =
document.queryselector('textarea'); // create a new event, allow bubbling, and provide any data you want to pass to the "detail" property const eventawesome = new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } }); // the form element listens for the custom "awesome" event and then consoles the output of the passed text(...
...And 2 more matches
DOM onevent handlers - Developer guides
you can specify an on<…> event handler for a particular event (such as click) for a given object in different ways: adding an html attribute named on<eventtype>: <button onclick="handleclick()">, or by setting the corresponding property from javascript:
document.queryselector("button").onclick = function(event) { … }.
... non-element objects event handlers can also be set with properties on non-element objects that generate events, like window,
document, xmlhttprequest, and others.
... html given this html
document: <p>demonstrating quirks of <code>on<em>event</em></code> html attributes on <a onclick="log('click!')">these three words</a>.
...And 2 more matches
Mutation events - Developer guides
performance adding dom mutation listeners to a
document profoundly degrades the performance of further dom modifications to that
document (making them 1.5 - 7 times slower!).
... the performance effect is limited to the
documents that have the mutation event listeners.
... dottoro
documents browser support for mutation events.
...And 2 more matches
<hgroup> - HTML: Hypertext Markup Language
the html <hgroup> element represents a multi-level heading for a section of a
document.
... the <hgroup> element allows the primary heading for a
document section to be grouped with any secondary headings—such as subheadings or alternative titles—to form a multi-level heading.
... a rendered outline in with a colon character and space (“: ”) or other such punctuation after the primary heading and before the first secondary heading (and with the same or similar punctuation before any other secondary headings an <hgroup> might be shown in a rendered outline in with the primary heading followed by parentheses around the secondary heading(s) consider the following html
document: <!doctype html> <title>html standard</title> <body> <hgroup id="
document-title"> <h1>html</h1> <h2>living standard — last updated 12 august 2016</h2> </hgroup> <p>some intro to the
document.</p> <h2>table of contents</h2> <ol id=toc>...</ol> <h2>first section</h2> <p>some intro to the first section.</p> </body> a rendered outline for that
document might look like the fo...
...And 2 more matches
<input type="date"> - HTML: Hypertext Markup Language
for example: var datecontrol =
document.queryselector('input[type="date"]'); datecontrol.value = '2017-06-01'; console.log(datecontrol.value); // prints "2017-06-01" console.log(datecontrol.valueasnumber); // prints 1496275200000, a unix timestamp this code finds the first <input> element whose type is date, and sets its value to 2017-06-01 (june 1st, 2017).
... // define variables var nativepicker =
document.queryselector('.nativedatepicker'); var fallbackpicker =
document.queryselector('.fallbackdatepicker'); var fallbacklabel =
document.queryselector('.fallbacklabel'); var yearselect =
document.queryselector('#year'); var monthselect =
document.queryselector('#month'); var dayselect =
document.queryselector('#day'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.s...
...tyle.display = 'none'; // test whether a new date input falls back to a text input or not var test =
document.createelement('input'); try { test.type = 'date'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the days and years dynamically // (the months are always the same, therefore hardcoded) populatedays(monthselect.value); populateyears(); } function populatedays(month) { // delete the current set of <option> elements out of the // day <select>, ready for the next set to be injected while(dayselect.firstchild){ ...
...And 2 more matches
Global attributes - HTML: Hypertext Markup Language
that means that any non-standard elements must still permit these attributes, even though using those elements means that the
document is no longer html5-compliant.
...classes allows css and javascript to select and access specific elements via the class selectors or functions like the method
document.getelementsbyclassname().
... id defines a unique identifier (id) which must be unique in the whole
document.
...And 2 more matches
HTML: Hypertext Markup Language
an html element is set off from other text in a
document by "tags", which consist of the element name surrounded by "<" and ">".
...html
documents are connected to each other with links.
...this means that any non-standard elements must still permit these attributes, even though those elements make the
document html5-noncompliant.
...And 2 more matches
Identifying resources on the Web - HTTP
the target of an http request is called a "resource", whose nature isn't defined further; it can be a
document, a photo, or anything else.
...a more complex example might look like this: http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#somewhereinthe
document urns a uniform resource name (urn) is a uri that identifies a resource by name in a particular namespace.
... fragment #somewhereinthe
document is an anchor to another part of the resource itself.
...And 2 more matches
Content-Language - HTTP
for example, if "content-language: de-de" is set, it says that the
document is intended for german language speakers (however, it doesn't indicate the
document is written in german.
...if you want to indicate which language the
document is written in, use the lang attribute instead).
...multiple language tags are also possible, as well as applying the content-language header to various media types and not only to textual
documents.
...And 2 more matches
Content-Security-Policy-Report-Only - HTTP
these violation reports consist of json
documents sent via an http post request to the specified uri.
...if the blocked uri is from a different origin than the
document-uri, then the blocked uri is truncated to contain just the scheme, host, and port.
...
document-uri the uri of the
document in which the violation occurred.
...And 2 more matches
Feature-Policy: accelerometer - HTTP
the http feature-policy header accelerometer directive controls whether the current
document is allowed to gather information about the acceleration of the device through the accelerometer interface.
... syntax feature-policy: accelerometer <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: ambient-light-sensor - HTTP
the http feature-policy header ambient-light-sensor directive controls whether the current
document is allowed to gather information about the amount of light in the environment around the device through the ambientlightsensor interface.
... syntax feature-policy: ambient-light-sensor <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: autoplay - HTTP
the http feature-policy header autoplay directive controls whether the current
document is allowed to autoplay media requested through the htmlmediaelement interface.
... syntax feature-policy: autoplay <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: battery - HTTP
the http feature-policy header battery directive controls whether the current
document is allowed to gather information about the acceleration of the device through the batterymanager interface obtained via navigator.getbattery().
... syntax feature-policy: battery <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: camera - HTTP
the http feature-policy header camera directive controls whether the current
document is allowed to use video input devices.
... syntax feature-policy: camera <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: encrypted-media - HTTP
the http feature-policy header encrypted-media directive controls whether the current
document is allowed to use the encrypted media extensions api (eme).
... syntax feature-policy: encrypted-media <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: gyroscope - HTTP
the http feature-policy header gyroscope directive controls whether the current
document is allowed to gather information about the orientation of the device through the gyroscope interface.
... syntax feature-policy: gyroscope <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: layout-animations - HTTP
the http feature-policy header layout-animations directive controls whether the current
document is allowed to show layout animations.
... syntax feature-policy: layout-animations <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: legacy-image-formats - HTTP
the http feature-policy header legacy-image-formats directive controls whether the current
document is allowed to display images in legacy formats.
... syntax feature-policy: legacy-image-formats <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: magnetometer - HTTP
the http feature-policy header magnetometer directive controls whether the current
document is allowed to gather information about the orientation of the device through the magnetometer interface.
... syntax feature-policy: magnetometer <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: microphone - HTTP
the http feature-policy header microphone directive controls whether the current
document is allowed to use audio input devices.
... syntax feature-policy: microphone <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: midi - HTTP
the http feature-policy header midi directive controls whether the current
document is allowed to use the web midi api.
... syntax feature-policy: midi <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: oversized-images - HTTP
the http feature-policy header oversized-images directive controls whether the current
document is allowed to download and display large images.
... syntax feature-policy: oversized-images <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: payment - HTTP
the http feature-policy header field's payment directive controls whether the current
document is allowed to use the payment request api.
... syntax feature-policy: payment <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: picture-in-picture - HTTP
the http feature-policy header picture-in-picture directive controls whether the current
document is allowed to play a video in a picture-in-picture mode via the corresponding api.
... syntax feature-policy: picture-in-picture <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: publickey-credentials-get - HTTP
the http feature-policy header publickey-credentials-get directive controls whether the current
document is allowed to access web authentcation api to create new public-key credentials, i.e, via navigator.credentials.get({publickey: ..., ...}).
... syntax feature-policy: publickey-credentials-get <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: screen-wake-lock - HTTP
the http feature-policy header screen-wake-lock directive controls whether the current
document is allowed to use screen wake lock api to indicate that device should not dim or turn off the screen.
... syntax feature-policy: screen-wake-lock <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: sync-xhr - HTTP
the http feature-policy header sync-xhr directive controls whether the current
document is allowed to make synchronous xmlhttprequest requests.
... syntax feature-policy: sync-xhr <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: unoptimized-images - HTTP
the http feature-policy header unoptimized-images directive controls whether the current
document is allowed to download and display unoptimized images.
... syntax feature-policy: unoptimized-images <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: unsized-media - HTTP
the http feature-policy header unsized-media directive controls whether the current
document is allowed to change the size of media elements after the initial layout is complete.
... syntax feature-policy: unsized-media <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: usb - HTTP
the http feature-policy header usb directive controls whether the current
document is allowed to use the webusb api.
... syntax feature-policy: usb <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: vibrate - HTTP
the http feature-policy header vibrate directive controls whether the current
document is allowed to trigger device vibrations via navigator.vibrate() method of vibration api.
... syntax feature-policy: vibrate <allowlist>; <vibrate> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: wake-lock - HTTP
the http feature-policy header wake-lock directive controls whether the current
document is allowed to use wake lock api to indicate that device should not enter power-saving mode.
... syntax feature-policy: wake-lock <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
web-share - HTTP
the http feature-policy header web-share directive controls controls whether the current
document is allowed to use the navigator.share() of web share api to share text, links, images, and other content to arbitrary destiations of user's choice.
... syntax feature-policy: web-share <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Feature-Policy: xr-spatial-tracking - HTTP
the http feature-policy header xr-spatial-tracking directive controls whether the current
document is allowed to use the webxr device api.
... syntax feature-policy: xr-spatial-tracking <allowlist>; <allowlist> an allowlist 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.
... 'self': the feature will be allowed in this
document, and in all nested browsing contexts (iframes) in the same origin.
...And 2 more matches
Regular expression syntax cheatsheet - JavaScript
character classes if you are looking to contribute to this
document, please also edit the original article characters meaning .
... assertions if you are looking to contribute to this
document, please also edit the original article boundary-type assertions characters meaning ^ matches the beginning of input.
... groups and ranges if you are looking to contribute to this
document, please also edit the original article characters meaning x|y matches either "x" or "y".
...And 2 more matches
Web Performance
optimizing the critical render path improves render performance.the critical rendering path includes the
document object model (dom), css object model (cssom), render tree and layout.css and javascript animation performancebrowsers are able to optimize rendering flows.
... navigation and resource timingsnavigation timings are metrics measuring a browser's
document navigation events.
...in the context of open web apps, this
document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.performance monitoring: rum vs synthetic monitoringsynthetic monitoring and real user monitoring (rum) are two approaches for monitoring and providing insight into web performance.
...And 2 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
you may specify svg in styles either within the same
document or an external style sheet.
... note: references to svg in external files must be to the same origin as the referencing
document.
... example: masking for example, you can make a gradient mask for html content using svg and css code similar to the following, inside your html
document: <svg height="0"> <mask id="mask-1"> <lineargradient id="gradient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </lineargradient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> </mask> </svg> .target { mask: url(#mask-1); } p { wid...
...And 2 more matches
externalResourcesRequired - SVG: Scalable Vector Graphics
the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current
document are required for proper rendering of the given container or graphics element.
... usage notes value false | true default value false animatable no true this value indicates that resources external to the current
document are required.
... if an external resource is not available, progressive rendering is suspended, the
document's svgload event is not fired and the animation timeline does not begin until that resource and all other required resources become available, have been parsed and are ready to be rendered.
...And 2 more matches
<svg> - SVG: Scalable Vector Graphics
it is used as the outermost element of svg
documents, but it can also be used to embed an svg fragment inside an svg or html
document.
... note: the xmlns attribute is only required on the outermost svg element of svg
documents.
... it is unnecessary for inner svg elements or inside html
documents.
...And 2 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
telement and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778654) svgelement.tabindex implemented (bug 778654)
document.activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 999964, bug 1019326) allow leading and trailing whitespace in <length>, <angle>, <number> and <integer> implementation status u...
...raphicselement.getctm() on the outermost element implementation status unknown animval attribute alias of baseval implementation status unknown dataset attribute for svgelement implementation status unknown moved pathlength attribute and gettotallength() and getpointatlength() methods from svgpathelement to svggeometryelement implemented (bug 1239100)
document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire do...
...nknown 0 0 as default value of transform-origin except root <svg> and <svg> children of <foreign> implementation status unknown use of white-space instead of deprecated xml:space attribute in ua style sheet implementation status unknown @font-face, ::first-letter and ::first-line on <text> implementation status unknown svg and html style sheets in html
document with inline svg applying to whole
document content implementation status unknown presentation attributes on any svg namespaced element implementation status unknown display behavior of <style> defined via ua style sheet implementation status unknown !important user agent style rules controlling never-rendered elements implementation status unknown :...
...And 2 more matches
SVG and CSS - SVG: Scalable Vector Graphics
example make a new svg
document as a plain text file, doc8.svg.
...ed via <use> elements, supported by some older browsers */ #inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1; } #inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; } open the
document in your svg-enabled browser.
... result notes about this demonstration: the svg
document links the stylesheet in the usual way.
...And 2 more matches
Using shadow DOM - Web Components
high-level view this article assumes you are already familiar with the concept of the dom (
document object model) — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup
document (usually an html
document in the case of web
documents).
... if you are attaching a shadow dom to a custom element as part of its constructor (by far the most useful application of the shadow dom), you would use something like this: let shadow = this.attachshadow({mode: 'open'}); when you've attached a shadow dom to an element, manipulating it is a matter of just using the same dom apis as you use for the regular dom manipulation: let para =
document.createelement('p'); shadow.appendchild(para); // etc.
... creating the shadow root we first attach a shadow root to the custom element: // create a shadow root let shadow = this.attachshadow({mode: 'open'}); creating the shadow dom structure next, we use some dom manipulation to create the element's internal shadow dom structure: // create spans let wrapper =
document.createelement('span'); wrapper.setattribute('class', 'wrapper'); let icon =
document.createelement('span'); icon.setattribute('class', 'icon'); icon.setattribute('tabindex', 0); let info =
document.createelement('span'); info.setattribute('class', 'info'); // take attribute content and put it inside the info span let text = this.getattribute('data-text'); info.textcontent = text; // insert icon...
...And 2 more matches
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
namespace declaration a pseudo-attribute required to identify the
document as an xslt stylesheet.
... optional attributes exclude-result-prefixes specifies any namespace used in this
document that should not be sent to the output
document.
... extension-element-prefixes specifies a space-separated list of any namespace prefixes for extension elements in this
document.
...And 2 more matches
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
once the transformation is complete, the result is appended to the
document, as shown in this example.
... figure 7: sorting based on div contentview example // xhtml fragment: <div id="example"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> // javascript var xslref; var xslloaded = false; var xsltprocessor = new xsltprocessor(); var mydom; var xmlref =
document.implementation.create
document("", "", null); function sort() { if (!xslloaded){ p = new xmlhttprequest(); p.open("get", "example2.xsl", false); p.send(null); xslref = p.responsexml; xsltprocessor.importstylesheet(xslref); xslloaded = true; } // create a new xml
document in memory xmlref =
document.implementation.create
document("", "", null); // we want to move a part of the dom from an html...
...
document to an xml
document.
...And 2 more matches
Compiling an Existing C Module to WebAssembly - WebAssembly
the source for the webp codec is written in c and available on github as well as some extensive api
documentation.
...you can find more in the emscripten
documentation.
...luckily, the canvas api has canvasrenderingcontext2d.getimagedata — that gives you an uint8clampedarray containing the image data in rgba: async function loadimage(src) { // load image const imgblob = await fetch(src).then(resp => resp.blob()); const img = await createimagebitmap(imgblob); // make canvas same size as image const canvas =
document.createelement('canvas'); canvas.width = img.width; canvas.height = img.height; // draw image onto canvas const ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); return ctx.getimagedata(0, 0, img.width, img.height); } now it's "only" a matter of copying the data from javascript into wasm.
...And 2 more matches
2015 MDN Fellowship Program - Archive of obsolete content
to support our efforts, the fellow will review various technical specifications to identify gaps between the
documentation and current situation and refine existing tests to adapt to this cross-browser test harness.
... activities and deliverables identify gaps between existing
documentation and current development environments.
...fellows are responsible for obtaining their own visas if any are required (mozilla will provide reasonable supporting
documentation).
...the fellow is responsible for any related visas (mozilla can provide any necessary supporting
documentation).
Communicating using "port" - Archive of obsolete content
when it receives this message, the script logs the first paragraph of the
document and then calls removelistener() to stop listening.
... function getfirstparagraph() { var paras =
document.getelementsbytagname('p'); console.log(paras[0].textcontent); self.port.removelistener("get-first-para", getfirstparagraph); } self.port.on("get-first-para", getfirstparagraph); the result is that the paragraph is only logged the first time the button is clicked.
... this example rewrites the "listener.js" content script in the port.removelistener() example so that it uses once(): function getfirstparagraph() { var paras =
document.getelementsbytagname('p'); console.log(paras[0].textcontent); } self.port.once("get-first-para", getfirstparagraph); json-serializable values the payload for an message can be any json-serializable value.
... for example, to include an array of strings in the payload: var pagemodscript = "self.port.emit('loaded'," + " [" + "
document.location.tostring()," + "
document.title" + " ]" + ");" var pagemod = require('page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('loaded', function(pageinfo) { console.log(pageinfo[0]); console.log(pageinfo[1]); }); } }); ...
indexed-db - Archive of obsolete content
the api exposed by indexed-db is almost identical to the dom indexeddb api, so we haven't repeated its
documentation here, but refer you to the indexeddb api
documentation for all the details.
...see the idbfactory
documentation.
...see the idbkeyrange
documentation.
...see the domexception
documentation.
private-browsing - Archive of obsolete content
e tabs module will not list any tabs that belong to private browser windows, and the add-on won't receive any events for such tabs any ui components will not be displayed in private browser windows any menus or menu items created using the context-menu will not be shown in context menus that belong to private browser windows the page-mod module will not attach content scripts to
documents belonging to private browser windows any panel objects will not be shown if the active window is a private browser window the selection module will not include any selections made in private browser windows add-ons that have opted in will see private windows, so they will need to use the private-browsing module to check whether objects are private, so as to avoid storing data der...
...it returns true only if the object is: a private window, or a tab belonging to a private window, or a worker that's associated with a
document hosted in a private window any window, tab, or worker if the browser has been configured to never remember history (options->privacy->history) add-ons can use this api to decide whether or not to store user data.
...in the handler for the page-mod's attach event, it passes the worker into isprivate(): var pagemod = require("sdk/page-mod"); var privatebrowsing = require("sdk/private-browsing"); var loggingscript = "self.port.on('log-content', function() {" + " console.log(
document.body.innerhtml);" + "});"; function logpublicpagecontent(worker) { if (privatebrowsing.isprivate(worker)) { console.log("private window, doing nothing"); } else { worker.port.emit("log-content"); } } pagemod.pagemod({ include: "*", contentscript: loggingscript, onattach: logpublicpagecontent }); tracking private-browsing exit sometimes it can be usefu...
...it takes an object as an argument, and returns true only if the object is: a private browserwindow or a tab belonging to a private window, or a worker that's associated with a
document hosted in a private window parameters object : any the object to check.
ui - Archive of obsolete content
you initialize a frame with a url pointing to an html
document supplied under your add-on's "data" directory.
... this
document can refer to bundled css and javascript files, and your main add-on can communicate with a frame script using message passing.
...you initialize a sidebar with a url pointing to an html
document supplied under your add-on's "data" directory.
... this
document can refer to bundled css and javascript files, and your main add-on can communicate with a frame script using message passing.
frame/utils - Archive of obsolete content
usage module exports create function that takes the nsidom
document of a privileged
document and creates a browser element in its
documentelement: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,foo'); let frame = create(window.
document); optionally create can be passed set of options to configure created frame even further.
... execution of scripts may easily be enabled: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,top'); let frame = create(window.
document, { uri: 'data:text/html,<script>console.log("running");</script>', allowjavascript: true }); } globals functions create(
document, options) creates a xul browser element in a privileged
document.
... parameters
document : nsidom
document options : object optional options: name type type string string that defines access type of the
document loaded into it.
...for more details and other possible values see
documentation on mdn uri string uri of the
document to be loaded into the new frame.
cfx - Archive of obsolete content
cfx supports the following global options: -h, --help - show a help message and exit -v, --verbose - enable lots of output "command-specific options" are
documented alongside the commands.
... see the tutorial on unit testing and the reference
documentation for the assert module for details.
... note that as the add-on
documentation explains, you should make sure the update procedure for your add-on is secure, and this usually involves using https for the links.
... internal commands cfx testcfx this will run a number of tests on the cfx tool, including tests against the
documentation.
Bootstrapped extensions - Archive of obsolete content
see the chrome.manifest
documentation for details.
... you need to look up the relevant application ui elements by their id by calling
document.getelementbyid(), then manipulate them to inject your ui.
... for example, you can get access to the menu bar in firefox with
document.getelementbyid("main-menubar").
...
documentation for inline options in firefox 7 and later.
Dialogs and Prompts - Archive of obsolete content
programmatic button access if you want to access the accept ("ok") and cancel buttons from script, use this: // disable the ok and cancel btns
document.
documentelement.getbutton("accept").disabled = true;
document.
documentelement.getbutton("cancel").disabled = true; links dialog.xml — xbl bindings for <dialog> and <dialogheader> elements.
...gn="center"><label value="name:"/><textbox id="name"/></row> <row align="center"><label value="description:"/><textbox id="description"/></row> <row align="center"><spacer/><checkbox id="enabled" label="check to enable"/></row> </rows> </grid> </dialog> mydialog.js: // called once when the dialog displays function onload() { // use the arguments passed to us by the caller
document.getelementbyid("name").value = window.arguments[0].inn.name;
document.getelementbyid("description").value = window.arguments[0].inn.description;
document.getelementbyid("enabled").checked = window.arguments[0].inn.enabled; } // called once if and only if the user clicks ok function onok() { // return the changed arguments.
... // notice if user clicks cancel, window.arguments[0].out remains null // because this function is never called window.arguments[0].out = {name:
document.getelementbyid("name").value, description:
document.getelementbyid("description").value, enabled:
document.getelementbyid("enabled").checked}; return true; } see also passing parameter to a dialog and getting return values from it.
...refer to the interface
documentation for
documentation and sample code.
File I/O - Archive of obsolete content
the user's desktop directory (for example ~/desktop on linux or mac os x, c:\
documents and settings\username\desktop on windows).
... progs d user start menu programs directory (for example, c:\
documents and settings\username\start menu\programs).
... createinstance(components.interfaces.nsiconverteroutputstream); converter.init(fostream, "utf-8", 0, 0); converter.writestring(data); converter.close(); // this closes fostream note: the file status flags used in the nsifileoutputstream.init() function are
documented in pr_open.
...nce(components.interfaces.nsifileoutputstream); stream.init(afile, 0x04 | 0x08 | 0x20, 0600, 0); // readwrite, create, truncate stream.write(pngbinary, pngbinary.length); if (stream instanceof components.interfaces.nsisafeoutputstream) { stream.finish(); } else { stream.close(); } more there are more methods and properties on nsifile and nsilocalfile interfaces; please refer to their
documentation for more details.
Progress Listeners - Archive of obsolete content
progress listeners progress listeners allow extensions to be notified of events associated with
documents loading in the browser and with tab switching events.
... }, // for definitions of the remaining functions see related
documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } attach the progress listener to a <browser> or a <tabbrowser> element using addprogresslistener, for example for firefox put the following code in a load ...
... var myext_urlbarlistener = { onlocationchange: function (aprogress, arequest, auri, aflags) { if (aflags & ci.nsiwebprogresslistener.location_change_same_
document) { //anchor clicked!
... var domwin = aprogress.domwindow; var domdoc = domwin.
document; } } }; you can learn about this here: nsiwebprogresslistener - location change flags ...
QuerySelector - Archive of obsolete content
along the lines of other frameworks such as jquery or prototype, shortening the "queryselector" name can be convenient: function $ (selector, el) { if (!el) {el =
document;} return el.queryselector(selector); } function $$ (selector, el) { if (!el) {el =
document;} return el.queryselectorall(selector); // note: the returned object is a nodelist.
...r convenience, use this instead: // return array.prototype.slice.call(el.queryselectorall(selector)); } alert($('#myid').id); (note that while using the firefox web console, the above functions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to add chromewindow.prototype or window.prototype, accessing this.
document.queryselector, or following the jquery style of chaining by returning 'this' within each prototype method of $()): html
document.prototype.$ = function (selector) { // only for html return this.queryselector(selector); }; example: <h1>test!</h1> <script> html
document.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(
document.$('h1')); // [object htmlheadin...
...gelement] </script> xul
document.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; example: <label value="test!"/> <script type="text/javascript"><![cdata[ xul
document.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; alert(
document.$('label')); // [object xulelement] ]]></script>
document.prototype.$ = function (selector) { // only for plain xml return this.queryselector(selector); }; var foo =
document.implementation.create
document('somens', 'foo', null); // create an xml
document <foo xmlns="somens"/> var bar = foo.createelementns('somens', 'bar'); // add <bar xmlns="somens"/> foo.
documentelement.appendchild(bar); alert(foo.$('bar').nodename); // gives 'bar' element.prototype.$ = function (selec...
...tor) { // works for html, xul, and plain xml return this.queryselector(selector); }; html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(
document.getelementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/javascript"><![cdata[ element.prototype.$ = function (selector) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; alert(
document.getelementsbytagnamens(xulns, 'hbox')[0].$('vbox').nodename); // vbox ]]></script> xml example: <foo xmlns="somens"><bar/></foo> in
document earlier var foo =
document.getelementsbytagnamens('somens', 'foo')[0]; alert(foo.$('bar')); note that for plain xml...
Extension Etiquette - Archive of obsolete content
expando properties of shared objects, such as
document objects, or dom nodes.
... ids and class names in html and xul
documents, when extensions add elements to web pages or browser windows.
...for example, "does an action in the browser."
documentation assume that the vast majority of your users don't have inner working knowledge of mozilla.
...users also appreciate when your extension is shipped with a simple how-to
document.
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
« previousnext » fixme: we should include a link to the mdc list of snippets fixme: we need to add a part about 'why and how to create your own component' c++/js this
document was authored by hiroshi shimoda of clear code inc.
...on windows vista, it will be located at c:\users\username\appdata\roaming\mozilla\firefox\profiles\random number.default\ ; on windows xp or 2000, it will be c:\
documents and settings\username\application data\mozilla\firefox\profiles\random number.default\ ; on linux, it will be ~/.mozilla/firefox/random number.default/ ; on mac os x, it will be ~/library/application support/firefox/profiles/random number.default/ in the interests of security, delete these lines from prefs.js after finishing these tests.
... listing 8: traversing directories file.initwithpath('c:\\'); file.append('
documents and settings'); file.append('all users'); file.append('
documents'); list files in specified directory use the directoryentries property to perform operations on all the files or folders in a given folder.
... listing 21: loading a page by setting a referrer var browser =
document.getelementbyid('browser'); var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var referrer = ioservice.newuri('http://www.gihyo.co.jp/', null, null); browser.loaduri('http://www.gihyo.co.jp/magazines/sd', referrer); listing 22: loading a page with data transmitted via the post method var content = encodeurico...
Appendix D: Loading Scripts - Archive of obsolete content
these tags are generally inserted into xul overlay files or other xul
documents, after which they are automatically loaded into the context of the xul window in question and executed immediately and synchronously.
... loading: script loaded via script tags run in partially loaded
documents.
...these scripts execute with the same privileges and restrictions of the global associated with the target object, and this method can therefore also be used when with sandbox objects with the same effect as evalinsandbox and into content windows with the same effect as injecting script tags into their
documents.
... disadvantages namespacing: as modules always execute with their own namespace, they have no direct access to the dom or window properties of windows or
documents, and therefore must often pass around references to these objects and any
document-specific state data that they require.
The Box Model - Archive of obsolete content
this is the system that determines how all elements are laid out visually in a xul
document.
...if you need fix-sized space it's best to use margins and paddings and avoid adding unnecessary nodes to your xul
document.
... xulschoolhello.linkedtext.label = go to <html:a onclick="%s">our site</html:a> for more information to include html in a xul
document, you need to add the namespace for it in the
document root: <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> then you can have an html:p (paragraph) element where you insert the result of parsing the property string.
... since xul
documents are strict xml, you can only use strict xhtml in xul, and not the more loosely-formatted forms of html.
Signing an XPI - Archive of obsolete content
after completing the application process where i entered my details into the online application, i received an automated email requesting
documentary evidence of my id in the form of a photo-id or similar.
...i found mine in c:\
documents and settings\tj\application data\mozilla\firefox\profiles\xxxxxxxx.default\ where xxxxxxxx is a random string of characters.
...id" -d "c:\
documents and settings\tj\application data\mozilla\firefox\profiles\xxxxxxxx.default" enter password for pkcs12 file: re-enter password: pk12util: pkcs12 export successful c:\projects\codesigning> pk12util -i "certum code signing.pkcs12" -d .
... key manager xul extension wladimir palant's python script (blog post) xpisign.py python script xpisigner java tool references the nss tools
documentation ...
Using the Stylesheet Service - Archive of obsolete content
the stylesheets registered with this api apply to all
documents; firefox 18 extended nsidomwindowutils with loadadditionalstylesheet() and removeadditionalstylesheet() to manage stylesheets for a specific
document (bug 737003).
... the examples in this
document are all written in javascript using xpcom.
... usage notes stylesheets added using this service get applied to both chrome and content
documents.
... remember to declare the correct namespace if you want to apply stylesheets to xul
documents.
CSS3 - Archive of obsolete content
media queries are not only used in css
document but also in some attributes of html elements, like the media attribute of the <link> element.
... css conditional rules module level 3 candidate recommendation adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the
document the style sheet is being applied to.
... the css text-align property with the value start, end, start end, and match-parent for a better support of
documents with multiple directionalities of text.
... filter effects module level 1 working draft css generated content for paged media module working draft adds the ability to tailor printed version of a
document by allowing to control header, footer but also references tables like indexes or tables of content.
List of Mozilla-Based Applications - Archive of obsolete content
abstract accounting tool adobe acrobat and adobe reader portable
document format (pdf) software uses mozilla spidermonkey adobe flash player popular browser plug-in uses nss in linux version adwatch content management system uses xul and xpcom aicpcu/iia exam app exam delivery software aliwal geocoder geocoding & data on a map amarok xul remote remote control for amarok music player ...
...emotely on servers that people access through device conkeror keyboard-oriented browser convertigo enterprise mashup server server tool for transactional web scraping and for web clipping cometbird another firefox mod modified version of firefox correo email couac (fr) web-based email and jabber app couchdb
document-oriented database uses spidermonkey courtanet benefit (fr) underwriting software for french insurance brokers crosscheck browserless testing framework uses mozilla rhino crowbar server tool cycloctopus screen scraping console cyclone3 content management system danger mobile platform uses gecko on the ...
... javascript extensible tooling framework uses nspr and spidermonkey jaxer ajax server jslibs javascript development runtime environment uses spidermonkey (note: this is separate from the javascript library jslib) joybidder ebay auction tool standalone version uses xulrunner just (fr) audio a tool for setting temporal tags in audio
documents jsdoc toolkit
documentation tool uses mozilla rhino k-meleon gecko-based web browser for windows embeds gecko in mfc kairo.at mandelbrot creates images of mandelbrot sets xulrunner application kazehakase gecko-based web browser for unix kirix strata data browser kiwix offline version of wikipedia ...
... applications my internet browser localized browser uses gecko myna application server javascript application server for java uses mozilla rhino nextcms (fr) cms nightingale music player community run effort to continue songbird support for linux olpc web browser browser oneteam jabber client open
document viewer viewer opengate's tools cd burner, file browser, and hardware diagnostic softwares opengate is the opensource side of the easyneuf project, “a free software computer, easy and preinstalled” open mashups development tool openoffice.org office suite uses nss openswan implementation of ipsec for linux uses nss or...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
abstract this
document is a concrete example of a centralized auto-configuration of mozilla apps, that are; firefox, thunderbird, mozilla suite 1.x.x, seamonkey and for the record, old netscape 4.x.
...d) $ rpm -qi firefox name : firefox relocations: (not relocatable) version : 2.0.0.2 vendor: remi collet release : 1.fc6.remi build date: sat 24 feb 2007 01:45:37 pm cet install date: tue 20 mar 2007 02:47:27 pm cet build host: remi.famillecollet.com packager : http://remi.collet.free.fr/ references other
documents about autoconfig http://mit.edu/~firefox/www/maintain...utoconfig.html http://www.alain.knaff.lu/howto/mozi...ion/index.html http://thegoldenear.org/toolbox/wind...re-config.html http://ilias.ca/blog/2005/03/locking...efox-settings/ compile on windows: http://forums.mozillazine.org/viewtopic.php?t=276014 http://www.mozilla.org/community/dev...er-forums.html http://forums.mozillazine.org/...
...
documentation i also opened a report on the lack of
documentation bug 178685 which led to the wonderful doc: http://wangrepublic.org/daniel/mozilla/prefs/ defeultpref for home page i cannot set the home page with the defaultpref function, so that it is set by default, but still allows the user to change it!
...dapint.filename", "ldapint.na2"); lockpref("ldap_2.servers.ldapint.position", 2); lockpref("ldap_2.servers.ldapint.searchbase", "ou=people,dc=int-evry,dc=fr"); lockpref("ldap_2.servers.ldapint.servername", "ldap1.int-evry.fr"); //news lockpref("news.directory", "/tmp"); //proxy lockpref("network.proxy.autoconfig_url", \ "http://www.int-evry.fr/local/config.proxy"); } // with (prefconfig) this
document was initially translated from latex with hevea.
Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
var gxmlhttprequest; function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); } xmlhttprequest is an interface in mozilla for retrieving
documents via http.
...that
document gets updated by the tinderbox server every time a build finishes.
...we use new to create a new instance of it, set the instance's onload property to updatetinderboxstatus(), the function we want to execute when the
document finishes loading, call its open method with the type of http request we want to make and the url of the
document to retrieve, and then call its send method to send the request.
... xmlhttprequest will retrieve the
document located at the given url and call the updatetinderboxstatus() function when it is done.
Editor Embedding Guide - Archive of obsolete content
the first parameter is the nsidomwindow you just retrieved, the second is the editor type you want to create, and the third is whether you want the window editable immediately or when the
document is done loading.
... cmd_backgroundcolor sets the background color of the
document.
... getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) "left", "right", "center", "justify" cmd_inserthtml cmd_insertlinknoui cmd_insertimagenoui cmd_inserthr cmd_charset sets the charset for the
document.
... commandparam->getbooleanvalue("state_enabled",&boolval); original
document information authors: michael judge (mjudge@netscape.com) contributor: kathleen brade (brade@netscape.com) last updated date: march 27, 2003 original
document: a guide to embedding the gecko editor ...
Style System Overview - Archive of obsolete content
selector matches elements in the
document.
... 1 matching rule: use value 2+ matching rules: cascade decides which wins: sort by origin (ua, user, author) & weight (!important), then specificity of selector, then order example
document source <doc> <title>a few quotes</title> <para class="emph"> franklin said that <quote>"a penny saved is a penny earned."</quote> </para> <para> fdr said <quote>"we have nothing to fear but <span class="emph">fear itself.</span>"</quote> </para> </doc> example
document tree doc ↙ ↓ ↘ title ...
... style rule changes handling of style rule changes is done in frame constructor (called from style set, called from pres shell, which is a
document observer) and in the pres shell.
...(but beware didsetstylecontext) the style system style sheets & rules ↓ rule tree ↓ style context interface original
document information author(s): david baron last updated date: june 6, 2003 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Using microformats - Archive of obsolete content
microformats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the
document itself.
... count() counts the number of microformats in a
document that match specified criteria.
...if you want to search the entire
document, specify content.
document.
...if you want to search the entire
document, specify content.
document.
Introducing the Audio API extension - Archive of obsolete content
please note that this
document describes a non-standard experimental api.
...etadata example</title> </head> <body> <audio id="audio-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.addeventlistener('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.
...zchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } 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.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('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 at...
... <audio id="a1" src="song.ogg" controls> </audio> <script> var a1 =
document.getelementbyid('a1'), a2 = new audio(), buffers = []; function loadedmetadata() { // mute a1 audio.
Monitoring downloads - Archive of obsolete content
onload: function() { // initialization code this.initialized = true; this.strings =
document.getelementbyid("downloadlogger-strings"); this.dlmgr = components.classes["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); this.dlmgr.addlistener(downloadlogger); // open the database, placing its file in the profile directory this.dbfile = components.classes["@mozilla.org/file/directory_service;1"] ...
... .get("profd", components.interfaces.nsifile); this.dbfile.append("downloadlogger.sqlite"); // get access to the storage service and open the database this.storageservice = components.classes["@mozilla.org/storage/service;1"] .getservice(components.interfaces.mozistorageservice); var dbconn = this.storageservice.opendatabase(this.dbfile); var loglist =
document.getelementbyid("loglist"); var statement = dbconn.createstatement("select * from items"); // get all items in table try { while (statement.executestep()) { var row =
document.createelement('listitem'); // add the cells to the row var cell =
document.createelement('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltiptext",...
... sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell =
document.createelement('listcell'); cell.setattribute("label", (statement.getint64(1) / 1024).tofixed(1) + "kb"); // size cell.setattribute("style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint64(2) / 1000); // start time cell =
document.createelement('listcell'); var datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); thedate = new date(statement.getint64(3)); // end time cell =
document.createelement('listcell'); datestr = thedate.toloca...
...lestring(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell =
document.createelement('listcell'); cell.setattribute("label", speed.tofixed(1) + "kb/sec"); cell.setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "color:black"; cell =
document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "color:green"; break; case 2: statusstr = "failed"; style = "color:red"; break; case 3: ...
New Security Model for Web Services - Archive of obsolete content
any syntax error in the
document will result in the rest of the file to be ignored.
...an entry is created if and only if the declaration file is considered valid (validation based on the syntax described above); an invalid
document will result in access denial.
... adjustments as this new model is applied to soap, and potentially
document.load or xml-request, it may be desirable to eliminate the same source security bypass, because it is not clear that this is always secure.
... please send me some feedback on this proposal see also mozilla web services security model -
documentation of what is currently implemented ...
Plugin Architecture - Archive of obsolete content
note: this
document documents how trunk works, i.e.
...note: this
document describes how things are, not necessarily how things should be.
...do not use this
document for deciding what plugins can rely on.
... note that while nsobjectloadingcontent also deals with images and
documents, this
document concentrates on plugins.
Porting NSPR to Unix Platforms - Archive of obsolete content
therefore i write this article to
document the more mechanical part of the unix porting task.
...further, we don't have
documentation of our unit tests, so you often need to resort to read the source code to understand what they do.
...<strike>henry sobotka of the os/2 mozilla porting project has a web page at http://www.axess.com/users/sobotka/n.../warpztjs.html with good
documentation of the nspr unit tests</strike>.
...for thread management and synchronization: <tt>cvar -d</tt> <tt>cvar2</tt> <tt>./join -d</tt> <tt>perf</tt> <tt>./switch -d</tt> <tt>intrupt -d</tt> for i/o: <tt>cltsrv -d</tt>, <tt>cltsrv -gd</tt> <tt>socket</tt> <tt>testfile -d</tt> <tt>tmocon -d</tt> '<tt>tmoacc -d</tt>' in conjunction with '<tt>writev -d</tt>' miscellaneous: <tt>dlltest -d</tt> <tt>forktest</tt> original
document information author: larryh@netscape.com last updated date: 16 july 1998 ...
PopupEvents - Archive of obsolete content
<script> function openfilemenu() { var filemenu =
document.getelementbyid("file-menu"); filemenu.addeventlistener("popupshown", filemenuopened, false); filemenu.open = true; } function filemenuopened(event) { if (event.target !=
document.getelementbyid("file-menupopup")) return; var filemenu =
document.getelementbyid("file-menu"); filemenu.removeeventlistener("popupshown", filemenuopened, false); var openmenu =
document.getelementbyid(...
...<panel onpopuphiding="
document.getelementbyid('search').value = '';"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> you can prevent a popup from hiding by calling the event's preventdefault method.
...one such situation when the hiding events are not sent is when the menu is removed from the
document.
...another situation is when the
document is being unloaded.
Property - Archive of obsolete content
alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container content
document contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defau...
...ltbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled disablekeynavigation dlgtype docshell
documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject...
... locked markup
documentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel search...
...ent.clientleft dom:element.clienttop dom:element.clientwidth dom:element.clonenode dom:element.firstchild dom:element.firstelementchild dom:element.lastchild dom:element.lastelementchild dom:element.localname dom:element.namespaceuri dom:element.nextelementsibling dom:element.nextsibling dom:element.nodename dom:element.nodetype dom:element.nodevalue dom:element.owner
document dom:element.parentnode dom:element.prefix dom:element.previouselementsibling dom:element.previoussibling dom:element.scrollheight dom:element.scrollleft dom:element.scrolltop dom:element.scrollwidth dom:element.tagname dom:element.textcontent ...
Things I've tried to do with XUL - Archive of obsolete content
var available_width =
document.getelementbyid("invisible_element").clientwidth; ...
...a workaround for that is to create the element, insert it in the
document and set its style attribute with a -moz-binding property, all of that from c++ instead of js.
... multi-column listboxes when adding items to multi-column listboxes, you can't use the appenditem api: // auto-create and attach 1st cell var row = mylistbox.appenditem( label, value ); // create and attach 2nd cell var cell =
document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ...
...instead, you must build up your own listitem full of listcells, and then add that listitem to the listbox, using generic dom calls: var row =
document.createelement('listitem'); // create and attach 1st cell var cell =
document.createelement('listcell'); cell.setattribute('label', label ); cell.setattribute('value', value ); row.appendchild( cell ); // create and attach 2nd cell cell =
document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ...
Commands - Archive of obsolete content
example: toggling command disabled example 2 : source view <command id="cmd_openhelp" oncommand="alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> <button label="disable" oncommand="
document.getelementbyid('cmd_openhelp').setattribute('disabled','true');"/> <button label="enable" oncommand="
document.getelementbyid('cmd_openhelp').removeattribute('disabled');"/> in this example, both buttons use the same command.
... you can get the command dispatcher using the
document's commanddispatcher property, or you can retrieve it from the controllers list on an element or a window.
... <window id="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list =
document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appen...
... var tboxcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_paste"); }, iscommandenabled : function(cmd){ return false; }, docommand : function(cmd){ }, onevent : function(evt){ } };
document.getelementbyid("tbox").controllers.insertcontrollerat(0,tboxcontroller); in this example, we insert the controller at index 0, which means before any others.
Creating a Window - Archive of obsolete content
this tag is much like the html tag which surrounds an entire html
document, except that a user interface window is described instead of a
document.
... note: the local xul
document can be opened in the browser as mentioned above only if |dom.allow_xul_xbl_for_file| preference in "about:config" has been set to |true| .
...no new syntax is necessary as you can use the window.open() function as one can do for html
documents.
... however, one additional flag, called 'chrome' is necessary to indicate to the browser that this is a chrome
document to open.
Manipulating Lists - Archive of obsolete content
here is an example: example 1 : source view <script> function additem(){
document.getelementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'.
... example 3 : source view <script> function doselect(){ var val =
document.getelementbyid('number').value; val = number(val); if (val != null)
document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="excellent"/> <radio label="good"/> <radio label="poor"...
... deleting selected items the following example shows a method of deleting the selected items properly: example 4 : source view <script> function deleteselection(){ var list =
document.getelementbyid('thelist'); var count = list.selectedcount; while (count--){ var item = list.selecteditems[0]; list.removeitemat(list.getindexofitem(item)); } } </script> <button label="delete" oncommand="deleteselection();"/> <listbox id="thelist" seltype="multiple"> <listitem label="cheddar"/> <listitem label="cheshire"/> <listitem label="edam"/> <listitem label="gouda"/>...
...compare the effect of both functions at different scroll positions in this example: example 5 : source view <button label="scrolltoindex" oncommand="
document.getelementbyid('thelist').scrolltoindex(4);"/> <button label="ensureindexisvisible" oncommand="
document.getelementbyid('thelist').ensureindexisvisible(4);"/> <listbox id="thelist" rows="5"> <listitem label="1"/> <listitem label="2"/> <listitem label="3"/> <listitem label="4"/> <listitem label="5"/> <listitem label="6"/> <listitem label="7"/> <listitem label="8"/> <li...
More Event Handlers - Archive of obsolete content
example 2 : source view <hbox id="outerbox"> <button id="okbutton" label="ok"/> </hbox> <script> function buttonpressed(event){ alert('button was pressed!'); } function boxpressed(event){ alert('box was pressed!'); event.stoppropagation(); } var button =
document.getelementbyid("okbutton"); button.addeventlistener('command',buttonpressed,true); var outerbox =
document.getelementbyid("outerbox"); outerbox.addeventlistener('command',boxpressed,true); </script> here, an event listener has been added to the button and another event listener has been added to the box.
...the second set, clientx and clienty, are relative to the top left corner of the
document.
... here is an example which displays the current mouse coordinates: example 4 : source view <script> function updatemousecoordinates(e){ var text = "x:" + e.clientx + " y:" + e.clienty;
document.getelementbyid("xy").value = text; } </script> <label id="xy"/> <hbox width="400" height="400" onmousemove="updatemousecoordinates(event);"/> in this example, the size of the box has been set explicitly so the effect is easier to see.
...load events the load event is sent to the
document (the window tag) once the xul file has finished loading and just before the content is displayed.
Skinning XUL Files by Hand - Archive of obsolete content
to keep your xul looking consistent and to avoid breaking skins altogether (when your styles have some dependency on a part of the global skin that changes, such as an image), use the style rules in the global skin by importing it into your stylesheet with the following instruction: @import url("chrome://global/skin/"); refer to the
document writing skinnable xul and css for guidelines on how to make your skins friendly to the global skin, to xul, and to mozilla.
...since id attribute must be unique in a
document, there can only be a single element with the id "navbar", and it will pick up the style information in the block.
... the third type of selector, thepseudo-class, is one you may have seen in the in-line style definitions for hyperlinks which commonly appear in html
documents.
... original
document information author(s): ian oeschger last updated date: october 3, 2004 copyright information: copyright (c) ian oeschger ...
XUL element attributes - Archive of obsolete content
for xml datasources, only one source is used, either the url of an xml file or an anchor reference to another element within the same
document.
... when the xul
document is contained on a remote web site, the datasources may only be loaded from the same domain as the
document.
...persistence can also be stored using the
document.persist function.
... see the pref system
documentation for more information.
prefwindow - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
... return true; } opening a modal sub dialog a sub dialog can only be opened via
document.
documentelement and not via window.
... therefore, an example call to opensubdialog() would look like this:
document.
documentelement.opensubdialog("chrome://myextension/content/options-sub.xul", "", null) issues when using prefpanes in prefwindow when you wish to put non-<prefpane> elements to prefwindow, you should place them after all of <prefpane>s.
... should not: <prefwindow> <script src="config.js"/> <prefpane label="pane1" src="pane1.xul"/> <prefpane label="pane2" src="pane2.xul"/> </prefwindow> should: <prefwindow> <prefpane label="pane1" src="pane1.xul"/> <prefpane label="pane2" src="pane2.xul"/> <script src="config.js"/> </prefwindow> related prefpane preferences system
documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
Getting started with XULRunner - Archive of obsolete content
you can extract this to any location you like, but there are many places in the
documentation that will assume that you have this installed in /library/frameworks.
...all of what you see below can be found in the xulrunner
documentation here on mdn in much more detail.
... main.js: function showmore() {
document.getelementbyid("more-text").hidden = false; } for more information about xul see: xul.
... next » original
document information author: mark finkle, october 2, 2006 ...
Mozprofile - Archive of obsolete content
this
documentation is no longer maintained.
... please see the maintained
documentation of mozprofile at http://mozbase.readthedocs.org/en/latest/mozprofile.html.
...there is also substantive
documentation on profiles and their management.
... python-profilemanager : python cli interface similar to profilemanager profile
documentation : http://support.mozilla.com/kb/profiles ...
Extentsions FAQ - Archive of obsolete content
var newnode =
document.createelement(" ...
..."); var replaceme =
document.getelementbyid("replaceme"); replaceme.parentnode.replacechild(newnode, replaceme); is it possible to place an image in the window that can be moved to anywhere in the window, and always remain on top of everything else?(similiar to using position:absolute and-index:100000 in html) you can almost do this with a stack: <window ...> <stack flex="1"> <image top="40" left="80"/> <vbox> other content here </vbox> </stack> </window> the only restriction is that your image can't overlap the right or bottom of the window.
... //setting the state
document.getelementbyid("toolbar-button").setattribute("toolbar-button", "on"); //or
document.getelementbyid("toolbar-button").setattribute("toolbar-button","off"); //css #myexten-toolbar-button[myexten-toolbar-button="on"] { list-style-image: url("chrome://myexten/skin/toolbar-button.png"); -moz-image-region: rect(0px 24px 24px 0px);} #myexten-toolbar-button[myexten-toolbar-button="off"] { li...
...leges, this should work: var ci = components.interfaces; var toplevelwindow = window.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .roottreeitem .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindow) .queryinterface(ci.nsidomchromewindow); var sidebar = toplevelwindow.
document.getelementbyid("sidebar"); alert(sidebar.content
document); is there anyone successfully using dojo in a firefox extension and where to fine sample codes?
NPEvent - Archive of obsolete content
windows the data structure has the following fields: event one of the following event types: wm_paint wm_lbuttondown wm_lbuttonup wm_lbuttondblclk wm_rbuttondown wm_rbuttonup wm_rbuttondblclk wm_mbuttondown wm_mbuttonup wm_mbuttondblclk wm_mousemove wm_keyup wm_keydown wm_setcursor wm_setfocus wm_killfocus for information about these events, see the microsoft windows developer
documentation.
...values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os developer
documentation.
...for information about these events, see your microsoft windows
documentation.
...for information about the xevent structure and xwindows events, see the xwindows
documentation.
NPN_GetURL - Archive of obsolete content
_parent: load the link into the immediate <frameset> parent of the plug-in instance's
document.
... if the plug-in instance's
document has no parent, the default is _self.
...the default is _self, if the plug-in instance's
document is already at the top.
...plug-ins can use this capability to provide hyperlinks to other
documents or to retrieve data from anywhere on the network.
Building a Theme - Archive of obsolete content
you can use this to inspect any element in a web page or an xul
document, which makes it invaluable for themes.
... open up the dom inspector now (located under the "tools" menu), and go to "file->inspect chrome
document".
... this will be a menu containing all the xul
documents currently open in firefox.
... pick the first
document with a web page title, like "firefox start page" and select it.
ActiveXObject - Archive of obsolete content
for example, a word-processing application may provide an application object, a
document object, and a toolbar object.
...for example, here are a few examples of values you may find there, depending on which programs are installed: excel.application excel.chart scripting.filesystemobject wscript.shell word.
document important: activex objects may present security issues.
...for example, for the local intranet zone, you typically need to change a custom setting to "initialize and script activex controls not marked as safe for scripting." to identify members of an automation object that you can use in your code, you may need to use a com object browser, such as the ole/com object viewer, if no reference
documentation is available for the automation object.
...excelsheet.application.quit(); requirements supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Implementation Status - Archive of obsolete content
document structure section title status notes bugs 3.1 namespaces supported 3.2.1 common attributes supported 3.2.2 linking attributes supported 3.2.3 single-node binding attributes supported ...
... in xforms unsupported 4.7.1 references to elements within a repeat element unsupported 4.7.2 references to elements within a bind element unsupported 4.8 dom interface for access to instance data supported 4.8.1 getinstance
document() supported 4.8.2 rebuild() supported 4.8.3 recalculate() supported 4.8.4 revalidate() supported 4.8.5 refresh() supported 4.9 feature string for the hasfeature method call ...
... 297083; 343443; 8.3.4 help supported 8.3.5 hint partial problems with hints in xul-hosted
documents and ephemeral message positioning 349667; 8.3.6 alert supported 9.
...on title status notes bugs 11.1 submission partial from 1.1 we do not yet support @mode, @indent, @replace='text', @separator, @serialize, @target, header or method child elements 11.2 xforms-submit partial we currently limit (for security reasons) submission only back to the server that served the
document.
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
find out why this happens and how to fix it in
documents that have to remain in quirks mode.
...in those cases where it is necessary to author
documents in "quirks" mode, but the breaking of table inheritance is not desired, authors can use gecko's standards support to overcome the table-font rule shown above.
... recommendations in situations where authors must put a
document into "quirks" mode but wish to enforce correct font inheritance into tables, use the demonstrated rule.
... related resources mozilla's doctype sniffing original
document information author(s): eric a.
Popup Window Controls - Archive of obsolete content
mozilla will attempt to suppress all calls to window.open() which occur in the following circumstances: global script which is executed as the
document is loading script executed as part of a onload event handler script executed in settimeout() or setinterval() what popup windows are not suppressed?
... replacements for popup windows if your popup was created during the time the web page was loading, you may consider using
document.write() to emit appropriate html which will contain the same information as the popup window.
... you can also use either the advanced features in the
document object model (dom) or innerhtml to create the appropriate html.
... original
document information author(s): bob clary last updated date: december 5th, 2002 copyright © 2001-2003 netscape.
GLSL Shaders - Game development
; height: 100%; } </style> <script src="three.min.js"></script> </head> <body> <script id="vertexshader" type="x-shader/x-vertex"> // vertex shader's code goes here </script> <script id="fragmentshader" type="x-shader/x-fragment"> // fragment shader's code goes here </script> <script> // scene setup goes here </script> </body> </html> it contains some basic information like the
document <title>, and some css to set the width and height of the <canvas> element that three.js will insert on the page to be the full size of the viewport.
... applying the shaders to actually apply the newly created shaders to the cube, comment out the basicmaterial definition first: // var basicmaterial = new three.meshbasicmaterial({color: 0x0095dd}); then, create the shadermaterial: var shadermaterial = new three.shadermaterial( { vertexshader:
document.getelementbyid( 'vertexshader' ).textcontent, fragmentshader:
document.getelementbyid( 'fragmentshader' ).textcontent }); this shader material takes the code from the scripts and applies it to the object the material is assigned to.
...+5.0, 1.0); } </script> <script id="fragmentshader" type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(0.0, 0.58, 0.86, 1.0); } </script> javascript var width = window.innerwidth; var height = window.innerheight; var renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); renderer.setclearcolor(0xdddddd, 1);
document.body.appendchild(renderer.domelement); var scene = new three.scene(); var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); var boxgeometry = new three.boxgeometry(10, 10, 10); var shadermaterial = new three.shadermaterial( { vertexshader:
document.getelementbyid( 'vertexshader' ).textcontent, fragmentsha...
...der:
document.getelementbyid( 'fragmentshader' ).textcontent }); var cube = new three.mesh(boxgeometry, shadermaterial); scene.add(cube); cube.rotation.set(0.4, 0.2, 0); function render() { requestanimationframe(render); renderer.render(scene, camera); } render(); css body { margin: 0; padding: 0; font-size: 0; } canvas { width: 100%; height: 100%; } result conclusion this article has taught the very basics of shaders.
3D games on the Web - Game development
documentation and browser support the webgl project
documentation and specification is maintained by the khronos group, not the w3c as with most of the web apis.
... the rise of libraries and frameworks coding raw webgl is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our webgl
documentation to get started.) for real-world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on.
...there are other popular game development libraries and frameworks worth checking too; a-frame, playcanvas and babylon.js are among the most recognizable ones with rich
documentation, online editors and active communities.
... building up a basic demo with playcanvas playcanvas is a popular 3d webgl game engine open-sourced on github, with an editor available online and good
documentation.
Plug-in Development Overview - Gecko Plugin API Reference
working with urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a url anywhere on the network, provide hyperlinks to other
documents, post form data to cgi scripts using http, or upload files to a remote server using ftp.
... starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7), you can get the origin of the
document in a secure, convenient way by calling npn_getvalue() to retrieve the value of the variable npnv
documentorigin.
... the returned value is the unicode serialization of the
document's origin converted to nfkc-encoded (that is, normalized) utf-8.
...consider the following example, where a media player plug-in can be controlled with an advancetonextsong() method called inside the script element: <object id="myplugin" type="audio/wav" data="music.wav"> </object> <script type="application/javascript"> var theplugin =
document.getelementbyid('myplugin'); if (theplugin && theplugin.advancetonextsong) theplugin.advancetonextsong(); else alert("plugin not installed correctly"); </script> in the past, liveconnect and later xpconnect were used to make plug-ins scriptable.
Beginner's guide to media queries - Learn web development
each feature is
documented on mdn along with browser support information, and you can find a full list at using media queries: media features.
... walkthrough: a simple mobile-first layout our starting point is an html
document with some css applied to add background colors to the various parts of the layout.
...color: #333; font-weight: bold; } nav a:hover { background-color: rgba(207, 232, 220, 0.7); } .related { background-color: rgba(79, 185, 227, 0.3); border: 1px solid rgb(79, 185, 227); padding: 10px; } .sidebar { background-color: rgba(207, 232, 220, 0.5); padding: 10px; } article { margin-bottom: 1em; } we've made no layout changes, however the source of the
document is ordered in a way that makes the content readable.
... the viewport meta tag if you look at the html source in the above example, you'll see the following element included in the head of the
document: <meta name="viewport" content="width=device-width,initial-scale=1"> this is the viewport meta tag — it exists as a way control how mobile browsers render content.
Normal Flow - Learn web development
starting with a solid, well-structured
document that is readable in normal flow is the best way to begin any webpage.
...in addition, as normal flow is designed to make a readable
document, by starting in this way you are working with the
document rather than fighting against it as you make changes to the layout.
... before digging deeper into different layout methods, it is worth revisiting some of the things you will have studied in previous modules with regard to normal
document flow.
... let's look at a simple example that explains all of this: <h1>basic
document flow</h1> <p>i am a basic block level element.
Client-side form validation - Learn web development
for a complete list and many examples, consult our regular expressions
documentation.
... we'll start with some simple html (feel free to put this in a blank html file; use a fresh copy of fruit-start.html as a basis, if you like): <form> <label for="mail">i would like you to provide me with an e-mail address:</label> <input type="email" id="mail" name="mail"> <button>submit</button> </form> and add the following javascript to the page: const email =
document.getelementbyid("mail"); email.addeventlistener("input", function (event) { if (email.validity.typemismatch) { email.setcustomvalidity("i am expecting an e-mail address!"); } else { email.setcustomvalidity(""); } }); here we store a reference to the email input, then add an event listener to it that runs the contained code each time the value inside the input is changed.
...const form =
document.getelementsbytagname('form')[0]; const email =
document.getelementbyid('mail'); const emailerror =
document.queryselector('#mail + span.error'); email.addeventlistener('input', function (event) { // each time the user types something, we check if the // form fields are valid.
... // there are fewer ways to pick a dom node with legacy browsers const form =
document.getelementsbytagname('form')[0]; const email =
document.getelementbyid('mail'); // the following is a trick to reach the next sibling element node in the dom // this is dangerous because you can easily build an infinite loop.
HTML basics - Learn web development
anatomy of an html
document that wraps up the basics of individual html elements, but they aren't handy on their own.
...however these days, they don't do much, and are basically just needed to make sure your
document behaves correctly.
... <meta charset="utf-8"> — this element sets the character set your
document should use to utf-8 which includes most characters from the vast majority of written languages.
...in the same way that a book has the main title, chapter titles and subtitles, an html
document can too.
Marking up a letter - Learn web development
block/structural semantics use appropriate
document structure including doctype, and <html>, <head> and <body> elements.
... the four dates in the
document should be have appropriate elements containing machine-readable dates.
... the head of the
document the character set of the
document should be set as utf-8 using the appropriate meta tag.
...metadata in html html text fundamentals creating hyperlinks advanced text formatting
document and website structure debugging html marking up a letter structuring a page of content ...
Video and Audio APIs - Learn web development
previous overview: client-side web apis next html5 comes with elements for embedding rich media in
documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc.
... at the top of this file, insert the following code: const media =
document.queryselector('video'); const controls =
document.queryselector('.controls'); const play =
document.queryselector('.play'); const stop =
document.queryselector('.stop'); const rwd =
document.queryselector('.rwd'); const fwd =
document.queryselector('.fwd'); const timerwrapper =
document.queryselector('.timer'); const timer =
document.queryselector('.timer span'); const timerbar =
document.query...
...as a hint, you can find out the x and y values of the element's left/right and top/bottom sides via the getboundingclientrect() method, and you can find the coordinates of a mouse click via the event object of the click event, called on the
document object.
... for example:
document.onclick = function(e) { console.log(e.x) + ',' + console.log(e.y) } ...
Working with JSON - Learn web development
at the moment it only contains two lines, which grab references to the <header> and <section> elements and store them in variables: const header =
document.queryselector('header'); const section =
document.queryselector('section'); we have made our json data available on our github, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.
...first of all, add the following function definition below the previous code: function populateheader(jsonobj) { const myh1 =
document.createelement('h1'); myh1.textcontent = jsonobj['squadname']; header.appendchild(myh1); const mypara =
document.createelement('p'); mypara.textcontent = 'hometown: ' + jsonobj['hometown'] + ' // formed: ' + jsonobj['formed']; header.appendchild(mypara); } we named the parameter jsonobj, to remind ourselves that this javascript object originated from json.
... creating the hero information cards next, add the following function at the bottom of the code, which creates and displays 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 mylist =
document.createelement('ul'); myh2.textcontent = heroes[i].name; mypara1.textcontent = 'secret identity: ' + heroes[i].secretidentity; mypara2.text...
...content = 'age: ' + heroes[i].age; mypara3.textcontent = 'superpowers:'; const superpowers = heroes[i].powers; for (let j = 0; j < superpowers.length; j++) { const listitem =
document.createelement('li'); listitem.textcontent = superpowers[j]; mylist.appendchild(listitem); } myarticle.appendchild(myh2); myarticle.appendchild(mypara1); myarticle.appendchild(mypara2); myarticle.appendchild(mypara3); myarticle.appendchild(mylist); section.appendchild(myarticle); } } to start with, we store the members property of the javascript object in a new variable.
What is web performance? - Learn web development
this is the process that the browser uses to construct the web
document once the files have been downloaded from the server.
... the
document object model.
... the
document object model, or dom, is a tree structure that represents the content and elements of your html as a tree of nodes.
...find out more at
document object model.
Getting started with React - Learn web development
also, see the following for more information: "what is npm" on nodejs.org "introducing npx" on the npm blog the create-react-app
documentation initializing your app create-react-app takes one argument: the name you'd like to give your app.
...this file is the entry point for our app, and it initially looks like this: import react from 'react'; import reactdom from 'react-dom'; import './index.css'; import app from './app'; import * as serviceworker from './serviceworker'; reactdom.render(<app />,
document.getelementbyid('root')); // if you want your app to work offline and load faster, you can change // unregister() to register() below.
... your final index.js file should look like this: import react from 'react'; import reactdom from 'react-dom'; import './index.css'; import app from './app'; reactdom.render(<app />,
document.getelementbyid('root')); variables and props next, we'll use a few of our javascript skills to get a bit more comfortable editing components and working with data in react.
...when you are done, your code should look something like this: reactdom.render(<app subject="clarice" />,
document.getelementbyid('root')); back in app.js, let's revisit the app function itself, which reads like this (with the return statement shortened for brevity): function app() { const subject = "react"; return ( // return statement ); } change the signature of the app function so that it accepts props as a parameter, and delete the subject const.
Handling common JavaScript problems - Learn web development
it is not so important now we have modern features like
document.queryselector()/
document.queryselectorall()/node methods available across browsers, but it can still be useful when older browsers need supporting.
... apply the polyfill scripts to the page using the following code — place these above the existing <script> element so they will be available on the page already when we start trying to use fetch: <script src="es6-promise.js"></script> <script src="fetch.js"></script> inside the original <script>, add the following code: const myimage =
document.queryselector('.my-image'); fetch('flowers.jpg').then(function(response) { response.blob().then(function(myblob) { let objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); now if you load it in a browser that doesn't support fetch (safari and ie are obvious candidates), you should still see the flower image appear — cool!
... note: again, there are many different ways to make use of the different polyfills you will encounter — consult each polyfill's individual
documentation.
...loadscript() looks like this: function loadscript(src, done) { const js =
document.createelement('script'); js.src = src; js.onload = function() { done(); }; js.onerror = function() { done(new error('failed to load script ' + src)); };
document.head.appendchild(js); } this function creates a new <script> element, then sets its src attribute to the path we specified as the first argument ('polyfills.js' when we called it in the code above).
CSUN Firefox Materials
tabbed browsing helps keyboard users by putting all of the browsed
documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation within the entire windows os much simpler.
... the accessibility extension may be installed on top of firefox, allowing keyboard access to
document structure.
...the mozilla firefox community welcomes bug reports, ideas,
documentation, answering questions in the support forums -- and nearly any kind of community involvement resulting in a browser built for a broader audience of users and developers.
...this fact remains: the web is changing to become more interactive and less like a bunch of plain
documents.
Embedding API for Accessibility
this
document lays out what we already have, and what we'll need later, in the embedding api to support accessibility.
...a reframe fixes the appearance of the page to match the new prefs, without reloading the
document over the network.
...t.size.fixed.x-western", newfontsize); setintpref("font.size.variable.x-western", newfontsize); /* for other i18n charsets, change the name as explained above for font face*/ setcharpref("font.default","serif"); /* or "sans-serif" */ setintpref("browser.use_
document_fonts", whichfonts); /* whichfonts: 0=no, 1=yes */ moz 0.8 fonts from operating system?
... colors for page setcharpref("browser.display.foreground_color", "#abcdef" /* hex color value */); setcharpref("browser.display.background_color", "#abcdef" /* hex color value */); setboolpref("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_
document_colors", booluseauthorcolors); /* setting use_
document_colors also stops background images from loading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex color value */); setcharpref("browser.visited_color", "#abcdef" /* hex color value */); ...
Adding a new CSS property
this
document assumes that you have a specifcation for the property available.
... see the
documentation at the top of the file and the other entries for examples.
... again, see the
documentation at the top of the file and the other entries for examples, and also see the next section for details about parsing.
... see nschangehint.h for
documentation (or if that's not sufficient, see restylemanager::processrestyledframes).
Simple Thunderbird build
for thunderbird up to 59, see the old build
documentation.
... for additional, more detailed information, see the build
documentation.
...6,467 mapiutil.h 02/06/2009 17:02 97,301 mapival.h 02/06/2009 17:02 9,334 mapiwin.h 02/06/2009 17:02 1,906 mapiwz.h 02/06/2009 17:02 18,277 mapix.h 02/06/2009 17:02 5,012 mspst.h get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "
documents and settings").
...you can clean out previous build artefacts using ./mach clobber references general build
documentation comm-central using the mozilla symbol server ...
Creating Custom Events That Can Pass Data
var event =
document.createevent("nsdommyevent"); event.initevent("nsdommyevent", true, true); window.dispatchevent(event); dispatching your event in c++ the following shows how to dispatch your event in c++: nscomptr<nsiwindowwatcher> wwatcher (do_getservice("@mozilla.org/embedcomp/window-watcher;1")); // the window watcher will be able to give me a handle to the window nscomptr<nsidomwindow> aw...
...indow; // a handle to the window nscomptr<nsidom
document> adoc; // a handle to the
document nscomptr<nsidomeventtarget> twindow; // the target window (really the same window as above but you need // a different inteface :/ nscomptr<nsidomevent> event; //this will be the event we throw.
... awindow->get
document(getter_addrefs(adoc)); //get the
document from the window.
... nscomptr<nsidom
documentevent> docevent = do_queryinterface(adoc); //change interfaces so you can create interfaces.
Eclipse CDT
(if you're thinking of adding tips, please first consider how widely useful they'll be before adding to this already lengthy page.) for further
documentation see the official eclipse user guide and eclipse cdt user guide.
... to quickly switch to a recently viewed
document use cmd-f6/ctrl-f6.
... to show a filterable list of open
documents (similar to the way emacs gives you a list of open buffers), use cmd-e/ctrl-e.
...if you think we need our own
documentation on mercurialeclipse, please consider adding a separate page for that tool since this page is already pretty long.
Obsolete Build Caveats and Tips
this has resulted in many caveats and tips being added to the mdn
documentation for building older versions of the code base or dealing with older build tools.
...therefore, instead of deleting all these nuggets of information, it's best to collect them all here and remove them from the majority happy path
documentation.
... you may choose not to install the sample code and
documentation to save space and download time.
... for all sdks, you may choose not to install sample code and
documentation to save space and download time.
Contributing to the Mozilla code base
if you're having any trouble following this
documentation, or hit a barrier you can't get around, please contact mike hoye at mhoye@mozilla.com.
... mozilla is a large project and we are thrilled to have contributors with very diverse skills below is a table with our currently available projects to contribute to, along with the skills needs and links to their
documentation.
... project skills
documentation/onboarding firefox browser (core layers) c++ firefox developers
documentation firefox (front-end) javascript and/or html/css firefox developers
documentation devtools javascript and/or html/css contribute to devtools add-ons javascript and/or html/css contribute to add-ons firefox focus for android java contribute to firefox focus for android firefox for fire tv java contribute to firefox for fire tv firefox preview (mobile browser, codename: "fenix") kotlin contribute to firefox preview firefox for ios swift contribute to firefox for ios firefox focus for ios swift contribute to firefox focus for ios mozilla h...
...here are some further resources to help: ask for help in a comment on the bug, or in #introduction:mozilla.org or #developers:mozilla.org check out https://developer.mozilla.org/docs/developer_guide and its parent
document, https://developer.mozilla.org/docs/mozilla our reviewer checklist is very useful, if you have a patch near completion, and seek a favorable review utilize our build tool mach, its linting, static analysis, and other code checking features step 3: get your code reviewed once you fix the bug, you can advance to having your code reviewed.
Developer guide
there are lots of ways to contribute to the mozilla project: coding, testing, improving the build process and tools, or contributing to the
documentation.
...
documentation topics getting started a step-by-step beginner's guide to getting involved with mozilla.
... getting
documentation updated how to ensure that
documentation is kept up to date as you develop.
... firefox source docs web-hosted
documentation built from the mozilla-central source code.
Integrated Authentication
this
document provides an overview of mozilla's support for integrated authentication.
... mozilla also supports raw ntlm authentication using an internal implementation (based on the
documentation provided by eric glass) that supports ntlmv1/lmv1 and ntlm2 session key modes.
...<i>this
document is incomplete ...</i> flow diagram the diagram below shows how various components interact.
... original
document information author(s): darin fisher last updated date: december 27, 2005 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
API-provided widgets
this
document details the available properties.
... showinprivatebrowsing whether to show the widget in private browsing mode (optional, default: true) event handlers you can also define several event handlers which will be called at various stages in a widget's lifetime: event handler name description onbuild(adoc) only useful for custom widgets (and required there); a function that will be invoked with the
document in which to build a widget.
... onbeforecreated(adoc) attached to all non-custom widgets; a function that will be invoked before the widget gets a dom node constructed, passing the
document in which that will happen.
... ondestroyed(adoc) attached to all non-custom widgets; a function that will be invoked after the widget has a dom node destroyed, passing the
document from which it was removed.
Bootstrapping a new locale
(see also https://developer.mozilla.org/en/create_a_new_localization) the
documentation here is no longer being maintained and is inaccurate.
... l10n
documentation has moved to https://mozilla-l10n.github.io/localizer-
documentation/ .
... to learn how to bootstrap a new locale for mozilla projects, please see those
documents.
... this
document will give you the basic information on how to do that.
Mozilla Quirks Mode Behavior
(this also applies to getelementsbyclassname.) stylesheets linked in the
document with an advisory mime type of text/css will still be treated as css even if the server gives a content-type header other than text/css.
... quirks mode has
document.all support (undetected).
... tables td, th, tr, thead, tbody, and tfoot elements have the
document background (and color?) applied to them (when the
document background is specified in certain ways?) (see also bug 70831).
... original
document information author(s): david baron, boris zbarsky see also mozilla's quirks mode ...
Gecko Profiler FAQ
this
documents lists a number of questions asked by people in preparation for a tutorial session about the gecko profiler.
... there is
documentation for the gecko profile format.
... is there a way to isolate or filter a profile (at least of mainthread and maybe one or two other ones that make sense) to a specific tab/
document/eventqueue?
...some functions (reflow, painting, js excecution) insert the url of the associated
document into the call stack frame, so you can get a rough idea, but we don’t have instrumentation at the tab/
document/eventqueue level.
Leak-hunting strategies and tips
this
document is old and some of the information is out-of-date.
... tool finds platforms requires leak tools for large object graphs leak gauge windows,
documents, and docshells only all platforms any build gc and cc logs js objects, dom objects, many other kinds of objects all platforms any build leak tools for medium-size object graphs bloatview, refcount tracing and balancing objects that implement nsisupports or use moz_count_{ctor,dtor} all tier 1 platforms debug build (or build opt with --enable-log...
...(more
documentation of this replacement for gc_mark_debug, the old way of doing it, would be useful.
...some places you can do this are: layout engine define debug_tracemalloc_framearena where it is commented out in layout/base/nspresshell.cpp glib set the environment variable g_slice=always-malloc other references performance tools leak debugging screencasts (dbaron) leakingpages - a list of pages known to leak mdc:performance - contains
documentation for all of our memory profiling and leak detection tools ...
Leak Gauge
leak gauge is a tool that can be used to detect certain kinds of leaks in gecko, including those involving
documents, window objects, and docshells.
... nspr_log_modules=domleak:5,
documentleak:5,nsdocshellleak:5,nodeinfomanagerleak:5 nspr_log_file=nspr.log # or any other filename of your choice this will overwrite any existing file called nspr.log.
... results of processing log leak.log : summary: leaked 0 out of 11 dom windows leaked 0 out of 44
documents leaked 0 out of 3 docshells leaked content nodes in 0 out of 0
documents if there are leaks, output will look like the following.
...summary: leaked 13 out of 15 dom windows leaked 35 out of 46
documents leaked 4 out of 4 docshells leaked content nodes in 42 out of 53
documents if you see such a results, please file a bug.
Memory reporting
tl;dr: you should read this
document before writing a memory reporter.
...this
document describes things that you should know when writing a memory reporter.
... see the nsimemoryreporter
documentation and nsimemoryreporter.idl for full details.
... if you write a memory reporter, please get two people to review it: (a) someone who knows the data structures being measured, and (b) nnethercote, who can check for all the things covered by this
document.
nglayout.debug.disable_xul_cache
to improve performance, mozilla caches chrome xul
documents the first time they load for faster loading later.
...the xul cache is serialized and saved between mozilla sessions in the xul fastload file, which saves a “compiled” version of the xul and javascript in a
document to disk for faster startup the next time the application runs.
...possible values and their effects: true: do not cache parsed xul
documents and do not save the cache to the xul fastload file on exit; re-read the source files each time the window or dialog needs to be displayed.
... false: cache xul
documents in memory and save the cache to disk on exit to improve performance.
FIPS Mode - an explanation
the united states government defines many (several hundred) "federal information processing standard" (fips)
documents.
... (fips sounds plural, but is singular; one fips
document is a fips, not a fip.) fips
documents define rules, regulations, and standards for many aspects of handling of information by computers and by people.
... it requires that all cryptography done by us government personnel must be done in "devices" that have been independently tested, and certified by nist, to meet the extensive requirements of that
document.
... it must implement the us government standard algorithms (also specified in other fips
documents) such as aes, triple-des, sha-1 and sha-256, that are needed to do whatever job the application wants it to perform.
Getting Started With NSS
over time, many
documents have been produced that describe various aspects of nss.
... you can start with: the current primary nss
documentation page from which we link to other
documentation.
... old
documentation that is on the archived mozilla.org website.
... (unfortunately the nss project doesn't have a technical writer at this time, so our
documentation is not as organized as we would like it to be.
NSS_3.11.10_release_notes.html
nss 3.11.10 release notes 2008-12-10 newsgroup: <ahref="news: mozilla.dev.tech.crypto"="" news.mozilla.org="">mozilla.dev.tech.crypto</ahref="news:> contents introduction distribution information bugs fixed
documentation compatibility feedback introduction network security services (nss) 3.11.10 is a patch release for nss 3.11.
... see the
documentation section for the build instructions.
...t to nss bug 431621: add diginotar root ca root to nss bug 431772: add network solutions and diginotar root certs to nss bug 442912: fix nssckbi version number on 3.11 branch bug 443045: fix pk11_generatekeypair for ecc keys on the 3.11 branch bug 444850: nss misbehaves badly in the presence of a disabled pkcs#11 slot bug 462948: lint warnings for source files that include keythi.h
documentation for a list of the primary nss
documentation pages on mozilla.org, see nss
documentation.
... new and revised
documents available since the release of nss 3.9 include the following: build instructions for nss 3.11.4 and above compatibility nss 3.11.10 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS_3.12.2_release_notes.html
nss 3.12.2 release notes 2008-10-20 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.2 bugs fixed
documentation compatibility feedback introduction network security services (nss) 3.12.2 is a patch release for nss 3.12.
... see the
documentation section for the build instructions.
... bug 459359: forwardbuilderstate object is leaked when aia path incorrect bug 459481: nss build problem with gcc 3.4.6 on os/2
documentation for a list of the primary nss
documentation pages on mozilla.org, see nss
documentation.
... new and revised
documents available since the release of nss 3.11 include the following: build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.12.6 release notes
see the
documentation section for the build instructions.
... see
documentation.
...8: nss: add function for recording ocsp stapled replies bug 544191: use system zlib on mac os x bug 544584: segmentation fault when enumerating the nss database bug 544586: various nss-sys-init patches from fedora bug 545273: remove unused function sec_init bug 546389: nsssysinit binary built inside source tree
documentation for a list of the primary nss
documentation pages on mozilla.org, see nss
documentation.
... new and revised
documents available since the release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.6 shared libraries are backward compatible with all older nss 3.x shared libraries.
SSL functions
other sources of information: the nss_reference
documents the functions most commonly used by applications to support ssl.
... the nss home page links to additional ssl
documentation.
... 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.
... function name/
documentation source code nss versions nss_getclientauthdata mxr 3.2 and later nss_setdomesticpolicy mxr 3.2 and later nss_setexportpolicy mxr 3.2 and later nss_setfrancepolicy mxr 3.2 and later nssssl_versioncheck mxr 3.2.1 and later ssl_authcertificate mxr 3.2 and later ssl_authcertificatehook mxr 3.2 and later ssl_badcerthook mxr 3.2 and later ssl_certdbhandleset mxr 3.2 and later ssl_canbypass ...
JIT Optimization Strategies
note: this page is an in-progress
documentation of jit optimization strategies planned to support the "jit coach" feature intended for inclusion in firefox developer tools.
...provide a user-browsable
documentation of optimization strategies, how they work, how they are defeated, and options for how to re-enable them.
... this page
documents the various optimization strategies and their outcomes.
...the different success and failure conditions are
documented below: getprop_staticname attempts to optimize a property access on window which refers to a property on the global object.
SpiderMonkey 1.8
however, one of the most important advances for jsapi application developers is that the
documentation is much improved.
...jsfastnative can be significantly faster, but applications that use spidermonkey's fine-grained security features should heed the warning in its api
documentation.
...both are
documented but obscure.
...these apis are un
documented but fairly stable.
Redis Tips
this
document is a collection of some examples and tips for using redis, the open-source data structure server.
... event logging lists, zsets, pubsub queues lists (rpush, blpop, blpoprpush, etc.) priority queues zsets membership sets, bitstrings state hashes heartbeats zsets hit counters zsets message broadcast pubsub search reverse indexes (never use keys in production)
documentation redis has fantastic
documentation.
... getting started with redis before you go any further in this
document, make sure you have played with redis for at least 5 or 10 minutes.
... do i want a structured
document db and/or sql on the side?
A Web PKI x509 certificate primer
x.509 (in this
document referred as x509) is an itu standard to describe certificates.
...in this
document we will be referring to the current standard in use for web pki: x509 v3, which is described in detail in rfc 5280.
... extensions while rfc 5280 defines 16 extensions for webpki in this
document we will be describing the six extensions we considered critical for understanding.
... certificates can have other extensions not described on rfc 5280, but that is out of the scope of this
document.
Feed content access API
alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } catch(e) { alert(e); } } the nsifeedprocessor interface lets you parse the feed data from several possible sources; in this case, we're loading a
document into a string, then parsing that string using its parsefromstring() method.
...that code looks like this: feedtestresultlistener.prototype = { handleresult: function(result) { var feed = result.doc; feed.queryinterface(components.interfaces.nsifeed); // open a new window var win = window.open("", "feedtest_window"); var doc = win.
document.wrappedjsobject; doc.open(); // write the html header and page title doc.write("<html><head><title>feed: " + feed.title.text + "</title></head><body>"); doc.write("<h1>" + feed.title.text + "</h1><p>"); var itemarray = feed.items; var numitems = itemarray.length; // write the article information if (!numitems) { doc.w...
...entry.title.text + '</a></b><br>'); if (theentry.summary) { info = theentry.summary.text + "<p><hr><p>"; } else { info = theentry.content.text + "<p><hr><p>"; } doc.write("<blockquote>" + info); doc.write("</blockquote><p>"); } } } // close the
document; we're done!
...we build the contents of the
document by looking at the title, link, summary, and content properties for each item.
Using the Places history service
this information is called a "visit" in this
document and in the code.
...see add
documentredirect below.
... nsiglobalhistory3.add
documentredirect: this is called by the docshell when a redirect occurs.
...under normal browsing, adduri and add
documentredirect will infer this information for you.
Building the WebLock UI
in this tutorial, focusing as it is on the weblock functionality (rather than the ui), we'll assume the strings we get from the ui itself are urls we actually want to write to the white list: function addthissite() { var tf =
document.getelementbyid("dialog.input"); // weblock is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the input string is retrieved as the value property of the textbox element.
... the xul
document the first thing to do is create the actual xul
document in which the user interface for the dialog and the events that initiate interaction with the web locking are defined.
... at the top of all xul
documents, an xml declaration is followed by the root element for the
document, which is usually <window/> but for dialog boxes can also be the element <dialog/>.
...distribution of substantively modified versions of this
document is prohibited without the explicit permission of the copyright holder.
Mozilla internal string guide
this guide
documents the string classes which are visible to code within the mozilla codebase (code which is linked into libxul).
...for the purpose of this
document, we will refer to the 16-bit string classes in class
documentation.
... complete
documentation can be found in the appendix.
... original
document information author: alec flett copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
XPCOM guide
these articles provide tutorials and usage
documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.
...this
document attempts to help them do so, first by explaining the underlying concepts, and second by describing a number of common javascript patterns that cause leaks.creating xpcom componentsthis guide is about gecko, and about creating xpcom components for gecko-based applications.how to build an xpcom component in javascriptif you are looking for add-on sdk solution for xpcom javascript components then check out platform/xpcom module first.inheriting from implementation classesgiven that idl interfaces map to abstract classes in c++, a common problem when dealing with idl is when you have an...
...this guide
documents the string classes which are visible to code within the mozilla codebase (code which is linked into libxul).
...in this
document the term array refers to a container for multiple objects with a numeric, zero-based index.xpcom changes in gecko 2.0several changes that affect xpcom component compatibility are taking place in gecko 2.
Components.utils.exportFunction
o any changes to the argument that are made in the exported function will affect the original object that was passed in: // privileged scope: for example, a content script function changemyname(user) { user.name = "bill"; } exportfunction(changemyname, contentwindow, { defineas: "changemyname" }); // less-privileged scope: for example, a page script var user = {name: "jim"}; var test =
document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(user.name); // "jim" window.changemyname(user); console.log(user.name); // "bill" }, false); note that this is subject to the normal rules of xrays: for example, an expando property added to a dom node will not be visible in the original object.
...for the full details refer to the
documentation for xray vision, but for example: functions are not visible in the xrays of javascript object types.
... can waive xrays: // privileged scope: for example, a content script function loguser(user) { // console.log(user.getuser()); // error console.log(user.wrappedjsobject.getuser()); // "bill" } exportfunction(loguser, contentwindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script var user = {getuser: function() {return "bill";}} var test =
document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(user); }, false); passing functions as arguments if functions are given as arguments, these are also passed as xrays.
...hat passing callbacks into the exported function just works, making the allowcallbacks option redundant: // privileged scope: for example, a content script function loguser(getuser) { console.log(getuser()); // "bill" } exportfunction(loguser, unsafewindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script function getuser() { return "bill"; } var test =
document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(getuser); }, false); cross-origin checking when the exported function is called each argument, including this, is checked to make sure that the caller subsumes that argument.
imgILoader
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/image/loader;1 as a service: var imgiloader = components.classes["@mozilla.org/image/loader;1"] .getservice(components.interfaces.imgiloader); method overview imgirequest loadimage(in nsiuri auri, in nsiuri ainitial
documenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy); imgirequest loadimagewithchannel(in nsichannel achannel, in imgidecoderobserver aobserver, in nsisupports cx, out nsistreamlistener alisten...
...imgirequest loadimage( in nsiuri auri, in nsiuri ainitial
documenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy ); parameters auri the uri to load.
... ainitial
documenturl areferreruri the 'referring' uri.
... aloadingprincipal the principal of the loading
document.
nsICachingChannel
an error of ns_error_
document_not_cached will be sent to the listener's onstoprequest if network io is necessary to complete the request.
...an error of ns_error_
document_not_cached will be sent to the listener's onstoprequest in this case.
... load_only_if_modified 1 << 31 this load flag controls what happens when a
document would be loaded from the cache to satisfy a call to asyncopen.
... if this attribute is set to true, then the
document will not be loaded from the cache.
nsIDOMSerializer
an instance of this interface can be used to serialize a dom
document or any dom subtree.
...this could be any node, including a
document.
...if this string is empty and root is a
document, the
document's character set will be used.
...this could be any node, including a
document.
nsIDroppedLinkHandler
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean candroplink(in nsidomdragevent aevent, in prbool aallowsame
document); astring droplink(in nsidomdragevent aevent, out astring aname, [optional] in boolean adisallowinherit); void droplinks(in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlinkitem alinks); methods candroplink() determines if a link being dragged can be dropped.
... boolean candroplink( in nsidomdragevent aevent, in prbool aallowsame
document ); parameters aevent a dragenter or dragover event.
... aallowsame
document if false, drops are only allowed if the
document of the source of the drag is different from the destination.
...this prevents a source
document from tricking the user into a dragging a chrome url for example.
nsIEditorMailSupport
erthtml); nsidomnode insertasquotation(in astring aquotedtext); void inserttextwithquotations(in domstring astringtoinsert); void pasteascitedquotation(in astring acitation, in long aselectiontype); void pasteasquotation(in long aselectiontype); void rewrap(in boolean arespectnewlines); void stripcites(); methods getembeddedobjects() get a list of img and object tags in the current
document.
...return value an nsisupportsarray containing the img and object tags of the current
document.
... rewrap() rewrap the selected part of the
document, re-quoting if necessary.
... stripcites() strip any citations in the selected part of the
document.
nsIJumpListBuilder
jumplist_category_recent 1 recent lists are based on window's recent
document lists.
...applications that use recent or frequent lists should keep
document use tracking up to date by calling the shaddtorecentdocs shell api.
... jumplist_category_frequent 2 frequent lists are based on window's recent
document lists.
...applications that use recent or frequent lists should keep
document use tracking up to date by calling the shaddtorecentdocs shell api.
nsIMacDockSupport
this can be done like this: var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); console.log('docksupport:', docksupport); var win = services.wm.getmostrecentwindow('navigator:browser'); var macmenu = win.
document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.
document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistene...
...r('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.
document.getelementbyid('mainpopupset'); mainpopupset.appendchild(macmenu); let dockmenuelement = macmenu; //
document.getelementbyid("menu_mac_dockmenu");66 let nativemenu = cc["@mozilla.org/widget/standalonenativemenu;1"].createinstance(ci.nsistandalonenativemenu); console.log('dockmenuelement:', dockmenuelement); nativemenu.init(dockmenuelement); docksupport.dockmenu = nativemenu; this replaces the default menu with this one menuitem that says "show most recent window".
...var macmenuitem = services.appshell.hiddendomwindow.
document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); se...
...rvices.wm.getmostrecentwindow(null).focus() }) services.appshell.hiddendomwindow.
document.getelementbyid('menu_mac_dockmenu').appendchild(macmenuitem) this adds the "show most recent window" menuitem from the previous example as a third item.
nsISelection
inherits from: nsisupports last changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) interface for manipulating and querying the current selected range of nodes within the
document.
... void collapsetoend(); void collapsetostart(); boolean containsnode(in nsidomnode node, in boolean partlycontained); void deletefrom
document(); void extend(in nsidomnode parentnode, in long offset); void extendnative(in nsidomnode parentnode, in long offset); native code only!
...deletefrom
document() deletes this selection from the
document the nodes belong to.
... void deletefrom
document(); extend() extends the selection by moving the selection end to the specified nsidomnode and offset, preserving the selection begin position.
XPCOM Interface Reference
lbackmozistoragestatementparamsmozistoragestatementrowmozistoragestatementwrappermozistoragevacuumparticipantmozistoragevaluearraymozitxttohtmlconvmozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessible
documentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessiblerelationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsiaccessibletextnsiaccessibletextchangeeventnsiacc...
...omgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtml
documentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstoragewindownsidomuserdatahandlernsidomwindownsidomwindow2nsidomwindowinternalnsidomwindowutilsnsidomxpathevaluatornsidomxpa...
...nsidomxulselectcontrolitemelementnsidatasignatureverifiernsidebugnsidebug2nsidevicemotionnsidevicemotiondatansidevicemotionlistenernsidialogcreatornsidialogparamblocknsidictionarynsidirindexnsidirindexlistenernsidirindexparsernsidirectoryenumeratornsidirectoryiteratornsidirectoryservicensidirectoryserviceprovidernsidirectoryserviceprovider2nsidiskcachestreaminternalnsidispatchsupportnsidocshellnsi
documentloadernsidownloadnsidownloadhistorynsidownloadmanagernsidownloadmanageruinsidownloadobservernsidownloadprogresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienum...
...backnsiinstalllocationnsiinterfacerequestornsijscidnsijsidnsijsiidnsijsonnsijetpacknsijetpackservicensijumplistbuildernsijumplistitemnsilivemarkservicensiloadgroupnsilocalfilensilocalfilemacnsilocalensilocaleservicensilogininfonsiloginmanagernsiloginmanagercryptonsiloginmanageriemigrationhelpernsiloginmanagerprompternsiloginmanagerstoragensiloginmetainfonsimimeinputstreamnsimacdocksupportnsimarkup
documentviewernsimemorynsimemorymultireporternsimemorymultireportercallbacknsimemoryreporternsimemoryreportermanagernsimenuboxobjectnsimessagebroadcasternsimessagelistenernsimessagelistenermanagernsimessagesendernsimessagewakeupservicensimessengernsimicrosummarynsimicrosummarygeneratornsimicrosummaryobservernsimicrosummaryservicensimicrosummarysetnsimimeconverternsimimeheadersnsimodulensimsgaccountnsimsga...
Storage
getting started this
document covers the storage api and some peculiarities of sqlite.
...the full list of binding functions can be found with the mozistoragestatement
documentation.
...see its
documentation for more details on each method.
...you can find out more by reading sqlite's
documentation on this.
Using nsCOMPtr
this
document is the sum total of everything written down about nscomptr.
... if you have a question about nscomptr, and this
document doesn't answer it, there probably isn't a
document that answers it.
...after you've been using nscomptrs for a while, and you reach unfamiliar territory, or run into compiler errors; you may want to return to this
document to get help from the reference manual or the faq.
... general bibliography original
document information author(s): scott collins last updated date: december 11, 2001 copyright information: copyright © 1999, 2000 by the mozilla organization; use is subject to the mpl.
Using nsIDirectoryService
header files containing known keys are listed in the known locations section of this
document.
...be sure to see the
documentation on the service itself.
... this
document will focus on how the service is used and how to customize it.
...related pages code_snippets:file_i/o original
document information authors: conrad carlen, doug turner last updated date: september 26, 2000 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
XPCOM
if you have a class that you think is involved in a cyclical-ownership leak, this page is for you.introduction to xpcom for the domwarning: this
document has not yet been reviewed by the dom gurus, it might contain some errors.language bindingsan xpcom language binding is a bridge between a particular language and xpcom to provide access to xpcom objects from that language, and to let modules written in that language be used as xpcom objects by all other languages for which there are xpcom bindings.monitoring http activitygecko includes the nsihtt...
... troubleshooting xpcom components registrationoften the first time you create an xpcom component, it may fail to register correctly.using nscomptrthis
document is the sum total of everything written down about nscomptr.
... if you have a question about nscomptr, and this
document doesn't answer it, there probably isn't a
document that answers it.
...it allows developers to link only against the frozen xpcom method symbols and maintain compatibility with multiple versions of xpcom.xpcom guidethese articles provide tutorials and usage
documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.xpcom ownership guidelines...naturally.
Building a Thunderbird extension 5: XUL
xul overlays are a way of attaching other ui widgets to a xul
document at run time.
... a xul overlay is a .xul file that specifies xul fragments to insert at specific merge points within a "master"
document.
... example xul overlay
document create a new file called myhelloworld.xul within the content folder you created earlier with the following content: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myfirstext/content/overlay.js"/><!-- a reference to your javascript file --> <statusbar id="status-bar"> <statu...
...when parsing our overlay file, the xul engine will take all child elements of the <statusbar> tag and merge them with the original xul
document's <statusbar> tag.
Thunderbird
these pages
document thunderbird and the mailnews backend which is also used in other projects such as seamonkey and postbox.
...(from early 2007 to early 2011 thunderbird was developed by mozilla messaging, a subsidiary owned by mozilla.)
documentation building thunderbird information about building thunderbird with the comm-central repository.
... mailnews protocols rough
documentation about mail protocols..
... thunderbird api
documentation thunderbird api
documentation extension
documentation tutorials and tips for building thunderbird extensions view all...
Add to iPhoto
if (
document.getelementbyid("contentareacontextmenu")) {
document.getelementbyid("contentareacontextmenu").addeventlistener("popupshowing", iphoto.onpopup, false); } responding when the context menu is clicked when the user right-clicks an image, our handler gets called: onpopup: function() { var node = iphoto.getcurrentnode(); var item =
document.getelementbyid("add-to-iphoto_menuitem"); if (it...
... the code to identify the node looks like this: getcurrentnode: function() { var node =
document.popupnode; // if no node, just return null now if (node == undefined || !node) { return null; } // is it an image node?
...ss(), null, null, null, null); var appstr = "file:///applications/iphoto.app"; var appstrcf = corefoundation.cfstringcreatewithcharacters(null, appstr, appstr.length); var appurl = corefoundation.cfurlcreatewithstring(null, appstrcf, null); corefoundation.cfrelease(appstrcf); var b = corefoundation.cfurlgetfsref(appurl, ref.address()); if (!b) { var stringsbundle =
document.getelementbyid("string-bundle"); alert(stringsbundle.getstring('alert_download_error_string')); } else { var array = ctypes.cast(mutablearray, corefoundation.cfarrayref); appservices.lsopenurlswithrole(array, 0, null, appparams.address(), null, 0); } corefoundation.cfrelease(appurl); // clean up corefoundation.cfrelease(array); } appservices.shutdown(...
...ile); dest.append(filename); dest.createunique(dest.normal_file_type, 0600); var wbp = components.classes['@mozilla.org/embedding/browser/nswebbrowserpersist;1'] .createinstance(components.interfaces.nsiwebbrowserpersist); var ios = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri(src,
document.characterset, gbrowser.selectedbrowser.content
document.
documenturiobject); wbp.persistflags &= ~components.interfaces.nsiwebbrowserpersist.persist_flags_no_conversion; // don't save gzipped wbp.saveuri(uri, null, null, null, null, dest); return dest.path; } this is pretty straightforward, typical mozilla code.
Using COM from js-ctypes
this
documentaion explains how to convert the com c++ code into js-ctypes code.
...nt main(void) { if (succeeded(coinitialize(null))) { ispvoice* pvoice = null; hresult hr = cocreateinstance(clsid_spvoice, null, clsctx_all, iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->speak(l"hello, firefox!", spf_default, null); pvoice->release(); } } // msdn
documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.cpp, and run following command in the directory (needs visual studio).
...eeded(coinitialize(null))) { struct ispvoice* pvoice = null; hresult hr = cocreateinstance(&clsid_spvoice, null, clsctx_all, &iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->lpvtbl->speak(pvoice, l"hello, firefox!", 0, null); pvoice->lpvtbl->release(pvoice); } } // msdn
documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.c, and run following command in the directory.
...t myispvoice* pvoice = null; hresult hr = cocreateinstance(&clsid_spvoice, null, clsctx_all, &iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->lpvtbl->speak(pvoice, l"hello, firefox!", spf_default, null); pvoice->lpvtbl->release(pvoice); } } // msdn
documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } converting c code to js-ctypes code now we have working c code.
Plug-in Basics - Plugins
var plugin = mimetype.enabledplugin; if (plugin) { // yes, so show the data in-line
document.writeln("here\'s a movie: <object data='mymovie.swf' height='100' width='100'></object>"); } else { // no, so provide a link to the data
document.writeln("<a href='mymovie.swf'>click here</a> to see a movie."); } } else { // no, so tell them so
document.writeln("sorry, can't show you this movie."); } overview of plug-in structure this section is an overview of basic inf...
... a plug-in, whether it is windowed or windowless, can have one of these display modes: embedded in a web page and visible embedded in a web page and hidden displayed as a full page in its own window an embedded plug-in is part of a larger html
document and is loaded at the time the
document is displayed.
...when gecko encounters the object or embed element in a
document, it attempts to find and display the file represented by the data and src attributes, respectively.
...full-page plug-ins are commonly used for
document viewers, such as adobe acrobat.
Plug-in Development Overview - Plugins
working with urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a url anywhere on the network, provide hyperlinks to other
documents, post form data to cgi scripts using http, or upload files to a remote server using ftp.
... starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7), you can get the origin of the
document in a secure, convenient way by calling npn_getvalue() to retrieve the value of the variable npnv
documentorigin.
... the returned value is the unicode serialization of the
document's origin converted to nfkc-encoded (that is, normalized) utf-8.
...consider the following example, where a media player plug-in can be controlled with an advancetonextsong() method called inside the script element: <object id="myplugin" type="audio/wav" data="music.wav"> </object> <script type="application/javascript"> var theplugin =
document.getelementbyid('myplugin'); if (theplugin && theplugin.advancetonextsong) theplugin.advancetonextsong(); else alert("plugin not installed correctly"); </script> in the past, liveconnect and later xpconnect were used to make plug-ins scriptable.
DOM Inspector - Firefox Developer Tools
the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the
document object model of
documents - usually web pages or xul windows.
... the dom hierarchy can be navigated using a two-paned window that allows a variety of different views on the
document and all nodes within.
...if you are looking for the dom inspector that's built into firefox, see the
documentation for the page inspector.
...
documentation introduction to dom inspector a guided tutorial that will help you get started with dom inspector.
AudioContext.createMediaElementSource() - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio =
document.queryselector('audio'); var pre =
document.queryselector('pre'); var myscript =
document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node var gainnode = audioctx.creategain(); // create variables to store mouse pointer y coordi...
...nate // and height of screen var cury; var height = window.innerheight; // get new mouse pointer coordinates when mouse is moved // then set new gain value
document.onmousemove = updatepage; function updatepage(e) { cury = (window.event) ?
... e.pagey : event.clienty + (
document.
documentelement.scrolltop ?
...
document.
documentelement.scrolltop :
document.body.scrolltop); gainnode.gain.value = cury/height; } // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(gainnode); gainnode.connect(audioctx.destination); note: as a consequence of calling createmediaelementsource(), audio playback from the htmlmediaelement will be re-routed into the processing graph of the audiocontext.
Beacon API - Web APIs
example code of the interfaces described in this
document is included in using the beacon api.
... the beacon interface addresses the needs of analytics and diagnostics code that typically attempts to send data to a web server before unloading the
document.
...however, ensuring that the data is sent during the unloading of a
document is something that has traditionally been difficult for developers.
...the synchronous xmlhttprequest forces the browser to delay unloading the
document, and makes the next navigation appear to be slower.
CDATASection - Web APIs
obsolete removed in favour of the more generic text interface
document object model (dom) level 3 core specificationthe definition of 'cdatasection' in that specification.
... obsolete no change from
document object model (dom) level 2 core specification
document object model (dom) level 2 core specificationthe definition of 'cdatasection' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'cdatasection' in that specification.
CSSStyleDeclaration.setProperty() - Web APIs
we know that the rule we want to alter to do this is contained inside the second stylesheet applied to the page, so we grab a reference to it using
document.stylesheets[1].
...rgin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; } javascript const borderbtn =
document.queryselector('.border'); const bgcolorbtn =
document.queryselector('.bgcolor'); const colorbtn =
document.queryselector('.color'); const box =
document.queryselector('.box'); function random(min,max) { const num = math.floor(math.random()*(max-min)) + min; return num; } function randomcolor() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } const s...
...tylesheet =
document.stylesheets[1]; let boxpararule; for(let i = 0; i < stylesheet.cssrules.length; i++) { if(stylesheet.cssrules[i].selectortext === '.box p') { boxpararule = stylesheet.cssrules[i]; } } function setrandomborder() { const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor); result specifications ...
... working draft
document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleSheet.insertRule() - Web APIs
mystyle.insertrule('#blanc { color: white }', 0); function to add a stylesheet rule /** * add a stylesheet rule to the
document (it may be better practice * to dynamically change classes, so style information can be kept in * genuine stylesheets and avoid adding extra elements to the dom).
... * @param {array} rules accepts an array of json-encoded declarations * @example addstylesheetrules([ ['h2', // also accepts a second argument as an array of arrays instead ['color', 'red'], ['background-color', 'green', true] // 'true' for !important rules ], ['.myclass', ['background-color', 'yellow'] ] ]); */ function addstylesheetrules (rules) { var styleel =
document.createelement('style'); // append <style> element to <head>
document.head.appendchild(styleel); // grab style element's sheet var stylesheet = styleel.sheet; for (var i = 0; i < rules.length; i++) { var j = 1, rule = rules[i], selector = rule[0], propstr = ''; // if the second argument of a rule is an array of arrays, correct our variables.
... working draft no change from
document object model (dom) level 2 style specification.
...
document object model (dom) level 2 style specificationthe definition of 'cssstylesheet.insertrule' in that specification.
CanvasRenderingContext2D.arcTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // tangential lines ctx.beginpath(); ctx.strokestyle = 'gray'; ctx.moveto(200, 20); ctx.lineto(200, 130); ctx.lineto(50, 20); ctx.stroke(); // arc ctx.beginpath(); ctx.strokestyle = 'black'; ctx.linewidth = 5; ctx.moveto(200, 20); ctx.arcto(200,130, 50,20, 40); ctx.stroke(); // start point ctx.beginpath(); ctx.fillstyle = 'blue'; c...
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const p0 = { x: 230, y: 20 } const p1 = { x: 90, y: 130 } const p2 = { x: 20, y: 20 } const labelpoint = function (p) { const offset = 15; ctx.filltext('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset); } ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, 50); ctx.lineto(p2.x, p2.y); labelpoi...
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(180, 90); ctx.arcto(180,130, 110,130, 130); ctx.lineto(110, 130); ctx.stroke(); result live demo more sophisticated demo of the method.
... html <div> <label for="radius">radius: </label> <input name="radius" type="range" id="radius" min=0 max=100 value=50> <label for="radius" id="radius-output">50</label> </div> <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const controlout =
document.getelementbyid('radius-output'); const control =
document.getelementbyid('radius'); control.oninput = () => { controlout.textcontent = r = control.value; }; const mouse = { x: 0, y: 0 }; let r = 100; // radius const p0 = { x: 0, y: 50 }; const p1 = { x: 100, y: 100 }; const p2 = { x: 150, y: 50 }; const p3 = { x: 200, y: 100 }; const labelpoint = function (p, offs...
Manipulating video using canvas - Web APIs
the
document content the html
document used to render this content is shown below.
...style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canvas> </div> <script type="text/javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this
document establishes two canvas elements, with the ids c1 and c2.
... initializing the chroma-key player the doload() method is called when the xhtml
document initially loads.
... 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.addeventlistener('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 ele...
Compositing example - Web APIs
var canvas1 =
document.createelement("canvas"); var canvas2 =
document.createelement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].reverse(); var gcotext = [ 'this is the default setting and draws new shapes on top of the existing canvas content...
... function createcanvas() { var canvas =
document.createelement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl =
document.createelement("dl");
document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); ...
... var dt =
document.createelement("dt"); dt.textcontent = pop; dl.appendchild(dt); var dd =
document.createelement("dd"); var p =
document.createelement("p"); p.textcontent = gcotext.pop(); dd.appendchild(p); var canvastodrawon = createcanvas(); var canvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - ...
... break; case 4: r = c; g = a; b = v; break; case 5: r = v; g = a; b = b; break; } } return { r: r, g: g, b: b }; }; var createinterlace = function (size, color1, color2) { var proto =
document.createelement("canvas").getcontext("2d"); proto.canvas.width = size * 2; proto.canvas.height = size * 2; proto.fillstyle = color1; // top-left proto.fillrect(0, 0, size, size); proto.fillstyle = color2; // top-right proto.fillrect(size, 0, size, size); proto.fillstyle = color2; // bottom-left proto.fillrect(0, size, size, size); proto.fillstyle = color1; // bot...
Drawing text - Web APIs
function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle.
... function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.stroketext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size.
...; playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textbaseline = "hanging"; ctx.stroketext("hello world", 0, 100);</textarea> var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea =
document.getelementbyid('code'); var reset =
document.getelementbyid('reset'); var edit =
document.getelementbyid('edit'); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code;...
... function draw() { var ctx =
document.getelementbyid('canvas').getcontext('2d'); var text = ctx.measuretext('foo'); // textmetrics object text.width; // 16; } gecko-specific notes in gecko (the rendering engine of firefox, firefox os and other mozilla based applications), some prefixed apis were implemented in earlier versions to draw text on a canvas.
Pixel manipulation with canvas - Web APIs
<canvas id="canvas" width="300" height="227" style="float:left"></canvas> <div id="color" style="width:200px;height:50px;float:left"></div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.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] + ',...
... <canvas id="canvas" width="300" height="227"></canvas> <div> <input id="grayscalebtn" value="grayscale" type="button"> <input id="invertbtn" value="invert" type="button"> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height); var data = imagedata.data; var invert = function() { for (var i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; // red data[i + 1] = 255 - data[i + 1]; // green da...
...ta[i + 2] = 255 - data[i + 2]; // blue } ctx.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.addeventlistener('click', invert); var grayscalebtn =
document.getelementbyid('grayscalebtn'); grayscalebtn.addeventlistener('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.
...h="300" height="227"></canvas> <canvas id="zoom" width="300" height="227"></canvas> <div> <label for="smoothbtn"> <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> enable image smoothing </label> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var zoomctx =
document.getelementbyid('zoom').getcontext('2d'); var smoothbtn =
document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesmoothingenabled = this.checked; zoomct...
ChildNode.before() - Web APIs
examples inserting an element var parent =
document.createelement("div"); var child =
document.createelement("p"); parent.appendchild(child); var span =
document.createelement("span"); child.before(span); console.log(parent.outerhtml); // "<div><span></span><p></p></div>" inserting text var parent =
document.createelement("div"); var child =
document.createelement("p"); parent.appendchild(child); child.before("text"); console.log(parent.out...
...erhtml); // "<div>text<p></p></div>" inserting an element and text var parent =
document.createelement("div"); var child =
document.createelement("p"); parent.appendchild(child); var span =
document.createelement("span"); child.before(span, "text"); console.log(parent.outerhtml); // "<div><span></span>text<p></p></div>" childnode.before() is unscopable the before() method is not scoped into the with statement.
...erz/js_piece/blob/master/dom/childnode/before()/before().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('before')) { return; } object.defineproperty(item, 'before', { configurable: true, enumerable: true, writable: true, value: function before() { var argarr = array.prototype.slice.call(arguments), docfrag =
document.create
documentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appendchild(isnode ?
... argitem :
document.createtextnode(string(argitem))); }); this.parentnode.insertbefore(docfrag, this); } }); }); })([element.prototype, characterdata.prototype,
documenttype.prototype]); specification specification status comment domthe definition of 'childnode.before()' in that specification.
DOMHighResTimeStamp - Web APIs
the time origin the time origin is a standard time which is considered to be the beginning of the current
document's lifetime.
... it's calculated like this: if the script's global object is a window, the time origin is determined as follows: if the current
document is the first one loaded in the window, the time origin is the time at which the browser context was created.
... if during the process of unloading the previous
document which was loaded in the window, a confirmation dialog was displayed to let the user confirm whether or not to leave the previous page, the time origin is the time at which the user confirmed that navigating to the new page was acceptable.
... if neither of the above determines the time origin, then the time origin is the time at which the navigation responsible for creating the window's current
document took place.
DOMImplementation.hasFeature() - Web APIs
syntax const flag =
document.implementation.hasfeature(feature, version); parameters feature a domstring representing the feature name.
...
document object model (dom) level 3 core specificationthe definition of 'domimplementation.hasfeature' in that specification.
... obsolete no change from
document object model (dom) level 2 core specification
document object model (dom) level 2 core specificationthe definition of 'domimplementation.hasfeature' in that specification.
... obsolete no change from
document object model (dom) level 1 specification
document object model (dom) level 1 specificationthe definition of 'domimplementation.hasfeature' in that specification.
Locating DOM elements using selectors - Web APIs
the nodeselector interface this specification adds two new methods to any objects implementing the
document,
documentfragment, or element interfaces: queryselector() returns the first matching element node within the node's subtree.
... you may find examples and details by reading the
documentation for the element.queryselector() and element.queryselectorall() methods, as well as in the article code snippets for queryselector.
...for example, to select all paragraph (p) elements in a
document whose css class is either warning or note, you can do the following: var special =
document.queryselectorall( "p.warning, p.note" ); you can also query by id.
... for example: var el =
document.queryselector( "#main, #basic, #exclamation" ); after executing the above code, el contains the first element in the
document whose id is one of main, basic, or exclamation.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
any whitespace characters that are outside of html elements in the original
document are represented in the dom.
... this is needed internally so that the editor can preserve formatting of
documents.
... take the following
document, for example: <!doctype html> <html> <head> <title>my
document</title> </head> <body> <h1>header</h1> <p> paragraph </p> </body> </html> the dom tree for this looks like so: conserving whitespace characters in the dom is useful in many ways, but there are certain places where this makes certain layouts more difficult to implement, and causes problems for developers who want to iterate through nodes in the dom.
... var cur = first_child(
document.getelementbyid("test")); while (cur) { if (data_of(cur.firstchild) == "this is the third paragraph.") { cur.classname = "magic"; cur.firstchild.textcontent = "this is the magic paragraph."; } cur = node_after(cur); } ...
Element: mouseenter event - Web APIs
examples the mouseover
documentation has an example illustrating the difference between mouseover and mouseenter.
... #mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget =
document.getelementbyid('mousetarget'); const unorderedlist =
document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveevent...
...count++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode =
document.createtextnode(text); // create a new li element var newlistitem =
document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseenter' in that specification.
... working draft
document object model (dom) level 3 events specificationthe definition of 'mouseenter' in that specification.
Element: mouseleave event - Web APIs
examples the mouseout
documentation has an example illustrating the difference between mouseout and mouseleave.
... #mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget =
document.getelementbyid('mousetarget'); const unorderedlist =
document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveevent...
...count++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode =
document.createtextnode(text); // create a new li element var newlistitem =
document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.
... working draft
document object model (dom) level 3 events specificationthe definition of 'mouseleave' in that specification.
Element.querySelector() - Web APIs
the entire hierarchy of elements is considered when matching, including those outside the set of elements including baseelement and its descendants; in other words, selectors is first applied to the whole
document, not the baseelement, to generate an initial list of potential elements.
... find a specific element with specific values of an attribute in this first example, the first <style> element which either has no type or has type "text/css" in the html
document body is returned: var el =
document.body.queryselector("style[type='text/css'], style:not([type])"); the entire hierarchy counts this example demonstrates that the hierarchy of the entire
document is considered when applying selectors, so that levels outside the specified baseelement are still considered when locating matches.
... html <div> <h5>original content</h5> <p> inside paragraph <span>inside span</span> inside paragraph </p> </div> <div> <h5>output</h5> <div id="output"></div> </div> javascript var baseelement =
document.queryselector("p");
document.getelementbyid("output").innerhtml = (baseelement.queryselector("div span").innerhtml); result the result looks like this: notice how the "div span" selector still successfully matches the <span> element, even though the baseelement's child nodes do not include the div element (it is still part of the specified selector).
... more examples see
document.queryselector() for additional examples of the proper format for the selectors.
Event.preventDefault() - Web APIs
this example demonstrates how to prevent that from happening: javascript
document.queryselector("#id-checkbox").addeventlistener("click", function(event) {
document.getelementbyid("output-box").innerhtml += "sorry!
...first, listen for keypress events: var mytextbox =
document.getelementbyid('my-textbox'); mytextbox.addeventlistener('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(); displaywarning( "please use lowercase letters only." ...
...it's not an elegant function but does the job for the purposes of this example: var warningtimeout; var warningbox =
document.createelement("div"); warningbox.classname = "warning"; function displaywarning(msg) { warningbox.innerhtml = msg; if (
document.body.contains(warningbox)) { window.cleartimeout(warningtimeout); } else { // insert warningbox after mytextbox mytextbox.parentnode.insertbefore(warningbox, mytextbox.nextsibling); } warningtimeout = window.settimeout(function() { warningbox.parentnode.removechild(warningbox); warningtimeout = -1; }, 2000); } result notes calling preventdefault() during any stage o...
... living standard
document object model (dom) level 2 events specificationthe definition of 'event.preventdefault()' in that specification.
EventTarget - Web APIs
element,
document, and window are the most common event targets, but other objects can be event targets, too.
... many event targets (including elements,
documents, and windows) also support setting event handlers via onevent properties and attributes.
...
document object model (dom) level 3 events specificationthe definition of 'eventtarget' in that specification.
...
document object model (dom) level 2 events specificationthe definition of 'eventtarget' in that specification.
Using the Gamepad API - Web APIs
var gamepadinfo =
document.getelementbyid("gamepad-info"); var ball =
document.getelementbyid("ball"); var start; var a = 0; var b = 0; next we use the gamepadconnected event to check for a gamepad being connected.
... var haveevents = 'ongamepadconnected' in window; var controllers = {}; function connecthandler(e) { addgamepad(e.gamepad); } function addgamepad(gamepad) { controllers[gamepad.index] = gamepad; var d =
document.createelement("div"); d.setattribute("id", "controller" + gamepad.index); var t =
document.createelement("h1"); t.appendchild(
document.createtextnode("gamepad: " + gamepad.id)); d.appendchild(t); var b =
document.createelement("div"); b.classname = "buttons"; for (var i = 0; i < gamepad.buttons.length; i++) { var e =
document.createelement("span"); e.classname = "button"; ...
... //e.id = "b" + i; e.innerhtml = i; b.appendchild(e); } d.appendchild(b); var a =
document.createelement("div"); a.classname = "axes"; for (var i = 0; i < gamepad.axes.length; i++) { var p =
document.createelement("progress"); p.classname = "axis"; //p.id = "a" + i; p.setattribute("max", "2"); p.setattribute("value", "1"); p.innerhtml = i; a.appendchild(p); } d.appendchild(a); // see https://github.com/luser/gamepadtest/blob/master/index.html var start =
document.getelementbyid("start"); if (start) { start.style.display = "none"; }
document.body.appendchild(d); requestanimationframe(updatestatus); } function disconnecthandler(e) { removegamepad(e.gamepad); } function removegamepad(gamepad) { var d =
document.getelemen...
...tbyid("controller" + gamepad.index);
document.body.removechild(d); delete controllers[gamepad.index]; } function updatestatus() { if (!haveevents) { scangamepads(); } var i = 0; var j; for (j in controllers) { var controller = controllers[j]; var d =
document.getelementbyid("controller" + j); var buttons = d.getelementsbyclassname("button"); for (i = 0; i < controller.buttons.length; i++) { var b = buttons[i]; var val = controller.buttons[i]; var pressed = val == 1.0; if (typeof(val) == "object") { pressed = val.pressed; val = val.value; } var pct = math.round(val * 100) + "%"; b.style.backgroundsize = pct + " " + pct; if (pressed) { b.classname = "button pressed"; } else { ...
GlobalEventHandlers - Web APIs
the globaleventhandlers mixin describes the event handlers common to several interfaces like htmlelement,
document, or window.
... event handlers these event handlers are defined on the globaleventhandlers mixin, and implemented by htmlelement,
document, window, as well as by workerglobalscope for web workers.
... pointer lockthe definition of 'extension of
document' in that specification.
... candidate recommendation adds onpointerlockchange and onpointerlockerror on
document.
HTMLAnchorElement.rel - Web APIs
it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <a> element and the current
document.
... syntax var relstr = anchorelt.rel; anchorelt.rel = relstr; example var anchors =
document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { alert("rel: " + anchors[i].rel); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
... living standard no change from
document object model (dom) level 2 html specification
document object model (dom) level 2 html specificationthe definition of 'rel' in that specification.
... obsolete no change from
document object model (dom) level 1 specification
document object model (dom) level 1 specificationthe definition of 'rel' in that specification.
HTMLBodyElement - Web APIs
htmlbodyelement.bgcolor is a domstring that represents the background color for the
document.
...
document object model (dom) level 2 html specificationthe definition of 'htmlbodyelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmlbodyelement' in that specification.
HTMLCanvasElement.toBlob() - Web APIs
the code snippet below, for example, takes the image in the <canvas> element whose id is "canvas", obtains a copy of it as a png image, then appends a new <img> element to the
document, whose source image is the one created using the canvas.
... var canvas =
document.getelementbyid('canvas'); canvas.toblob(function(blob) { var newimg =
document.createelement('img'), url = url.createobjecturl(blob); newimg.onload = function() { // no longer need to read the blob so it's revoked url.revokeobjecturl(url); }; newimg.src = url;
document.body.appendchild(newimg); }); note that here we're creating a png image; if you add a second parameter to the toblob() call, you can specify the image type.
... var canvas =
document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var a =
document.createelement('a'); a.textcontent = 'download';
document.body.appendchild(a); a.style.display = 'bl...
... var canvas =
document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var r = new filereader(); r.onloadend = function () { // r.result contains the arraybuffer.
HTMLDListElement - Web APIs
recommendation no change from
document object model (dom) level 2 html specification.
...
document object model (dom) level 2 html specificationthe definition of 'htmldlistelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmldlistelement' in that specification.
HTMLDivElement - Web APIs
recommendation no change from
document object model (dom) level 2 html specification.
...
document object model (dom) level 2 html specificationthe definition of 'htmldivelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmldivelement' in that specification.
HTMLFormElement.elements - Web APIs
note: similarly, you can get a list of all of the forms contained within a given
document using the
document's forms property.
... <form id="my-form"> <input type="text" name="username"> <input type="text" name="full-name"> <input type="password" name="password"> </form> var inputs =
document.getelementbyid("my-form").elements; var inputbyindex = inputs[0]; var inputbyname = inputs["username"]; accessing form controls this example gets the form's element list, then iterates over the list, looking for <input> elements of type "text" so that some form of processing can be performed on them.
... var inputs =
document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { if (inputs[i].nodename === "input" && inputs[i].type === "text") { // update text input inputs[i].value.tolocaleuppercase(); } } disabling form controls var inputs =
document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { // disable all form controls inputs[i].setattribute("disabled", ""); } specifications specification status comment html living standardthe definition of 'htmlformelement.elements' in that specification.
... living standard
document object model (dom) level 2 html specificationthe definition of 'htmlformelement.elements' in that specification.
HTMLInputElement - Web APIs
only one form element in a
document can have the autofocus attribute.
... width string: returns / sets the
document's width attribute, which defines the width of the image displayed for the button, if the value of type is image.
...
document object model (dom) level 2 html specificationthe definition of 'htmlinputelement' in that specification.
...
document object model (dom) level 1 specificationthe definition of 'htmlinputelement' in that specification.
HTMLLinkElement.rel - Web APIs
it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <link> element and the current
document.
... syntax var relstr = linkelt.rel; linkelt.rel = relstr; example var links =
document.getelementsbytagname('link'); var length = links.length; for (var i = 0; i < length; i++) { alert(links[i]); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
... living standard no change from
document object model (dom) level 2 html specification
document object model (dom) level 2 html specificationthe definition of 'rel' in that specification.
... obsolete no change from
document object model (dom) level 1 specification
document object model (dom) level 1 specificationthe definition of 'rel' in that specification.
HTMLMediaElement.srcObject - Web APIs
const mediastream = await navigator.mediadevices.getusermedia({video: true}); const video =
document.createelement('video'); video.srcobject = mediastream; in this example, a new mediasource is assigned to a newly-created <video> element.
... const mediasource = new mediasource(); const video =
document.createelement('video'); video.srcobject = mediasource; supporting fallback to the src property the examples below support older browser versions that require you to create an object url and assign it to src if srcobject isn't supported.
... const mediastream = await navigator.mediadevices.getusermedia({video: true}); const video =
document.createelement('video'); if ('srcobject' in video) { video.srcobject = mediastream; } else { // avoid using this in new browsers, as it is going away.
... const mediasource = new mediasource(); const video =
document.createelement('video'); // older browsers may not have srcobject if ('srcobject' in video) { try { video.srcobject = mediasource; } catch (err) { if (err.name != "typeerror") { throw err; } // even if they do, they may only support mediastream video.src = url.createobjecturl(mediasource); } } else { video.src = url.createobjecturl(mediasource); } specifications specification status comment html living standardthe definition of 'srcobject' in that s...
HTMLModElement - Web APIs
recommendation no change from
document object model (dom) level 2 html specification.
...
document object model (dom) level 2 html specificationthe definition of 'htmlmodelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmlmodelement' in that specification.
HTMLOptGroupElement - Web APIs
recommendation no change from
document object model (dom) level 2 html specification.
...
document object model (dom) level 2 html specificationthe definition of 'htmloptgroupelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmloptgroupelement' in that specification.
HTMLQuoteElement - Web APIs
recommendation no change from
document object model (dom) level 2 html specification.
...
document object model (dom) level 2 html specificationthe definition of 'htmlquoteelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmlquoteelement' in that specification.
HTMLSelectElement.autofocus - Web APIs
only one form-associated element in a
document can have this attribute specified.
... setting this property doesn't set the focus to the associated <select> element: it merely tells the browser to focus to it when the element is inserted in the
document.
... setting it after the insertion, that is most of the time after the
document load, has no visible effect.
... syntaxedit abool = aselectelement.autofocus; // get the value of autofocus aselectelement.autofocus = abool; // set the value of autofocus example html <select id="myselect" autofocus> <option>option 1</option> <option>option 2</option> </select> javascript // check if the autofocus attribute on the <select> var hasautofocus =
document.getelementbyid('myselect').autofocus; specifications specification status comment html living standardthe definition of 'autofocus' in that specification.
HTMLSelectElement.type - Web APIs
no change from
document object model (dom) level 2 html specification.
...
document object model (dom) level 2 html specificationthe definition of 'htmlselectelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmlselectelement' in that specification.
HTMLTableCaptionElement - Web APIs
recommendation no change from
document object model (dom) level 2 html specification, though align was formerly obsoleted.
...
document object model (dom) level 2 html specificationthe definition of 'htmltablecaptionelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmltablecaptionelement' in that specification.
HTMLTableCellElement - Web APIs
the htmltablecellelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an html
document.
...they are
documented primarily to help understand older code bases.
...
document object model (dom) level 2 html specificationthe definition of 'htmltablecellelement' in that specification.
...
document object model (dom) level 1 specificationthe definition of 'htmltablecellelement' in that specification.
HTMLTableRowElement.insertCell() - Web APIs
the cell does not need to be appended separately with node.appendchild() as would be the case if
document.createelement() had been used to create the new <td> element.
...(to be valid html, a <tr> must have at least one <td> element.) finally, we add some text to the cell using
document.createtextnode() and node.appendchild().
... html <table id="my-table"> <tr><td>row 1</td></tr> <tr><td>row 2</td></tr> <tr><td>row 3</td></tr> </table> javascript function addrow(tableid) { // get a reference to the table let tableref =
document.getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext =
document.createtextnode('new bottom row'); newcell.appendchild(newtext); } // call addrow() with the table's id addrow('my-table'); result specifications specification status comment html living standardthe definition of 'htmltablerowelement.insertcell()' in that specification.
... living standard
document object model (dom) level 2 html specificationthe definition of 'htmltablerowelement.insertcell()' in that specification.
HTML Drag and Drop API - Web APIs
gable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("text/plain", ev.target.id); } window.addeventlistener('domcontentloaded', () => { // get the element by id const element =
document.getelementbyid("p1"); // add the ondragstart event listener element.addeventlistener("dragstart", dragstart_handler); }); </script> <p id="p1" draggable="true">this element is draggable.</p> for more information, see: draggable attribute reference drag operations guide define the drag's data the application is free to include any number of data items in a drag operation.
... function dragstart_handler(ev) { // add different types of drag data ev.datatransfer.setdata("text/plain", ev.target.innertext); ev.datatransfer.setdata("text/html", ev.target.outerhtml); ev.datatransfer.setdata("text/uri-list", ev.target.owner
document.location.href); } for a list of common data types used in drag-and-drop (such as text, html, links, and files), see recommended drag types.
... <script> function dragover_handler(ev) { ev.preventdefault(); ev.datatransfer.dropeffect = "move"; } function drop_handler(ev) { ev.preventdefault(); // get the id of the target and add the moved element to the target's dom const data = ev.datatransfer.getdata("text/plain"); ev.target.appendchild(
document.getelementbyid(data)); } </script> <p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">drop zone</p> note that each handler calls preventdefault() to prevent additional event processing for this event (such as touch events or pointer events).
...datatransfer.setdata("application/my-app", ev.target.id); ev.datatransfer.dropeffect = "move"; } function dragover_handler(ev) { ev.preventdefault(); ev.datatransfer.dropeffect = "move" } function drop_handler(ev) { ev.preventdefault(); // get the id of the target and add the moved element to the target's dom const data = ev.datatransfer.getdata("application/my-app"); ev.target.appendchild(
document.getelementbyid(data)); } </script> <p id="p1" draggable="true" ondragstart="dragstart_handler(event)">this element is draggable.</p> <div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">drop zone</div> for more information, see: performing a drop drag end at the end of a drag operation, the dragend event fires at the source element — the element that was t...
History.pushState() - Web APIs
in an html
document, the history.pushstate() method adds a state to the browser's session history stack.
...if this parameter isn't specified, it's set to the
document's current url.
... description in a sense, calling pushstate() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current
document.
...in contrast, setting window.location keeps you at the same
document only if you modify only the hash.
Ajax navigation example - Web APIs
="ajax-nav" href="unexisting.php">unexisting page</a> ] </p> include/header.php: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/ajax_nav.js"></script> <link rel="stylesheet" href="css/style.css" /> js/ajax_nav.js: "use strict"; const ajaxrequest = new (function () { function closereq () { oloadingbox.parentnode &&
document.body.removechild(oloadingbox); bisloading = false; } function abortreq () { if (!bisloading) { return; } oreq.abort(); closereq(); } function ajaxerror () { alert("unknown error."); } function ajaxload () { var vmsg, nstatus = this.status; switch (nstatus) { case 200: vmsg = json.parse(t...
...his.responsetext);
document.title = opageinfo.title = vmsg.page;
document.getelementbyid(stargetid).innerhtml = vmsg.content; if (bupdateurl) { history.pushstate(opageinfo, opageinfo.title, opageinfo.url); bupdateurl = false; } break; default: vmsg = nstatus + ": " + (ohttpstatus[nstatus] || "unknown"); switch (math.floor(nstatus / 100)) { /* case 1: // informational 1xx console.log("information code " + vmsg); break; case 2: // successful 2xx console.log("suc...
...tmark, ""); } function getpage (spage) { if (bisloading) { return; } oreq = new xmlhttprequest(); bisloading = true; oreq.onload = ajaxload; oreq.onerror = ajaxerror; if (spage) { opageinfo.url = filterurl(spage, null); } oreq.open("get", filterurl(opageinfo.url, "json"), true); oreq.send(); oloadingbox.parentnode ||
document.body.appendchild(oloadingbox); } function requestpage (surl) { if (history.pushstate) { bupdateurl = true; getpage(surl); } else { /* ajax navigation is not supported */ location.assign(surl); } } function processlink () { if (this.classname === sajaxclass) { requestpage(this.href); ...
... return false; } return true; } function init () { opageinfo.title =
document.title; history.replacestate(opageinfo, opageinfo.title, opageinfo.url); for (var olink, nidx = 0, nlen =
document.links.length; nidx < nlen;
document.links[nidx++].onclick = processlink); } const /* customizable constants */ stargetid = "ajax-content", sviewkey = "view_as", sajaxclass = "ajax-nav", /* not customizable constants */ rsearch = /\?.*$/, rhost = /^[^\?]*\?*&*/, rview = new regexp("&" + sviewkey + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox =
document.createelement("div"), ocover =
document.createelement("div"), oloadingimg = new image(), opageinfo = { title: null, ...
IntersectionObserver.root - Web APIs
the intersectionobserver interface's read-only root property identifies the element or
document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target.
... if the root is null, then the bounds of the actual
document viewport are used.
... syntax var root = intersectionobserver.root; value a element or
document object whose bounding box is used as the bounds of the viewport for the purposes of determining how much of the target element is visible.
... if root is null, then the owning
document is used as the root, and the bounds its viewport (that is, the visible area of the
document) are used as the root bounds.
IntersectionObserver - Web APIs
the intersectionobserver interface of the intersection observer api provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level
document's viewport.
... properties intersectionobserver.root read only the element or
document whose bounds are used as the bounding box when testing for intersection.
... if no root value was passed to the constructor or its value is null, the top-level
document's viewport is used.
... if (entries[0].intersectionratio <= 0) return; loaditems(10); console.log('loaded new items'); }); // start observing intersectionobserver.observe(
document.queryselector('.scrollerfooter')); specifications specification status comment intersection observerthe definition of 'intersectionobserver' in that specification.
KeyboardEvent - Web APIs
they can be delivered to any object which implements globaleventhandlers, including element,
document, and window.
... 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.addeventlistener('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.addeventlistener('keyup', (event) => { const keyname = event.key; // as the user releases the ctrl key, the key is no longer active, // so event.ctrlkey is false.
MediaElementAudioSourceNode - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio =
document.queryselector('audio'); var pre =
document.queryselector('pre'); var myscript =
document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node var gainnode = audioctx.creategain(); // create variables to store mouse pointer y coordi...
...nate // and height of screen var cury; var height = window.innerheight; // get new mouse pointer coordinates when mouse is moved // then set new gain value
document.onmousemove = updatepage; function updatepage(e) { cury = (window.event) ?
... e.pagey : event.clienty + (
document.
documentelement.scrolltop ?
...
document.
documentelement.scrolltop :
document.body.scrolltop); gainnode.gain.value = cury/height; } // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(gainnode); gainnode.connect(audioctx.destination); note: as a consequence of calling createmediaelementsource(), audio playback from the htmlmediaelement will be re-routed into the processing graph of the audiocontext.
MediaList.mediaText - Web APIs
if you wish to set new media queries on the
document, the string value must have the different queries separated by commas, e.g.
...note that the medialist 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 medialist of the first stylesheet applied to the current
document.
... const stylesheets =
document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment css object model (cssom)the definition of 'mediatext' in that specification.
MouseEvent.button - Web APIs
example html <button id="button" oncontextmenu="event.preventdefault();">click here with your mouse...</button> <p id="log"></p> javascript let button =
document.queryselector('#button'); let log =
document.queryselector('#log'); button.addeventlistener('mouseup', logmousebutton); function logmousebutton(e) { if (typeof e === 'object') { switch (e.button) { case 0: log.textcontent = 'left button clicked.'; break; case 1: log.textcontent = 'middle button clicked.'; break; case 2: log.textcont...
...ent = 'right button clicked.'; break; default: log.textcontent = `unknown button code: ${e.button}`; } } } result specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'mouseevent.button' in that specification.
... obsolete compared to
document object model (dom) level 2 events specification, the return value can be negative.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.button' in that specification.
MouseEvent.clientX - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog =
document.queryselector('#screen-log');
document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clientx' in that specification.
...
document object model (dom) level 3 events specificationthe definition of 'mouseevent.clientx' in that specification.
... obsolete no change from
document object model (dom) level 2 events specification.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.clientx' in that specification.
MouseEvent.clientY - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog =
document.queryselector('#screen-log');
document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clienty' in that specification.
...
document object model (dom) level 3 events specificationthe definition of 'mouseevent.clienty' in that specification.
... obsolete no change from
document object model (dom) level 2 events specification.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.clienty' in that specification.
MouseEvent.relatedTarget - Web APIs
html <body id="body"> <div id="outer"> <div id="red"></div> <div id="blue"></div> </div> <p id="log"></p> </body> css #outer { width: 250px; height: 125px; display: flex; } #red { flex-grow: 1; background: red; } #blue { flex-grow: 1; background: blue; } #log { max-height: 120px; overflow-y: scroll; } javascript const mouseoutlog =
document.getelementbyid('log'), red =
document.getelementbyid('red'), blue =
document.getelementbyid('blue'); red.addeventlistener('mouseover', overlistener); red.addeventlistener('mouseout', outlistener); blue.addeventlistener('mouseover', overlistener); blue.addeventlistener('mouseout', outlistener); function outlistener(event) { let related = event.relatedtarget ?
... working draft
document object model (dom) level 3 events specificationthe definition of 'mouseevent.relatedtarget' in that specification.
... obsolete no change from
document object model (dom) level 2 events specification.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.screenX - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog =
document.queryselector('#screen-log');
document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result routing an event when you trap events on the window,
document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as...
...
document object model (dom) level 3 events specificationthe definition of 'mouseevent.screenx' in that specification.
... obsolete no change from
document object model (dom) level 2 events specification.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.sceenx' in that specification.
MouseEvent.screenY - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog =
document.queryselector('#screen-log');
document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'screeny' in that specification.
...
document object model (dom) level 3 events specificationthe definition of 'mouseevent.screeny' in that specification.
... obsolete no change from
document object model (dom) level 2 events specification.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.sceeny' in that specification.
msFirstPaint - Web APIs
msfirstpaint is a read-only property which gets the time when the
document loaded by the window object began to be displayed to the user.
... syntax p = object.msfirstpaint; value an integer value that represents the time when the
document began to be displayed or 0 if the
document could not be loaded.
... this property is supported only for
documents displayed in ie9 standards mode.
... example the following example shows how to calculate the time that is required to request the
document before the
document begins to display for the user.
Online and offline events - Web APIs
additionally, the events bubble up from
document.body, to
document, ending at window.
... you can register listeners for these events in a few familiar ways: using addeventlistener 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.addeventlistener('load', function() { var status =
document.getelementbyid("status"); var log =
document.getelementbyid("log"); function updateonlinestatus(event) { var condition = navigator.online ?
Node.getRootNode() - Web APIs
this will differ in exact form depending on where you called getrootnode(); for example: calling it on an element inside a standard web page will return an html
document object representing the entire page.
... examples the first simple example returns a reference to the html/
document node: rootnode = node.getrootnode(); this more complex example shows the difference between returning a normal root, and a root incuding the shadow root.
... (see the full source code): <!-- source: https://github.com/jserz/js_piece/blob/master/dom/node/getrootnode()/demo/getrootnode.html --> <div class="js-parent"> <div class="js-child"></div> </div> <div class="js-shadowhost"></div> <script> // works on chrome 54+，opera 41+ var parent =
document.queryselector('.js-parent'), child =
document.queryselector('.js-child'), shadowhost =
document.queryselector('.js-shadowhost'); console.log(parent.getrootnode().nodename); // #
document console.log(child.getrootnode().nodename); // #
document // create a shadowroot var shadowroot = shadowhost.attachshadow({mode:'open'}); shadowroot.innerhtml = '<style>div{background:#2bb8aa;}</style>' + '<div class="js-shadowchild">content</div>'; var shadowchild = shadowroot.querysel...
...ector('.js-shadowchild'); // the default value of composed is false console.log(shadowchild.getrootnode() === shadowroot); // true console.log(shadowchild.getrootnode({composed:false}) === shadowroot); // true console.log(shadowchild.getrootnode({composed:true}).nodename); // #
document </script> specifications specification status comment domthe definition of 'getrootnode()' in that specification.
Node.lastChild - Web APIs
syntax var childnode = node.lastchild; example var tr =
document.getelementbyid("row1"); var corner_td = tr.lastchild; specifications specification status comment domthe definition of 'node.lastchild' in that specification.
... living standard no change
document object model (dom) level 3 core specificationthe definition of 'node.lastchild' in that specification.
... obsolete no change
document object model (dom) level 2 core specificationthe definition of 'node.lastchild' in that specification.
... obsolete no change
document object model (dom) level 1 specificationthe definition of 'node.lastchild' in that specification.
Node.localName - Web APIs
syntax name = element.localname name is the local name as a string (see notes below for details) example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text =
document.getelementbyid('text'); var circle =
document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </head> <body onload="test()"> <svg:svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <svg:circle cx=...
...qualified names are typically used in xml as part of the namespace(s) of the particular xml
documents.
... specifications specification status comment
document object model (dom) level 3 core specificationthe definition of 'node.localname' in that specification.
... obsolete
document object model (dom) level 2 core specificationthe definition of 'node.localname' in that specification.
Node.nextSibling - Web APIs
syntax nextnode = node.nextsibling notes gecko-based browsers insert text nodes into a
document to represent whitespace in the source markup.
... example <div id="div-1">here is div-1</div> <div id="div-2">here is div-2</div> <script> var el =
document.getelementbyid('div-1').nextsibling, i = 1; console.group('siblings of div-1:'); while (el) { console.log(i, '.
... living standard no change
document object model (dom) level 2 core specificationthe definition of 'node.nextsibling' in that specification.
... obsolete no change
document object model (dom) level 1 specificationthe definition of 'node.nextsibling' in that specification.
Node.prefix - Web APIs
when a
document is served with an xml mime type.
... this will not work for html
documents.
... specifications specification status comment
document object model (dom) level 3 core specificationthe definition of 'node.prefix' in that specification.
...
document object model (dom) level 2 core specificationthe definition of 'initial definition' in that specification.
Node.previousSibling - Web APIs
syntax previousnode = node.previoussibling; example <img id="b0"> <img id="b1"> <img id="b2"> console.log(
document.getelementbyid("b1").previoussibling); // <img id="b0"> console.log(
document.getelementbyid("b2").previoussibling.id); // "b1" notes gecko-based browsers insert text nodes into a
document to represent whitespace in the source markup.
... living standard no change
document object model (dom) level 3 core specificationthe definition of 'node.previoussibling' in that specification.
... obsolete no change
document object model (dom) level 2 core specificationthe definition of 'node.previoussibling' in that specification.
... obsolete no change
document object model (dom) level 1 specificationthe definition of 'node.previoussibling' in that specification.
Node.textContent - Web APIs
syntax let text = somenode.textcontent someothernode.textcontent = string value a string or null description the value of textcontent depends on the situation: if the node is a
document or a doctype, textcontent returns null.
... note: to get all of the text and cdata data for the whole
document, one could use
document.
documentelement.textcontent.
...you can use textcontent to get the element's text content: let text =
document.getelementbyid('diva').textcontent; // the text variable is now: 'this is some text!' ...
... or set the element's text content:
document.getelementbyid('diva').textcontent = 'this text is different!'; // the html for diva is now: // <div id="diva">this text is different!</div> specifications specification status comment domthe definition of 'node.textcontent' in that specification.
Notation - Web APIs
may declare format of an unparsed entity or formally declare the
document's processing instruction targets.
... specifications specification status comment
document object model (dom) level 3 core specificationthe definition of 'notation' in that specification.
... obsolete no change
document object model (dom) level 2 core specificationthe definition of 'notation' in that specification.
... obsolete no change
document object model (dom) level 1 specificationthe definition of 'notation' in that specification.
ParentNode.append() - Web APIs
examples appending an element let parent =
document.createelement("div") let p =
document.createelement("p") parent.append(p) console.log(parent.childnodes) // nodelist [ <p> ] appending text let parent =
document.createelement("div") parent.append("some text") console.log(parent.textcontent) // "some text" appending an element and text let parent =
document.createelement("div") let p =
document.createelement("p") parent.append("some text",...
... let parent =
document.createelement("div") with(parent) { append("foo") } // referenceerror: append is not defined polyfill you can polyfill the append() method in internet explorer 9 and higher with the following code: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/append()/append().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('append')) { return; } object.defineproperty(item, 'append', { configurable: true, enumerable: true, writable: true, value: function append() { var ...
...argarr = array.prototype.slice.call(arguments), docfrag =
document.create
documentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appendchild(isnode ?
... argitem :
document.createtextnode(string(argitem))); }); this.appendchild(docfrag); } }); }); })([element.prototype,
document.prototype,
documentfragment.prototype]); specification specification status comment domthe definition of 'parentnode.append()' in that specification.
ParentNode.childElementCount - Web APIs
node an object representing a
document,
documentfragment, or element.
... example var foo =
document.getelementbyid('foo'); if (foo.childelementcount > 0) { // do something } polyfill for ie8 & ie9 & safari this property is completely unsupported prior to ie9.
... in ie9 and safari, it is unsupported in the
document and
documentfragment objects.
... the
document and
documentfragment implemented the new interfaces.
ParentNode.prepend() - Web APIs
examples prepending an element var parent =
document.createelement("div"); var p =
document.createelement("p"); var span =
document.createelement("span"); parent.append(p); parent.prepend(span); console.log(parent.childnodes); // nodelist [ <span>, <p> ] prepending text var parent =
document.createelement("div"); parent.append("some text"); parent.prepend("headline: "); console.log(parent.textcontent); // "headline: some text" appending an el...
...ement and text var parent =
document.createelement("div"); var p =
document.createelement("p"); parent.prepend("some text", p); console.log(parent.childnodes); // nodelist [ #text "some text", <p> ] parentnode.prepend() is unscopable the prepend() method is not scoped into the with statement.
... var parent =
document.createelement("div"); with(parent) { prepend("foo"); } // referenceerror: prepend is not defined polyfill you can polyfill the prepend() method if it's not available: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/prepend()/prepend().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('prepend')) { return; } object.defineproperty(item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend() { var argarr = array.prototype.slice.call(arguments), docfrag =
document.create
documentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node;...
...argitem :
document.createtextnode(string(argitem))); }); this.insertbefore(docfrag, this.firstchild); } }); }); })([element.prototype,
document.prototype,
documentfragment.prototype]); specification specification status comment domthe definition of 'parentnode.prepend()' in that specification.
PerformanceNavigationTiming.unloadEventEnd - Web APIs
the unloadeventend read-only property returns a timestamp representing the time value equal to the time immediately after the user agent finishes the unload event of the previous
document.
... if there is no previous
document, this property value is 0.
... syntax perfentry.unloadeventend; return value a timestamp representing a time value equal to the time immediately after the user agent finishes the unload event of the previous
document.
....getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); //
document load and unload time console.log("
document load = " + (p.loadeventend - p.loadeventstart)); console.log("
document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the...
PerformanceNavigationTiming.unloadEventStart - Web APIs
the unloadeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the user agent starts the unload event of the previous
document.
... if there is no previous
document, this property returns 0.
... syntax perfentry.unloadeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent starts the unload event of the previous
document.
....getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); //
document load and unload time console.log("
document load = " + (p.loadeventend - p.loadeventstart)); console.log("
document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the...
RTCDataChannel: message event - Web APIs
examples for a given rtcdatachannel, dc, created for a peer connection using its createdatachannel() method, this code sets up a handler for incoming messages and acts on them by adding the data contained within the message to the current
document as a new <p> (paragraph) element.
... dc.addeventlistener("message", ev => { let newparagraph =
document.createelement("p"); let textnode =
document.createtextnode(event.data); newparagraph.appendchild(textnode);
document.body.appendchild(newparagraph); }, false); lines 2-4 create the new paragraph element and add the message data to it as a new text node.
... line 6 appends the new paragraph to the end of the
document's body.
... you can also use an rtcdatachannel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph =
document.createelement("p"); let textnode =
document.createtextnode(event.data); newparagraph.appendchild(textnode);
document.body.appendchild(newparagraph); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'the <code>message</code> event' in that specification.
Range.createContextualFragment() - Web APIs
the range.createcontextualfragment() method returns a
documentfragment by invoking the html fragment parsing algorithm or the xml fragment parsing algorithm with the start of the range (the parent of the selected node) as the context node.
... the html fragment parsing algorithm is used if the range belongs to a
document whose htmlness bit is set.
... syntax
documentfragment = range.createcontextualfragment(tagstring) parameters tagstring text that contains text and tags to be converted to a
document fragment.
... example var tagstring = "<div>i am a div node</div>"; var range =
document.createrange(); // make the parent of the first div in the
document becomes the context node range.selectnode(
document.getelementsbytagname("div").item(0)); var
documentfragment = range.createcontextualfragment(tagstring);
document.body.appendchild(
documentfragment); specification specification status comment dom parsing and serializationthe definition of 'range.createcontextualfragment()' in that specification.
Range.deleteContents() - Web APIs
the range.deletecontents() method removes the contents of the range from the
document.
... unlike range.extractcontents(), this method does not return a
documentfragment containing the deleted content.
... syntax range.deletecontents() example range =
document.createrange(); range.selectnode(
document.getelementsbytagname("div").item(0)); range.deletecontents(); specifications specification status comment domthe definition of 'range.deletecontents()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.deletecontents()' in that specification.
Range.selectNodeContents() - Web APIs
example range =
document.createrange(); referencenode =
document.getelementsbytagname("div")[0]; range.selectnodecontents(referencenode); live sample this example lets the user select and deselect a paragraph with buttons.
...
document.createrange(), range.selectnodecontents(), and selection.addrange() are used to select the content.
... html <p id="p"><b>use the buttons below</b> to select or deselect the contents of this paragraph.</p> <button id="select-button">select paragraph</button> <button id="deselect-button">deselect paragraph</button> javascript const p =
document.getelementbyid('p'); const selectbutton =
document.getelementbyid('select-button'); const deselectbutton =
document.getelementbyid('deselect-button'); selectbutton.addeventlistener('click', e => { // clear any current selection const selection = window.getselection(); selection.removeallranges(); // select paragraph const range =
document.createrange(); range.selectnodecontents(p); selection.addrange(range); }); deselectbutton.addeventlistener('click', e => { ...
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.selectnodecontents()' in that specification.
SVGAElement.target - Web APIs
the svgaelement.target read-only property of svgaelement returns an svganimatedstring object that specifies the portion of a target window, frame, pane into which a
document is to be opened when a link is activated.
... this property is used when there are multiple possible targets for the ending resource, like when the parent
document is a mlti-frame html or xhtml
document.
... syntax mylink.target = 'value'; value an svganimatedstring indicating the ending resource target that opens the
document when the link is activated.
...var linkref =
document.queryselector('a'); linkref.target ='_blank'; ...
SVGGraphicsElement: cut event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property oncut the eventʼs default action is to copy the current selection (if any) to the system clipboard and remove it from the
document.
... note though that cancelling the default action will also prevent the
document from being updated.
... so an event handler which wants to emulate the default action for "cut" while modifying the clipboard must also manually remove the selection from the
document.
... it's possible to construct and dispatch a synthetic cut event, but this will not affect the system clipboard or the
document's contents.
Selection API - Web APIs
concepts and usage to retrieve the current text range the user has selected, you can use the window.getselection() or
document.getselection() method, storing the return value — a selection object — in a variable for futher use.
... extensions to other interfaces window.getselection(),
document.getselection() returns a selection object representing the range of text selected by the user or the current position of the caret.
...
document.getselection() is basically an alias of window.getselection().
... 4notes full support 4notes notes before firefox 35, the method didn't throw if node was null.opera android full support yessafari ios full support yessamsung internet android full support yesdeletefrom
document experimentalchrome full support yesedge full support 12firefox full support 55ie ?
StyleSheet.disabled - Web APIs
the disabled property of the stylesheet interface determines whether the style sheet is prevented from applying to the
document.
...note that disabled == false does not guarantee the style sheet is applied (it could be removed from the
document, for instance).
... working draft no change from
document object model (dom) level 2 style specification.
...
document object model (dom) level 2 style specificationthe definition of 'stylesheet.disabled' in that specification.
SubtleCrypto.deriveBits() - Web APIs
supported algorithms see the supported algorithms section of the derivekey()
documentation.
... 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.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.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 ge...
...key( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); 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.addeventlistener("click", () => { // alice then generates a secret using her private key and bob's public key.
...derivedbits() { const keymaterial = await getkeymaterial(); salt = window.crypto.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.classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton =
document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.adde...
SubtleCrypto.encrypt() - Web APIs
function getmessageencoding() { const messagebox =
document.queryselector(".rsa-oaep #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(publickey) { let encoded = getmessageencoding(); return window.crypto.subtle.encrypt( { name: "rsa-oaep" }, publickey, encoded ); } aes-ctr this code fetches the contents of a text box, encodes it for encryptio...
... function getmessageencoding() { const messagebox =
document.queryselector(".aes-ctr #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded = getmessageencoding(); // counter will be needed for decryption counter = window.crypto.getrandomvalues(new uint8array(16)); return window.crypto.subtle.encrypt( { name: "aes-ctr", counter, length: 64 }, key, encoded ); } let iv = new uint8array(16); let key = new uint8array(16); let data = new uint8array(12345); //crypto functions are wrapped in promises so we have to use await and make sure the function that //contains this code is an async...
... function getmessageencoding() { const messagebox =
document.queryselector(".aes-cbc #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded = getmessageencoding(); // iv will be needed for decryption iv = window.crypto.getrandomvalues(new uint8array(16)); return window.crypto.subtle.encrypt( { name: "aes-cbc", iv }, key, enc...
... function getmessageencoding() { const messagebox =
document.queryselector(".aes-gcm #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded = getmessageencoding(); // iv will be needed for decryption iv = window.crypto.getrandomvalues(new uint8array(12)); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, encoded ); } specifications specification status comment web cryptography apithe definition of 'subtlecrypto.encrypt()' in that specification.
SubtleCrypto.sign() - Web APIs
*/ function getmessageencoding() { const messagebox =
document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( "rsassa-pkcs1-v1_5", privatekey, encoded ); rsa-pss this code fetches the contents of a text box, encodes it for signing, and signs it with a private key.
...*/ function getmessageencoding() { const messagebox =
document.queryselector(".rsa-pss #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( { name: "rsa-pss", saltlength: 32, }, privatekey, encoded ); ecdsa this code fetches the contents of a text box, encodes it for signing, and signs it with a private key.
...*/ function getmessageencoding() { const messagebox =
document.queryselector(".ecdsa #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( { name: "ecdsa", hash: {name: "sha-384"}, }, privatekey, encoded ); hmac this code fetches the contents of a text box, encodes it for signing, and signs it with a secret key.
...*/ function getmessageencoding() { const messagebox =
document.queryselector(".hmac #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( "hmac", key, encoded ); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.sign()' in that specification.
UIEvent.initUIEvent() - Web APIs
events initialized in this way must have been created with the
document.createevent() method.
... example var e =
document.createevent("uievent"); // creates a click event that bubbles, can be cancelled, // and with its view and detail property initialized to window and 1, // respectively e.inituievent("click", true, true, window, 1); specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'uievent.inituievent()' in that specific...
... obsolete from
document object model (dom) level 2 events specification, deprecated.
...
document object model (dom) level 2 events specificationthe definition of 'uievent.inituievent()' in that specification.
UIEvent.layerX - Web APIs
this property takes scrolling of the page into account and returns a value relative to the whole of the
document unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
... examples <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form =
document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; ...
...note the pagex\pagey properties still return the absolute position in the
document, including page scrolling.</span> <span>make the page scroll more!
...note the pagex\pagey properties still return the absolute position in the
document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.layerY - Web APIs
this property takes scrolling of the page into account, and returns a value relative to the whole of the
document, unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
... example <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form =
document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute;...
...note the pagex\pagey properties still return the absolute position in the
document, including page scrolling.</span> <span>make the page scroll more!
...note the pagex\pagey properties still return the absolute position in the
document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent - Web APIs
uievent.pagex read only returns the horizontal coordinate of the event relative to the whole
document.
... uievent.pagey read only returns the vertical coordinate of the event relative to the whole
document.
... ui events working draft extend dom3
document object model (dom) level 3 events specificationthe definition of 'uievent' in that specification.
...
document object model (dom) level 2 events specificationthe definition of 'uievent' in that specification.
Hello vertex attributes - Web APIs
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.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(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 =
document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createpro...
...(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup();
document.queryselector("p").innerhtml = "shader program did not link successfully.
... " + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1);
document.queryselector("canvas").addeventlistener("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.s...
...tatic_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addeventlistener("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.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0,...
Writing WebSocket client applications - Web APIs
var msg = { type: "message", text:
document.getelementbyid("text").value, id: clientid, date: date.now() }; // send the msg object as a json-formatted string.
...
document.getelementbyid("text").value = ""; } receiving messages from the server websockets is an event-driven api; when messages are received, a message event is sent to the websocket object.
...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").content
document; 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": text = "<b>your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" break; case "userlist": var ul = ""; for (i=0; i < msg.users.length; i++) { ul += msg.users[i] + "<br>"; }
document.getelementbyid("userlistbox").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.
Web Animations API Concepts - Web APIs
each
document has a master timeline,
document.timeline, which stretches from the moment the page is loaded to infinity — or until the window is closed.
...each animation is anchored to a point in the timeline by its starttime, representing the moment along the
document’s timeline when the animation starts playing.
... timeline timeline objects provide the useful property currenttime, which lets us see how long the page has been opened for: it's the "current time" of the
document's timeline, which started when the page was opened.
... as of this writing, there’s only one kind of timeline object: the one based on the active
document’s timeline.
Using the Web Audio API - Web APIs
lucky for us there's a method that allows us to do just that — audiocontext.createmediaelementsource: // get the audio element const audioelement =
document.queryselector('audio'); // pass it into the audio context const track = audiocontext.createmediaelementsource(audioelement); note: the <audio> element above is represented in the dom by an object of type htmlmediaelement, which comes with its own set of functionality.
... // select our play button const playbutton =
document.queryselector('button'); playbutton.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audiocontext.state === 'suspended') { audiocontext.resume(); } // play or pause track depending on state if (this.dataset.playing === 'false') { audioelement.play(); this.dataset.playing = 'true'; } else if (t...
... so let's grab this input's value and update the gain value when the input node has its value changed by the user: const volumecontrol =
document.queryselector('#volume'); volumecontrol.addeventlistener('input', function() { gainnode.gain.value = this.value; }, false); note: the values of node objects (e.g.
...again let's use a range type input to vary this parameter: <input type="range" id="panner" min="-1" max="1" value="0" step="0.01"> we use the values from that input to adjust our panner values in the same way as we did before: const pannercontrol =
document.queryselector('#panner'); pannercontrol.addeventlistener('input', function() { panner.pan.value = this.value; }, false); let's adjust our audio graph again, to connect all the nodes together: track.connect(gainnode).connect(panner).connect(audiocontext.destination); the only thing left to do is give the app a try: check out the final demo here on codepen.
Using the Web Speech API - Web APIs
var diagnostic =
document.queryselector('.output'); var bg =
document.queryselector('html'); var hints =
document.queryselector('.hints'); var colorhtml= ''; colors.foreach(function(v, i, a){ console.log(v, i); colorhtml += '<span style="background-color:' + v + ';"> ' + v + ' </span>'; }); hints.innerhtml = 'tap/click then say a color to change the background color of the app.
... try ' + colorhtml + '.';
document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } receiving and handling results once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the speechrecognition event handlers list.) the most common one you'll probably use is speechrecognition.onresult, which is fired once a successful result is received: recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log('confidence: ' + event.results[0][0].confidence); } the second line here is a bit complex-looking, so let's ...
... var synth = window.speechsynthesis; var inputform =
document.queryselector('form'); var inputtxt =
document.queryselector('.txt'); var voiceselect =
document.queryselector('select'); var pitch =
document.queryselector('#pitch'); var pitchvalue =
document.queryselector('.pitch-value'); var rate =
document.queryselector('#rate'); var ratevalue =
document.queryselector('.rate-value'); var voices = []; populating the select element to populate the <select...
... function populatevoicelist() { 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); } } when we come to run the function, we do the following.
Window: blur event - Web APIs
bubbles no cancelable no interface focusevent event handler property onblur sync / async sync composed yes examples live example this example changes the appearance of a
document when it loses focus.
... html <p id="log">click on this
document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() {
document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() {
document.body.classlist.remove('paused'); log.textcontent = 'this
document has focus.
... click outside the
document to lose focus.'; } const log =
document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed.
...
document object model (dom) level 3 events specification obsolete initial definition ...
Window: focus event - Web APIs
bubbles no cancelable no interface focusevent event handler property onfocus sync / async sync composed yes examples live example this example changes the appearance of a
document when it loses focus.
... html <p id="log">click on this
document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() {
document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() {
document.body.classlist.remove('paused'); log.textcontent = 'this
document has focus.
... click outside the
document to lose focus.'; } const log =
document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed.
...
document object model (dom) level 3 events specification obsolete initial definition ...
Window.getComputedStyle() - Web APIs
html <p>hello</p> css p { width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif; text-align: center; background: purple; color: white; } javascript let para =
document.queryselector('p'); let compstyles = window.getcomputedstyle(para); para.textcontent = 'my computed font-size is ' + compstyles.getpropertyvalue('font-size') + ',\nand my computed line-height is ' + compstyles.getpropertyvalue('line-height') + '.'; result description the returned object is the same cssstyledeclaration type as the object returned from the element's style prope...
... defaultview in many code samples, getcomputedstyle is used from the
document.defaultview object.
... <style> h3::after { content: ' rocks!'; } </style> <h3>generated content</h3> <script> var h3 =
document.queryselector('h3'); var result = getcomputedstyle(h3, ':after').content; console.log('the generated content is: ', result); // returns ' rocks!' </script> notes the returned cssstyledeclaration object contains active values for css property longhand names.
... working draft
document object model (dom) level 2 style specificationthe definition of 'getcomputedstyle()' in that specification.
window.postMessage() - Web APIs
if at the time the event is scheduled to be dispatched the scheme, hostname, or port of targetwindow's
document does not match that provided in targetorigin, the event will not be dispatched; only if all three match will the event be dispatched.
...always provide a specific targetorigin, not *, if you know where the other window's
document should be located.
... the secret response " + "is: rheeeeet!", event.origin); } window.addeventlistener("message", receivemessage, false); notes any window may access this method on any other window, at any time, regardless of the location of the
document in the window, to send it a message.
... the value of the origin property of the dispatched event is not affected by the current value of
document.domain in the calling window.
Web APIs
ng domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransferitem datatransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints
document documentfragment
documentorshadowroot
documenttimeline
documenttouch
documenttype doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyim...
...position geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement html
document htmlelement htmlembedelement htmlfieldsetelement htmlfontelement htmlformcontrolscollection htmlformelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htm...
...usescrollevent mousewheelevent mutationevent mutationobserver mutationobserverinit mutationrecord n ndefmessage ndefreader ndefreadingevent ndefrecord ndefwriter namelist namednodemap navigationpreloadmanager navigator navigatorconcurrenthardware navigatorid navigatorlanguage navigatoronline navigatorplugins navigatorstorage networkinformation node nodefilter nodeiterator nodelist non
documenttypechildnode notation notification notificationaction notificationevent notifyaudioavailableevent o oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float oes_texture_float_linear oes_texture_half_float oes_texture_half_float_linear oes_vertex_array_object ovr_multiview2 offlineaudiocompletionevent offlineaudiocontext offscreencanvas orientationsensor o...
...hader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject webkitcssmatrix websocket wheelevent window windowclient windoweventhandlers windoworworkerglobalscope worker workerglobalscope workerlocation workernavigator worklet writablestream writablestreamdefaultcontroller writablestreamdefaultwriter x xdomainrequest xml
document xmlhttprequest xmlhttprequesteventtarget xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpathresult xrboundedreferencespace xrenvironmentblendmode xreye xrframe xrframerequestcallback xrhandedness xrinputsource xrinputsourcearray xrinputsourceevent xrinputsourceeventinit xrinputsourceschangeevent xrinputsourceschangeeventinit xrpermissiond...
ARIA live regions - Accessibility
in english, mars carries a name of the roman god of war, and is often referred to as the "red planet".' } }; function renderplanetinfo(planet) { const planettitle =
document.queryselector('#planettitle'); const planetdescription =
document.queryselector('#planetdescription'); if (planet in planets_info) { planettitle.textcontent = planets_info[planet].title; planetdescription.textcontent = planets_info[planet].description; } else { planettitle.textcontent = 'no planet selected'; planetdescription.textcontent = 'select a planet to view its descr...
...iption'; } } const renderplanetinfobutton =
document.queryselector('#renderplanetinfobutton'); renderplanetinfobutton.addeventlistener('click', event => { const planetsselect =
document.queryselector('#planetsselect'); const selectedplanet = planetsselect.options[planetsselect.selectedindex].value; renderplanetinfo(selectedplanet); }); as the user selects a new planet, the information in the live region will be announced.
... <div id="clock" role="timer" aria-live="polite"></div> /* basic javascript to update the clock */ setinterval(function() { var now = new date();
document.getelementbyid('clock').innerhtml = "time: " + now.gethours() + ":" + ("0"+now.getminutes()).substr(-2); }, 60000); the first time the function executes, the entirety of the string that is added will be announced.
... a working example of a simple year control for better understanding: <div id="date-input"> <label>year: <input type="text" id="year" value="1990" onblur="change(event)"/> </label> </div> <div id="date-output" aria-live="polite"> the set year is: <span id="year-output">1990</span> </div> function change(event) { var yearout =
document.getelementbyid("year-output"); switch (event.target.id) { case "year": yearout.innerhtml = event.target.value; break; default: return; } }; without aria-atomic="true" the screenreader announces only the changed value of year.
Using the alert role - Accessibility
<h2 role="alert">your form could not be submitted because of 3 validation errors.</h2> example 2: dynamically adding an element with the alert role this snippet dynamically creates an element with an alert role and adds it to the
document structure.
... let myalert =
document.createelement("p"); myalert.setattribute("role", "alert"); let myalerttext =
document.createtextnode("you must agree with our terms of service to create an account."); myalert.appendchild(myalerttext);
document.body.appendchild(myalert); note: the same result can be achieved with less code when using a script library like jquery: $("<p role='alert'>you must agree with our terms of service to create an account.</p>").appendto(
document.body); example 3: adding alert role to an existing element sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element.
...the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the form with less than 3 checkboxes selected:
document.getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making an element with an alert role visible if an element already has role="alert" and is initially hidden using css, making it visible will cause the alert to fire as if it was just added to the page.
... .hidden { display:none; } <p id="expirationwarning" role="alert" class="hidden">your log in session will expire in 2 minutes</p> // removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
document.getelementbyid("expirationwarning").classname = ""; working examples: alert role example using an aria alert box alert example using a modal aria dialog box notes using the alert role on an element implies that element has aria-live="assertive".
ARIA: application role - Accessibility
if the web application encompassed by the application role contains parts that should be treated like normal web content, a role of
document or article should be used.
...this is often referred to as virtual
document, browse mode, or similar terms.
... the
document is streamlined to a single-column view.
... associated wai-aria roles, states, and properties
document, article used to indicate parts of the application that should be treated as normal web content aria-activedescendant used to manage focus inside the application.
ARIA: Navigation Role - Accessibility
er service"> <ul> <li><a href="#">help</a></li> <li><a href="#">order tracking</li> <li><a href="#">shipping & delivery</a></li> <li><a href="#">returns</a></li> <li><a href="#">contact us</a></li> <li><a href="#">find a store</a></li> </ul> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the
document.
... labeling landmarks multiple landmarks if there is more than one navigation landmark role or <nav> element in a
document, provide a label for each landmark.
... <nav id="footer-nav" aria-label="footer"> <!-- content --> </nav> repeated landmarks if a navigation landmark role or <nav> element in a
document is repeated in a
document, and both landmarks have identical content, use the same label for each landmark.
... added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the
document.
ARIA: button role - Accessibility
or: 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; newnameinput.value = ''; // clear the text field newnameinput.focus(); // give the text field focus to enable entering and additional name.
... if(name.length > 0) { listitem =
document.createelement('li'); listitem.appendchild(
document.createtextnode(name)); // add the new name to the list.
... let list =
document.getelementbyid('namelist'); list.appendchild(listitem); } } toggle button example in this snippet a <span> element is converted to a toggle button using the button role and the aria-pressed attribute.
...vent.target); } function handlebtnkeydown(event) { // check to see if space or enter were pressed if (event.key === " " || event.key === "enter" || event.key === "spacebar") { // "spacebar" for ie11 support // prevent the default action to stop scrolling when space is pressed event.preventdefault(); togglebutton(event.target); } } function togglebutton(element) { var audio =
document.getelementbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pressed", !pressed); // toggle the play state of the audio file if(pressed) { audio.pause(); } else { audio.play(); } } result accessibility concerns buttons are int...
Alerts - Accessibility
below is example javascript code which could be inserted above the closing “head” tag: <script type="application/javascript"> function removeoldalert() { var oldalert =
document.getelementbyid("alert"); if (oldalert){
document.body.removechild(oldalert); } } function addalert(amsg) { removeoldalert(); var newalert =
document.createelement("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var msg =
document.createtextnode(amsg); newalert.appendchild(msg);
document.body.appendchild(newalert); } func...
...tion checkvalidity(aid, asearchterm, amsg) { var elem =
document.getelementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribute("aria-invalid", "true"); addalert(amsg); } else { elem.setattribute("aria-invalid", "false"); removeoldalert(); } } </script> the checkvalidity function the primary method in javascript used for form validation is the checkvalidity function.
...the function is simple: it looks for an element with id “alert”, and if found, removes that from the
document object model.
... the text is added to the div element, and the div element is added to the
document.
orientation - CSS: Cascading Style Sheets
the orientation css descriptor controls the orientation of a
document defined by @viewport.
... syntax values auto the user agent will set the
document's orientation automatically, typically based on the device's orientation as determined by an accelerometer (if the device has such a hardware sensor), although there is often a user-controlled, os-level "lock orientation" setting that will trump the accelerometer reading.
... portrait the
document should be locked into portrait orientation.
... landscape the
document should be locked into landscape orientation.
Detecting CSS animation support - CSS: Cascading Style Sheets
testing for css animation support this code will check to see if css animation support is available: var animation = false, animationstring = 'animation', keyframeprefix = '', domprefixes = 'webkit moz o ms khtml'.split(' '), pfx = '', elem =
document.createelement('div'); if( elem.style.animationname !== undefined ) { animation = true; } if( animation === false ) { for( var i = 0; i < domprefixes.length; i++ ) { if( elem.style[ domprefixes[i] + 'animationname' ] !== undefined ) { pfx = domprefixes[ i ]; animationstring = pfx + 'animation'; keyframeprefix = '-' + pfx.tolowercase() + '-'; animation = true; ...
... if( animation === false ) { // animate in javascript fallback } else { elem.style[ animationstring ] = 'rotate 1s linear infinite'; var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ '}'; if(
document.stylesheets &&
document.stylesheets.length ) {
document.stylesheets[0].insertrule( keyframes, 0 ); } else { var s =
document.createelement( 'style' ); s.innerhtml = keyframes;
document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); } } this code looks at the value of animation; if it's false, we know we need to use our javascript fallback code to perform our an...
...the first thing to do is look to see if there's already a style sheet on the
document; if so, we simply insert the keyframe description into that stylesheet; this is done in lines 13-15.
...then the new <style> element is inserted into the
document's <head>, thereby adding the new style sheet to the
document.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
see the
documentation for justify-content on mdn for more details on all of these values and browser support.
... while this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your
document along the inline, row axis.
... you can switch them to display in the block direction for the language of your
document by selecting flex-direction: column.
... if you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your
document.
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
this can be helpful, if you have a
document order that reflects the order in which items sit on the grid you may not need to write css rules to place absolutely everything.
... order modified
document order grid places items that have not been given a grid position in what is described in the specification as “order modified
document order”.
...otherwise they will stay by default in the order that they are entered in the
document source.
...tab order for example, will still follow the
document order.
transition-delay - CSS: Cascading Style Sheets
ty: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height:...
...operty: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height:...
...operty: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:2s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:2s; transition-timing-function: linear; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height:...
...dth height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:4s; transition-timing-function: ease-in-out; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); specifications specification status comment css transitionsthe definition of 'transition-delay' in that specification.
transition-duration - CSS: Cascading Style Sheets
height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; heig...
...width height background-color font-size left top -webkit-transform transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:1s; transition-timing-function: ease-in-out; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; heig...
...width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:2s; transition-timing-function: ease-in-out; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; heig...
...width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:4s; transition-timing-function: ease-in-out; } function updatetransition() { var el =
document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el =
document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); specifications specification status comment css transitionsthe definition of 'transition-duration' in that specification.
Adding captions and subtitles to HTML5 video - Developer guides
initial setup as with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button: var subtitles =
document.getelementbyid('subtitles'); we also initially turn off all subtitles, in case the browser turns any of them on by default: for (var i = 0; i < video.texttracks.length; i++) { video.texttracks[i].mode = 'hidden'; } the video.texttracks property contains an array of all the text tracks attached to the video.
... all we need to do is to go through the video's texttracks, reading their properties and building the menu up from there: var subtitlesmenu; if (video.texttracks) { var df =
document.create
documentfragment(); var subtitlesmenu = df.appendchild(
document.createelement('ul')); subtitlesmenu.classname = 'subtitles-menu'; subtitlesmenu.appendchild(createmenuitem('subtitles-off', '', 'off')); for (var i = 0; i < video.texttracks.length; i++) { subtitlesmenu.appendchild(createmenuitem('subtitles-' + video.texttracks[i].language, video.texttracks[i].language, video.
...texttracks[i].label)); } videocontainer.appendchild(subtitlesmenu); } this code creates a
documentfragment, which is used to hold an unordered list containing our subtitles menu.
... the creation of each list item and button is done by the createmenuitem() function, which is defined as follows: var subtitlemenubuttons = []; var createmenuitem = function(id, lang, label) { var listitem =
document.createelement('li'); var button = listitem.appendchild(
document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.length > 0) button.setattribute('lang', lang); button.value = label; button.setattribute('data-state', 'inactive'); button.appendchild(
document.createtextnode(label)); button.addeventlistener('click', function(e) { ...
Media buffering, seeking, and time ranges - Developer guides
this will work with <audio> or <video>; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp3"> </audio> we can access these attributes like so: var myaudio =
document.getelementbyid('my-audio'); var bufferedtimeranges = myaudio.buffered; timeranges object timeranges are a series of non-overlapping ranges of time, with start and stop times.
...art(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio =
document.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.addeventlisten...
... width: 300px; } #buffered-amount { display: block; 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.addeventlistener('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(myaudi...
...o.buffered.length - 1 - i) / duration) * 100 + "%"; break; } } } }); myaudio.addeventlistener('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.
Challenge solutions - Developer guides
readable css commenting out a rule challenge comment out part of your stylesheet, without changing anything else, to make the very first letter of your
document red.
... solution the following rule achieves this effect: ul { border: 10px solid lightblue; width: 100px; } layout default image position fixed image position challenge change your sample
document, doc2.html, adding this tag to it near the end, just before </body>: <img id="fixed-pin" src="yellow-pin.png" alt="yellow map pin"> predict where the image will appear in your
document.
... challenge add a rule to your stylesheet that places the image in the top right of your
document.
...the following script achieves the desired result: // javascript demonstration function dodemo (button) { var square =
document.getelementbyid("square"); square.style.backgroundcolor = "#fa4"; square.style.marginleft = "20em"; button.setattribute("disabled", "true"); settimeout(cleardemo, 2000, button); } function cleardemo (button) { var square =
document.getelementbyid("square"); square.style.backgroundcolor = "transparent"; square.style.marginleft = "0em"; button.removeattribute("disabled"); } sv...
Constraint validation - Developer guides
d-12345 or 12345" ], nl : [ '^(nl-)?\\d{4}\\s*([a-rt-z][a-z]|s[bce-rt-z])$', "nederland zips must have exactly 4 digits, followed by 2 letters except sa, sd and ss" ] }; // read the country id var country =
document.getelementbyid("country").value; // get the npa field var zipfield =
document.getelementbyid("zip"); // build the constraint checker var constraint = new regexp(constraints[country][0], ""); console.log(constraint); // check it!
...intapi to tell it zipfield.setcustomvalidity(""); } else { // the zip doesn't follow the constraint, we use the constraintapi to // give a message about the format required for this country zipfield.setcustomvalidity(constraints[country][1]); } } then we link it to the onchange event for the <select> and the oninput event for the <input>: window.onload = function () {
document.getelementbyid("country").onchange = checkzip;
document.getelementbyid("zip").oninput = checkzip; } you can see a live example of the postal code validation.
... here is the html part: <label for="fs">select a file smaller than 75 kb : </label> <input type="file" id="fs"> this displays: the javascript reads the file selected, uses the file.size() method to get its size, compares it to the (hard coded) limit, and calls the constraint api to inform the browser if there is a violation: function checkfilesize() { var fs =
document.getelementbyid("fs"); var files = fs.files; // if there is (at least) one file selected if (files.length > 0) { if (files[0].size > 75 * 1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct e...
...vent: window.onload = function () {
document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint validation.
XHTML - Developer guides
xhtml is a term that was historically used to describe html
documents written to conform with xml syntax rules.
... the following example shows an html
document and corresponding "xhtml"
document, and the accompanying http content-type headers they should be served with.
... html
document content-type: text/html <!doctype html> <html lang=en> <head> <meta charset=utf-8> <title>html</title> </head> <body> <p>i am a html
document</p> </body> </html> xhtml
document content-type: application/xhtml+xml <?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>xhtml</title> </head> <body> <p>i am a xhtml
document</p> </body> </html> in practice, very few "xhtml"
documents are served over the web with a content-type: application/xhtml+xml header.
... instead, even though the
documents are written to conform to xml syntax rules, they are served with a content-type: text/html header — so browsers parse those
documents using html parsers rather than xml parsers, which can cause a variety of sometimes-very-surprising problems.
Printing - Developer guides
open and automatically close a popup window when finished if you want to be able to automatically close a popup window (for example, the printer-friendly version of a
document) after the user prints its contents, you can use code like this: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript window close example </title> <script type="text/javascript"> function popuponclick() { my_window = window.open('', 'mywindow', 'status=1,width=350,height=150'); my_window.
document.write('<html><...
...head><title>print me</title></head>'); my_window.
document.write('<body onafterprint="self.close()">'); my_window.
document.write('<p>when you print this window, it will close afterward.</p>'); my_window.
document.write('</body></html>'); } </script> </head> <body> <p>to try out the <code>afterprint</code> event, click the link below to open the window to print.
...the following is a possible example which will print a file named externalpage.html: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>mdn example</title> <script type="text/javascript"> function closeprint () {
document.body.removechild(this.__container__); } function setprint () { this.contentwindow.__container__ = this; this.contentwindow.onbeforeunload = closeprint; this.contentwindow.onafterprint = closeprint; this.contentwindow.focus(); // required for ie this.contentwindow.print(); } function printpage (surl) { var ohiddframe =
document.createelement("iframe"); ohiddframe.onload = setprint;...
... ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = surl;
document.body.appendchild(ohiddframe); } </script> </head> <body> <p><span onclick="printpage('externalpage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">print external page!</span></p> </body> </html> note: older versions of internet explorer cannot print the contents of a hidden <iframe>.
Writing forward-compatible websites - Developer guides
javascript prefix all global variable access in onfoo attributes with “window.” when an event handler content attribute (onclick, onmouseover, and so forth) is used on html element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the
document, and then on the window (where the global variables you have defined are).
... for example, if you have this markup: <div onclick="alert(owner
document)">click me</div> then clicking on the text alerts the owner
document of the div.
... this happens even if there is a var owner
document declared in global scope.
... what this means is that any time you access a global variable in an event handler content attribute, including calling any function declared globally, you can end up with a name collision if a specification adds a new dom property to elements or
documents which has the same name as your function or variable, and a browser implements it.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
this outline is different from the border in that it doesn't get space set aside for it in the
document (so it may overlap other content).
... let colorpicker =
document.getelementbyid("colorpicker"); let box =
document.getelementbyid("box"); let output =
document.getelementbyid("output"); box.style.bordercolor = colorpicker.value; colorpicker.addeventlistener("input", function(event) { box.style.bordercolor = event.target.value; }, false); colorpicker.addeventlistener("change", function(event) { output.innertext = "color set to " + colorpicker.value + "."...
...most browsers, by default, remove background images when printing
documents.
... the default value of color-adjust, economy, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the
document is being drawn onto.
HTML attribute reference - HTML: Hypertext Markup Language
crossorigin <audio>, <img>, <link>, <script>, <video> how the element handles cross-origin requests csp <iframe> specifies the content security policy that an embedded
document must agree to enforce upon itself.
... manifest <html> specifies the url of the
document's cache manifest.
... sandbox <iframe> stops a
document loaded in an iframe from using certain features (such as submitting forms or opening new windows).
... target <a>, <area>, <base>, <form> specifies where to open the linked
document (in the case of an <a> element) or where to display the response recieved (in the case of a <form> element) title global attribute text to be displayed in a tooltip when hovering over the element.
<input type="month"> - HTML: Hypertext Markup Language
you can also get and set the date value in javascript using the htmlinputelement.value property, for example: <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"> var monthcontrol =
document.queryselector('input[type="month"]'); monthcontrol.value = '1978-06'; additional attributes in addition to the attributes common to <input> elements, month inputs offer the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the latest year and month to accep...
...t as a valid input min the earliest year and month to accept as a valid input readonly a boolean which, if present, indicates that the input's value can't be edited step a stepping interval to use when incrementing and decrementing the value of the input field list the values of the list attribute is the id of a <datalist> element located in the same
document.
... // define variables var nativepicker =
document.queryselector('.nativedatepicker'); var fallbackpicker =
document.queryselector('.fallbackdatepicker'); var fallbacklabel =
document.queryselector('.fallbacklabel'); var yearselect =
document.queryselector('#year'); var monthselect =
document.queryselector('#month'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new da...
...te input falls back to a text input or not var test =
document.createelement('input'); try { test.type = 'month'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the years dynamically // (the months are always the same, therefore hardcoded) populateyears(); } function populateyears() { // get the current year as a number var date = new date(); var year = date.getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option =
document.createelem...
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
examples basic example <p>use the command <kbd>help mycommand</kbd> to view
documentation for the command "mycommand".</p> representing keystrokes within an input to describe an input comprised of multiple keystrokes, you can nest multiple <kbd> elements, with an outer <kbd> element representing the overall input and each individual keystroke or component of the input enclosed within its own <kbd>.
... html <p>you can also create a new
document using the keyboard shortcut <kbd><kbd>ctrl</kbd>+<kbd>n</kbd></kbd>.</p> this wraps the entire key sequence in an outer <kbd> element, then each individual key within its own, in order to denote the components of the sequence.
...style sheet applied: with custom styles we can make more sense of this by adding some css: css we add a new style for <kbd> elements, key, which we can apply when rendering keyboard keys: kbd.key { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } html then we update the html to use this class on the keys in the output to be presented: <p>you can also create a new
document by pressing <kbd><kbd class="key">ctrl</kbd>+<kbd class="key">n</kbd></kbd>.</p> result the result is just what we want!
... for example, you can explain how to choose the "new
document" option in the "file" menu using html that looks like this: <p>to create a new file, choose the menu option <kbd><kbd><samp>file</samp></kbd>⇒<kbd><samp>new
document</samp></kbd></kbd>.</p> <p>don't forget to click the <kbd><samp>ok</samp></kbd> button to confirm once you've entered the name of the new file.</p> this does some interesting nesting.
<object> - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles application,
document, image dom interface htmlobjectelement attributes this element includes the global attributes.
...if not specified, the default is the base uri of the current
document.
...the value of the attribute must be an id of a <form> element in the same
document.
... tabindexhtml 4 onlyobsolete since html5 the position of the element in the tabbing navigation order for the current
document.
<textarea> - HTML: Hypertext Markup Language
possible values are: off: the user must explicitly enter a value into this field for every use, or the
document provides its own auto-completion method; the browser does not automatically complete the entry.
...only one form-associated element in a
document can have this attribute specified.
...the value of the attribute must be the id of a form element in the same
document.
...this attribute enables you to place <textarea> elements anywhere within a
document, not just as descendants of form elements.
itemprop - HTML: Hypertext Markup Language
an item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange" <div itemscope> <span itemprop="favorite-color favorite-fruit">orange</span> </div> note: there is no relationship between the microdata and the content of the
document where the microdata is marked up.
...the only difference is that if the user drags the figcaption out of the
document, the item will be included in the drag-and-drop data.
... if the element is a meta element the value is the value of the element's content attribute if the element is an audio, embed, iframe, img, source, track, or video element the value is the resulting url string that results from parsing the value of the element's src attribute relative to the node
document (part of the microdata dom api) of the element at the time the attribute is set if the element is an a, area, or link element the value is the resulting url string that results from parsing the value of the element's href attribute relative to the node
document of the element at the time the attribute is set if the element is an object element the value is the resulting ur...
...l string that results from parsing the value of the element's data attribute relative to the node
document of the element at the time the attribute is set if the element is a data element the value is the value of the element's value attribute if the element is a meter element the value is the value of the element's value attribute if the element is a time element the value is the element's datetime value otherwise the value is the element's textcontent.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
document: an html
document intended to be embedded by a <frame> or <iframe>.
...ive preload example</title> <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>my site</h1> </header> <script> var mediaquerylist = window.matchmedia("(max-width: 600px)"); var header =
document.queryselector('header'); if (mediaquerylist.matches) { header.style.backgroundimage = 'url(bg-image-narrow.png)'; } else { header.style.backgroundimage = 'url(bg-image-wide.png)'; } </script> </body> we include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide v...
...for example, here we create a htmllinkelement instance, then attach it to the dom: var preloadlink =
document.createelement("link"); preloadlink.href = "myscript.js"; preloadlink.rel = "preload"; preloadlink.as = "script";
document.head.appendchild(preloadlink); this means that the browser will preload the myscript.js file, but not actually use it yet.
... to use it, you could do this: var preloadedscript =
document.createelement("script"); preloadedscript.src = "myscript.js";
document.body.appendchild(preloadedscript); this is useful when you want to preload a script, but then defer execution until exactly when you need it.
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
for html
documents, browsers use a doctype in the beginning of the
document to decide whether to handle it in quirks mode or standards mode.
... make sure you put the doctype right at the beginning of your html
document.
... xhtml if you serve your page as xhtml using the application/xhtml+xml mime type in the content-type http header, you do not need a doctype to enable standards mode, as such
documents always use full standards mode.
... in internet explorer, press f12, and look for
document mode.
Data URLs - HTTP
data urls, urls prefixed with the data: scheme, allow content creators to embed small files inline in
documents.
...if omitted, defaults to text/plain;charset=us-ascii if the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing
document's type).
... data:text/plain;base64,sgvsbg8sifdvcmxkiq== base64-encoded version of the above data:text/html,%3ch1%3ehello%2c%20world!%3c%2fh1%3e an html
document with <h1>hello, world!</h1> data:text/html,<script>alert('hi');</script> an html
document that executes a javascript alert.
... formatting in html a data url provides a file within a file, which can potentially be very wide relative to the width of the enclosing
document.
Content-Location - HTTP
if the url for a particular
document is at https://example.com/
documents/foo, the site could return different urls for content-location depending on the request's accept header: request header response header accept: application/json, text/json content-location: /
documents/foo.json accept: application/xml, text/xml content-location: /
documents/foo.xml accept: text/plain, text/* co...
...ntent-location: /
documents/foo.txt these urls are examples — the site could serve the different filetypes with any url patterns it wishes, such as a query string parameter: /
documents/foo?format=json, /
documents/foo?format=xml, and so on.
... then the client could remember that the json version is available at that particular url, skipping content negotation the next time it requests that
document.
... pointing to a new
document (http 201 created) say you're creating a new blog post through a site's api: put /new/post host: example.com content-type: text/markdown # my first blog post!
CSP: base-uri - HTTP
the http content-security-policy base-uri directive restricts the urls which can be used in a
document's <base> element.
... csp version 2 directive type
document directive default-src fallback no.
... 'self' refers to the origin from which the protected
document is being served, including the same url scheme and port number.
... <meta http-equiv="content-security-policy" content="base-uri 'self'"> <base href="https://example.com/"> // error: refused to set the
document's base uri to 'https://example.com/' // because it violates the following content security policy // directive: "base-uri 'self'" specifications specification status comment content security policy level 3the definition of 'base-uri' in that specification.
Cross-Origin-Embedder-Policy - HTTP
the http cross-origin-embedder-policy (coep) response header prevents a
document from loading any cross-origin resources that don't explicitly grant the
document permission (using corp or cors).
...allows the
document to fetch cross-origin resources without giving explicit permission through the cors protocol or the cross-origin-resource-policy header.
... require-corp a
document can only load resources from the same origin, or resources explicitly marked as loadable from another origin.
... examples certain features depend on cross-origin isolation you can only access certain features like sharedarraybuffer objects or performance.now() with unthrottled timers, if your
document has a coep header with the value require-corp value set.
Range - HTTP
the range http request header indicates the part of a
document that the server should return.
... several parts can be requested with one range header at once, and the server may send back these ranges in a multipart
document.
...the server can also ignore the range header and return the whole
document with a 200 status code.
...this value is optional and, if omitted, the end of the
document is taken as the end of the range.
Image file type and format guide - Web media technologies
mime type image/bmp file extension(s) .bmp specification no specification; however, microsoft provides general
documentation of the format at docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage browser compatibility all versions of chrome, edge, firefox, internet explorer, opera, and safari maximum dimensions either 32,767×32,767 or 2,147,483,647×2,147,483,647 pixels, depending on the format version supported color modes color mode bits...
...w3c liability, trademark,
document use and software licensing rules apply.
...w3c liability, trademark,
document use and software licensing rules apply.
...width) 0x0003 (short) 0x00000001 (1 entry) 0x0280 (640 pixels) specifying type 4 (long) stores the width as a 32-bit value: tag type size value 0x0100 (imagewidth) 0x0004 (long) 0x00000001 (1 entry) 0x00000280 (640 pixels) a single tiff file can contain multiple images; this may be used to represent multi-page
documents, for example (such as a multi-page scanned
document, or a received fax).
Performance fundamentals - Web Performance
in the context of open web apps, this
document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.
... the remainder of this
document will discuss performance in terms of these metrics.
... for example, to paint an application's first frame that comprises visually some html and css to style that html: the html must be parsed the dom for that html must be constructed resources like images in that part of the dom have to be loaded and decoded the css styles must be applied to that dom the styled
document has to be reflowed nowhere in that list is "load the js file needed for an uncommon menu"; "fetch and decode the image for the high scores list", etc.
... when applications are sent to the background, a visibilitychange event is fired on their
documents.
SVG Core Attributes - SVG: Scalable Vector Graphics
id lang tabindex xml:base xml:lang xml:space attributes id defines a unique identifier (id) which must be unique in the whole
document.
...the tag contains one single entry value in the format defined in the tags for identifying languages (bcp47) ietf
document.
... value type: <integer>; animatable: no xml:base specifies a base iri other than the base iri of the
document.
...it's almost identical in usage to html's lang, but in conforming xml 1.0
documents, it does not allow the use of a null attribute value (xml:lang="") to indicate an unknown language.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
source here is the source to the example: <html> <head> <title>xtech svg demo</title> <style> stop.begin { stop-color:yellow; } stop.end { stop-color:green; } body.invalid stop.end { stop-color:red; } #err { display:none; } body.invalid #err { display:inline; } </style> <script> function signalerror() {
document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="act...
...d added an attractive, interactive background the approach is backwards compatible to browsers that do not support svg; simply, no background appears in them it's very simple and performs very well the picture dynamically sizes itself to the required size in an intelligent way we can have declarative style rules applying to both html and svg the same script manipulates both html and svg the
document is entirely standards-based to add a linked image with dom methods to an embedded svg element, one has to use setattributens to set href.
... like in the following example: var img =
document.createelementns("http://www.w3.org/2000/svg", "image"); img.setattributens("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which the svg picture's coordinates are relative to.
...(for inline svg to work in both firefox and internet explorer it is necessary to serve
documents with a different content-type to each browser.
Subresource Integrity - Web security
note: for subresource-integrity verification of a resource served from an origin other than the
document in which it’s embedded, browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource allows it to be shared with the requesting origin.
... subresource integrity enables you to mitigate some risks of attacks such as this, by ensuring that the files your web application or web
document fetches (from a cdn or anywhere) have been delivered without a third-party having injected any additional content into those files — and without any other changes of any kind at all having been made to those files.
... cross-origin resource sharing and subresource integrity for subresource-integrity verification of a resource served from an origin other than the
document in which it's embedded, browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource allows it to be shared with the requesting origin.
... note: for subresource-integrity verification of a resource served from an origin other than the
document in which it’s embedded, browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource allows it to be shared with the requesting origin.
xml:base - XML: Extensible Markup Language
xml:base is like the html <base> element, but can specify the base uri per element as well as the entire
document.
... the base uri of an element is: the base uri specified by an xml:base attribute on the element, if one exists, otherwise the base uri of the element's parent element within the
document entity or external entity, if one exists, otherwise the base uri of the
document entity or external entity containing the element.
... use cases if you have an inline svg you use as icons that needs to work in a
document with a html baseelement , you can reset the uri on your icon sprite by setting the xml:base.
...></style> <text x="647" y="412" dx="0" class="s9_999" >r</text> <style type="text/css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src: url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></style> </svg> setting the xml:base on the svg element means you can inline the svg and thereby bypass cors issue while not changing the base uri for your entire
document.
Axes - XPath
for further information on using xpath expressions, please see the for further reading section at the end of transforming xml with xslt
document.
... following-sibling indicates all the nodes that have the same parent as the context node and appear after the context node in the source
document.
... preceding indicates all the nodes that precede the context node in the
document except any ancestor, attribute and namespace nodes.
... preceding-sibling indicates all the nodes that have the same parent as the context node and appear before the context node in the source
document.
<xsl:attribute> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:attribute> element creates an attribute in the output
document, using any values that can be accessed from the stylesheet.
... the element must be defined before any other output
document element inside the output
document element for which it establishes attribute values.
... syntax <xsl:attribute name=name namespace=uri> template </xsl:attribute> required attributes name specifies the name of the attribute to be created in the output
document.
... optional attributes namespace defines the namespace uri for this attribute in the output
document.
WebAssembly Concepts - WebAssembly
the emscripten tool is able to take just about any c/c++ source code and compile it into a .wasm module, plus the necessary javascript "glue" code for loading and running the module, and an html
document to display the results of the code.
... the generated html
document loads the javascript glue file and writes stdout to a <textarea>.
... you can find full
documentation on emscripten at emscripten.org, and a guide to implementing the toolchain and compiling your own c/c++ app across to wasm at compiling from c/c++ to webassembly.
...you can check its
documentation on https://assemblyscript.org/.
SDK API Lifecycle - Archive of obsolete content
the stability index for each module is written into that module’s metadata structure, and is displayed at the top of each module's
documentation page.
...the sdk will continue to provide warnings: api
documentation will inform users that the module is deprecated.
...the sdk team will remove the corresponding
documentation, and communicate the removal in the usual ways: the release notes, the add-ons blog, and the jetpack google group.
windows - Archive of obsolete content
to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the
documentation for the private-browsing module.
...dow, and then back the other way: var { modelfor } = require("sdk/model/core"); var { viewfor } = require("sdk/view/core"); var browserwindows = require("sdk/windows").browserwindows; function converttochromeandback(browserwindow) { // get the chrome window for this browserwindow var chromewindow = viewfor(browserwindow); // now we can use the chrome window api console.log(chromewindow.
document.location.href); // -> "chrome://browser/content/browser.xul" // convert back to the high-level window var highlevelwindow = modelfor(chromewindow); // now we can use the sdk's high-level window api console.log(highlevelwindow.title); } browserwindows.on("open", converttochromeandback); note that directly accessing low-level chrome objects like this means you're no longer protected by...
...see the private-browsing
documentation for more information.
platform/xpcom - Archive of obsolete content
in this example the helloworld component is available to javascript only, so we use the technique
documented under the "using wrappedjsobject" section of how to build an xpcom component in javascript.
... queryinterface() see the
documentation for unknown.queryinterface().
... id and/or a class id var service = service({ contract: contractid, component: alertservice }); after this, xpcom users can access the service implementation by supplying the contract id: var alertservice = cc[contractid].getservice(ci.nsialertsservice); alertservice.showalertnotification(...); the service interface is identical to the factory interface, so refer to the factory interface
documentation for details.
stylesheet/utils - Archive of obsolete content
globals functions loadsheet(window, uri, type) synchronously loads a style sheet from uri and adds it to the list of additional style sheets of the
document.
... the sheets added takes effect immediately, and only on the
document of the window given.
... removesheet(window, uri, type) remove the
document style sheet at sheeturi from the list of additional style sheets of the
document.
Creating annotations - Archive of obsolete content
)) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('background-color'); $(matchedelement).css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.preventdefault(); self.port.emit('show', [
document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the add-on resets the matched element on mouseout: $('*').mouseout(function() { resetmatchedelement(); }); save this code in a new file called selector.js in your add-on's data directory.
...for a more detailed discussion of the way page-mod uses workers, see the page-mod
documentation.
... here's the code: var textarea =
document.getelementbyid('annotation-box'); textarea.onkeyup = function(event) { if (event.keycode == 13) { self.postmessage(textarea.value); textarea.value = ''; } }; self.on('message', function() { var textarea =
document.getelementbyid('annotation-box'); textarea.value = ''; textarea.focus(); }); save this inside data/editor as annotation-editor.js.
Getting started (cfx) - Archive of obsolete content
there's comprehensive reference
documentation covering all the commands you can use and all the options they take.
...there's reference
documentation for all the high-level and low-level apis in the sdk.
...see the
documentation on logging levels for the details on this.
Add-on SDK - Archive of obsolete content
reference high-level apis reference
documentation for the high-level sdk apis.
... tools reference reference
documentation for the jpm tool used to develop, test and package add-ons, the console global used for logging, and the package.json file.
... low-level apis reference
documentation for the low-level sdk apis.
Preferences - Archive of obsolete content
if you haven't yet, read other
documents about mozilla preferences on mdn (links below in resources section).
...the interfaces dealing with preferences are fairly well
documented, so using the methods not mentioned here should be straightforward.
... resources other
documentation on preferences preferences api a brief guide to mozilla preferences — describes preferences system from user's/administrator's pov mozilla xpcom interfaces of the preferences system most used interfaces (these are frozen and will not change): nsiprefbranch and nsiprefservice nsiprefbranch2 interface (before gecko 1.8 it was called nsiprefbranchinternal) pre...
Rosetta - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0.html |*| |*| syntax: |*| |*| rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.getattribute("type").tolowercase(), obaton =
document.createcomment(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\".
... "); if (!odicts.hasownproperty(smimetype)) { alert("rosetta.translatescript() \u2013 unknown mime-type \"" + smimetype + "\": script ignored."); return; } var ocompiled =
document.createelement("script"); oscript.parentnode.insertbefore(obaton, oscript); oscript.parentnode.removechild(oscript); for (var aattrs = oscript.attributes, nattr = 0; nattr < aattrs.length; nattr++) { ocompiled.setattribute(aattrs[nattr].name, aattrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(odicts[smimetype](oxhr200.responsetext)); } ocompiled.text = oxhr200 ?
...getsource(oscript) : createscript(oscript); } } function parse
document () { for ( var ascripts =
document.getelementsbytagname("script"), nidx = 0; nidx < ascripts.length; parsescript(ascripts[nidx++]) ); } var odicts = {}, rignoremimes = /^\s*(?:text\/javascript|text\/ecmascript)\s*$/; this.translatescript = parsescript; this.translateall = parse
document; this.appendcompiler = function (vmimetypes, fco...
Tree - Archive of obsolete content
var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree =
document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree item from the focused row assuming <tree id="my-tree">, you can use the following to get the tree item: var view =
document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 i...
...for example, assuming the given <tree>: <tree id="my-tree" onclick="ontreeclicked(event)"> use the following javascript: function ontreeclicked(event){ var tree =
document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and child element at the point var row = { }, col = { }, child = { }; tbo.getcellat(event.clientx, event.clienty, row, col, child); var celltext = tree.view.getcelltext(row.value, col.value); alert(celltext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tre...
...e.view.selection.getrangecount(), selectedindices = []; for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t, start, end); for (var v = start.value; v <= end.value; v++) selectedindices.push(v); } other resources xul: tree
documentation xul tutorial: tree selection ...
Communication between HTML and your extension - Archive of obsolete content
next i started investigating events, there are only a handful of events and the w3c
documentation is pretty complete.
...there were only a handful of events that seemed relevant (load, change, dominsertnode, dominsertnodeinto
document, domactivate) and i tried them all in many different ways.
...after the html component was update with the result of the ajax request, i created and dispatched the event like this: var event =
document.createevent("events"); event.initevent("my-custom-event", true, true);
document.body.dispatchevent(event); in the code of the extension that catches the loading of a new page i added this code: var doc = aevent.originaltarget; // doc is
document that triggered "onload" event // do something with the loaded page.
Enhanced Extension Installation - Archive of obsolete content
footnotes the term "extension" is used in this
document to imply any item managed by the extension manager, including themes.
... the term "firefox" is used in this
document to imply any application built on xulrunner that uses the extension system.
... original
document information author(s): ben goodger last updated date: april 18, 2005 copyright information: copyright (c) ben goodger ...
How to convert an overlay extension to restartless - Archive of obsolete content
docs:
document.getelementbyid(),
document.createelement(), element reference, node reference (dom elements are also nodes).
...nents.interfaces.nsidomwindow)); } var windowlistener = { onopenwindow: function(xulwindow) { var window = xulwindow.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); function onwindowload() { window.removeeventlistener("load",onwindowload); if (window.
document.
documentelement.getattribute("windowtype") == "navigator:browser") loadintowindow(window); } window.addeventlistener("load",onwindowload); }, onclosewindow: function(xulwindow) { }, onwindowtitlechange: function(xulwindow, newtitle) { } }; as mentioned above, components.utils.unload() will not work properly if the jsm file it is unloading is in a jar.
...instead of directly calling your tear down function, make your unloadfromwindow() something like this: function unloadfromwindow(window) { var event = window.
document.createevent("event"); event.initevent("myaddonname-unload",false,false); window.dispatchevent(event); } in each window you can then register on startup to listen for your custom "myaddonname-unload" event and just tear down and clean up when that event or a regular "unload" event comes in.
Chapter 1: Introduction to Extensions - Archive of obsolete content
« previousnext » note: if you want contribute to this
document please following guidelines from the contribute page.
... this
document was authored by hideyuki emura and was originally published in japanese for the firefox developers conference summer 2007.
...d-ons makes sure add-ons are compatible with the version of firefox you're using manages a whitelist of sites trusted for installing add-ons helps troubleshoot add-ons by disabling them and offering a safe mode confirms and runs updates provides access to add-ons' settings dialogs provides access to add-ons' support sites development environment amenities initially, there wasn't adequate
documentation available, and extension developers were largely left to fend for themselves1; however, now there's a considerable store of knowledge.
JavaScript Object Management - Archive of obsolete content
*/ init : function(aevent) { this._stringbundle =
document.getelementbyid("xulschoolhello-string-bundle"); // you can make changes to the window dom here.
...if you really need to do something like this anyway, one way to do it is to have a timeout execute the code after a delay: init : function(aevent) { let that = this; this._stringbundle =
document.getelementbyid("xs-hw-string-bundle"); window.settimeout( function() { window.alert(that._stringbundle.getstring("xulschoolhello.greeting.label")); }, 0); } the settimeout function executes the function in the first parameter, after a delay in miliseconds specified by the second parameter.
...unlike scripts in the chrome, modules don't have access to objects such as window,
document, or other global functions, such as openuilink.
Firefox addons developer guide - Archive of obsolete content
rules: file and directory names: italic method and variable names: class name if you want to add a fixme, add: fixme: a message notes: the original
document is in japanese and distributed via the xuldev.org website.
... if you use the interface template when mentioning interfaces by name, mdc will automatically format them and generate links to their
documentation, like this: nsiconsoleservice.
... todo: all fixme notes inside the
documents; add abbreviation definition to acronyms; add some link to the internal mdc
documentation when it makes sense; indent source code; make sure
documentation is relevant for all platforms: gnu/linux, macos, windows; add anchor links to figures & listings; add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of ch...
Updating addons broken by private browsing changes - Archive of obsolete content
after reading this
document, contact josh matthews with further questions or clarifications, or file a bug if your extension has stopped working due to a change described here and you are having trouble updating it.
... internalsave: takes a new required
document argument (prior to the optional boolean and string arguments) indicating the
document that originated the save action.
... saveurl: takes a new required
document argument indicating the source of the url being saved.
Defining Cross-Browser Tooltips - Archive of obsolete content
unlike the title element, which provides information about an entire
document and may only appear once, the title attribute may annotate any number of elements.
...authors who are faced with the prospect of editing a large collection of legacy
documents should be able to convert their
documents using a batch find-and-replace operation, for example substituting alt= for title=.
... related links html 4.01 specification: 13.8 how to specify alternate text html 4.01 specification: 7.4.3 the title attribute bug 25537 original
document information author(s): eric a.
DTrace - Archive of obsolete content
dtrace has been largely supplanted by the gecko profiler and other tools, so this
documentation has been archived.
... if you find that there are still use cases of consequence, you're welcome to file a
documentation bug.
...
documentation writing scripts a general introduction to writing d scripts and using the built-in mozilla probes.
Drag and Drop - Archive of obsolete content
for example, dragging files to other directories, or dragging an icon to another window to open the
document it refers to.
... source
document the
document where the drag started.
... next » original
document information author(s): neil deakin original
document: copyright information: copyright (c) neil deakin ...
Embedding FAQ - Archive of obsolete content
how to customize
document retrieval one method is to implement your own protocol method.
...here is the code : import org.eclipse.swt.swt; import org.eclipse.swt.browser.mozillabrowser; import org.eclipse.swt.browser.progressevent; import org.eclipse.swt.browser.progresslistener; import org.eclipse.swt.widgets.display; import org.eclipse.swt.widgets.shell; import org.mozilla.xpcom.nsidom
document; public class test { public static void main(string args[]) { display display = new display(); shell shell = new shell(display); final mozillabrowser browser = new mozillabrowser(shell,wt.border); browser.seturl("http://www.google.com"); browser.addprogresslistener(new progresslistener() { ...
... public void changed(progressevent event) { } public void completed(progressevent event) { nsidom
document doc = browser.get
document(); system.out.println(doc); } }); while (!shell.isdisposed()) { if (!display.readanddispatch()) { display.sleep(); } } } how to map a javascript function to a c++ function define an xpcom class defining the function you'll be doing in javascript.
Repackaging Firefox - Archive of obsolete content
at the time of writing this
document, the latest builds are here.
... while the aim of this article is not to fully
document how to make an extension (for that, try this section of the mozilla developer center), here is a basic tutorial to get you started, and some tips specific for creating a dex.
...see the mdc
documentation for more information on them.
Jetpack Snippets - Archive of obsolete content
note: this page
documents the jetpack prototype, which is no longer under active development.
...using firebug lite in a slidebar jetpack.future.import("slidebar");jetpack.slidebar.append({ html: <html><head></head><body> <p>some slidbar you want to debug</p> <a href="javascript:console.log('hello!')">test</a> <script><![cdata[ //firebug lite bookmarklet code: var firebug=
document.createelement('script'); firebug.setattribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');
document.body.appendchild(firebug); (function(){if(window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></html>, width: 800, //wide enough to use...
....slide(800, true); }}); calling into a slidebar from the global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a global function, passing the slidebar object exinitslidebar(slide); }, ...});function exinitslidebar(aslidebar) { // this variable will now be global slider = aslidebar;} // then, accessing the slidebar htmlvar tl = slider.content
document.getelementbyid("thumblist"); // or calling slidebar api methods or accessing propertiesslider.notify(); ...
Tabs - Archive of obsolete content
note: this page
documents the jetpack prototype, which is no longer under active development.
...lah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited
document is fully loaded.
...lah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited
document is fully loaded.
Microsummary XML grammar reference - Archive of obsolete content
a microsummary generator is an xml
document that describes how to pull specific information from a web page to be presented in summary form as a bookmark whose title changes based on the content of the page it targets.
...w.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> <text> fx downloads</text> </template> </transform> </template> <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> namespace the namespace uri for microsummary generator xml
documents is: http://www.mozilla.org/microsummaries/0.1 all elements in a microsummary generator
document should be in this namespace except the descendants of the <template> element, which should be in the xslt namespace: http://www.w3.org/1999/xsl/transform the <generator> element the <generator> element is the root tag for all microsummary generators, and should contain the remainder of the xml code ...
...firefox determines which interval to apply to a microsummary generated by a generator according to the following rules: firefox processes each <condition> child element in
document order.
Priority Content - Archive of obsolete content
update: i've removed
documents from this list that have been migrated into the wiki.
... the list of completed
documents is available through the devedge page.
...note: use example at sample:original
document information to credit original authors.
Same origin policy for XBL - Archive of obsolete content
the same origin policy used for xbl
documents is different from the policy used for other content.
...determining the originating principal the principal originating the load is determined using the following steps: for external stylesheets (<link>, <?xml-stylesheet?>, user sheets, and ua sheets), it depends on where the sheet is loaded from, just like it would for an html
document loaded from a similar source.
...for the nsidom
documentxbl interface's nsidom
documentxbl.addbinding() and nsidom
documentxbl.loadbinding
document() methods, the originating principal is the one of the script making the call, or the principal of the
document the call is made on if there isn't a script.
Standalone XPCOM - Archive of obsolete content
get xpcom/tests directory upto date and
documented.
... update this
document for mac.
... api freeze and
documentation original
document information author: suresh duddi last updated date: 15 may 2000 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
The new nsString class implementation (1999) - Archive of obsolete content
this
document is intended to briefly describe the new nsstring class architecture, and discuss the implications on memory management, optimizations, internationalization and usage patterns.
...however, it suffers from a few implementation details which need to be addressed and that are the subject of this
document.
... original
document information author: rick gessner last updated date: january 20, 1999 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Treehydra Manual - Archive of obsolete content
for now, the best way to learn gimple is to look at existing code as there is little newbie
documentation to be had.
... fixme
document all these callbacks.
...abstract interpretation is a big topic, which is not yet fully
documented here.
reloadWithFlags - Archive of obsolete content
« xul reference home reloadwithflags( flags ) return type: no return value reloads the
document in the browser with the given load flags.
...the
document is loaded normally.
... load_flags_charset_change: this flag is used if the
document needs to be reloaded because the character set changed.
Node - Archive of obsolete content
constants the nsidomnode interface is the primary datatype for the entire
document object model.
... it represents a single node in the
document tree.
... for more information on this interface please see dom-level-2-core short element_node 1 short attribute_node 2 short text_node 3 short cdata_section_node 4 short entity_reference_node 5 short entity_node 6 short processing_instruction_node 7 short comment_node 8 short
document_node 9 short
document_type_node 10 short
document_fragment_node 11 short notation_node 12 methods node appendchild ( node newchild ) node clonenode ( boolean deep ) boolean hasattributes ( ) boolean haschildnodes ( ) node insertbefore ( node newchild , node refchild ) boolean issupported ( string feature , string version ) void normalize ( ) node removechild ( node oldchild ) node replacechild ( node newchild , node oldchild ) ...
Extensions - Archive of obsolete content
function init() { var contextmenu =
document.getelementbyid("contentareacontextmenu"); if (contextmenu) contextmenu.addeventlistener("popupshowing", thumbnailsshowhideitems, false); } function thumbnailsshowhideitems(event) { var show =
document.getelementbyid("thumbnail-show"); show.hidden = (
document.popupnode.localname != "img"); } the init function should be called within the handler for the load event so that the popupshow...
...the popupnode property of the
document holds the target of the context menu.
... function thumbnailsshowhideitems(event) { var show =
document.getelementbyid("thumbnail-show"); show.hidden = !(gcontextmenu.onimage || gcontextmenu.onlink); } ...
MenuModification - Archive of obsolete content
<script> function addtomenu() { var menu =
document.getelementbyid("edit-menu"); menu.appenditem("insert", "insert"); } </script> <menu id="edit-menu"/> <button label="add" oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed.
... <script> function addsubmenu() { var popup =
document.getelementbyid("file-popup"); var newmenu =
document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("
document", "doc"); newmenu.appenditem("image", "image"); } </script> <menu label="file" onpopupshowing="addsubmenu()"> <menupopup id="file-popup"/> </menu>.
... <script> function addsubmenu() { var popup =
document.getelementbyid("file-popup"); if (popup.haschildnodes()) return; var newmenu =
document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("
document", "doc"); newmenu.appenditem("image", "image"); } </script> the haschildnodes method may be used to check if a node has any children.
Panels - Archive of obsolete content
the popup attribute should be set to the id of a panel within the same
document.
...for instance, using the search panel example above, we could add a button which closes the panel when pressed: <script> function dosearch() {
document.getelementbyid("search-panel").hidepopup(); } </script> <toolbarbutton label="search" type="panel"> <panel id="search-panel" position="after_start"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> </toolbarbutton> in this example, the dosearch() function is called when the "search" button is pressed.
...for instance, to have the textbox initially focused in the example above: <panel id="search-panel" onpopupshown="
document.getelementbyid('search').focus()"> to disable the adjusting of focus when a panel is opened, set the noautofocus attribute to true: <panel noautofocus="true"> this will cause the focus to remain on the element within the main window that has focus when the panel is opened.
PopupKeys - Archive of obsolete content
this is because the key listener is a capturing listener attached to the
document.
...the menu key listener described above captures key events on the
document.
...instead, you must add a capturing key listener to the
document or window if you want to listen for keys pressed within a menu.
Sorting and filtering a custom tree view - Archive of obsolete content
n" onclick="sort(this)" class="sortdirectionindicator"/> <splitter class="tree-splitter"/> <treecol id="weapon" label="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treecols> <treechildren id="tree-children"/> </tree> </window> sort.js var table = null; var data = null; var tree; var filtertext = ""; function init() { tree =
document.getelementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or reloaded function loadtable() { //remember scroll position.
..."ascending" : "descending"); tree.setattribute("sortresource", columnname); tree.view = new treeview(table); //set the appropriate attributes to show to indicator var cols = tree.getelementsbytagname("treecol"); for (var i = 0; i < cols.length; i++) { cols[i].removeattribute("sortdirection"); }
document.getelementbyid(columnname).setattribute("sortdirection", order == 1 ?
..."string") { return o.tolowercase(); } return o; } function gettopvisiblerow() { return tree.treeboxobject.getfirstvisiblerow(); } function settopvisiblerow(topvisiblerow) { return tree.treeboxobject.scrolltorow(topvisiblerow); } function inputfilter(event) { //do this now rather than doing it at every comparison var value = prepareforcomparison(event.target.value); setfilter(value);
document.getelementbyid("clearfilter").disabled = value.length == 0; } function clearfilter() {
document.getelementbyid("clearfilter").disabled = true; var filterelement =
document.getelementbyid("filter"); filterelement.focus(); filterelement.value = ""; setfilter(""); } function setfilter(text) { filtertext = text; loadtable(); } ...
Actions - Archive of obsolete content
this content will be copied for each matching result (though see below for an exception) and inserted into the
document.
...the button element will be copied and inserted into the
document after the template.
...you can use getelementbyid to get at particular results, for instance
document.getelementbyid("http://www.xulplanet.com/rdf/c") would retrieve the second generated button.
Building Hierarchical Trees - Archive of obsolete content
for an xml datasource, the tree might display a node's children as the children in the tree, making the tree display a hierarchy similar to that in the xml
document.
... or, with more complex xpath expressions, a template could display a tree where the hierarchy wasn't directly like the xml
document.
...for an xml source, a container is a node in the xml
document that has children.
textbox (Toolkit autocomplete) - Archive of obsolete content
window,
document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ ...
...for more information about autocomplete textboxes, see the autocomplete
documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
Textbox (XPFE autocomplete) - Archive of obsolete content
window,
document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ ...
...for more information about autocomplete textboxes, see the autocomplete
documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
The Joy of XUL - Archive of obsolete content
applications written in xul are based on additional w3c standard technologies featuring html 4.0; cascading style sheets (css) 1 and 2;
document object model (dom) levels 1 and 2; javascript 1.5, including ecma-262 edition 3 (ecmascript); xml 1.0.
... see also xul
documentation on mdc, including the xul tutorial and the xul reference xul overlays xbl
documentation: xbl introduction, xbl reference xpcom
documentation xpconnect (scriptable components)
documentation.
... see also http://www.mozilla.org/scriptable/ extensions
documentation, including the building an extension introductory tutorial mozilla calendar project page original
document information author: peter bojanic ...
Accesskey display rules - Archive of obsolete content
each controls of xul can have an accesskey which is specified by accesskey attribute or accesskey property (see accesskey attribute
document for the detail).
...this
document describes the rules of generating a label text.
... this
document calls the appended text "accesskey text".
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
</handler> </handlers> </binding> handlers example the following example adds some key handlers to create a very primitive local clipboard: example 1 : source <binding id="clipbox"> <content> <xul:textbox/> </content> <implementation> <field name="clipboard"/> </implementation> <handlers> <handler event="keypress" key="x" modifiers="control" action="this.clipboard=
document.getanonymousnodes(this)[0].value;
document.getanonymousnodes(this)[0].value='';"/> <handler event="keypress" key="c" modifiers="control" action="this.clipboard=
document.getanonymousnodes(this)[0].value;"/> <handler event="keypress" key="v" modifiers="control" action="
document.getanonymousnodes(this)[0].value=this.clipboard ?
...the code works as follows: this.clipboard=
document.getanonymousnodes(this)[0].value; the first element of the anonymous content array is retrieved which gives a reference to the textbox element, which happens to be the first (and only) element within the content element.
...
document.getanonymousnodes(this)[0].value='' the text of the textbox is then assigned a value of a null string.
Content Panels - Archive of obsolete content
adding child panels there may be times when you want to have part of a
document loaded from a different page.
...it creates a separate
document within the window.
...when the user enters a url or clicks on a link in a
document, the source of the frame is changed.
Creating Dialogs - Archive of obsolete content
var somefile=
document.getelementbyid('enterfile').value; window.opendialog("chrome://findfile/content/showdetails.xul","showmore", "chrome",somefile); in this example the dialog showdetails.xul is displayed.
...for example: var fl = window.arguments[0];
document.getelementbyid('thefile').value = fl; this is an effective way to pass values to the new window.
...lex="1"> <caption label="select favourite fruit"/> <radio id="orange" label="oranges because they are fruity"/> <radio id="violet" selected="true" label="strawberries because of their colour"/> <radio id="yellow" label="bananas because they are pre-packaged"/> </groupbox> </dialog> the buttons elements can be accessed with the following javascript // the accept button var acceptbutt =
document.
documentelement.getbutton("accept") more examples more examples in dialogs and prompts (code snippets).
Property Files - Archive of obsolete content
var strbundle =
document.getelementbyid("strings"); var nofilesfound=strbundle.getstring("notfoundalert"); alert(nofilesfound); this example first gets a reference to the bundle using its id then, it looks up the string 'notfoundalert' in the property file.
...var dir = "/usr/local/
document"; var count = 10; var strbundle =
document.getelementbyid("strings"); var result = strbundle.getformattedstring("resultmessage", [ dir, count ]); alert(result); this example will display following message in an alert box.
... 10 files found in the /usr/local/
document directory.
Tree Box Objects - Archive of obsolete content
example 1 : source view <script> function doscroll(){ var value =
document.getelementbyid("tbox").value; var tree =
document.getelementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.scrolltorow(value); } </script> <tree id="thetree" rows="4"> <treecols> <treecol id="row" label="row" primary="true" flex="1"/> </treecols> <treechildren> <treeitem label="row 0"/> <tree...
... one important thing to note is that the coordinates are measured from the upper left corner of the containing
document, not the edge of the tree itself.
... example 2 : source view <script> function updatefields(event){ var row = {}, column = {}, part = {}; var tree =
document.getelementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.getcellat(event.clientx, event.clienty, row, column, part); if (column.value && typeof column.value != "string") column.value = column.value.id;
document.getelementbyid("row").value = row.value;
document.getelementbyid("column").value = column.value;
document.getelementbyid("part").value = part.value; } </script> <tree id="thetree" flex="1" onmousemove="updatefields(event);"> <treecols>...
Writing Skinnable XUL and CSS - Archive of obsolete content
the following
document outlines rules that one must abide by when writing a skin.
...} this evil rule caused the style system, for every treecell that wasn't in a treehead (which is practically every treecell in a typical tree), to crawl up the whole parent chain to the root of the
document in order to determine that the style rule wasn't a match.
... original
document information author(s): david hyatt last updated date: may 24, 2000 copyright information: copyright (c) 1999-2000 david hyatt ...
XUL accessibility tool - Archive of obsolete content
it is designed to test (insofar as automated testing is possible) the guidelines and requirement for creating accessible xul as set forth in the xul accessibility guidelines, and to report on any problems found in tested
documents.
...once the tool window has loaded, select either a local file, web url, or currently open window from the file menu to generate a xul report for that
document.
... new tests: (aaronlev) warning: hardcoded color and pixel sizings (aaronlev) error: duplicate accesskey in a dialog (already have this for menus) (aaronlev) error: form control without accesskey (aaronlev) warning: accesskey as lowercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the
document (make sure they have accessible column picker equivs) or a list of toolbarbuttons (make sure they have accessible alternatives).
XML - Archive of obsolete content
html -- which is a derived language like our memoml (see the appendix notes for information on the geneology of markup languages) -- has been created for the purposes of representing hypertext
documents and the basic relationships between them.
... humans read raw html often when they edit html
documents, though this is changing as regular html editors are replaced by wysiwyg html editors, and so do html parsers, which use the markup to format the
document in its presentational form in web browsers.
...oeschger other
documents: xml in mozilla original
document information author(s): ian t.
XUL Coding Style Guidelines - Archive of obsolete content
xml, xul, html, and xhtml guidelines the following are considered good coding style for xml/xul
documents.
...some files live in the tree but aren't really part of the build; they're just there as programming examples or a kind of source
documentation.
... author: tao cheng newsgroup discussion mailing list original
document information author(s): tao cheng last updated date: december 10, 2004 copyright information: copyright (c) tao cheng ...
XUL Event Propagation - Archive of obsolete content
in another example, an onload event handler for a xul window can register a box element to capture all the click events that are raised from its child elements: var bbox =
document.getelementbyid("bigbox"); if (bbox) bbox.addeventlistener("click", function() { alert('captured'); }, true); ...
...the syntax for this in xul is as follows: element =
document.getelementbyid("id of the element"); element.addeventlistener(event name, event handler function, whether to register a capturing listener); the event handler code argument can be in-line code or a function.
... original author: ian oeschger other
documents: w3c dom events, mozilla xul events original
document information author(s): ian oeschger last updated date: january 18, 2002 copyright information: copyright (c) ian oeschger ...
listbox - Archive of obsolete content
istitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> <listbox id="thelist" rows="10" width="400"> <listhead> <listheader label="1ct gem" width="240"/> <listheader label="price" width="150"/> </listhead> <listcols> <listcol/> <listcol flex="1"/> </listcols> </listbox> var thelist =
document.getelementbyid('thelist'); gems = [ {gem: "ruby", price: "$3,500 - $4,600"}, {gem: "emerald", price: "$700 - 4,250"}, {gem: "blue sapphire", price: "$3,400 - $4,500"}, {gem: "diamond", price: "$5,600 - $16,000"} ]; for (var i = 0; i < gems.length; i++) { var row =
document.createelement('listitem'); var cell =
document.createelement('listcell'); ...
... cell.setattribute('label', gems[i].gem); row.appendchild(cell); cell =
document.createelement('listcell'); cell.setattribute('label', gems[i].price ); row.appendchild(cell); thelist.appendchild(row); } attributes disabled type: boolean indicates whether the element is disabled or not.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
menupopup - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
...the anchor node does not need to be in the same
document as the popup.
...an unanchored popup appears at the position specified by x and y, relative to the viewport of the
document containing the popup node.
panel - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
...the anchor node does not need to be in the same
document as the popup.
...an unanchored popup appears at the position specified by x and y, relative to the viewport of the
document containing the popup node.
preference - Archive of obsolete content
window,
document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ ...
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
... related preferences system
documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
tabbox - Archive of obsolete content
document keyboard navigation is captured at the
document level.
... tab navigation will occur as long as any element in the
document is focused.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
tooltip - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
...the anchor node does not need to be in the same
document as the popup.
...an unanchored popup appears at the position specified by x and y, relative to the viewport of the
document containing the popup node.
tree - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
...eckbox type column: function getcellchecked(tree, columnid) { var arr = []; var column = tree.columns.getnamedcolumn(columnid); for (var i = 0; i < tree.view.rowcount; i++) { if (tree.view.getcellvalue(i, column) == 'true') arr.push(i); } return arr; } to get the text value for a specific column (for example column 'age') from the currently focused row in the tree: var t =
document.getelementbyid('mytree');
document.title = t.view.getcelltext(t.currentindex,t.columns.getnamedcolumn('age')); to select the checkbox and display the cell's text value, you can use code like the following.
...ldren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } treechildren::-moz-tree-row(hover) {background-color: #ffffaa !important;} treechildren:-moz-tree-column { border-right:1px solid rgb(220,220,220) !important; } the javascript to get the text for the selected row/rows: function getrowcellvalues() { var tree =
document.getelementbyid('mytree'); for (var i = 0; i < tree.view.rowcount; i++) { if (tree.view.getcellvalue(i, tree.columns.getcolumnat(0)) == 'true'){ alert(tree.view.getcelltext(i, tree.columns.getnamedcolumn("name"))); } } } this way, you can get the tree cell values of the selected checkbox of the corresponding row.
window - Archive of obsolete content
it is the root node of a xul
document.
... disablefastfindtype: booleanput disablefastfind="true" on the root element of a xul
document, which is intended to be loaded in a tab, to disable the find bar for the tab with this
document.
...ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
XULRunner - Archive of obsolete content
overview development plan what xulrunner provides xulrunner faq nightly builds: unstable-trunk
documentation getting started with xulrunner short tutorial on building desktop applications with xulrunner.
... build
documentation learn how to get the source and build it.
... debug
documentation steps to configure venkman to debug your app xulrunner guide a fairly complete, but outdated, introduction and tutorial for xulrunner which collates much of the
documentation found here.
xbDesignMode.js - Archive of obsolete content
* * contributor(s): doron rosenberg <doron@netscape.com> (original author) * * * * ***** end license block ***** */ /* xbdesignmode a javascript wrapper for browsers that support designmode */ function xbdesignmode(aiframe){ this.meditor
document = null; this.miframeelement = null; // argument is a string, therefore an id if ( (typeof(aiframe) == "string") && (
document.getelementbyid(aiframe).tagname.tolowercase()=="iframe") ){ this.miframeelement =
document.getelementbyid(aiframe); } else if( (typeof(aiframe)=="object") && (aiframe.tagname.tolowercase() == "iframe") ){ this.miframeelement = aiframe; } else { throw ...
..."argument isn't an id of an iframe or an iframe reference"; } if (this.miframeelement.content
document){ // gecko this.meditor
document = this.miframeelement.content
document; this.meditor
document.designmode = "on"; } else { // ie this.meditor
document = this.miframeelement.contentwindow.
document; this.meditor
document.designmode = "on"; // ie needs to reget the
document element after designmode was set this.meditor
document = this.miframeelement.contentwindow.
document; } } xbdesignmode.prototype.execcommand = function (acommandname, aparam){ if (this.meditor
document) this.meditor
document.execcommand(acommandname, false, aparam); else throw "no meditor
document found"; } xbdesignmode.prototype.setcsscreation = function (ausecss){ if (this.meditord...
...ocument) this.meditor
document.execcommand("usecss", false, ausecss); else throw "no meditor
document found"; } ...
Adobe Flash - Archive of obsolete content
this
document is out of date.
... var myflash =
document.getelementbyid("myflash").setvariable("myvar", sendtext); a more expanded code example that shows how example 2 was created is shown in this source listing.
... see also macromedia flash developer
documentation scripting the flash player plugin communication between javascript and macromedia flash fscommands (definition from the actionscript dictonary) actionscript dictionary mdc resources using the right markup to invoke plugins plugin central notable bugs bug 184722 bug 180378 bug 203861 ...
SAX - Archive of obsolete content
the following handlers are available: interface purpose nsisaxcontenthandler receive notification of the logical content of a
document (e.g.
... an example implementation of the most commonly used content handler: function print(s) { dump(s + "\n"); } xmlreader.contenthandler = { // nsisaxcontenthandler start
document: function() { print("start
document"); }, end
document: function() { print("end
document"); }, startelement: function(uri, localname, qname, /*nsisaxattributes*/ attributes) { var attrs = []; for(var i=0; i<attributes.length; i++) { attrs.push(attributes.getqname(i) + "='" + attributes.getvalue(i) + "'"); } print("startelement: namespace='" +...
...below is an example of parsing from a string: xmlreader.parsefromstring("<f:a xmlns:f='g' d='1'><bbq/></f:a>", "text/xml"); this call results in the following output (assuming the content handler from the example above is used): start
document startelement: namespace='g', localname='a', qname='f:a', attributes={d='1'} startelement: namespace='', localname='bbq', qname='bbq', attributes={} endelement: namespace='', localname='bbq', qname='bbq' endelement: namespace='g', localname='a', qname='f:a' end
document ...
Security Controls - Archive of obsolete content
original
document information author(s): u.s.
... department of commerce title: federal information processing standard publication 200, minimum security requirements for federal information and information systems last updated date: march 2006 copyright information: this
document is not subject to copyright.
... original
document information author(s): karen scarfone, wayne jansen, and miles tracy title: nist special publication 800-123, guide to general server security last updated date: july 2008 copyright information: this
document is not subject to copyright.
Threats - Archive of obsolete content
original
document information author(s): ella deon lackey last updated date: 2012 copyright information: © 2012 red hat, inc.
... link: red hat certificate system common criteria certification 8.1: deployment, planning, and installation original
document information author(s): joint task force transformation initiative title: national institute of standards and technology (nist) special publication 800-30 revision 1, guide for conducting risk assessments last updated date: september 2012 copyright information: this
document is not subject to copyright.
... original
document information author(s): karen scarfone, wayne jansen, and miles tracy title: national institute of standards and technology (nist) special publication 800-123, guide to general server security last updated date: july 2008 copyright information: this
document is not subject to copyright.
Security - Archive of obsolete content
digital signaturesencryption and decryption address the problem of eavesdropping, one of the three internet security issues mentioned at the beginning of this
document.
...this
document introduces the basic concepts of public-key cryptography.
... for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." introduction to sslthis
document introduces the secure sockets layer (ssl) protocol.
Common Firefox theme issues and solutions - Archive of obsolete content
it is a companion
document to the amo editors guide common theme problems, which provides editors with "boilerplate" copy and paste review notes for common theme issues.
... this
document was started on july 27, 2012 so it will take some time to completely fill in and some issues still need to have solutions written for them.
...this is
document is a work in progress so feedback and/or suggestions is appreciated.
Scratchpad - Archive of obsolete content
inline
documentation to show the inline
documentation popup, press ctrl + shift + space when the cursor is on an identifier.
... for example, if you type
document.addeventlistener, 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.
...s cmd + s ctrl + s open an existing pad ctrl + o cmd + o ctrl + o create a new pad ctrl + n 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.
Developing cross-browser and cross-platform pages - Archive of obsolete content
function hideelement(id_attribute_value) { if (
document.getelementbyid &&
document.getelementbyid(id_attribute_value) &&
document.getelementbyid(id_attribute_value).style ) {
document.getelementbyid(id_attribute_value).style.visibility = "hidden"; }; } // example: // <button type="button" onclick="hideelement('d1');">hide div</button> // <div id="d1">some text</div> these repeated calls to
document.getelementbyid are not the most...
... the top-level if clause looks to see if there is support for a method called getelementbyid on the
document object, which is the one of the most basic levels of support for the dom in a browser.
... if there is, the code sees if
document.getelementbyid(id_attribute_value) returns a reference to an existing element, which it then checks for a style object.
Enumerator - Archive of obsolete content
example the following code shows the usage of the enumerator object: var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject");
document.write(fso.drives); var e = new enumerator(fso.drives); var drivestring = ""; e.movefirst(); while (e.atend() == false) { var drv = e.item(); drivestring += drv.path + " - "; if (drv.isready){ var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; drivestring += freegb.tofixed(3) + " gb free of "; drivestring += totalgb.t...
...ofixed(3) + " gb"; } else{ drivestring += "not ready"; } drivestring += "<br />";; e.movenext(); }
document.write(drivestring); // output: <drive information properties the enumerator object has no properties.
... requirements supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
LiveConnect - Archive of obsolete content
documentation java plugin - liveconnect
documentation this is likely the most up-to-date
documentation of liveconnect.
... liveconnect use by applets is enabled via the use of the "mayscript" attribute in applet tags on an html page, following which the applet may refer to classes in the netscape.javascript package to access javascript objects, and scripts may directly call applet methods (using the syntax
document.applets.name.methodname()).
... old liveconnect
documents, broken links: java method overloading and liveconnect 3 the technique that liveconnect uses to invoke overloaded java methods from javascript.
Troubleshooting XForms Forms - Archive of obsolete content
troubleshooting check the file type is the page parsed as an xhtml
document?
... instance(...) not working be aware that the instance(...) returns an element node, and not the
document node.
... submission not working if you are trying to replace="instance" make sure that the
document being returned is xml.
XForms Alert Element - Archive of obsolete content
the message of the alert element can exist in instance data, in a remote
document, or as inline text.
... attributes single-node binding linking src - url of a
document whose contents will be retrieved by the alert element and used to provide the alert message for the containing form control.
... the alert element's message can also be displayed immediately after the containing form control element in the xforms
document's layout.
XForms Label Element - Archive of obsolete content
the label text can be specified in instance data, in a remote
document, or as inline text.
... single-node binding linking src - url of a
document whose contents will be retrieved by the label element and used to provide label text for the containing form control.
... representations the xforms label element is represented by the text retrieved from instance data, a
document or the label element's own inline content.
Using XForms and PHP - Archive of obsolete content
?> but remember this (quote from php
documentation): remember that header() must be called before any actual output is sent, either by normal html tags, blank lines in a file, or from php.
...there is some help in getting to the raw xml on the php
documentation site.
...to get a dom
document on php 4 i usually do something like this: $data = $http_raw_post_data; $dom = domxml_open_mem($data); $root = $dom->
document_element(); ...
XForms - Archive of obsolete content
documentation implementation status implementation status of the mozilla xforms extension building get started with building your own xforms extensions from source.
... xforms api reference xforms interfaces
documentation.
... xforms ui elements reference xforms user interface elements
documentation.
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
the purpose of this
document is to discuss and emphasize the importance of conforming to open technology standards that are external to the organization.
...they may require that each project be comprised of marketing requirements
documents, product requirements
documents, functional requirements
documents, quality assurance test plans, and certification
documents.
... original
document information author(s): beth epperson last updated date: 7 november 2014 ...
Mozilla's DOCTYPE sniffing - Archive of obsolete content
this
document describes how mozilla uses the doctype declaration to determine strict mode vs.
... full standards mode the following trigger full standards mode: any
document sent with an xml mime type such as text/xml, application/xml, or application/xhtml+xml (since sniffing only occurs for
documents sent as text/html).
...(this is technically incorrect, since the strings are case sensitive.) see also web development mozilla's quirks mode mozilla quirks mode behavior original
document information author(s): david baron last updated date: august 2, 2005 copyright information: copyright (c) david baron ...
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
the present
document describes the steps of what should be done to the plugin code to turn it scriptable again.
... how to call plugin native methods the following html code will do the job:</p> this should be changed, we shouldn't advocate embed <embed type="application/plugin-mimetype"> <script language="javascript"> var embed =
document.embeds[0]; embed.nativemethod(); </script> how to build and install having the built mozilla tree is probably not necessary, but building the plugin with a scriptable instance interface will require mozilla headers and the xpcom compatible idl compiler -- xpidl.exe.
...if (variable == nppvpluginscriptableiid) { nsiid* ptr = (nsiid *)npn_memalloc(sizeof(nsiid)); *ptr = scriptableiid; *(nsiid **)value = ptr; } return rv; } nperror npp_destroy (npp instance, npsaveddata** save) { if(instance == null) return nperr_invalid_instance_error; // release the scriptable object ns_if_release(instance->pdata); } original
document information author(s): arun k.
Building up a basic demo with A-Frame - Game development
open the a-frame
documentation in a separate tab — it is useful to refer to.
... html structure the first step is to create an html
document — inside your project directory, create a new index.html file, and save the follow html inside it: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: a-frame demo</title> <script src="aframe.min.js"></script> </head> <body> <!-- html goes here --> </body> </html> this contains some basic information like the
document charset and <title>.
...add a new <script> element at the end of the <body> element, just after the <a-scene> element, then add the following javascript code inside it: var scene =
document.queryselector('a-scene'); var cylinder =
document.createelement('a-cylinder'); cylinder.setattribute('color', '#ff9500'); cylinder.setattribute('height', '2'); cylinder.setattribute('radius', '0.75'); cylinder.setattribute('position', '3 1 0'); scene.appendchild(cylinder); we're getting a reference to the scene handler first, then we create the cylinder element as an a-frame entity.
Async scripts for asm.js - Game development
putting async into action getting async compilation is easy: when writing your javascript, just use the async attribute like so: <script async src="file.js"></script> or, to do the same thing via script: var script =
document.createelement('script'); script.src = "file.js";
document.body.appendchild(script); (scripts created from script default to async.) the default html shell emscripten generates produces the latter.
... two common situations in which a script is *not* async (as defined by the html spec) are: <script async>code</script> and var script =
document.createelement('script'); script.innerhtml = "code";
document.body.appendchild(script); both are counted as 'inline' scripts and get compiled and then run immediately.
...instead of using eval or innerhtml, both of which trigger synchronous compilation, you should use a blob with an object url: var blob = new blob([codestring]); var script =
document.createelement('script'); var url = url.createobjecturl(blob); script.onload = script.onerror = function() { url.revokeobjecturl(url); }; script.src = url;
document.body.appendchild(script); the setting of src rather than innerhtml is what makes this script async.
Audio for Web games - Game development
var myaudio =
document.createelement("audio"); myaudio.src = "mysprite.mp3"; myaudio.play(); myaudio.pause(); you'll need to sample the current time to know when to stop.
... 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].addeventlistener('click', function() { myaudio.currenttime = this.getattribute("data-start"); stoptime = this.getattribute("data-stop"); myaudio.play(); }, false); } myaudio.addeventlistener('timeupdate', function() { if (thi...
... const trackels =
document.queryselectorall('li'); we want to make sure each file has loaded and been decoded into a buffer before we use it, so let's create an async function to allow us to do this: async function getfile(filepath) { const response = await fetch(filepath); const arraybuffer = await response.arraybuffer(); const audiobuffer = await audioctx.decodeaudiodata(arraybuffer); return audiobuffer; } w...
Create the Canvas and draw on it - Game development
the game's html the html
document structure is quite simple, as the game will be rendered entirely on the <canvas> element.
... using your favourite text editor, create a new html
document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev canvas workshop</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="mycanvas" width="480" height="320"></canvas> <script> // javascript code goes here </script> </body> </html> we have a charset defined, <title> and some basic css in the header.
... var canvas =
document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); here we're storing a reference to the <canvas> element to the canvas variable.
Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
in html, the doctype is the required "<!doctype html>" preamble found at the top of all
documents.
... its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a
document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
... learn more general knowledge definition of the doctype in the html specification quirks mode and standards mode technical reference
document.doctype, a javascript method that returns the doctype ...
World Wide Web - MDN Web Docs Glossary: Definitions of Web-related terms
to access a web component, a client supplies a unique universal identifier, called a url (uniform resource location) or uri (uniform resource identifier) (formally called universal
document identifier (udi)).
... html (hypertext markup language) is the most common format for publishing web
documents.
... linking, or connecting resources through hyperlinks, is a defining concept of the web, aiding its identity as a collection of connected
documents.
XSLT - MDN Web Docs Glossary: Definitions of Web-related terms
extensible stylesheet language transformations (xslt) is a declarative language used to convert xml
documents into other xml
documents, html, pdf, plain text, and so on.
...the xslt processor produces a new
document based on the xml
document and an xslt stylesheet, making no changes to the original files in the process.
... learn more technical reference xslt on wikipedia xslt
documentation on mdn ...
CSS and JavaScript accessibility best practices - Learn web development
objective: to gain familiarity with using css and javascript appropriately in your web
documents to maximise accessibility and not detract from it.
...to put it another way, it is important that you consider some best practice advice to make sure that your use of css and javascript doesn't ruin the accessibility of your
documents.
... function createlink(testitem) { const listitem =
document.createelement('li'); const anchor =
document.createelement('a'); anchor.textcontent = testitem.input.name + ' field is empty: fill in your ' + testitem.input.name + '.'; anchor.href = '#' + testitem.input.name; anchor.onclick = function() { testitem.input.focus(); }; listitem.appendchild(anchor); errorlist.appendchild(listitem); } each link serves a dual purpose — it tells y...
HTML forms in legacy browsers - Learn web development
learn about the issues to understand common patterns, it helps to read browser
documentation.
...there are other resources that can be amazingly helpful: browser vendor
documentation mozilla: you're in the right place, just browse mdn microsoft: internet explorer standards support
documentation webkit: because there are several different editions of this engine, things are a little trickier.
...please read the modernizr
documentation.
UI pseudo-classes - Learn web development
the chunk of content is not added to the dom, so is invisible to screenreaders; it is part of the
document's styles.
... now finally, we've used some javascript to toggle the disabling of the billing address fields: // wait for the page to finish loading
document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox
document.getelementbyid('billing-checkbox').addeventlistener('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.queryselectorall('.billing-label'); // toggle the billing text fields and labels for (let i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; if(billinglabels[i].getattribute('class') === 'billing-label disabled-label') { billinglabels[i].setattribute('class', 'billing-label'); } else { billinglabels[i].setattribute('class', 'billing-label disabled-label'); } } } it uses the change event to let the user enable/disable the billing fields, and toggle the styling of the associated labels.
CSS basics - Learn web development
to make the code work, we still need to apply this css (above) to your html
document.
...you can also use one, three, or four values, as
documented in margin syntax.
...as with margin, you can use one, two, three, or four values, as
documented in padding syntax.
The web and web standards - Learn web development
these standards exist as long technical
documents called specifications, which detail exactly how the technology should work.
... these
documents are not very useful for learning how to use the technologies they describe (this is why we have sites like mdn web docs), but instead are intended to be used by software engineers to implement these technologies (usually in web browsers).
...the following simple javascript will store a reference to our paragraph in memory and change the text inside it: let pelem =
document.queryselector('p'); pelem.textcontent = 'we changed the text!'; in the house analogy, javascript is like the cooker, tv, microwave, or hairdryer — the things that give your house useful functionality tooling once you've learned the "raw" technologies that can be used to build web pages (such as html, css, and javascript), you'll soon start to come across various tools that can be used t...
Tips for authoring fast-loading HTML pages - Learn web development
reducing the use of inline scripts in general, and reducing the use of
document.write() to output content in particular, can improve overall page loading.
... use modern ajax methods to manipulate page content for modern browsers, rather than the older approaches based on
document.write().
...all eagerly loaded images are rendered before the
document's load event is sent.
Use HTML to solve common problems - Learn web development
basic structure the most basic application of html is
document structure.
... how to create a basic html
document how to divide a webpage into logical sections how to set up a proper structure of headings and paragraphs basic text-level semantics html specializes in providing semantic information for a
document, so html answers many questions you might have about how to get your message across best in your
document.
...d citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to add images to a webpage how to add video content to a webpage scripting & styling html only sets up
document structure.
Video and audio content - Learn web development
previous overview: multimedia and embedding next now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your html
documents!
... restarting media playback at any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using <source> elements—by calling the element's load() method: const mediaelem =
document.getelementbyid("my-media-element"); mediaelem.load(); detecting track addition and removal you can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media.
... for example, you can watch for the addtrack event being fired on the associated audiotracklist object (retrieved via htmlmediaelement.audiotracks) to be informed when audio tracks are added to the media: const mediaelem =
document.queryselector("video"); mediaelem.audiotracks.onaddtrack = function(event) { audiotrackadded(event.track); } you'll find more information about this in our trackevent
documentation.
Graceful asynchronous programming with Promises - Learn web development
add the following lines inside the curly braces: let objecturl = url.createobjecturl(myblob); let image =
document.createelement('img'); image.src = objecturl;
document.body.appendchild(image); here we are running the url.createobjecturl() method, passing it as a parameter the blob returned when the second promise fulfills.
...status: ${response.status}`); } else { return response.blob(); } }) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image =
document.createelement('img'); image.src = objecturl;
document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); bear in mind that the value returned by a fulfilled promise becomes the parameter passed to the next .then() block's executor function.
... console.log(values); // store each value returned from the promises in separate variables; create object urls from the blobs let objecturl1 = url.createobjecturl(values[0]); let objecturl2 = url.createobjecturl(values[1]); let desctext = values[2]; // display the images in <img> elements let image1 =
document.createelement('img'); let image2 =
document.createelement('img'); image1.src = objecturl1; image2.src = objecturl2;
document.body.appendchild(image1);
document.body.appendchild(image2); // display the text in a paragraph let para =
document.createelement('p'); para.textcontent = desctext;
document.body.appendchild(para); save and refresh and you should see your ui components all loaded, al...
Client-side web APIs - Learn web development
manipulating
documents when writing web pages and apps, one of the most common things you'll want to do is manipulate web
documents in some way.
... this is usually done by using the
document object model (dom), a set of apis for controlling html and styling information that makes heavy use of the
document object.
... video and audio apis html5 comes with elements for embedding rich media in
documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc.
Storing the information you need — Variables - Learn web development
let's look at a simple example: <button>press me</button> const button =
document.queryselector('button'); button.onclick = function() { let name = prompt('what is your name?'); alert('hello ' + name + ', nice to see you!'); } in this example pressing the button runs a couple of lines of code.
...for example: myname = 'chris'; function logname() { console.log(myname); } logname(); var myname; note: this won't work when typing individual lines into a javascript console, just when running multiple lines of javascript in a web
document.
... good name examples: age myage init initialcolor finaloutputvalue audio1 audio2 bad name examples: 1 a _12 myage myage var
document skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman try creating a few more variables now, with the above guidance in mind.
Client-Server Overview - Learn web development
the first part is called the header, and contains useful information about the request, in the same way that an html head contains useful information about an html
document (but not the actual content itself, which is in the body): get https://developer.mozilla.org/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, lik...
...-frame-options: deny allow: get x-cache-info: caching content-length: 41823 <!doctype html> <html lang="en-us" dir="ltr" class="redesign no-js" data-ffo-opensanslight=false data-ffo-opensans=false > <head prefix="og: http://ogp.me/ns#"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <script>(function(d) { d.classname = d.classname.replace(/\bno-js/, ''); })(
document.
documentelement);</script> ...
...the server retrieves the requested
document from its file system and returns an http response containing the
document and an http response status code of "200 ok" (indicating success).
Vue resources - Learn web development
contains comprehensive
documentation, including examples, cookbooks, and reference material.
... vue cli docs —
documentation for the vue cli.
...this site provides detailed
documentation on using nuxtjs.
Handling common HTML and CSS problems - Learn web development
for example: const asideelem =
document.createelement('aside'); ...
... put the following code into the head of your html
document, just before the opening <style> tag: <script type="text/javascript" src="mootools-core-1.6.0.js"></script> <!--[if (gte ie 6)&(lte ie 8)]> <script type="text/javascript" src="selectivizr-min.js"></script> <![endif]--> if you try running this in an old version of ie, it should work fine.
... store a reference to this element in a variable, for example: const test =
document.getelementbyid('hplogo'); now try to set a new value for the css property you are interested in on that element; you can do this using the style property of the element, for example try typing these into the javascript console: test.style.transform = 'rotate(90deg)' test.style.webkittransform = 'rotate(90deg)' as you start to type the property name representation after the second dot (no...
Client-side tooling overview - Learn web development
also click through to the tool pages to find out how many monthly downloads a package has, and whether it has good
documentation that you can use to figure out whether it does what you need it to do.
...this could be a full blown website or it might be a single readme
document in a code repository.
...some
documentation however can be rather technical and academic and not a good fit for your learning needs.
Accessibility Information for Core Gecko Developers
this
document shows several interactive desktop-style widgets that are accessible by keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and formats working group (pfwg) to address the issue of dhtml accessibility.
... mozilla accessibility architecture this
document explains how we implement the cross-platform accessibility layer in mozilla.
... unix accessibility project this
document describes the sun accessibility project.
Information for External Developers Dealing with Accessibility
implementing an msaa server, a practical guide a
document for developers who need to support microsoft active accessibility (msaa) in a desktop application, in order to make it accessible with 3rd party assistive technologies, containing practical tips and the details of mozilla's implementation.
... mac keys: keyboard shortcuts quick reference for mac os x complete reference on keyboard for mac os x: this
document list all functions of specified keys, known keyboard shortcuts, explains how to create keyboard shortcuts, explains appropriate use for the arrow keys, how to move the insertion point with keys, how to extent text selection with keys, functions of function keys, what are reserved keyboard shortcuts, how to create your own keyboard shortcuts, keyboard focus and navigation, type-ahead and key-repea...
... gnome keys: keyboard
documentation for gnome 2.2: still seeking developer guidelines for keyboard.
Mozilla's Section 508 Compliance
(b) applications shall not disrupt or disable activated features of other products that are identified as accessibility features, where those features are developed and
documented according to industry standards.
... applications also shall not disrupt or disable activated features of any operating system that are identified as accessibility features where the application programming interface for those accessibility features has been
documented by the manufacturer of the operating system and is available to the product developer.
...caveat, the
document reading and app readings modes don't support columnized text.
Multiprocess on Windows
prerequisite reading since so much of this design resolves around microsoft com and its concept of the apartment, readers of this
document should have a solid understanding of what apartments are.
...one of the better pieces of
documentation is a two-part series written by jeff prosise: understanding com apartments, part i understanding com apartments, part ii for the purposes of this
document, "com" will refer to microsoft com (as opposed to xpcom).
... in general, the only com objects which should need to be explicitly wrapped are the iaccessibles for top-level
documents in the content process.
Adding a new event
this draft
document covers how to add a new event to the mozilla (firefox) source code.
... you probably need to implement a lot of methods to the event class, but this
document doesn't explain all of them.
... the last half of it is the implementation of legacy event creator of javascript such as: var event =
document.createevent("fooevent"); if you support this feature, you need to modify here.
Cookies in Mozilla
suggestions as to needed
documentation can be directed to mike connor.
... cookies preferences in mozilla
documentation on what the preferences used by the cookies code actually do.
... original
document information author(s): mike connor last updated date: march 15, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Debugging on Windows
this
document explains how to debug mozilla-derived applications such as firefox, thunderbird, and seamonkey on windows using the visual c++ ide.
... creating a visual c++ project for firefox please refer to the
documentation on firefox-source-docs.
... avoiding stepping into certain functions you can avoid stepping into certain functions, such as nscomptr methods, using an un
documented feature of vc.
Old Thunderbird build
for additional information, see the build
documentation.
... windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "
documents and settings").
...you can clean out previous build artefacts using ./mozilla/mach clobber references general build
documentation comm-central using the mozilla symbol server ...
Simple Instantbird build
for additional, more detailed information, see the build
documentation.
... get the source note: on windows, you won't be able to build the instantbird source code if it's under a directory with spaces in the path (e.g., don't use "
documents and settings").
... references general build
documentation comm-central simple thunderbird build ...
Simple SeaMonkey build
for complete information, see the build
documentation.
... on windows, the above commands will create the comm-central directory in %userprofile% which may be some subfolder of c:\
documents and settings\ on systems upgraded from xp or below.
... references general build
documentation comm-central ...
Simple Sunbird build
for complete information, see the build
documentation.
... on windows, if you open the command prompt you are usually in your user profile folder which often contains spaces ( c:\
documents and settings\...).
...building just lightning after you have completed a full build, if you would like to rebuild lightning you don't need to go through the whole build process: # enter the calendar directory in the object-directory cd src/../objdir-sb-release/calendar # make the lightning extension make -c lightning references general build
documentation comm-central ...
Reviewer Checklist
follow local style for the surrounding code, even if that local style isn't formally
documented.
...
documentation the commit message should describe what the patch is changing (not be a copy of the bug summary).
... adequately
document any potentially confusing pieces of code.
Performance
ddon:update-configuration", function(message) { maincopy = message.data.newconfig; }) funtion getmaincopy() { return maincopy; } // framescript.js components.utils.import("resource://my-addon/processmodule.jsm") // getmaincopy() used by other functions don't register observers (and other callbacks to global services) in a frame script bad: //framescript.js services.obs.addobserver("
document-element-inserted", { observe: function(doc, topic, data) { if(doc.ownerglobal.top != content) return; // bail out if this is for another tab decorate
document(doc); } }) observer notifications get fired for events that happen anywhere in the browser, they are not scoped to the current tab.
... better: content-
document-global-created notifications can be substituted with domwindowcreated events other observers and services should be registered in a process script or jsm instead load frame scripts on demand bad: // addon.js services.mm.loadframescript("framescript.js", /*delayed:*/ true) // stuff communicating with the framescript // framescript.js function onlyonceinabluemoon() { // we only need ...
...this during a total solar eclipse while goat blood rains from the sky sendasyncmessage('my-addon:paragraph-count', {num: content.
document.queryselectorall('p').length}) } addmessagelistener("my-addon:request-from-parent", onlyonceinabluemoon) better: // addon.js function ontoolbarbutton(event) { let tabmm = gbrowser.mcurrentbrowser.frameloader.messagemanager; let button = event.target; let callback = (message) => { tabmm.removemessagelistener("my-addon:paragraph-count", callback) decoratebutton(button, message.data.num) } tabmm.addmessagelistener("my-addon:paragraph-count", callback); tabmm.loadframescript("data:,sendasyncmessage('my-addon:paragraph-count', {num: content.
document.queryselectorall('p').length})", false) } function decoratebutton(button, count) { // do s...
Getting from Content to Layout
gecko maintains two separate representations of a
document in memory: the content tree and the frame tree.
... changes to a
document originate in the content tree (from dom modification by scripting, insertion of elements from the parser, etc.) and are propogated to the layout tree through magic that primarily resides in //github.com/realityripple/uxp/blob/master/layout/base/nscssframeconstructor.cpp the frame constructor implements nsimutationobserver which allows it to "watch" the content tree.
... nscssframeconstructor gets notified from the
document's presshell (which implements nsi
documentobserver and observes the
document) about all nodes in the
document.
HTTP Cache
this
document describes the new http cache version 2.
... this
document only contains what cannot be found or may not be clear directly from the idl files comments.
... open_priority: except opening priority cache files also file dooming happens here to prevent races read_priority: top level
documents and head blocking script cache files are open and read as the first open read: any normal priority content, such as images are open and read here write: writes are processed as last, we cache data in memory in the mean time management: level for the memory pool and cacheentry background operations close: file closing level index: index is being rebuild here evict: files overreaching the d...
How Mozilla determines MIME Types
the several ways how this happens are described in this
document.
...contrary to internet explorer's mime type guessing, mozilla will generally not sniff the type of the
document.
... related information
document loading - from load start to finding a handler original
document information author(s): christian biesinger last updated date: march 7, 2005 copyright information: copyright (c) christian biesinger ...
Promise.jsm
introduction for an introduction to promises, you may start from the add-on sdk
documentation, keeping in mind that only the core subset is implemented in this module.
...see the
documentation of the then method for details.
...see the deferred
documentation for details.
WebRequest.jsm
it's passed an object whose structure will vary depending on the event you're listening to: see the event-specific
documentation for details.
... the instructions you can pass here vary depending on the event you're listening to: see the event-specific
documentation for details.
...it also
documents two data structures that vary from one event to another: the opt_extrainfospec argument to addlistener() the properties of the argument passed to the listener.
Localization content best practices
this
document provides best practices for developers to create localizable code, and describes how to avoid some localizability (l12y) common mistakes.
... save
document?
... feedback from l10n-drivers is not necessary for each landing involving strings, as long as you're following the basic rules described in this
document.
Localization at Mozilla
the
documentation here is no longer being maintained and is inaccurate.
... l10n
documentation has moved to https://mozilla-l10n.github.io/localizer-
documentation/ .
... to learn how to bootstrap a new locale for mozilla projects, please see those
documents ...
Mozilla Framework Based on Templates (MFBT)
mfbt code goes to some length to
document all its interfaces in comments, including examples when possible.
...therefore this
document primarily attempts to direct readers to the correct file to read those comments.
... feel free to file a
documentation bug if you think this approach could be improved, and feel free to make improvements to this
document if you see them.
Updates
some improvements are particularly worth noting: a new html parser, which lets you use mathml inside non-xhtml
documents.
...
documentation is now available on mdc and wiki.mozilla.org.
...mozilla 1.0 features full support for html 4.0, xml 1.0, resource description framework (rdf), cascading style sheets level 1 (css1), and the w3c
document object model level 1 (dom1) [...] as well as support for display of mathematical equations using mathml." december 7, 2001 status report october 2000 the first international mathml conference april 14, 2000 status report february 12, 2000 mathml-enabled m13 builds for win32 september 21, 1999 mathml has landed.
Profiling with the Firefox Profiler
understanding profiles the firefox profiler has more current
documentation available at profiler.firefox.com/docs/.
... custom annotations in bug 1334218 an annotation was added to presshell::paint to show the url of the
document being painted.
... some more tips and answers to common questions are available in a mid-2017 faq
document.
TraceMalloc
this
documentation is only relevant to older versions of the codebase that still contain it.
...acherecord 843 45767 2328 124767 1485 79000 4.36 nstextnode 209 11704 1614 90384 1405 78680 4.34 htmlattributesimpl 482 14288 2824 88400 2342 74112 4.09 nsscanner 58 76824 94 146300 36 69476 3.83 nsscripterror 253 25070 842 91548 589 66478 3.67 nshtml
document.mreferrer 177 21550 691 85460 514 63910 3.53 nshtmlvalue 139 7846 1215 68734 1076 60888 3.36 htmlcontentsink 6 4816 12 57782 6 52966 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by size.
...other
documentation some older
documentation about tracemalloc is here.
Performance
documentation reporting a performance problem a user friendly guide to reporting a performance problem.
... leak gauge leak gauge is a tool that can be used to detect certain kinds of leaks in gecko, including those involving
documents, window objects, and docshells.
... see also the
documentation on leak-hunting strategies and tips.
L20n
note: this
document is in draft form/out-of-date — for current
documentation please see our
documentation on github.
...straightforward example showing an english string being provided: <brandname "firefox"> <about "about {{ brandname }}"> here is the same string being provided in slovenian: <brandname { nominative: "firefox", genitive: "firefoxa", dative: "firefoxu", accusative: "firefox", locative: "firefoxu", instrumental: "firefoxom" }> <about "o {{ brandname.locative }}"> for developers
documentation for developers wanting to implement localization functionality on their web apps using l20n.
... for localizers
documentation for localizers creating localized content for a project that uses l20n.
NSS Certificate Download Specification
this
document describes the data formats used by nss 3.x for installing certificates.
... this
document is currently being revised and has not yet been reviewed for accuracy.
... object identifiers the base of all netscape object ids is: netscape object identifier ::= { 2 16 840 1 113730 } the hexadecimal byte value of this oid when der encoded is: 0x60, 0x86, 0x48, 0x01, 0x86, 0xf8, 0x42 the following oids are mentioned in this
document: netscape-data-type object identifier :: = { netscape 2 } netscape-cert-sequence object identifier :: = { netscape-data-type 5 } ...
NSS FAQ
general questions what is network security services (nss) nss is set of libraries, apis, utilities, and
documentation designed to support cross-platform development of security-enabled client and server applications.
...nss includes detailed
documentation of the ssl api and sample code that demonstrates basic ssl functionality (setting up an encrypted session, server authentication, and client authentication) to help jump start the integration process.
... however, there is little or no
documentation currently available for the rest of the nss api.
HTTP delegation
to learn about all the details, please read the
documentation contained in the nss c header files.
...specifying an ocsp proxy the remainder of this
document is a short howto.
...please read the source code
documentation to learn how to use this api synchronously or asynchronously.
HTTP delegation
to learn about all the details, please read the
documentation contained in the nss c header files.
...specifying an ocsp proxy the remainder of this
document is a short howto.
...please read the source code
documentation to learn how to use this api synchronously or asynchronously.
JSS
jss source should now be checked out from the github: git clone git@github.com:dogtagpki/jss.git -- or -- git clone https://github.com/dogtagpki/jss.git all future upstream enquiries to jss should now use the pagure issue tracker system: https://pagure.io/jss/issues
documentation regarding the jss project should now be viewed at: http://www.dogtagpki.org/wiki/jss note: as much of the jss
documentation is sorely out-of-date, updated information will be a work in progress, and many portions of any legacy
documentation will be re-written over the course of time.
...
documentation before you use jss, you should have a good understanding of the crypto technologies it uses.
... you might want to read these
documents: introduction to public-key cryptography.
NSS 3.12.9 release notes
see the
documentation section for the build instructions.
...ses unsafe _snwprintf bug 597622: do not use the sec_error_bad_info_access_location error code for bad crl distribution point urls bug 619268: memory leaks in cert_changecerttrust and cert_savesmimeprofile bug 585518: addtrust qualified ca root serial wrong in certdata.txt trust entry bug 337433: need cert_findcertbynicknameoremailaddrbyusage bug 592939: expired cas in certdata.txt
documentation <for a="" class="new "
documentation="" href="/en/index.html#
documentation" list="" nss="" of="" pages="" primary="" rel="internal" see="" the="" title="en/index.html#
documentation">nss
documentation.
... new and revised
documents available since the release of nss 3.11 include the following:</for> build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.9 shared libraries are backward compatible with all older nss 3.x shared libraries.
nss tech note4
pulling certificate extension information out of ssl certificates nss technical note: 4 note: this
document contains code snippets that focus on essential aspects of the task and often do not illustrate all the cleanup that needs to be done.
... also, this
document does not attempt to be an exhaustive survey of all possible ways to do a certain task; it merely tries to show a certain way.
... secstatus cert_findsubjectkeyidexten (certcertificate *cert, secitem *retitem); for more information browse through the nss source code online at http://lxr.mozilla.org/mozilla/source/security/nss/ and http://lxr.mozilla.org/security/
documentation on some cert funcs http://www.mozilla.org/projects/security/pki/nss/ref/ssl/sslcrt.html ...
NSS environment variables
there is a separate set of environment variables that affect how nss is built,
documented below.
...see
documentation at this link.
...see
documentation.
NSS reference
should a particular page require the use of an underscore, please see the
documentation for the title override extension.
... pkcs #7 functions based on "archived pkcs #7 functions
documentation." pkcs #5 functions password-based encryption sec_pkcs5getiv sec_pkcs5createalgorithmid sec_pkcs5getcryptoalgorithm sec_pkcs5getkeylength sec_pkcs5getpbealgorithm sec_pkcs5isalgorithmpbealg pkcs #12 functions based on "archived pkcs #12 functions
documentation." used to exchange data such as private keys and certificates between two parties.
... nss environment variables nss cryptographic module nss tech notes nss tech notes nss memory allocation tools based on nss tools
documentation.
sslintro.html
upgraded
documentation may be found in the current nss reference overview of an ssl application chapter 1 overview of an ssl application ssl and related apis allow compliant applications to configure sockets for authenticated, tamper-proof, and encrypted communications.
... warning: some of the ssl header files provided as part of nss 2.0 include both public apis
documented in the nss 2.0
documentation set and private apis intended for internal use by the nss implementation of ssl.
... you should use only the ssl apis (and related certificate, key, and pkcs #11 apis) that are described in this
document, the ssl reference.
NSS Tools modutil
this
document discusses security module database management.
...the jar file should also contain any files to be installed on the target machine, including the pkcs #11 module library file and other files such as
documentation.
...for general installation instructions and to install a module in environments where javascript support is available (as in netscape communicator), see the
document using the jar installation manager to install a pkcs #11 cryptographic module.
Tutorial: Embedding Rhino
this
document will link to them using lxr.
... in this
document, javascript code will be in green, java code will be in green, and shell logs will be in purple.
... in this
document: runscript: a simple embedding entering a context initializing standard objects collecting the arguments evaluating a script printing the result exiting the context expose java apis using java apis implementing interfaces adding java objects using javascript objects from java using javascript variables calling javascript functions javascript host objects defining host objects counter example counter's constructors class name dynamic properties defining javascript "methods" adding counter to runscript runscript: a simple embedding about the simplest embedding of rhino possible is the runscript example.
Hacking Tips
all tips listed here are dealing with the javascript shell obtained at the end of the build
documentation of spidermonkey.
... one way to investigate is to let valgrind start gdb for you, the other way
documented here is to let valgrind act as a gdb server which can be manipulated from the gdb remote.
... break 'mozilla::dom::canvasrenderingcontext2d::drawwindow(nsglobalwindow&, double, double, double, double, nsastring_internal const&, unsigned int, mozilla::errorresult&)' cont break 'presshell::render
document(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).data[$y * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).stride + $x * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).depth / 8] watch *(char*)<address of previo...
Introduction to the JavaScript shell
to get the spidermonkey javascript shell, see the spidermonkey build
documentation or download a compiled binary for your platform from the nightly builds.
... after following the build
documentation and installing the built shell using make install, you can run the shell in interactive mode using the command: js [ if you get " symbol lookup error: ./js: undefined symbol: pr_setcurrentthreadname" e.g.
...be sure to use -h with your own jsshell to see if there is anything un
documented.
Handling Mozilla Security Bugs
for more information read the rest of this
document.
...this
document describes how the new security organizational structure will work, and how security-related mozilla bug reports will be handled.
... the remaining sections of this
document describe in more detail how these general policies have been implemented in practice.
Implementation Details
d relations for interested at api: gecko msaa ia2 at-spi attributes object attributes refer to specific pages to get information of supported object attributes for interested at api: gecko msaa ia2 at-spi text attributes refer to specific pages to get information of supported text attributes for interested at api: gecko msaa - doesn't have a way to expose text attributes, use ia2 ia2 at-spi
document attributes refer to specific pages to get information of supported
document attributes for interested at api: gecko/msaa/ia2 -
document attributes are not exposed.
... instead, the same information is available via theisimpledom
document interface.
... msaa at-spi how to find the content window and load the
document in xul-based clients, screen readers may need to find the content window so that they know where to start grabbing the accessible tree, in order to load the current
document into a buffer in their own process.
AT APIs Support
introduction
documentation is in progress still.
... but in the meantime it more up-to-date and contains more details than existed analogues for at-spi and msaa this
documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support gecko-based software.
...firefox extensions) gecko version for firefox and all other gecko-based products: this
documentation applies to up-to-date product builds based on gecko 1.9.2 -- currently not available on official releases.
Places utilities for JavaScript
oruri(nsiuri auri, object aannos); void setannotationsforuri(int aitemid, object aannos); getviewfornode(nsidomnode anode); void markpageastyped(string aurl); void markpageasfollowedbookmark(string aurl); boolean checkurlsecurity(nsinavhistoryresultnode aurinode); string getquerystringforfolder(int afolderid); string getdescriptionfrom
document(nsidom
document doc); string setpostdataforbookmark(int aboomarkid, string apostdata); string getpostdataforbookmark(int aboomarkid); array string geturlandpostdataforkeyword(string akeyword); string getitemdescription(int aitemid); nsinavhistoryresultnode getmostrecentbookmarkforuri(nsiuri auri); nsinavhistoryresultnode getmostrecentfolderforf...
... return type return string serialized place uri getdescriptionfrom
document() get the description associated with a
document, as specified in a <meta> element.
... getdescriptionfrom
document(doc) parameters doc a dom
document to get a description for return type returns a description string if a meta element was discovered with a "description" or "httpequiv" attribute, empty string otherwise.
XPCShell Reference
see the
documentation on debugdump() for the nsixpconnect interface for more information.
...see the above
documentation on the -v command-line argument for more information.
... original
document information author: david bradley <dbradley@netscape.com> last updated date: 17 march 2003 copyright information: portions of this content are © 1998–2008 by individual mozilla.org contributors; content available under a creative commons license.
nsIAccessNode
attribute type description
document nsiaccessible
document the
document accessible that this access node resides in.
...note: renamed from accessible
document in gecko 2.0 domnode node the dom node this nsiaccessnode is associated with.
...obsolete since gecko 2.0 root
document nsiaccessible
document the root
document accessible that this access node resides in.
nsIAccessible
the accessible tree is a subset of nodes in the dom tree -- such as
documents, focusable elements and text.
...relations many accessibles are linked with each other, for example, if one accessible gives the accessible name for another accessible (for example, html:label and html control) then these accessibles are related, please refer to relations
documentation for more information.
...attributes many accessibles exposes attributes to provide more details that cannot be fit into existing api methods, please refer to attributes
documentation for more information.
nsIAccessibleProvider
outerdoc 0x00000001 for elements that spawn a new
document.
... xformsselect 0x00002009 used for select and select1 that are implemented using host
document's native widget.
... for example, a select1 in a xhtml
document may be represented by the native html control html:select.
nsICharsetResolver
requestcharset() called to resolve the charset that should be used for parsing the
document being loaded from achannel.
...acstring requestcharset( in nsiwebnavigation awebnavigation, in nsichannel achannel, out boolean awantcharset, out nsisupports aclosure ); parameters awebnavigation the nsiwebnavigation the
document is being loaded in.
...achannel the channel the
document is coming in from.
nsIContentSecurityPolicy
this is a barrier for the ns
document so it doesn't load any sub-content until either it knows that a content security policy is ready or will not be used.
... shouldload() delegate method called by the service when sub-elements of the protected
document are being loaded.
...short shouldload( in unsigned long acontenttype, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amimetypeguess, in nsisupports aextra ); parameters acontenttype acontentlocation arequestorigin acontext amimetypeguess aextra return value shouldprocess() delegate method called by the service when sub-elements of the protected
document are being processed.
nsIDOMStorageManager
irefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by @mozilla.org/dom/storagemanager;1 as a service: var domstoragemanager = components.classes["@mozilla.org/dom/storagemanager;1"] .getservice(components.interfaces.nsidomstoragemanager); method overview void clearofflineapps(); nsidomstorage getlocalstorageforprincipal(in nsiprincipal aprincipal, in domstring a
documenturi); long getusage(in astring aownerdomain); methods clearofflineapps() clears keys owned by offline applications.
...nsidomstorage getlocalstorageforprincipal( nsiprincipal aprincipal, domstring a
documenturi ); parameters aprincipal the principal for which to return the local storage object.
... a
documenturi the
document's uri.
nsIDOMWindow
it represents a single window object that may contain child windows if the
document in the window contains an html frameset
document, or if the
document contains iframe elements.
...
document nsidom
document the
document contained in the window.
... textzoom float get or set the
document scale factor as a multiplier of the default size.
nsIDOMXPathExpression
dom/interfaces/xpath/nsidomxpathexpression.idlscriptable represents a compiled xpath query returned from nsidomxpathevaluator.createexpression or
document.createexpression inherits from: nsisupports last changed in gecko 1.7 method overview nsisupports evaluate(in nsidomnode contextnode, in unsigned short type, in nsisupports result) methods evaluate() evaluate the xpath expression.
...to evaluate against a whole
document, use the
document.
documentelement method to get the node to evaluate against.
...see also introduction to using xpath in javascript nsidomxpathevaluator
document.evaluate
document object model (dom) level 3 xpath specification nsidomxpathresult ...
nsIDragService
the node must be within a
document.
...if the element is in a
document, it will be rendered at its displayed size, otherwise, it will be rendered at its real size.
...the
document selection is hidden while drawing.
nsIFeedProgressListener
if the
document is a standalone item or entry, the handlefeedatfirstentry() method will not already have been called, and the received nsifeedentry will have a null parent value.
... handlestartfeed() called as soon as a reasonable start to a feed is detected; this lets your code know that the feed does appear to be an actual feed rather than some other sort of
document.
... reporterror() called by the feed processor when a fatal xml parsing error occurs, or if the
document isn't a feed.
nsIMessenger
void launchexternalurl(in acstring aurl); boolean canundo(); boolean canredo(); unsigned long getundotransactiontype(); unsigned long getredotransactiontype(); void undo(in nsimsgwindow msgwindow); void redo(in nsimsgwindow msgwindow); void sendunsentmessages(in nsimsgidentity aidentity, in nsimsgwindow amsgwindow); void set
documentcharset(in acstring characterset); void saveas(in acstring auri, in boolean aasfile, in nsimsgidentity aidentity, in astring amsgfilename); void openattachment(in acstring contenttpe, in acstring url, in acstring displayname, in acstring messageuri, in boolean isexternalattachment); void saveattachment(in acstring contenttpe, in acstring url, in acstring displayname, in ...
... set
documentcharset() redisplay the currently selected message (if any) using the given character set.
... void set
documentcharset(in acstring characterset); parameters characterset the character set to use.
nsIPrintingPrompt
see nsiprintingpromptservice for all
documentation.
... void showprintdialog( in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings ); parameters webbrowserprint represents the
document to be printed.
... void showprogress( in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings, in nsiobserver opendialogobserver, in boolean isforprinting, out nsiwebprogresslistener webprogresslistener, out nsiprintprogressparams printprogressparams, out boolean notifyonopen ); parameters webbrowserprint represents the
document to be printed.
nsIProtocolHandler
uri_inherits_security_context 1<<4 uris for this protocol have no inherent security context, so
documents loaded using this protocol should inherit the security context of the
document that loads them.
... uri_forbids_automatic_
document_replacement 1<<5 "automatic" loads that would replace the
document (such as a meta refresh, certain types of xlinks, and other non-user-triggered loads) are not allowed if the originating uri has this protocol flag.
... aorigincharset the character set of the
document from which this uri string originated.
nsISupports proxies
in this
document, i will try to explain how to use nsisupports proxies.
...see xpcom/proxy/public/nsiproxyobjectmanager.idl for the updated interface and its
documentation.
...ns_release(ptestobj); pproxy->bar(); ns_release(pproxy); original
document information author: doug turner last updated date: january 27, 2007 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
nsITextInputProcessor
see the
document of nsitextinputprocessorcallback for the detail.
...see the
document of nsitextinputprocessorcallback for the details.
...see the
document of nsitextinputprocessorcallback for the details.
XPCOM Interface Reference by grouping
browser autocomplete nsiautocompletecontroller nsiautocompleteinput nsiautocompletesearch console nsiconsolelistener nsiconsolemessage nsiconsoleservice
document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchromewindow nsidomclientrect nsidomelement nsidomhtmlaudioe...
...lement nsidomhtmlformelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtml
document nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessible
document nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink ...
...een nsiscreenmanager geolocation nsigeolocationprovider nsigeolocationupdate orientation nsiacceleration nsiaccelerationlistener nsiaccelerometer misc nsisound nsiwifimonitor
document nsiwebnavigation environment nsienvironment event nsieventlistenerinfo nsieventlistenerservice nsieventtarget exception nsiexception extention nsiextensionmanager nsiinstalllocation external nsiexternalprotocolservice ...
Using the clipboard
please note: the sourcewindow variable is a placeholder for whatever window owns the data being copied -- from any dom element you can obtain it via element.owner
document.defaultview.
...normally, the text would be in a
document or textbox.
... original
document information author(s): neil deakin original
document: http://xulplanet.com/tutorials/mozsdk/clipboard.php copyright information: copyright (c) neil deakin ...
Mozilla technologies
these are
documented here.
... accessibility api implementation detailsthese pages contain
documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the portable network graphics (png) format, adding support for animated images.
...not as just another
document format.
Filelink Providers
this
document explains how to extend thunderbird to support additional web-based storage services.
...see cloudfile/cloudfilecomponents.manifest for an example, as well as this
document on chrome.manifest files.
... for example, the hightail implementation provides the following function: function extraargs() { var usernamevalue =
document.getelementbyid("username").value; return { "username": {type: "char", value: usernamevalue}, }; } in this example, the username value is read from the input, and then the specially-crafted object is returned.
Mail and RDF
you should learn about rdf before reading this
document or you will be hopelessly confused.
...in the
document's onload= handler the datasources are attached to their respective widgets by setting the database property on each rdf template's parent element.
...(the details of rdf resource factories will be left to rdf
documentation for now.) from an rdf resource, it is possible to queryinterface() to the appropriate mail/news object, and then access information from there.
Mail composition back end
(for detailed information on the listener interfaces, see the listener interfaces section of this
document) nsimsgsend the following describes the methods of the nsimsgsend interface.
...this will contain all of the relevant header information for message creation prbool digest_p, - this is a flag that says that most of the
documents we are attaching are themselves messages, and so we should generate a multipart/digest container instead of multipart/mixed.
... nsfilespec *sendfilespec, - the file spec for the message being sent prbool deletesendfileoncompletion, - tell the back end if it should delete the file upon successful completion prbool digest_p, - this is a flag that says that most of the
documents we are attaching are themselves messages, and so we should generate a multipart/digest container instead of multipart/mixed.
Building a Thunderbird extension 6: Adding JavaScript
window.addeventlistener("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 first 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.
Theme Packaging
the
documentation here is out of date.
... this
document describes how to package themes for thunderbird.
...this
document describes only how themes are packaged in order to be shown in firefox's themes window.
Thunderbird extensions
the following
documentation provides help for creating extensions for the thunderbird email client.
...this
documention series focuses on thunderbird.
...
documentation getting started with thunderbird a brave, young developer wants to develop an add-on for thunderbird.
WebIDL bindings
notes: need to
document the setup for indexed and named setters/creators/deleters.
... for example, nsinode::getparentobject returns the node's owner
document.
...the members that are required or have default values have types as described under the corresponding webidl type in this
document.
Using js-ctypes
see apple's
documentation for standardalert for details.
....structtype("__cfallocator"); var cfallocatorref = __cfallocator.ptr; var unichar = ctypes.jschar; // uint16 with automatic conversion // define constants var kcfusernotificationstopalertlevel = 0; var kcfusernotificationnotealertlevel = 1; var kcfusernotificationcautionalertlevel = 2; var kcfusernotificationplainalertlevel = 3; // declare functions /* https://developer.apple.com/library/mac/
documentation/corefoundation/reference/cfusernotificationref/index.html#//apple_ref/c/func/cfusernotificationdisplaynotice * sint32 cfusernotificationdisplaynotice ( * cftimeinterval timeout, * cfoptionflags flags, * cfurlref iconurl, * cfurlref soundurl, * cfurlref localizationurl, * cfstringref alertheader, * cfstringref alertmessage, * cfstringref defaultbuttontitle * ); */ v...
...notificationdisplaynotice = libcf.declare("cfusernotificationdisplaynotice", ctypes.default_abi, sint32, // return cftimeinterval, // timeout cfoptionflags, // flags cfurlref, // iconurl cfurlref, // soundurl cfurlref, // localizationurl cfstringref, // alertheader cfstringref, // alertmessage cfstringref // defaultbuttontitle ); /* https://developer.apple.com/library/mac/
documentation/corefoundation/reference/cftyperef/#//apple_ref/c/func/cfrelease * void cfrelease ( * cftyperef cf * ); */ var cfrelease = libcf.declare('cfrelease', ctypes.default_abi, void, // return cftyperef // cf ); /* https://developer.apple.com/library/mac/
documentation/corefoundation/reference/cfstringref/#//apple_ref/c/func/cfstringcreatewithcharacters * cfstringref cfstringcreatewithcha...
Scripting plugins - Plugins
« previousnext » xxx: dummy p element this
document describes the new cross-browser npapi extensions, commonly called npruntime, that have been developed by a group of browser and plugin vendors, including the mozilla foundation, adobe, apple, opera, and sun microsystems (see press release).
... this
document also explains how to make a plugin use these new extensions to be scriptable as well as how to access objects in a browser.
... the new npnvariable enumerations are defined in npapi.h as: npnvwindownpobject = 15, npnvpluginelementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed =
document.embeds[0]; embed.nativemethod(); alert(embed.nativeproperty); embed.nativeproperty.anothernativemethod(); </script> the api extensions the api extensions are based on four new structs: npstring npvariant npn_releasevariantvalue npn_getstringidentifier npn_getstringidentifiers npn_getintidentifier npn_identifierisstring npn_utf8fromidentifier npn_intfromidentif...
Waterfall - Firefox Developer Tools
domcontentloaded the
document's domcontentloaded event.
... load the
document's load event.
... for example, consider code like this: var timerbutton =
document.getelementbyid("timer"); timerbutton.addeventlistener("click", handleclick, false); function handleclick() { console.time("timer"); runtimer(1000).then(timerfinished); } function timerfinished() { console.timeend("timer"); console.log("ready!"); } function runtimer(t) { return new promise(function(resolve) { settimeout(resolve, t); }); } the waterfall will display a marker for...
Animation() - Web APIs
currently the only timeline type available is
documenttimeline, but in the future there my be timelines associated with gestures or scrolling, for example.
... the default value is
document.timeline, but this can be set to null as well.
... examples in the follow the white rabbit example, the animation() constructor is used to create an animation for the rabbitdownkeyframes using the
document's timeline: var rabbitdownanimation = new animation(rabbitdownkeyframes,
document.timeline); specifications specification status comment web animationsthe definition of 'animation()' in that specification.
Animation.startTime - Web APIs
an animation’s start time is the time value of its
documenttimeline when its target keyframeeffect is scheduled to begin playback.
... examples in the running on web animations api example, the we can sync all new animated cats by giving them all the same starttime as the original running cat: var catrunning =
document.getelementbyid ("withwaapi").animate(keyframes, timing); /* a function that makes new cats.
... */ function addcat(){ var newcat =
document.createelement("div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.animate(keyframes, timing); // set the animation's start time to be the same as the original .cat#withwaapi newanimationplayer.starttime = catrunning.starttime; // add the cat to the pile.
Animation.timeline - Web APIs
by default, the animation's timeline and the
document's timeline are the same.
... syntax var animationstimeline = animation.timeline; animation.timeline = newtimeline; value a timeline object to use as the timing source for the animation, or null to use the default, which is the
document's timeline.
... examples here we set the animation's timeline to be the same as the
document's timeline (this is the default timeline for all animations, by the way): animation.timeline =
document.timeline; specifications specification status comment web animationsthe definition of 'animation.timeline' in that specification.
Blob - Web APIs
to obtain a blob object for a file on the user's file system, see the file
documentation.
... the apis accepting blob objects are also listed in the file
documentation.
... function typedarraytourl(typedarray, mimetype) { return url.createobjecturl(new blob([typedarray.buffer], {type: mimetype})) } const bytes = new uint8array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedarraytourl(bytes, 'text/plain'); const link =
document.createelement('a'); link.href = url; link.innertext = 'open the array url';
document.body.appendchild(link); result click the link in the example to see the browser decode the object url.
CSSRule - Web APIs
(until the
documentation is completed, see the interface definition in the mozilla source code: nsidomcssimportrule.) cssrule.media_rule 4 cssmediarule cssrule.font_face_rule 5 cssfontfacerule cssrule.page_rule 6 csspagerule cssrule.keyframes_rule 7 csskeyframesrule cssrule.keyframe_rule 8 csskeyframerule rese...
...rved for future use 9 should be used to define color profiles in the future cssrule.namespace_rule 10 cssnamespacerule cssrule.counter_style_rule 11 csscounterstylerule cssrule.supports_rule 12 csssupportsrule cssrule.
document_rule 13 css
documentrule 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.
...(
document_rule has been pushed to css conditional rules level 4)
document object model (dom) level 2 style specificationthe definition of 'cssrule' in that specification.
CSSStyleDeclaration - Web APIs
for example,
document.stylesheets[0].cssrules[0].style returns a cssstyledeclaration object on the first css rule in the
document's first stylesheet.
... example var styleobj =
document.stylesheets[0].cssrules[0].style; console.log(styleobj.csstext); for (var i = styleobj.length; i--;) { var namestring = styleobj[i]; styleobj.removeproperty(namestring); } console.log(styleobj.csstext); specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration' in that specification.
...
document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CanvasRenderingContext2D.createPattern() - Web APIs
the original image looks like this: html <canvas id="canvas" width="300" height="300"></canvas> javascript var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var img = new image(); img.src = 'https://udn.realityripple.com/samples/04/aaeaf9aac4.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 300, 300); }; creating a pattern from a canvas in this example we create a pattern from the contents of an offscreen...
... javascript // create a pattern, offscreen const patterncanvas =
document.createelement('canvas'); const patterncontext = patterncanvas.getcontext('2d'); // give the pattern a width and height of 50 patterncanvas.width = 50; patterncanvas.height = 50; // give the pattern a background color and draw an arc patterncontext.fillstyle = '#fec'; patterncontext.fillrect(0, 0, patterncanvas.width, patterncanvas.height); patterncontext.arc(0, 0, 50, 0, .5 * math.pi); patterncontext.stroke(); // create our primary canvas and fill it with the pattern const canvas =
document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const pattern = ctx.createpattern(patterncanvas, 'repeat'); ctx.fi...
...llstyle = pattern; ctx.fillrect(0, 0, canvas.width, canvas.height); // add our primary canvas to the webpage
document.body.appendchild(canvas); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createpattern' in that specification.
CanvasRenderingContext2D.stroke() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.stroke(); result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke.
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // first sub-path ctx.linewidth = 26; ctx.strokestyle = 'orange'; ctx.moveto(20, 20); ctx.lineto(160, 20); ctx.stroke(); // second sub-path ctx.linewidth = 14; ctx.strokestyle = 'green'; ctx.moveto(20, 80); ctx.lineto(220, 80); ctx.stroke(); // third sub-path ctx.linewidth = 4; ctx.strokestyle = 'pink'; ctx.moveto(20, 140); ctx.lineto(280, 140); ctx.stroke(); result s...
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingconte...
Using channel messaging - Web APIs
the channel messaging api allows two separate scripts running in different browsing contexts attached to the same
document (e.g., two iframes, or the main
document and an iframe, or two
documents via a sharedworker) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.
... 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.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('c...
... 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.addeventlistener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessage = onmessage; } // handle messages received on port2 function onmessage(e) { var listitem =
document.createelement('li'); listitem.textcontent = e.data; list.appendchild(li...
ChildNode.replaceWith() - Web APIs
examples using replacewith() var parent =
document.createelement("div"); var child =
document.createelement("p"); parent.appendchild(child); var span =
document.createelement("span"); child.replacewith(span); console.log(parent.outerhtml); // "<div><span></span></div>" childnode.replacewith() is unscopable the replacewith() method is not scoped into the with statement.
...yfill() { 'use-strict'; // for safari, and ie > 10 var parent = this.parentnode, i = arguments.length, currentnode; if (!parent) return; if (!i) // if there are no arguments parent.removechild(this); while (i--) { // i-- decrements i and returns the value of i before the decrement currentnode = arguments[i]; if (typeof currentnode !== 'object'){ currentnode = this.owner
document.createtextnode(currentnode); } else if (currentnode.parentnode){ currentnode.parentnode.removechild(currentnode); } // the value of "i" below is after the decrement if (!i) // if currentnode is the first argument (currentnode === arguments[0]) parent.replacechild(currentnode, this); else // if currentnode isn't the first parent.insertbefore(currentnode, this.
...nextsibling); } } if (!element.prototype.replacewith) element.prototype.replacewith = replacewithpolyfill; if (!characterdata.prototype.replacewith) characterdata.prototype.replacewith = replacewithpolyfill; if (!
documenttype.prototype.replacewith)
documenttype.prototype.replacewith = replacewithpolyfill; specification specification status comment domthe definition of 'childnode.replacewith()' in that specification.
Comment - Web APIs
document object model (dom) level 3 core specificationthe definition of 'comment' in that specification.
... obsolete no change from
document object model (dom) level 2 core specification
document object model (dom) level 2 core specificationthe definition of 'comment' in that specification.
... obsolete no change from
document object model (dom) level 1 specification
document object model (dom) level 1 specificationthe definition of 'comment' in that specification.
ContentIndex.getAll() - Web APIs
url: a string containing the url of the corresponding html
document.
... async function createreadinglist() { // 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 readinglistelem =
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.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = do...
...cument.createelement('ul'); for (const entry of entries) { const listitem =
document.createelement('li'); const anchorelem =
document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } specifications specification status comment unknownthe definition of 'getall' in that specification.
Content Index API - Web APIs
the api supports indexing urls corresponding to html
documents.
... async function createreadinglist() { // 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 readinglistelem =
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.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = do...
...cument.createelement('ul'); for (const entry of entries) { const listitem =
document.createelement('li'); const anchorelem =
document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.
CustomElementRegistry.define() - Web APIs
// create a class for the element class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create spans var wrapper =
document.createelement('span'); wrapper.setattribute('class','wrapper'); var icon =
document.createelement('span'); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); var info =
document.createelement('span'); info.setattribute('class','info'); // take attribute content and put it inside the info span var text = this.getattribute('text'); info.textcon...
...tent = text; // insert icon var imgurl; if(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } var img =
document.createelement('img'); img.src = imgurl; icon.appendchild(img); // create some css to apply to the shadow dom var style =
document.createelement('style'); style.textcontent = '.wrapper {' + 'position: relative;' + '}' + '.info {' + 'font-size: 0.8rem;' + 'width: 200px;' + 'display: inline-block;' + 'border: 1px solid black;' + 'padding: 10px;' + ...
...nt words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and add word count to it var text =
document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); <p...
DeprecationReportBody - Web APIs
a deprecated api method) is used on a
document being observed by a reportingobserver.
... 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 innerlist =
document.createelement('ul'); listitem.appendc...
...hild(innerlist); list.appendchild(listitem); for (let key in reports[i].body) { let innerlistitem =
document.createelement('li'); let keyvalue = reports[i].body[key]; innerlistitem.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlistitem); } } } the reports parameter contains an array of all the reports in the observer's report queue.
Element: blur event - Web APIs
bubbles no cancelable 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.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('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 addev...
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form =
document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
...
document object model (dom) level 3 events specification obsolete initial definition ...
Element: click event - Web APIs
html <button>click</button> javascript const button =
document.queryselector('button'); button.addeventlistener('click', event => { button.innerhtml = `click count: ${event.detail}`; }); result try making rapid, repeated clicks on the button to increase the click count.
... specifications specification status ui events working draft
document object model (dom) level 3 events specificationthe definition of 'click' in that specification.
... obsolete
document object model (dom) level 2 events specificationthe definition of 'click' in that specification.
Element.closest() - Web APIs
the closest() method traverses the element and its parents (heading toward the
document root) until it finds a node that matches the provided selector string.
... example html <article> <div id="div-01">here is div-01 <div id="div-02">here is div-02 <div id="div-03">here is div-03</div> </div> </div> </article> javascript var el =
document.getelementbyid('div-03'); var r1 = el.closest("#div-02"); // returns the element with the id=div-02 var r2 = el.closest("div div"); // returns the closest ancestor which is a div in div, here it is the div-03 itself var r3 = el.closest("article > div"); // returns the closest ancestor which is a div and has a parent article, here it is the div-01 var r4 = el.closest(":not(div)"); // returns t...
... if (window.element && !element.prototype.closest) { element.prototype.closest = function(s) { var matches = (this.
document || this.owner
document).queryselectorall(s), i, el = this; do { i = matches.length; while (--i >= 0 && matches.item(i) !== el) {}; } while ((i < 0) && (el = el.parentelement)); return el; }; } specifications specification status comment domthe definition of 'element.closest()' in that specification.
Element: focus event - Web APIs
bubbles no cancelable 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.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('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 addeve...
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form =
document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
...
document object model (dom) level 3 events specification obsolete initial definition ...
Element.getElementsByClassName() - Web APIs
the method getelementsbyclassname() on the
document interface works essentially the same way, except it acts on the entire
document, starting at the
document root.
... examples matching a single class to look for elements that include among their 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.
...here we'll find all <div> elements that have a class of test: var testelements =
document.getelementsbyclassname('test'); var testdivs = array.prototype.filter.call(testelements, function(testelement) { return testelement.nodename === 'div'; }); specifications specification status comment domthe definition of 'element.getelementsbyclassname()' in that specification.
Element.hasAttribute() - Web APIs
example var foo =
document.getelementbyid("foo"); if (foo.hasattribute("bar")) { // do something } polyfill ;(function(prototype) { prototype.hasattribute = prototype.hasattribute || function(name) { return !!(this.attributes[name] && this.attributes[name].specified); } })(element.prototype); notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for deali...
... living standard from
document object model (dom) level 3 core specification, moved from node to element
document object model (dom) level 3 core specificationthe definition of 'element.hasattribute()' in that specification.
... obsolete no change from
document object model (dom) level 2 core specification
document object model (dom) level 2 core specificationthe definition of 'element.hasattribute()' in that specification.
Element.hasAttributes() - Web APIs
examples let foo =
document.getelementbyid('foo'); if (foo.hasattributes()) { // do something with 'foo.attributes' } polyfill ;(function(prototype) { prototype.hasattributes = prototype.hasattributes || function() { return (this.attributes.length > 0); } })(element.prototype); specifications specification status comment domthe definition of 'element.hasattributes()' in that specification.
...
document object model (dom) level 3 core specificationthe definition of 'hasattributes()' in that specification.
... obsolete no change from
document object model (dom) level 2 core specification
document object model (dom) level 2 core specificationthe definition of 'hasattributes()' in that specification.
Element.onfullscreenchange - Web APIs
syntax target
document.onfullscreenchange = fullscreenchangehandler; value an event handler for the fullscreenchange event, indicating that the element has changed in or out of full-screen mode.
...this function determines which element it was called on by checking the value of event.target, then compares the
document's fullscreenelement value to the element to see if they're the same node.
... function togglefullscreen() { let elem =
document.queryselector("video"); elem.onfullscreenchange = handlefullscreenchange; if (!
document.fullscreenelement) { elem.requestfullscreen().then({}).catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else {
document.exitfullscreen(); } } function handlefullscreenchange(event) { let elem = event.target; let isfullscreen =
document.fullscreenelement === elem; adjustmycontrols(isfullscreen); } s...
Element.outerHTML - Web APIs
nomodificationallowederror an attempt was made to set outerhtml on an element which is a direct child of a
document, such as
document.
documentelement.
... examples getting the value of an element's outerhtml property: html <div id="d"> <p>content</p> <p>further elaborated</p> </div> javascript var d =
document.getelementbyid("d"); console.log(d.outerhtml); // the string '<div id="d"><p>content</p><p>further elaborated</p></div>' // is written to the console window replacing a node by setting the outerhtml property: html <div id="container"> <div id="d">this is a div.</div> </div> javascript var container =
document.getelementbyid("container"); var d =
document.getelementbyid("d"); console.log(container.firstchild.nodename); // logs "div" d.outerhtml = "<p>this paragraph replaced the original div.</p>"; console.log(container.firstchild.nodename); // logs "p" // the #d div is no longer part of the
document tree, // the new par...
...for example: var div =
document.createelement("div"); div.outerhtml = "<div class=\"test\">test</div>"; console.log(div.outerhtml); // output: "<div></div>" also, while the element will be replaced in the
document, the variable whose outerhtml property was set will still hold a reference to the original element: var p =
document.getelementsbytagname("p")[0]; console.log(p.nodename); // shows: "p" p.outerhtml = "<div>this div replaced a paragraph.</div>"; console.log(p.nodename); // still "p"; the returned value will contain html escaped attributes: var anc =
document.createelement("a"); anc.href = "https://develop...
Element: paste event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the
document at the cursor position.
... it's possible to construct and dispatch a synthetic paste event, but this will not affect the
document's contents.
... examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target =
document.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefrom
document(); selection.getrangeat(0).insertnode(
document.createtextnode(paste)); event.preventdefault(); }); result ...
Element.setCapture() - Web APIs
call this method during the handling of a mousedown event to retarget all mouse events to this element until the mouse button is released or
document.releasecapture() is called.
... <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.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("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.addeventlistener("mousemove", mousemoved, false); } function mouseup(e) { e.target.removeeventlistener("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.
Event.composed - Web APIs
the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); 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').addeventlistener('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.
... the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, html
document 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, html
document 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.
Event.composedPath() - Web APIs
the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); 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').addeventlistener('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.
...the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, html
document 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, html
document 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.
Event.currentTarget - Web APIs
function hide(e){ e.currenttarget.style.visibility = 'hidden'; console.log(e.currenttarget); // when this function is used as an event handler: this === e.currenttarget } var ps =
document.getelementsbytagname('p'); for(var i = 0; i < ps.length; i++){ // console: print the clicked <p> element ps[i].addeventlistener('click', hide, false); } // console: print <body>
document.body.addeventlistener('click', hide, false); // click around and make paragraphs disappear note: the value of event.currenttarget is only available while the event is being handled.
... obsolete
document object model (dom) level 3 events specificationthe definition of 'current event target' in that specification.
... obsolete
document object model (dom) level 2 events specificationthe definition of 'event.currenttarget' in that specification.
Event.eventPhase - Web APIs
this process starts with the window, then
document, then the htmlhtmlelement, and so on through the elements until the target's parent is reached.
... id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo =
document.getelementbyid('divinfo') divs =
document.getelementsbytagname('div') chcapture =
document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { d.removeeventlistener("click", ondivcli...
... obsolete
document object model (dom) level 2 events specificationthe definition of 'event.eventphase' in that specification.
Event.type - Web APIs
html <p>press any key or click the mouse to get the event type.</p> <p id="log"></p> javascript function geteventtype(event) { const log =
document.getelementbyid('log'); log.innertext = event.type + '\n' + log.innertext; } // keyboard events
document.addeventlistener('keydown', geteventtype, false); // first
document.addeventlistener('keypress', geteventtype, false); // second
document.addeventlistener('keyup', geteventtype, false); // third // mouse events
document.addeventlistener('mousedown', geteventtype, false); // first docume...
...nt.addeventlistener('mouseup', geteventtype, false); // second
document.addeventlistener('click', geteventtype, false); // third result specifications specification status comment domthe definition of 'event.type' in that specification.
... living standard
document object model (dom) level 2 events specificationthe definition of 'event.type' in that specification.
Using Fetch - Web APIs
const formdata = new formdata(); const filefield =
document.queryselector('input[type="file"]'); formdata.append('username', 'abc123'); formdata.append('avatar', filefield.files[0]); fetch('https://example.com/profile/avatar', { method: 'put', body: formdata }) .then(response => response.json()) .then(result => { console.log('success:', result); }) .catch(error => { console.error('error:', error); }); uploading multiple files files can be upl...
... const formdata = new formdata(); const photos =
document.queryselector('input[type="file"][multiple]'); formdata.append('title', 'my vegas vacation'); for (let i = 0; i < photos.files.length; i++) { formdata.append('photos', photos.files[i]); } fetch('https://example.com/posts', { method: 'post', body: formdata, }) .then(response => response.json()) .then(result => { console.log('success:', result); }) .catch(error => { console.error('error:', error); }); processing a text file line by line the chunks that are read from a response are not broken neatly at line boundaries and are uint8arrays, not strings.
... request bodies can be set by passing body parameters: const form = new formdata(
document.getelementbyid('login-form')); fetch('/login', { method: 'post', body: form }); both request and response (and by extension the fetch() function), will try to intelligently determine the content type.
FileList - Web APIs
for example, if the html includes the following file input: <input id="fileitem" type="file"> the following line of code fetches the first file in the node's file list as a file object: var file =
document.getelementbyid('fileitem').files[0]; method overview file item(index); properties attribute type description length integer a read-only value indicating the number of files in the list.
... example this example iterates over all the files selected by the user using an input element: // fileinput is an html input element: <input type="file" id="myfileinput" multiple> var fileinput =
document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; var file; // loop through files for (var i = 0; i < files.length; i++) { // get item file = files.item(i); //or file = files[i]; alert(file.name); } here is a complete example.
... <!doctype html> <html> <head> </head> <body> <!--multiple is set to allow multiple files to be selected--> <input id="myfiles" multiple type="file"> </body> <script> var pullfiles=function(){ // love the query selector var fileinput =
document.queryselector("#myfiles"); var files = fileinput.files; // cache files.length var fl = files.length; var i = 0; while ( i < fl) { // localize file var in the loop var file = files[i]; alert(file.name); i++; } } // set the input element onchange to call pullfiles
document.queryselector("#myfiles").onchange=pullfiles; //a.t </script> </html> specifications specification status comment file apithe definition of 'filelist' in that specification.
Using FormData Objects - Web APIs
var formdata = new formdata(someformelement); for example: var formelement =
document.queryselector("form"); var request = new xmlhttprequest(); request.open("post", "submitform.php"); request.send(new formdata(formelement)); you can also append additional data to the formdata object between retrieving it from a form and sending it, like this: var formelement =
document.queryselector("form"); var formdata = new formdata(formelement); var request = new xmlhttprequest(); request.
...s name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form =
document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput =
document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; ...
... 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.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); when the formdat...
GlobalEventHandlers.onanimationcancel - Web APIs
syntax var animcancelhandler = target.onanimationcancel; target.onanimationcancel = function value a function to be called when an animationcancel event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement),
document (
document), or window (window).
... function log(msg, event) { let logbox =
document.getelementbyid("log"); logbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the handlecancelevent() function, which is called in response to the animationcancel event, as set up in the html above.
... function handlecancelevent(event) { log("animation canceled", event); }; then we add a method to handle toggle display between "flex" and "none" and establish it as the handler for a click event on the "hide/show" the box button:
document.getelementbyid('togglebox').addeventlistener('click', function() { if (box.style.display == "none") { box.style.display = "flex";
document.getelementbyid("togglebox").innerhtml = "hide the box"; } else { box.style.display = "none";
document.getelementbyid("togglebox").innerhtml = "show the box"; } }); toggling the box to display: none has the effect of aborting its animati...
GlobalEventHandlers.onanimationend - Web APIs
syntax var animendhandler = target.onanimationend; target.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement),
document (
document), or window (window).
... function log(msg, event) { let logbox =
document.getelementbyid("log"); logbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the event handlers for the animationstart and animationend events: let box =
document.getelementbyid("box"); box.onanimationstart = functio...
...n(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation:
document.getelementbyid("play").addeventlistener("click", function(event) {
document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
GlobalEventHandlers.onanimationiteration - Web APIs
syntax var animiterationhandler = target.onanimationiteration; target.onanimationiteration = function value a function to be called when an animationiteration event occurs indicating that a css animation has reached the end of an iteration while running on the target, where the target object is an html element (htmlelement),
document (
document), or window (window).
... var box =
document.getelementbyid("box"); var iterationcounter = 0; box.onanimationiteration = function(event) { box.style.animationplaystate = "paused";
document.getelementbyid("play").innerhtml = "start iteration #" + (iterationcounter+1); }; this sets up two global variables: box, which references the "box" element that we're animating, and iterationcounter, which is initially zero, which indicates how ma...
... finally, we set up a handler for a click on the button that runs the animation:
document.getelementbyid("play").addeventlistener("click", function(event) { box.style.animationplaystate = "running"; iterationcounter++; }, false); this sets the box element's animation-play-state to "running" and increments the iteration counter.
GlobalEventHandlers.onanimationstart - Web APIs
syntax var animstarthandler = target.onanimationstart; target.onanimationstart = function value a function to be called when an animationstart event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement),
document (
document), or window (window).
... function log(msg, event) { let logbox =
document.getelementbyid("log"); logbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the event handlers for the animationstart and animationend events: let box =
document.getelementbyid("box"); box.onanimationstart = functio...
...n(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation:
document.getelementbyid("play").addeventlistener("click", function(event) {
document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
GlobalEventHandlers.onkeypress - Web APIs
html <input> <p id="log"></p> javascript const input =
document.queryselector('input'); const log =
document.getelementbyid('log'); input.onkeypress = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result filter keys with a regular expression this example filters the characters typed into a form field using a regular expression.
... html <label>enter numbers only: <input> </label> javascript function numbersonly(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const input =
document.queryselector('input'); input.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number characters) input.onpaste = event => false; result capture the typing of a hidden word the following javascript function will do something after the user types the word "exit" in any point of a page.
...*/ (function () { const ssecret = /* choose your hidden word...: */ "exit"; let noffset = 0;
document.onkeypress = function(opevt) { let oevent = opevt || window.event, nchr = oevent.charcode, snodetype = oevent.target.nodename.touppercase(); if (nchr === 0 || oevent.target.contenteditable.touppercase() === "true" || snodetype === "textarea" || snodetype === "input" && oevent.target.type.touppercase() === "text") { return true; } if (nchr !== ssecret.charcodeat(noffset)) { noffset = nchr === ssecret.charcodeat(0) ?
GlobalEventHandlers.onpointerdown - Web APIs
this event can be sent to window,
document, and element objects.
... syntax target.onpointerdown = downhandler; var downhandler = target.onpointerdown; value a function to handle the pointerdown event for the target element,
document, or window.
... var targetbox =
document.getelementbyid("target"); targetbox.onpointerdown = handledown; function handledown(evt) { var action; switch(evt.pointertype) { case "mouse": action = "clicking"; break; case "pen": action = "tapping"; break; case "touch": action = "touching"; break; default: action = "interacting with"; break; } targetbox.innerhtml = "<strong>thanks for " + action + " me!</strong>"; evt.preventdef...
GlobalEventHandlers.onscroll - Web APIs
the scroll event fires when the
document view or an element has been scrolled, whether by the user, a web api, or the user agent.
... html <textarea>1 2 3 4 5 6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea =
document.queryselector('textarea'); const log =
document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.target.scrolltop}`; } result specifications specification status comment html living standardthe definition of 'onscroll' in that specification.
... living standard
document object model (dom) level 3 events specificationthe definition of 'onscroll' in that specification.
HTMLBaseFontElement - Web APIs
the
document text in the default style is rendered in the first font face that the client's browser supports.
... specifications specification status comment
document object model (dom) level 2 html specificationthe definition of 'htmlbasefontelement' in that specification.
... obsolete no change
document object model (dom) level 1 specificationthe definition of 'htmlbasefontelement' in that specification.
HTMLCanvasElement.toDataURL() - Web APIs
exceptions securityerror the canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the
document itself was loaded.
... examples given this <canvas> element: <canvas id="canvas" width="5" height="5"></canvas> you can get a data-url of the canvas with the following lines: var canvas =
document.getelementbyid('canvas'); var dataurl = canvas.todataurl(); console.log(dataurl); // "data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnby // blaaaadeleqvqimwngobmaaabpaafei8araaaaaelftksuqmcc" setting image quality with jpegs var fullquality = canvas.todataurl('image/jpeg', 1.0); // data:image/jpeg;base64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray...
...html <img class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages =
document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas =
document.createelement('canvas'), octx = ocanvas.getcontext('2d'); for (var nwidth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimgid = 0; nimgid < nimgslen; nimgid++) { ocolorimg = aimages[nimgid]; nwidth = ocolorimg.offsetwidth; nheight = ocolorimg.offsetheight; ocanvas.width =...
HTMLCollection - Web APIs
the htmlcollection interface represents a generic collection (array-like object similar to arguments) of elements (in
document order) and offers methods and properties for selecting from the list.
... an htmlcollection in the html dom is live; it is automatically updated when the underlying
document is changed.
... for example, assuming there is one <form> element in the
document and its id is myform: var elem1, elem2; //
document.forms is an htmlcollection elem1 =
document.forms[0]; elem2 =
document.forms.item(0); alert(elem1 === elem2); // shows: "true" elem1 =
document.forms.myform; elem2 =
document.forms.nameditem("myform"); alert(elem1 === elem2); // shows: "true" elem1 =
document.forms["named.item.with.periods"]; specifications specification sta...
HTMLElement.lang - Web APIs
the language code returned by this property is defined in the tags for identifying languages (bcp47) ietf
document.
...note that this attribute, though valid at the individual element level described here, is most often specified for the root element of the
document.
... example // this snippet compares the base language and // redirects to another url based on language if (
document.
documentelement.lang === "en") { window.location.href = "some_
document.html.en"; } else if (
document.
documentelement.lang === "ru") { window.location.href = "some_
document.html.ru"; } specification specification status comment
document object model (dom) level 2 html specificationthe definition of 'lang' in that specification.
HTMLFieldSetElement - Web APIs
if the field set is not a descendant of a form element, then the attribute can be the id of any form element in the same
document it is related to, or the null value if none matches.
...
document object model (dom) level 2 html specificationthe definition of 'htmlfieldsetelement' in that specification.
... obsolete no change
document object model (dom) level 1 specificationthe definition of 'htmlfieldsetelement' in that specification.
HTMLFrameSetElement - Web APIs
document object model (dom) level 2 html specificationthe definition of 'htmlbodyelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmlbodyelement' in that specification.
HTMLHRElement - Web APIs
document object model (dom) level 2 html specificationthe definition of 'htmlhrelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification.
...
document object model (dom) level 1 specificationthe definition of 'htmlhrelement' in that specification.
HTMLHeadElement - Web APIs
the htmlheadelement interface contains the descriptive information, or metadata, for a
document.
...
document object model (dom) level 2 html specificationthe definition of 'htmlheadelement' in that specification.
... obsolete no change
document object model (dom) level 1 specificationthe definition of 'htmlheadelement' in that specification.
HTMLImageElement.crossOrigin - Web APIs
this means that cors is enabled and credentials are sent if the image is fetched from the same origin from which the
document was loaded.
... example in this example, a new <img> element is created and added to the
document, loading the image with the anonymous state; the image will be loaded using cors and credentials will be used for all cross-origin loads.
... const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container =
document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg =
document.createelement("output"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(imageurl); html <div class="container"> <p>here's a paragraph.
ImageCapture - Web APIs
var imagecapture; function ongetusermediabuttonclick() { navigator.mediadevices.getusermedia({video: true}) .then(mediastream => {
document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); } function ongrabframebuttonclick() { imagecapture.grabframe() .then(imagebitmap => { const canvas =
document.queryselector('#grabframecanvas'); drawcanvas(canvas, imagebitmap); }) .catch(error ...
...=> console.log(error)); } function ontakephotobuttonclick() { imagecapture.takephoto() .then(blob => createimagebitmap(blob)) .then(imagebitmap => { const canvas =
document.queryselector('#takephotocanvas'); drawcanvas(canvas, imagebitmap); }) .catch(error => console.log(error)); } /* utils */ function drawcanvas(canvas, img) { canvas.width = getcomputedstyle(canvas).width.split('px')[0]; canvas.height = getcomputedstyle(canvas).height.split('px')[0]; let ratio = math.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').addeventlistener('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.
Using IndexedDB - Web APIs
about this
document this tutorial walks you through using the asynchronous api of indexeddb.
... for the reference
documentation on the indexeddb api, see the indexeddb article and its subpages.
... this article
documents the types of objects used by indexeddb, as well as the methods of the asynchronous api (the synchronous api was removed from spec).
Location: ancestorOrigins - Web APIs
the ancestororigins read-only property of the location interface is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the
document associated with the given location object.
... you can use location.ancestororigins in the script for a
document to determine, for example, whenever the
document is being framed by a site which you don’t expect it to be framed by.
... you can also use it to vary the behavior of the
document based on what site or list of sites is framing it.
MediaDevices.ondevicechange - Web APIs
let videoelement =
document.getelementbyid("video"); let logelement =
document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; }
document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 30 }, audio: { samplerate: 44100, samplesize: 16, ...
...volume: 0.25 } }).then(stream => { videoelement.srcobject = stream; updatedevicelist(); }) .catch(err => log(err.name + ": " + err.message)); }, false); we set up global variables that contain references to the <ul> elements that are used to list the audio and video devices: let audiolist =
document.getelementbyid("audiolist"); let videolist =
document.getelementbyid("videolist"); getting and drawing the device list now let's take a look at updatedevicelist() itself.
... function updatedevicelist() { navigator.mediadevices.enumeratedevices() .then(function(devices) { audiolist.innerhtml = ""; videolist.innerhtml = ""; devices.foreach(function(device) { let elem =
document.createelement("li"); let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i); elem.innerhtml = "<strong>" + device.label + "</strong> (" + direction + ")"; if (type === "audio") { audiolist.appendchild(elem); } else if (type === "video") { videolist.appendchild(elem); } }); }); } updatedevicelist() consists entirely of a call to the funct...
MediaList - Web APIs
note: medialist is a live list; updating the list using properties or methods listed below will immediately update the behavior of the
document.
... examples the following would log to the console a textual representation of the medialist of the first stylesheet applied to the current
document.
... const stylesheets =
document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment css object model (cssom)the definition of 'medialist' in that specification.
MediaQueryListEvent.matches - Web APIs
the matches read-only property of the mediaquerylistevent interface is a boolean that returns true if the
document currently matches the media query list, or false if not.
... syntax var matches = mediaquerylistevent.matches; value a boolean; returns true if the
document currently matches the media query list, false if not.
... examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.';
document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.';
document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification.
MediaRecorder: dataavailable event - Web APIs
bubbles no cancelable no interface blobevent event handler property ondataavailable for details of the all the possible reasons this event may raise, see the
documentation for the event handler property: ondataavailable.
... var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio =
document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ...
... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio =
document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...
Using the MediaStream Recording API - Web APIs
checkbox hack for showing/hiding this is fairly well
documented already, but we thought we'd give a mention to the checkbox hack, which abuses the fact that you can click on the <label> of a checkbox to toggle it checked/unchecked.
... we'll declare some variables for the record and stop buttons, and the <article> that will contain the generated audio players: const record =
document.queryselector('.record'); const stop =
document.queryselector('.stop'); const soundclips =
document.queryselector('.sound-clips'); finally for this section, we set up the basic getusermedia structure: if (navigator.mediadevices && navigator.mediadevices.getusermedia) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ( // constraints - only audio needed fo...
...we register an event handler for this using mediarecorder.onstop, and finalize our blob there from all the chunks we have received: mediarecorder.onstop = function(e) { console.log("recorder stopped"); const clipname = prompt('enter a name for your sound clip'); const clipcontainer =
document.createelement('article'); const cliplabel =
document.createelement('p'); const audio =
document.createelement('audio'); const deletebutton =
document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(clip...
MediaStream Recording API - Web APIs
var canvas =
document.queryselector("canvas"); // optional frames per second argument.
... } } function download() { var blob = new blob(recordedchunks, { type: "video/webm" }); var url = url.createobjecturl(blob); var a =
document.createelement("a");
document.body.appendchild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; a.click(); window.url.revokeobjecturl(url); } // demo: to download after 9sec settimeout(event => { console.log("stopping"); mediarecorder.stop(); }, 9000); examining and controlling the recorder status you can also use the properties of the mediarecorder object...
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { let menu =
document.getelementbyid("inputdevices"); if (device.kind == "audioinput") { let item =
document.createelement("option"); item.innerhtml = device.label; item.value = device.deviceid; menu.appendchild(item); } }); }); code similar to this can be used to let the user restrict the set of devices they wish to use.
Using the Media Capabilities API - Web APIs
>4000</option> <option>2500</option> <option>800</option> </select> </li> </ul> <p><input type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul> javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(); }, createconfiguration: function () { var size =
document.getelementbyid('size').value.split('x'); mc.videoconfiguration = { type: 'file', video: { contenttype:
document.getelementbyid('codec').value, width: size[0], height: size[1], bitrate:
document.getelementbyid('bitrate').value, framerate:
document.getelementbyid('framerate').value, } } }, testit: function () { let content =...
... ''; navigator.mediacapabilities.decodinginfo(mc.videoconfiguration).then(result => { var li =
document.createelement('li'), mcv = mc.videoconfiguration.video; content = 'a ' + mcv.width + 'x' + mcv.height + ', ' + mcv.contenttype + ' at ' + mcv.framerate + 'fps and ' + mcv.bitrate + ' bps video ' + (result.supported ?
...' is ' : ' is not ') + 'power efficient.'; var ul =
document.getelementbyid("results") li.innerhtml = content; ul.appendchild(li); }).catch((error) => { var li =
document.createelement('li'), ul =
document.getelementbyid("results"); li.innertext = 'codec ' + mc.videoconfiguration.video.contenttype + ' threw an error: ' + error; ul.appendchild(li); }); } }
document.getelementbyid('tryit').addeventlistener('click', mc.tryit); live result ...
MouseEvent.altKey - Web APIs
html <p>click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log =
document.queryselector('#log');
document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; } result specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'mouseevent.altkey' in that specification.
... obsolete no change from
document object model (dom) level 2 events specification.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.ctrlKey - Web APIs
html <p>click anywhere to test the <code>ctrlkey</code> property.</p> <p id="log"></p> javascript let log =
document.queryselector('#log');
document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; } result specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
... obsolete no change from
document object model (dom) level 2 events specification.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
MouseEvent.metaKey - Web APIs
html <p>click anywhere to test the <code>metakey</code> property.</p> <p id="log"></p> javascript let log =
document.queryselector('#log');
document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; } result specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'mouseevent.metakey' in that specification.
... obsolete no change from
document object model (dom) level 2 events specification.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.metakey' in that specification.
MouseEvent.shiftKey - Web APIs
html <p>click anywhere to test the <code>shiftkey</code> property.</p> <p id="log"></p> javascript let log =
document.queryselector('#log');
document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; } result specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
... obsolete no change from
document object model (dom) level 2 events specification.
...
document object model (dom) level 2 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
NamedNodeMap - Web APIs
living standard deals with attr instead of node
document object model (dom) level 3 core specificationthe definition of 'namednodemap' in that specification.
... obsolete no change from
document object model (dom) level 2 core specification
document object model (dom) level 2 core specificationthe definition of 'namednodemap' in that specification.
... obsolete added getnameditemns(), setnameditemns() and removenameditemns()
document object model (dom) level 1 specificationthe definition of 'namednodemap' in that specification.
Navigator.sendBeacon() - Web APIs
description this method is for analytics and diagnostics that send data to a server before the
document is unloaded, where sending the data any sooner may miss some possible data collection.
... ensuring that data has been sent during the unloading of a
document has traditionally been difficult, because user agents typically ignore asynchronous xmlhttprequests made in an unload handler.
... all of these methods block unloading the
document, which slows down the next navigation.
Node.isConnected - Web APIs
the isconnected read-only property of the node interface returns a boolean indicating whether the node is connected (directly or indirectly) to the context object, for example the
document object in the case of the normal dom, or the shadowroot in the case of a shadow dom.
... examples standard dom a standard dom example: let test =
document.createelement('p'); console.log(test.isconnected); // returns false
document.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to the shadow dom var style =
document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding:...
... */ if (!('isconnected' in node.prototype)) { object.defineproperty(node.prototype, 'isconnected', { get() { return ( !this.owner
document || !( this.owner
document.compare
documentposition(this) & this.
document_position_disconnected ) ); }, }); } specifications specification status comment domthe definition of 'isconnected' in that specification.
Node.isSupported() - Web APIs
var main =
document.getelementbyid('doc'); var output = main.issupported('html', '2.0'); </script> specifications specification status comment
document object model (dom) level 3 core specificationthe definition of 'node.issupported()' in that specification.
... obsolete no change from
document object model (dom) level 2 core specification.
...
document object model (dom) level 2 core specificationthe definition of 'node.issupported()' in that specification.
Node.nodeName - Web APIs
values for the different types of nodes are: interface nodename value attr the value of attr.name cdatasection "#cdata-section" comment "#comment"
document "#
document"
documentfragment "#
document-fragment"
documenttype the value of
documenttype.name element the value of element.tagname entity the entity name entityreference the name of entity reference notation the notation name processinginstruction the value of processinginstruction.target text "#text" example given the following markup: <div id=...
..."d1">hello world</div> <input type="text" id="t"> and the following script: var div1 =
document.getelementbyid("d1"); var text_field =
document.getelementbyid("t"); text_field.value = div1.nodename; in xhtml (or any other xml format), text_field's value would read "div".
... however, in html, text_field's value would read "div", because nodename and tagname return in upper case on html elements in doms flagged as html
documents.
Node.setUserData() - Web APIs
this method offers the convenience of associating data with specific nodes without needing to alter the structure of a
document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations.
... example var d =
document.implementation.create
document('', 'test', null); d.
documentelement.setuserdata('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object element]::[object element] console.log(d.
documentelement.getuserdata('key')); // 15 var e =
document.importnode(d.
documentelement, true); // causes handler to be called console.log(e.getuserdata('key'));...
... // null since user data is not copied specifications specification status comment
document object model (dom) level 3 core specificationthe definition of 'node.setuserdata()' in that specification.
NodeFilter - Web APIs
a nodefilter knows nothing about the
document or traversing nodes; it only knows how to evaluate a single node against the provided filter.
... example const nodeiterator =
document.createnodeiterator( // node to use as root
document.getelementbyid('someid'), // only consider nodes that are text nodes (nodetype 3) nodefilter.show_text, // object containing the function to use for the acceptnode method // of the nodefilter { acceptnode: function(node) { // logic to determine whether to accept, reject or skip node // in this case, only accept node...
... living standard
document object model (dom) level 2 traversal and range specificationthe definition of 'nodefilter' in that specification.
NodeIterator.filter - Web APIs
syntax nodefilter = nodeiterator.filter; example const nodeiterator =
document.createnodeiterator(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); nodefilter = nodeiterator.filter; specifications specification status comment domthe definition of 'nodeiterator.filter' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.filter' in that specification.
NodeIterator.root - Web APIs
syntax root = nodeiterator.root; example var nodeiterator =
document.createnodeiterator(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); root = nodeiterator.root; //
document.body in this case specifications specification status comment domthe definition of 'nodeiterator.root' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.root' in that specification.
ParentNode.firstElementChild - Web APIs
syntax var element = node.firstelementchild; example <ul id="foo"> <li>first (1)</li> <li>second (2)</li> <li>third (3)</li> </ul> <script> var foo =
document.getelementbyid('foo'); // yields: first (1) console.log(foo.firstelementchild.textcontent); </script> polyfill for ie8, ie9 and safari // overwrites native 'firstelementchild' prototype.
... // adds
document &
documentfragment support for ie9 & safari.
... the
document and
documentfragment implemented the new interfaces.
PaymentRequest.show() - Web APIs
only one payment request can be in the process of being handled at once, across all
documents.
...only one payment panel may be visible at a time across all
documents loaded by the user agent.
...}
document.getelementbyid("buybutton").onclick = requestpayment; specifications specification status comment payment request apithe definition of 'show(optional detailspromise)' 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.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
... const checkoutbutton =
document.getelementbyid('checkout-button'); checkoutbutton.innertext = "loading..."; if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); request.canmakepayment().then(function(canmakeafastpayment) { if (canmakeafastpayment) { checkoutbutton.innertext = "fast checkout with w3c"; } else { checkoutbutton.
... const additionaldetailscontainer =
document.getelementbyid('additional-details-container'); additionaldetailscontainer.style.display = 'block'; window.scrollto(additionaldetailscontainer.getboundingclientrect().x, 0); }).catch(function(error) { // handle error.
PerformanceEventTiming - Web APIs
// keep track of whether (and when) the page was first hidden, see: // https://github.com/w3c/page-visibility/issues/29 // note: ideally this check would be performed in the
document <head> // to avoid cases where the visibility state changes before this code runs.
... let firsthiddentime =
document.visibilitystate === 'hidden' ?
... 0 : infinity;
document.addeventlistener('visibilitychange', (event) => { firsthiddentime = math.min(firsthiddentime, event.timestamp); }, {once: true}); // sends the passed data to an analytics endpoint.
PerformanceNavigationTiming.domComplete - Web APIs
the domcomplete read-only property returns a timestamp representing the time value equal to the time immediately before the user agent sets the current
document readiness of the current
document to complete.
... syntax perfentry.domcomplete; return value a timestamp representing a time value equal to the time immediately before the user agent sets the current
document readiness of the current
document to complete.
....getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); //
document load and unload time console.log("
document load = " + (p.loadeventend - p.loadeventstart)); console.log("
document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the...
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
the domcontentloadedeventend read-only property returns a timestamp representing the time value equal to the time immediately after the current
document's domcontentloaded event completes.
... syntax perfentry.domcontentloadedeventend; return value a timestamp representing the time value equal to the time immediately after the current
document's domcontentloaded event completes.
...tentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); //
document load and unload time console.log("
document load = " + (p.loadeventend - p.loadeventstart)); console.log("
document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the...
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
the domcontentloadedeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current
document.
... syntax perfentry.domcontentloadedeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current
document.
....getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); //
document load and unload time console.log("
document load = " + (p.loadeventend - p.loadeventstart)); console.log("
document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the...
PerformanceNavigationTiming.domInteractive - Web APIs
the dominteractive read-only property returns a timestamp representing the time value equal to the time immediately before the user agent sets the current
document readiness of the current
document to interactive.
... syntax perfentry.dominteractive; return value a timestamp representing the time value equal to the time immediately before the user agent sets the current
document readiness of the current
document to interactive.
...tentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); //
document load and unload time console.log("
document load = " + (p.loadeventend - p.loadeventstart)); console.log("
document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the...
PerformanceNavigationTiming.loadEventEnd - Web APIs
the loadeventend read-only property returns a timestamp which is equal to the time when the load event of the current
document is completed.
... syntax perfentry.loadeventend; return value a timestamp representing the time when the load event of the current
document is completed.
...tentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); //
document load and unload time console.log("
document load = " + (p.loadeventend - p.loadeventstart)); console.log("
document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the...
PerformanceNavigationTiming.loadEventStart - Web APIs
the loadeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the load event of the current
document is fired.
... syntax perfentry.loadeventstart; return value a timestamp representing a time value equal to the time immediately before the load event of the current
document is fired.
....getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); //
document load and unload time console.log("
document load = " + (p.loadeventend - p.loadeventstart)); console.log("
document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the...
PluginArray - Web APIs
pluginarray.refresh refreshes all plugins on the current page, optionally reloading
documents.
... var pluginslength = navigator.plugins.length;
document.body.innerhtml = pluginslength + " plugin(s)<br>" + '<table id="plugintable"><thead>' +'<tr><th>name</th><th>filename</th><th>description</th><th>version</th></tr>' +'</thead><tbody></tbody></table>'; var table =
document.getelementbyid('plugintable'); for(var i = 0; i < pluginslength; i++) { let newrow = table.insertrow(); newrow.insertcell().textcontent = navigator.plugins[i].name; newrow.insertcell().textcontent = navigator.plugins[i].filename; newrow.insertcell().textcontent = navigator.plugins[i].description; newrow.insertcell().textcontent = navigator.plugins[i].version?navigator.plugins[i].version:""; } the following examp...
... var pluginslength = navigator.plugins.length;
document.write( pluginslength.tostring() + " plugin(s)<br>" + "name | filename | description<br>" ); for(var i = 0; i < pluginslength; i++) {
document.write( navigator.plugins[i].name + " | " + navigator.plugins[i].filename + " | " + navigator.plugins[i].description + " | " + navigator.plugins[i].version + "<br>" ); } specifications specification status comment html living standardthe definition of 'pluginarray' in that specification.
Multi-touch interaction - Web APIs
this
document demonstrates via example code, using pointer events with different multi-touch interactions.
... function set_handlers(name) { // install event handlers for the given element var el=
document.getelementbyid(name); el.onpointerdown = pointerdown_handler; el.onpointermove = pointermove_handler; // use same handler for pointer{up,cancel,out,leave} events since // the semantics for these events - in this app - are the same.
...false : true; } function log(name, ev) { var o =
document.getelementsbytagname('output')[0]; var s = name + ": pointerid = " + ev.pointerid + " ; pointertype = " + ev.pointertype + " ; isprimary = " + ev.isprimary; o.innerhtml += s + " "; } function clearlog(event) { var o =
document.getelementsbytagname('output')[0]; o.innerhtml = ""; } ...
PopStateEvent - Web APIs
a popstate event is dispatched to the window every time the active history entry changes between two history entries for the same
document.
...and the event is only triggered when the user navigates between two history entries for the same
document.
... the popstate event as an example, a page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " +
document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.html, state: null his...
Range.commonAncestorContainer - Web APIs
the range.commonancestorcontainer read-only property returns the deepest — or furthest down the
document tree — node that contains both boundary points of the range.
... .highlight { animation: highlight linear 1s; } @keyframes highlight { from { outline: 1px solid #f00f; } to { outline: 1px solid #f000; } } body { padding: 1px; } javascript
document.addeventlistener('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.classlist.remo...
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.commonancestorcontainer' in that specification.
Range.insertNode() - Web APIs
if the new node is a
document fragment, the children of the
document fragment are inserted instead.
... example range =
document.createrange(); newnode =
document.createelement("p"); newnode.appendchild(
document.createtextnode("new node inserted here")); range.selectnode(
document.getelementsbytagname("div").item(0)); range.insertnode(newnode); specifications specification status comment domthe definition of 'range.insertnode()' in that specification.
... living standard no change
document object model (dom) level 2 traversal and range specificationthe definition of 'range.insertnode()' in that specification.
Range.setEnd() - Web APIs
the range.setend() method sets the end position of a range to be located at the given offset into the specified node x.setting the end point above (higher in the
document) than the start point will result in a collapsed range with the start and end points both set to the specified end position.
... example const range =
document.createrange(); const endnode =
document.getelementsbytagname('p').item(3); const endoffset = endnode.childnodes.length; range.setend(endnode, endoffset); setend() is commonly used in conjunction with setstart() to fully configure a range.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.setend()' in that specification.
Report.url - Web APIs
the url read-only property of the report interface returns the url of the
document that generated the report.
... syntax let reporturl = reportinstance.url returns a string representing the url of the
document that generated the report.
... examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { let firstreport = reports[0]; // log the url of the
document that generated the first report // e.g.
Report - Web APIs
report.url read only the url of the
document that generated the report.
... 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 innerlist =
document.createelement('ul'); listitem.appendc...
...hild(innerlist); list.appendchild(listitem); for (let key in reports[i].body) { let innerlistitem =
document.createelement('li'); let keyvalue = reports[i].body[key]; innerlistitem.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlistitem); } } } the reports parameter contains an array of all the reports in the observer's report queue.
SVGGraphicsElement: paste event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the
document at the cursor position.
... it's possible to construct and dispatch a synthetic paste event, but this will not affect the
document's contents.
.../www.w3.org/2000/svg"> <foreignobject x="5" y="-10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript
document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
Using the Screen Capture API - Web APIs
const videoelem =
document.getelementbyid("video"); const logelem =
document.getelementbyid("log"); const startelem =
document.getelementbyid("start"); const stopelem =
document.getelementbyid("stop"); // options for getdisplaymedia() var displaymediaoptions = { video: { cursor: "always" }, audio: false }; // set event listeners for the start and stop buttons startelem.addeventlistener("click", function(evt) {...
...lem.innerhtml += `${msg}<br>`; console.error = msg => logelem.innerhtml += `<span class="error">${msg}</span><br>`; console.warn = msg => logelem.innerhtml += `<span class="warn">${msg}<span><br>`; console.info = msg => logelem.innerhtml += `<span class="info">${msg}</span><br>`; this allows us to use the familiar console.log(), console.error(), and so on to log information to the log box in the
document.
... for example, this line in the http headers will enable screen capture api for the
document and any embedded <iframe> elements that are loaded from the same origin: feature-policy: display-capture 'self' if you're performing screen capture within an <iframe>, you can request permission just for that frame, which is clearly more secure than requesting a more general permission: <iframe src="https://mycode.example.net/etc" allow="display-capture"> </iframe> ...
SecurityPolicyViolationEvent.sourceFile - Web APIs
the sourcefile read-only property of the securitypolicyviolationevent interface is a usvstring representing the uri of the
document or worker in which the violation was found.
... syntax let source = violationeventinstance.sourcefile; value a usvstring representing the uri of the
document or worker in which the violation was found.
... example
document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sourcefile); }); specifications specification status comment content security policy level 3the definition of 'sourcefile' in that specification.
SecurityPolicyViolationEvent.statusCode - Web APIs
the statuscode read-only property of the securitypolicyviolationevent interface is a number representing the http status code of the
document or worker in which the violation occurred.
... syntax let status = violationeventinstance.statuscode; value a number representing the status code of the
document or worker in which the violation occurred.
... example
document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.statuscode); }); specifications specification status comment content security policy level 3the definition of 'statuscode' in that specification.
Selection.collapse() - Web APIs
the
document is not modified.
... examples /* place the caret at the beginning of an html
document's body.
... */ var body =
document.getelementsbytagname("body")[0]; window.getselection().collapse(body,0); specifications specification status comment selection apithe definition of 'selection.collapse()' in that specification.
Selection.modify() - Web APIs
you can move by "character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "
documentboundary".
... note: gecko does not implement "sentence", "paragraph", "sentenceboundary", "paragraphboundary", or "
documentboundary".
...value="character">character</option> <option value="word">word</option> <option value="sentence">sentence</option> <option value="line">line</option> <option value="paragraph">paragraph</option> <option value="lineboundary">line boundary</option> <option value="sentenceboundary">sentence boundary</option> <option value="paragraphboundary">paragraph boundary</option> <option value="
documentboundary">
document boundary</option> </select> <br><br> <button>extend selection</button> javascript let select =
document.queryselector('select'); let button =
document.queryselector('button'); button.addeventlistener('click', modify); function modify() { let selection = window.getselection(); selection.modify('extend', 'forward', select.value); } result specifications this method ...
Service Worker API - Web APIs
a service worker client is either a
document in a browser context or a sharedworker, which is controlled by an active worker.
... navigator.serviceworker returns a serviceworkercontainer object, which provides access to registration, removal, upgrade, and communication with the serviceworker objects for the associated
document.
... windowclient represents the scope of a service worker client that is a
document in a browser context, controlled by an active worker.
StorageEvent - Web APIs
a storageevent is sent to a window when a storage area it has access to is changed within the context of another
document.
... url usvstring the url of the
document whose key changed.
... url optional the url of the
document initiating the change.
StyleSheet - Web APIs
stylesheet.ownernode read only returns a node associating this style sheet with the current
document.
... working draft no change from
document object model (dom) level 2 style specification.
...
document object model (dom) level 2 style specificationthe definition of 'stylesheet' in that specification.
Touch.target - Web APIs
summary returns the element (eventtarget) on which the touch contact started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the
document.
... note that if the target element is removed from the
document, events will still be targeted at it, and hence won't necessarily bubble up to the window or
document anymore.
... // register a touchmove listener for the 'source' element var src =
document.getelementbyid("source"); src.addeventlistener('touchstart', function(e) { // iterate through the touch points that were activiated // for this element.
Touch - Web APIs
touch.pagex read only returns the x coordinate of the touch point relative to the left edge of the
document.
... touch.pagey read only returns the y coordinate of the touch point relative to the top of the
document.
... touch.target read only returns the element on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the
document.
Multi-touch interaction - Web APIs
function set_handlers(name) { // install event handlers for the given element var el=
document.getelementbyid(name); el.ontouchstart = start_handler; el.ontouchmove = move_handler; // use same handler for touchcancel and touchend el.ontouchcancel = end_handler; el.ontouchend = end_handler; } function init() { set_handlers("target1"); set_handlers("target2"); set_handlers("target3"); set_handlers("target4"); } move/pinch/zoom handler this function provides very basic support fo...
...false : true; } function log(name, ev, printtargetids) { var o =
document.getelementsbytagname('output')[0]; var s = name + ": touches = " + ev.touches.length + " ; targettouches = " + ev.targettouches.length + " ; changedtouches = " + ev.changedtouches.length; o.innerhtml += s + " "; if (printtargetids) { s = ""; for (var i=0; i < ev.targettouches.length; i++) { s += "...
... id = " + ev.targettouches[i].identifier + " "; } o.innerhtml += s; } } function clearlog(event) { var o =
document.getelementsbytagname('output')[0]; o.innerhtml = ""; } related topics and resources pointer events ...
TreeWalker.nextNode() - Web APIs
the treewalker.nextnode() method moves the current node to the next visible node in the
document order, and returns the found node.
... syntax node = treewalker.nextnode(); example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.nextnode(); // returns the first child of root, as it is the next node in
document order specifications specification status comment domthe definition of 'treewalker.nextnode' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.nextnode' in that specification.
TreeWalker.parentNode() - Web APIs
the treewalker.parentnode() method moves the current node to the first visible ancestor node in the
document order, and returns the found node.
... syntax node = treewalker.parentnode(); example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.parentnode(); // returns null as there is no parent specifications specification status comment domthe definition of 'treewalker.parentnode' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.parentnode' in that specification.
TreeWalker.previousNode() - Web APIs
the treewalker.previousnode() method moves the current node to the previous visible node in the
document order, and returns the found node.
... syntax node = treewalker.previousnode(); example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.previousnode(); // returns null as there is no parent specifications specification status comment domthe definition of 'treewalker.previousnode' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.previousnode' in that specification.
UIEvent.pageX - Web APIs
the non-standard, read-only uievent property pagex returns the horizontal coordinate of the event relative to the whole
document.
...this value is relative to the left edge of the entire
document, regardless of the current horizontal scrolling offset of the
document.
... examples for an example, see the
documentation for the standard mouseevent.pagex property, which you should use instead.
UIEvent.view - Web APIs
specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'uievent' in that specification.
... obsolete from
document object model (dom) level 2 events specification, changed the type of view from abstractview to windowproxy.
...
document object model (dom) level 2 events specificationthe definition of 'uievent' in that specification.
VisualViewport - Web APIs
for an <iframe>, visual viewport metrics like visualviewport.width always correspond to layout viewport metrics like
document.
documentelement.clientwidth.
... 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.addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api ...
... var bottombar =
document.getelementbyid('bottombar'); var viewport = window.visualviewport; function viewporthandler() { var layoutviewport =
document.getelementbyid('layoutviewport'); // since the bar is position: fixed we need to offset it by the visual // viewport's offset from the layout viewport origin.
WakeLock.request() - Web APIs
exceptions notallowederror thrown when wake lock is not available, which can happen because:
document is not allowed to use screen wake lock due to screen-wake-lock policy.
...
document is not fully active.
...
document is hidden.
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.addeventlistener("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.height; currentrotation = [0, 1]; currentscale = [1.0, aspectratio]; ...
... function compileshader(id, type) { let code =
document.getelementbyid(id).firstchild.nodevalue; let shader = gl.createshader(type); gl.shadersource(shader, code); gl.compileshader(shader); if (!gl.getshaderparameter(shader, gl.compile_status)) { console.log(`error compiling ${type === gl.vertex_shader ?
... "vertex" : "fragment"} shader:`); console.log(gl.getshaderinfolog(shader)); } return shader; } the code is fetched from the html
document by obtaining the value of the text node contained within the <script> element with the specified id.
Detect WebGL - Web APIs
window.addeventlistener("load", function() { var paragraph =
document.queryselector("p"), button =
document.queryselector("button"); // adding click event handler to button.
...the canvas is not added to the //
document itself, so it is never displayed in the // browser window.
... var canvas =
document.createelement("canvas"); // get webglrenderingcontext from canvas element.
Hello GLSL - Web APIs
<script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(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 =
document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createpro...
...(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup();
document.queryselector("p").innerhtml = "shader program did not link successfully.
... cleanup(); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } 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.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0...
Scissor animation - Web APIs
position = [0, gl.drawingbufferheight]; var button =
document.queryselector("button"); var timer; function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false);
document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stop...
...animation, false); button.addeventlistener("click", startanimation, false);
document.queryselector("strong").innerhtml = "start"; clearinterval(timer); } stopanimation({type: "click"}); } // variables to hold the size and velocity of the square.
... math.random()*(gl.drawingbufferwidth - size[0]), gl.drawingbufferheight ]; // random velocity between 1.0 and 7.0 velocity = 1.0 + 6.0*math.random(); color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); } } function getrandomcolor() { return [math.random(), math.random(), math.random()]; } 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.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0...
Textures from code - Web APIs
on); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(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 =
document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createpro...
...(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup();
document.queryselector("p").innerhtml = "shader program did not link successfully.
...tribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0, 0.0]), gl.static_draw); gl.vertexattribpointer(0, 2, gl.float, false, 0, 0); } 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.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0...
Using DTMF with WebRTC - Web APIs
keep in mind that the process of establishing the connection is somewhat contrived here; you normally don't build both ends of the connection in the same
document.
... window.addeventlistener("load", function() { logelement =
document.queryselector(".log"); dialbutton =
document.queryselector("#dial"); dialbutton.addeventlistener("click", connectanddial, false); }); starting the connection process when the dial button is clicked, connectanddial() is called.
... you can find the log function at the bottom of the
documentation.
Fundamentals of WebXR - Web APIs
the former, specified by the session mode string inline, presents the rendered scene within the context of a
document in a web browser, and doesn't require special xr hardware to view.
...we do not yet include
documentation for it here on mdn, but it will come as soon as the module's specification settles down.
... types of webxr hardware the simplest xr presentation involves rendering the scene directly to the user's screen, either in the context of a web
document, or in full screen mode.
Movement, orientation, and motion: A WebXR example - Web APIs
session_type the type of xr session to create: inline for an inline session presented in the context of the
document and immersive-vr to present the scene to an immersive vr headset.
... window.addeventlistener("load", onload); function onload() { xrbutton =
document.queryselector("#enter-xr"); xrbutton.addeventlistener("click", onxrbuttonclick); projectionmatrixout =
document.queryselector("#projection-matrix div"); modelmatrixout =
document.queryselector("#model-view-matrix div"); cameramatrixout =
document.queryselector("#camera-matrix div"); mousematrixout =
document.queryselector("#mouse-matrix div"); if (!navigator.xr || enableforcepolyfil...
... function sessionstarted(session) { let refspacetype; xrsession = session; xrbutton.innertext = "exit webxr"; xrsession.addeventlistener("end", sessionended); let canvas =
document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); if (allowmouserotation) { canvas.addeventlistener("pointermove", handlepointermove); canvas.addeventlistener("contextmenu", (event) => { event.preventdefault(); }); } if (allowkeyboardmotion) {
document.addeventlistener("keydown", handlekeydown); } shaderprogram = initshaderprogram(gl, vss...
Example and tutorial: Simple synth keyboard - Web APIs
let keyboard =
document.queryselector(".keyboard"); let wavepicker =
document.queryselector("select[name='waveform']"); let volumecontrol =
document.queryselector("input[name='volume']"); references to elements we'll need access to are obtained: keyboard is the container element into which the keys will be placed.
... notefreq.foreach(function(keys, idx) { let keylist = object.entries(keys); let octaveelem =
document.createelement("div"); octaveelem.classname = "octave"; keylist.foreach(function(key) { if (key[0].length == 1) { octaveelem.appendchild(createkey(key[0], idx, key[1])); } }); keyboard.appendchild(octaveelem); });
document.queryselector("div[data-note='b'][data-octave='5']").scrollintoview(false); sineterms = new float32array([0, 0, 1, 0, 1]); cosine...
... function createkey(note, octave, freq) { let keyelement =
document.createelement("div"); let labelelement =
document.createelement("div"); keyelement.classname = "key"; keyelement.dataset["octave"] = octave; keyelement.dataset["note"] = note; keyelement.dataset["frequency"] = freq; labelelement.innerhtml = note + "<sub>" + octave + "</sub>"; keyelement.appendchild(labelelement); keyelement.addeventlistener("mousedown", notepressed, false); k...
Window: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html
document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
... bubbles yes cancelable yes (although specified as a simple event that isn't cancelable) interface event event handler property none the original target for this event is the
document that has loaded.
...for full details on this event please see the page on the
document: domcontentloaded event.
Window: beforeunload event - Web APIs
the beforeunload event is fired when the window, the
document and its resources are about to be unloaded.
... the
document is still visible and the event is still cancelable at this point.
... attaching an event handler/listener to window or
document's beforeunload event prevents browsers from using in-memory page navigation caches, like firefox's back-forward cache or webkit's page cache.
Window.content - Web APIs
in such cases, content returns a reference to the window object for the
document currently displayed in the browser.
... syntax var windowobject = window.content; example executing the following code in a chrome xul window with a <browser type="content-primary"/> element in it draws a red border around the first div on the page currently displayed in the browser: content.
document.getelementsbytagname("div")[0].style.border = "solid red 1px"; specification none.
... see also working with windows in chrome code when accessing content
documents from privileged code, be aware of xpcnativewrappers.
Window.getDefaultComputedStyle() - Web APIs
example simple example var elem1 =
document.getelementbyid("elemid"); var style = window.getdefaultcomputedstyle(elem1); longer example <style> #elem-container { position: absolute; left: 100px; top: 200px; height: 100px; } </style> <div id="elem-container">dummy</div> <div id="output"></div> <script> var elem =
document.getelementbyid("elem-container"); var thecssprop = window.getdefaultcomputedstyle(elem).posi...
...tion;
document.getelementbyid("output").innerhtml = thecssprop; // will output "static" </script> use with pseudo-elements the getdefaultcomputedstyle() method can pull style info from pseudo-elements (e.g., ::before or ::after).
... <style> h3:after { content: ' rocks!'; } </style> <h3>generated content</h3> <script> var h3 =
document.queryselector('h3'), result = getdefaultcomputedstyle(h3, ':after').content; console.log('the generated content is: ', result); // returns 'none' </script> notes the returned value is, in certain known cases, expressly incorrect by deliberate intent.
Window.getSelection() - Web APIs
examples function foo() { var selobj = window.getselection(); alert(selobj); var selrange = selobj.getrangeat(0); // do stuff with the range } notes string representation of the selection object in javascript, when an object is passed to a function expecting a string (like window.alert() or
document.write()), the object's tostring() method is called and the returned value is passed to the function.
... related objects you can call
document.getselection(), which works identically to window.getselection().
...
document.activeelement returns the focused element.
Window: load event - Web APIs
lass="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log =
document.queryselector('.event-log-contents'); const reload =
document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; });
document.addeventlistener('readystatechange', (event) => { log...
....textcontent = log.textcontent + `readystate: ${
document.readystate}\n`; });
document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment ui eventsthe definition of 'load' in that specification.
... living standard this links to the section in the steps that are carried out at the end of loading a
document.
Window.open() - Web APIs
see window features below for
documentation of each of the features that can be specified.
... tip: for accessibility reasons, it is strongly recommended to set this feature always on scrollbars if this feature is on, the new secondary window will show horizontal and/or vertical scrollbar(s) if the
document doesn't fit into the window's viewport.
...some user agents that cannot create new windows, like ms web tv, will fetch the referenced resource and append it at the end of the current
document.
Window.scroll() - Web APIs
the window.scroll() method scrolls the window to a particular place in the
document.
... syntax window.scroll(x-coord, y-coord) window.scroll(options) parameters x-coord is the pixel along the horizontal axis of the
document that you want displayed in the upper left.
... y-coord is the pixel along the vertical axis of the
document that you want displayed in the upper left.
Window.scrollByLines() - Web APIs
the window.scrollbylines() method scrolls the
document by the specified number of lines.
... syntax window.scrollbylines(lines) parameters lines is the number of lines to scroll the
document by.
... example <!-- scroll up the
document by 5 lines --> <button id="scroll-up" onclick="scrollbylines(-5);">up 5 lines</button> <!-- scroll down the
document by 5 lines --> <button id="scroll-down" onclick="scrollbylines(5);">down 5 lines</button> specification this is not part of any specification.
Window.scrollMaxX - Web APIs
the window.scrollmaxx read-only property returns the maximum number of pixels that the
document can be scrolled horizontally.
... example // scroll to right edge of the page let maxx = window.scrollmaxx; window.scrollto(maxx, 0); notes do not use this property to get the total
document width, which is not equivalent to window.innerwidth + window.scrollmaxx, because window.innerwidth includes the width of any visible vertical scrollbar, thus the result would exceed the total
document width by the width of any visible vertical scrollbar.
... instead use
document.body.scrollwidth.
Window.scrollMaxY - Web APIs
the window.scrollmaxy read-only property returns the maximum number of pixels that the
document can be scrolled vertically.
... example // scroll to the bottom of the page let maxy = window.scrollmaxy; window.scrollto(0, maxy); notes do not use this property to get the total
document height, which is not equivalent to window.innerheight + window.scrollmaxy, because window.innerheight includes the width of any visible horizontal scrollbar, thus the result would exceed the total
document height by the width of any visible horizontal scrollbar.
... instead use
document.body.scrollheight.
Window.scrollTo() - Web APIs
window.scrollto() scrolls to a particular set of coordinates in the
document.
... syntax window.scrollto(x-coord, y-coord) window.scrollto(options) parameters x-coord is the pixel along the horizontal axis of the
document that you want displayed in the upper left.
... y-coord is the pixel along the vertical axis of the
document that you want displayed in the upper left.
Window.showModalDialog() - Web APIs
the window.showmodaldialog() created and displayed a modal dialog box containing a specified html
document.
... syntax returnval = window.showmodaldialog(uri[, arguments][, options]); returnval holds the returnvalue property as set by the
document specified by uri.
... uri is the url of the
document to display in the dialog.
WindowEventHandlers.onpopstate - Web APIs
a popstate event is dispatched to the window each time the active history entry changes between two history entries for the same
document.
...the popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in javascript), when navigating between two history entries for the same
document.
... examples for example, a page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " +
document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original histo...
XMLHttpRequest.multipart - Web APIs
this boolean indicates if the response is expected to be a stream of possibly multiple xml
documents.
... this enables support for server push; for each xml
document that's written to this request, a new xml dom
document is created and the onload handler is called between
documents.
... note: when this is set, the onload handler and other event handlers are not reset after the first xml
document is loaded, and the onload handler is called after each part of the response is received.
XMLHttpRequest.send() - Web APIs
this can be: a
document, in which case it is serialized before being sent.
...}; xhr.send(null); // xhr.send('string'); // xhr.send(new blob()); // xhr.send(new int8array()); // xhr.send(
document); example: post var xhr = new xmlhttprequest(); xhr.open("post", '/server', true); //send the proper header information along with the request xhr.setrequestheader("content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { // call a function when the state changes.
... } } xhr.send("foo=bar&lorem=ipsum"); // xhr.send(new int8array()); // xhr.send(
document); specifications specification status comment xmlhttprequestthe definition of 'send()' in that specification.
XMLHttpRequest - Web APIs
xmlhttprequest.response read only returns an arraybuffer, blob,
document, javascript object, or a domstring, depending on the value of xmlhttprequest.responsetype, that contains the response entity body.
... xmlhttprequest.responsexml read only returns a
document containing the response to the request, or null if the request was unsuccessful, has not yet been sent, or cannot be parsed as xml or html.
...see the
documentation for open().
XPathEvaluator.evaluate() - Web APIs
the evaluate() method of the xpathevaluator interface executes an xpath expression on the given node or
document and returns an xpathresult.
... wrong_
document_err if the provided context node is from a
document that is not supported by the xpathevaluator, a domexception of type wrong_
document_err is raised.
... html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var evaluator = new xpathevaluator(); var result = evaluator.evaluate("//div",
document, null, xpathresult.ordered_node_snapshot_type);
document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.evaluate()' in that specification.
XPathEvaluator - Web APIs
it is implemented by the
document interface.
... xpathevaluator.creatensresolver() adapts any dom node to resolve namespaces allowing the xpath expression to be evaluated relative to the context of the node where it appeared within the
document.
... html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(
document, xpathresult.ordered_node_snapshot_type);
document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator' in that specification.
XPathExpression.evaluate() - Web APIs
the evaluate() method of the xpathexpression interface executes an xpath expression on the given node or
document and returns an xpathresult.
... wrong_
document_err if the provided context node is from a
document that is not supported by the xpathevaluator, a domexception of type wrong_
document_err is raised.
... html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(
document, xpathresult.ordered_node_snapshot_type);
document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathexpression.evaluate()' in that specification.
XPathExpression - Web APIs
this interface is a compiled xpath expression that can be evaluated on a
document or specific node to return information from its dom tree.
... methods xpathexpression.evaluate() evaluates the xpath expression on the given node or
document.
... html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression(xpath); var result = expression.evaluate(
document, xpathresult.ordered_node_snapshot_type);
document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathexpression' in that specification.
XPathResult.invalidIteratorState - Web APIs
it is true if xpathresult.resulttype is unordered_node_iterator_type or ordered_node_iterator_type and the
document has been modified since this result was returned.
... html <div>xpath example</div> <p>iterator state: <output></output></p> javascript var xpath = "//div"; var result =
document.evaluate(xpath,
document, null, xpathresult.any_type, null); // invalidates the iterator state
document.queryselector("div").remove();
document.queryselector("output").textcontent = result.invaliditeratorstate ?
... "invalid" : "valid"; result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.invaliditeratorstate' in that specification.
XSLT Basic Example - Web APIs
the example will take an xml
document that contains information (title, list of authors and body text) about an article and present it in an human readable form.
...the xml
document (example.xml) contains the information about the article.
... figure 1 : simple xslt example xml
document (example.xml) : <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example.xsl"?> <article> <title>my article</title> <authors> <author>mr.
ARIA: article role - Accessibility
the article role indicates a section of a page that could easily stand on its own on a page, in a
document, or on a website.
...</article> description the article role denotes a section of a
document, page, or site that, if it were standing on its own, could be viewed as a complete
document, page or site.
... examples the restaurant recommendations feed display along with its separate
documentation from the wai-aria 1.1 authoring practices feed design pattern specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'article' in that specification.
ARIA: form role - Accessibility
make sure to have a unique label on each form in a
document to help users understand the purpose of the form.
...</form> accessibility concerns use sparingly landmark roles are intended to identify larger overall sections of the
document.
... added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the
document.
Web applications and ARIA FAQ - Accessibility
var progressbar =
document.getelementbyid("percent-loaded"); // set its aria roles and states, so that assistive technologies know what kind of widget it is.
...and here is the javascript code that will ensure the progress bar still works in older browsers: var progressbar =
document.getelementbyid("progress-bar"); // check to see if the browser supports the html5 <progress> tag.
...
document.getelementbyid("update-button").addeventlistener("click", function (e) { updateprogress(75); e.preventdefault(); }, false); } initdemo(); how do assistive technologies work?
Architecture - Accessibility
mozilla exposes a
document containment hierarchy with text and embedded objects.
...previously the hyper link interface was really only for links, but the design could not fully represent an html
document hierarchy.
...the following magic offsets are useful to define in your code: #define char_offset_end_of_line = -1 #define char_offset_caret = -2 more information many more details on the mozilla
document hierarchy are in the original design
document for newatk.
Mobile accessibility checklist - Accessibility
this
document provides a concise checklist of accessibility requirements for mobile app developers.
... headings must not break hierarchical structure <h1>top level heading</h1> <h2>secondary heading</h2> <h2>another secondary heading</h2> <h3>low level heading</h3> aria landmark roles should be used to describe an app or
document structure, such as banner, complementary, contentinfo, main, navigation, search.
... note: the original version of this
document was written by yura zenevich.
Accessibility
other
documentation understanding the web content accessibility guidelines this set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the w3c web content accessibility guidelines 2.0 (wcag 2.0 or just wcag, for the purposes of this writing).
... aria a collection of articles to learn how to use aria to make your html
documents more accessible.
... assistive technology (at) development a collection of articles intended for at developers mobile accessibility checklist this
document provides a concise checklist of accessibility requirements for mobile app developers.
-webkit-text-stroke-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples varying the stroke color html <p>text with stroke</p> <input type="color" value="#ff0000"> css p { margin: 0; font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var colorpicker =
document.queryselector("input"); colorpicker.addeventlistener("change", function(evt) {
document.queryselector("p").style.webkittextstrokecolor = evt.target.value; }); results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-color' in that specification.
... living standard initial standardization safari css reference '-webkit-text-stroke-color' in that
document.
... non-standard unofficial
documentation initial
documentation ...
:first - CSS: Cascading Style Sheets
the :first css pseudo-class, used with the @page at-rule, represents the first page of a printed
document.
...you can only change the margins, orphans, widows, and page breaks of the
document.
... syntax :first examples html <p>first page.</p> <p>second page.</p> <button>print!</button> css @page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; } javascript
document.queryselector("button").addeventlistener('click', () => { window.print(); }); result press the "print!" button to print the example.
:fullscreen - CSS: Cascading Style Sheets
examples in this example, the color of a button is changed depending on whether or not the
document is in full-screen mode.
...: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the
document is in full-screen mode.
... #fs-toggle:not(:fullscreen) { background-color: #afa; } when the
document is in full-screen mode, the following css applies instead, setting the background color to a pale shade of red.
:left - CSS: Cascading Style Sheets
the :left css pseudo-class, used with the @page at-rule, represents all left-hand pages of a printed
document.
... /* selects any left-hand pages when printing */ @page :left { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the
document.
...all other properties will be ignored, and only the page box, not the
document content on the page, will be affected.
:right - CSS: Cascading Style Sheets
the :right css pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed
document.
... /* selects any right-hand pages when printing */ @page :right { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the
document.
...all other properties will be ignored, and only the page box, not the
document content on the page, will be affected.
@page - CSS: Cascading Style Sheets
the @page css at-rule is used to modify some css properties when printing a
document.
... marks adds crop and/or registration marks to the
document.
...you can only change the margins, orphans, widows, and page breaks of the
document.
zoom - CSS: Cascading Style Sheets
the zoom css descriptor sets the initial zoom factor of a
document defined by the @viewport at-rule.
... syntax /* keyword value */ zoom: auto; /* <number> values */ zoom: 0.8; zoom: 2.0; /* <percentage> values */ zoom: 150%; values auto the user agent will set the
document's initial zoom factor.
... the user agent may use the size of canvas area on which the
document is rendered to determine that factor.
At-rules - CSS: Cascading Style Sheets
@
document — a conditional group rule that will apply its content if the
document in which the style sheet is applied meets the criteria of the given condition.
... (deferred to level 4 of css spec) @page — describes the aspect of layout changes that will be applied when printing the
document.
... conditional group rules are defined in css conditionals level 3 and are: @media, @supports, @
document.
Using CSS animations - CSS: Cascading Style Sheets
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.addeventlistener("animationstart", listener, false); element.addeventlistener("animationend", listener, false); element.addeventlistener("animationiteration", listener, false); element.classname = "slidein"; this is pretty standard code; you can get details on how it works in the
documentation for eventtarget.addeventlistener().
... function listener(event) { var l =
document.createelement("li"); switch(event.type) { case "animationstart": l.innerhtml = "started: elapsed time is " + event.elapsedtime; break; case "animationend": l.innerhtml = "ended: elapsed time is " + event.elapsedtime; break; case "animationiteration": l.innerhtml = "new loop started at time " + event.elapsedtime; break; }
document.getelementbyi...
CSS Box Alignment - CSS: Cascading Style Sheets
this
document details the general concepts found in the specification.
... note: the
documentation for each layout method will detail how box alignment is applied there.
...this ensures that alignment works in the same way whichever writing mode the
document has.
Basic concepts of flexbox - CSS: Cascading Style Sheets
start and end lines another vital area of understanding is how flexbox makes no assumption about the writing mode of the
document.
...modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a
document and run towards the right hand side, with new lines appearing one under the other.
... the flex container an area of a
document laid out using flexbox is called a flex container.
Block and inline layout in normal flow - CSS: Cascading Style Sheets
the rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2 note that the css 2.1 specification describes
documents as being in a horizontal, top to bottom writing mode.
...however, everything described should work in the same way if your
document is in a vertical writing mode.
...due to the default behaviour of these elements, an html
document with no css styling at all, will display in a readable way.
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
i have added dir="rtl" to the html element, which switches the writing mode from the default for an english language
document of ltr.
...the other properties will change the way that text flows in our
document, matching the different writing modes found around the world.
... mixed writing modes and grid layout in addition to displaying
documents, using the correct writing mode for the language, writing modes can be used creatively within
documents that are otherwise ltr.
Consistent list indentation - CSS: Cascading Style Sheets
indenting it twice so how will all this appear in a
document?
... at the moment, we have a situation analogous to these styles: ul, li {margin-left: 0; padding-left: 0;} if we dropped this list into a
document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window.
... original
document information author(s): eric a.
CSS selectors - CSS: Cascading Style Sheets
syntax: * ns|* *|* example: * will match all the elements of the
document.
...there should be only one element with a given id in a
document.
... pseudo pseudo classes the : pseudo allow the selection of elements based on state information that is not contained in the
document tree.
Syntax - CSS: Cascading Style Sheets
the real goal is to apply different declarations to different parts of the
document.
...they are used to convey meta-data information (like @charset or @import), conditional information (like @media or @
document), or descriptive information (like @font-face).
...these statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which the browser runs matches the expressed condition; the @
document at-rule content is applied only if the current page matches some conditions, and so on.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
custom properties (sometimes referred to as css variables or cascading variables) are entities defined by css authors that contain specific values to be reused throughout a
document.
...a common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your html
document: :root { --main-bg-color: brown; } however, this doesn't always have to be the case: you maybe have a good reason for limiting the scope of your custom properties.
...by declaring a custom property on the :root pseudo-class and using it where needed throughout the
document, a css author can reduce the need for repetition: :root { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color:...
display - CSS: Cascading Style Sheets
see the table at the end of this
document for all of the individual specifications.
... none turns off the display of an element so that it has no effect on layout (the
document is rendered as though the element did not exist).
...</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; padding-top: 10px; } article { background-color: red; } article span { background-color: black; color: white; margin: 1px; } article, span { padding: 10px; border-radius: 7px; } article, div { margin: 20px; } javascript const articles =
document.queryselectorall('.container'); const select =
document.queryselector('select'); function updatedisplay() { articles.foreach((article) => { article.style.display = select.value; }); } select.addeventlistener('change', updatedisplay); updatedisplay(); result note: you can find more examples in the pages for each separate display data type, linked above.
font - CSS: Cascading Style Sheets
prefixed system font keywords browsers often implement several more, prefixed, keywords: gecko implements -moz-window, -moz-
document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field.
...opinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black; text-align: center; width: 80px; } .mandatory { border-bottom-color: red; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .tar { width: 40px; text-align: right; } .fontfamily { display: inline-block; } javascript var textareas =
document.getelementsbyclassname("curcss"), shorttext = "", getcheckedvalue, setcss, getproperties, injectcss; getproperties = function () { shorttext = getcheckedvalue("font_style") + " " + getcheckedvalue("font_variant") + " " + getcheckedvalue("font_weight") + " " + getcheckedvalue("font_size") + getcheckedvalue("line_height") + " " + getchecked...
...value("font_family"); return shorttext; } getcheckedvalue = function(radio_name) { oradio =
document.forms[0].elements[radio_name]; for (var i = 0; i < oradio.length; i++) { if(oradio[i].checked) { var propinput = "input_" + radio_name, curelemname = "input_" + radio_name, curelem =
document.getelementbyid(curelemname); curelem.value = oradio[i].value; return oradio[i].value; } } } setcss = function () { getproperties(); injectcss(shorttext); } injectcss = function(cssfragment) { old =
document.body.getelementsbytagname("style"); if (old.length > 1) { old[1].parentelement.removechild(old[1]); } css =
document.createelement("style"); css.innerhtml = ".fontshorthand{font: " + cssfragment + "}";
document.body.appendchild(c...
Specified value - CSS: Cascading Style Sheets
the specified value of a css property is the value it receives from the
document's style sheet.
... the specified value for a given property is determined according to the following rules: if the
document's style sheet explicitly specifies a value for the property, the given value will be used.
... if the
document's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element.
WAI ARIA Live Regions/API Support - Developer guides
developers should use the aria live regions developer
documentation.
... firefox 3 contains important improvements to the way the mozilla engine exposes live changes in a
document.
... events fired for web page mutations what changed in
document?
Content categories - Developer guides
main content categories metadata content elements belonging to the metadata content category modify the presentation or the behavior of the rest of the
document, set up links to other
documents, or convey other out of band information.
...f it is a descendant of a <map> element <del>, if it contains only phrasing content <ins>, if it contains only phrasing content <link>, if the itemprop attribute is present <map>, if it contains only phrasing content <meta>, if the itemprop attribute is present embedded content embedded content imports another resource or inserts content from another mark-up language or namespace into the
document.
... script-supporting elements script-supporting elements are elements which don't directly contribute to the rendered output of a
document.
Introduction to HTML5 - Developer guides
declaring that the
document contains html5 mark-up with the html5 doctype the doctype for html5 is very simple.
...now, it is very simple: <meta charset="utf-8"> place this right after your <head>, as some browsers restart the parsing of an html
document if the declared character set is different from what they had anticipated.
... also, if you are not currently using utf-8, it's recommended that you switch to it in your web pages, as it simplifies character handling in
documents using different scripts.
Index - Developer guides
5 wai aria live regions/api support ajax, accessibility firefox 3 contains important improvements to the way the mozilla engine exposes live changes in a
document.
... 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.
... 37 parsing and serializing xml ajax, add-ons, dom, dom parsing,
document, extensions, guide, html
document, json, parsing, parsing xml, serializing, serializing xml, xml, xml
document, xmlhttprequest in this article, we'll look at the objects provided by the web platform to make the common tasks of serializing and parsing xml easy.
Introduction to Web development - Developer guides
documentation topics html the basics of hypertext mark-up langage (html) — what exactly is html?
... basic structure of a web page — the doctype and
document 'tree' fundamental html elements — structural, head, list, form elements and more, explained by category.
... advanced learning advanced javascript — john resig's guide to advanced javascript crockford on advanced javascript — a three part video series on advanced javascript concepts javascript garden —
documentation of the most quirky parts of javascript.
User input and controls - Developer guides
bear in mind that many browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this: var elem =
document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } else if (elem.msrequestfullscreen) { elem.msrequestfullscreen(); } else if (elem.mozrequestfullscreen) { elem.mozrequestfullscreen(); } else if (elem.webkitrequestfullscreen) { elem.webkitrequestfullscreen(); } note: to find more out about adding fullscreen functionality your application, read our docum...
...
</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.
... contenteditable demo this is a working example showing how contenteditable can be used to create an editable
document section, the state of which is then saved using localstorage.
<article>: The Article Contents element - HTML: Hypertext Markup Language
the html <article> element represents a self-contained composition in a
document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).
... a given
document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <article> element, possibly with one or more <section>s within.
... implicit aria role article permitted aria roles application,
document, feed, main, none, presentation, region dom interface htmlelement attributes this element only includes the global attributes.
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
the html <embed> element embeds external content at the specified point in the
document.
... note: this topic
documents only the element that is defined as part of html5.
... implicit aria role no corresponding role permitted aria roles application,
document, img, none, presentation dom interface htmlembedelement attributes this element's attributes include the global attributes.
<input type="password"> - HTML: Hypertext Markup Language
it must be a valid javascript regular expression, as used by the regexp type, and as
documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii.
... html <label for="userpassword">password: </label> <input id="userpassword" type="password" size="12"> <button id="selectall">select all</button> javascript
document.getelementbyid("selectall").onclick = function() {
document.getelementbyid("userpassword").select(); } result you can also use selectionstart and selectionend to get (or set) what range of characters in the control are currently selected, and selectiondirection to know which direction selection occurred in (or will be extended in, depending on your platform; see its
documentation for an exp...
... var ssn =
document.getelementbyid("ssn"); var current =
document.getelementbyid("current"); ssn.oninput = function(event) { current.innerhtml = ssn.value; } result specifications specification status comment html living standardthe definition of '<input type="password">' in that specification.
<input type="tel"> - HTML: Hypertext Markup Language
ion placeholder an example value to display inside the field when it has no value readonly a boolean attribute which, if present, indicates that the field's contents should not be user-editable size the number of characters wide the input field should be onscreen list the values of the list attribute is the id of a <datalist> element located in the same
document.
...it must be a valid javascript regular expression, as used by the regexp type, and as
documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii.
... var selectelem =
document.queryselector("select"); var inputelems =
document.queryselectorall("input"); selectelem.onchange = function() { for(var i = 0; i < inputelems.length; i++) { inputelems[i].value = ""; } if(selectelem.value === "us") { inputelems[2].parentnode.style.display = "inline"; inputelems[0].placeholder = "area code"; inputelems[0].pattern = "[0-9]{3}"; inputelems[1].placehold...
<input type="week"> - HTML: Hypertext Markup Language
you can also get and set the value in javascript using the input element's value property, for example: var weekcontrol =
document.queryselector('input[type="week"]'); weekcontrol.value = '2017-w45'; additional attributes in addition to the attributes common to <input> elements, week inputs offer the following attributes: attribute description max the latest year and week to accept as valid input min the earliest year and week to accept as valid input readonly a boolean ...
... // define variables var nativepicker =
document.queryselector('.nativeweekpicker'); var fallbackpicker =
document.queryselector('.fallbackweekpicker'); var fallbacklabel =
document.queryselector('.fallbacklabel'); var yearselect =
document.queryselector('#year'); var weekselect =
document.queryselector('#fallbackweek'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a ...
...new date input falls back to a text input or not var test =
document.createelement('input'); try { test.type = 'week'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the weeks dynamically populateweeks(); } function populateweeks() { // populate the week select with 52 weeks for(var i = 1; i <= 52; i++) { var option =
document.createelement('option'); option.textcontent = (i < 10) ?
<isindex> - HTML: Hypertext Markup Language
summary <isindex> was an obsolete html element that put a text field in a page for querying the
document.
... example <head> <isindex prompt="search
document..." action="/search"> </head> in past browsers, this would generate, at parse time, a dom tree equivalent to the following html: <form action="/search"> <hr> <label> search
document...
... on november 1992, indexes as links rather than
documents started by dan connolly who is pushing the idea that indexes are more links than
documents.
<keygen> - HTML: Hypertext Markup Language
only one form element in a
document can have the autofocus attribute, which is a boolean.
...the value of the attribute must be an id of a <form> element in the same
document.
...this attribute enables you to place <keygen> elements anywhere within a
document, not just as descendants of their form elements.
<label> - HTML: Hypertext Markup Language
for the id of a labelable form-related element in the same
document as the <label> element.
... the first element in the
document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element.
...if there are other elements which also match the id value, later in the
document, they are not considered.
<section>: The Generic Section element - HTML: Hypertext Markup Language
the html <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an html
document.
... implicit aria role region if the element has an accessible name, otherwise no corresponding role permitted aria roles alert, alertdialog, application, banner, complementary, contentinfo, dialog,
document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel dom interface htmlelement attributes this element only includes the global attributes.
...a rule of thumb is that a section should logically appear in the outline of a
document.
<select>: The HTML Select element - HTML: Hypertext Markup Language
only one form element in a
document can have the autofocus attribute.
...the value of this attribute must be the id of a <form> in the same
document.
... (if this attribute is not set, the <select> is associated with its ancestor <form> element, if any.) this attribute lets you associate <select> elements to <form>s anywhere in the
document, not just inside a <form>.
<video>: The Video Embed element - HTML: Hypertext Markup Language
the html video element (<video>) embeds a media player which supports video playback into the
document.
... autopictureinpicture a boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this
document and another
document or application.
... for example, to detect when audio tracks are added to or removed from a <video> element, you can use code like this: var elem =
document.queryselector("video"); elem.audiotracklist.onaddtrack = function(event) { trackeditor.addtrack(event.track); }; elem.audiotracklist.onremovetrack = function(event) { trackeditor.removetrack(event.track); }; this code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's ...
tabindex - HTML: Hypertext Markup Language
tabindex="0" means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values and its order is defined by the
document's source order.
...if multiple elements share the same positive tabindex value, their order relative to each other follows their position in the
document source.
...instead, write the
document with the elements in a logical sequence.
Content negotiation - HTTP
in http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a
document, which image format, or which content encoding).
... principles of content negotiation a specific
document is called a resource.
... the accept header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an html page or an image, a video, or a script: it is different when fetching a
document entered in the address bar or an element linked via an <img>, <video> or <audio> element.
Using HTTP cookies - HTTP
a cookie with the httponly attribute is inaccessible to the javascript
document.cookie api; it is sent only to the server.
... javascript access using
document.cookie new cookies can be created via javascript using the
document.cookie property, and existing cookies can be accessed from javascript as well, if the httponly flag is not set.
...
document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry"; console.log(
document.cookie); // logs "yummy_cookie=choco; tasty_cookie=strawberry" cookies created via javascript cannot include the httponly flag.
Feature Policy - HTTP
block the use of outdated apis like synchronous xhr and
document.write().
...for every feature controlled by feature policy, the feature is only enabled in the current
document or frame if its origin matches the allowed list of origins.
... inferring the policy scripts can programatically query information about the feature policy via the featurepolicy object located at either
document.featurepolicy or htmliframeelement.featurepolicy.
CSP: navigate-to - HTTP
the http content-security-policy (csp) navigate-to directive restricts the urls to which a
document can initiate navigations by any means including <form> (if form-action is not specified), <a>, window.location, window.open, etc.
... this is an enforcement on what navigations this
document initiates not on what this
document is allowed to navigate to.
... 'self' refers to the origin from which the protected
document is being served, including the same url scheme and port number.
CSP: referrer - HTTP
"origin" only send the origin of the
document as the referrer in all cases.
... the
document https://example.com/page.html will send the referrer https://example.com/.
... "origin-when-cross-origin" / "origin-when-crossorigin" send a full url when performing a same-origin request, but only send the origin of the
document for other cases.
X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the
document, including images, css, javascript, and so forth.
... also, by default, prefetching of embedded link hostnames is not performed on
documents loaded over https.
... examples turning on and off prefetching you can either send the x-dns-prefetch-control header server-side, or from individual
documents, using the http-equiv attribute on the <meta> element, like this: <meta http-equiv="x-dns-prefetch-control" content="off"> you can reverse this setting by setting content to "on".
Equality comparisons and sameness - JavaScript
but most browsers permit a very narrow class of objects (specifically, the
document.all object for any page), in some contexts, to act as if they emulate the value undefined.
...refer to the
documentation for the individual methods.
...refer to the
documentation for the individual methods.
Indexed collections - JavaScript
the simplest way to do this is as follows: let colors = ['red', 'green', 'blue'] for (let i = 0; i < colors.length; i++) { console.log(colors[i]) } if you know that none of the elements in your array evaluate to false in a boolean context—if your array consists only of dom nodes, for example—you can use a more efficient idiom: let divs =
document.getelementsbytagname('div') for (let i = 0, div; div = divs[i]; i++) { /* process div in some way */ } this avoids the overhead of checking the length of the array, and ensures that the div variable is reassigned to the current item each time around the loop for added convenience.
... working with array-like objects some javascript objects, such as the nodelist returned by
document.getelementsbytagname() or the arguments object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods.
...int number (16 significant digits e.g., 1.123...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint uint64_t (unsigned long long) for more information, see javascript typed arrays and the reference
documentation for the different typedarray objects.
About the JavaScript reference - JavaScript
where to find javascript information javascript
documentation of core language features (pure ecmascript, for the most part) includes the following: the javascript guide the javascript reference if you are new to javascript, start with the guide.
... structure of the reference in the javascript reference you can find the following chapters: standard built-in objects this chapter
documents all the javascript standard built-in objects, along with their methods and properties.
... expressions and operators this chapter
documents all the javascript language operators, expressions and keywords.
TypeError: can't access dead object - JavaScript
the javascript exception "can't access dead object" occurs when firefox disallows add-ons to keep strong references to dom objects after their parent
document has been destroyed to improve in memory usage and to prevent memory leaks.
... to improve in memory usage and to prevent memory leaks, firefox disallows add-ons to keep strong references to dom objects after their parent
document has been destroyed.
...to avoid these issues, references to dom nodes in foreign
document should instead be stored in an object which is specific to that
document, and cleaned up when the
document is unloaded, or stored as weak references.
Proxy - JavaScript
obj, prop, newval) { let oldval = obj[prop]; if (prop === 'selected') { if (oldval) { oldval.setattribute('aria-selected', 'false'); } if (newval) { newval.setattribute('aria-selected', 'true'); } } // the default behavior to store the value obj[prop] = newval; // indicate success return true; } }); let i1 = view.selected =
document.getelementbyid('item-1'); //giving error here, i1 is null console.log(i1.getattribute('aria-selected')); // 'true' let i2 = view.selected =
document.getelementbyid('item-2'); console.log(i1.getattribute('aria-selected')); // 'false' console.log(i2.getattribute('aria-selected')); // 'true' note: even if selected: !null, then giving oldval.setattribute is not a function value correction and...
...'browser' }] console.log(products.types); // ['browser', 'mailer'] console.log(products.number); // 3 a complete traps list example now in order to create a complete sample traps list, for didactic purposes, we will try to proxify a non-native object that is particularly suited to this type of operation: the doccookies global object created by the "little framework" published on the
document.cookie page.
...get the "doccookies" object here: https://developer.mozilla.org/docs/dom/
document.cookie#a_little_framework.3a_a_complete_cookies_reader.2fwriter_with_full_unicode_support */ var doccookies = new proxy(doccookies, { get: function (otarget, skey) { return otarget[skey] || otarget.getitem(skey) || undefined; }, set: function (otarget, skey, vvalue) { if (skey in otarget) { return false; } return otarget.setitem(skey, vvalue); }, deleteproperty: function (otarget, skey) { if (skey in otarget) { return false; } return otarget.removeitem(skey); }, enumerate: function (otarget, skey) { return otarget.keys(); }, ownkeys: function (otarget, skey) { return otarget.keys(); }, has: function (otarget, skey) { return skey in o...
SharedArrayBuffer - JavaScript
with a few security measures, postmessage() will no longer throw for sharedarraybuffer objects and shared memory across threads will be available: as a baseline requirement, your
document needs to be in a secure context.
... for top-level
documents, two headers will need to be set to cross-origin isolate your site: cross-origin-opener-policy with same-origin as value (protects your origin from attackers) cross-origin-embedder-policy with require-corp as value (protects victims from your origin) cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp to check if cross origin isolation has been successful, you can test against the crossoriginisolated property available to window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } see also planned changes to shared memory which is starting to roll out to browsers (firefox 79, for example.) always use the new operator to create a sharedarraybuffer sharedarraybuffer construct...
... examples creating a new sharedarraybuffer var sab = new sharedarraybuffer(1024); slicing the sharedarraybuffer sab.slice(); // sharedarraybuffer { bytelength: 1024 } sab.slice(2); // sharedarraybuffer { bytelength: 1022 } sab.slice(-2); // sharedarraybuffer { bytelength: 2 } sab.slice(0, 1); // sharedarraybuffer { bytelength: 1 } using it in a webgl buffer const canvas =
document.queryselector('canvas'); const gl = canvas.getcontext('webgl'); const buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, sab, gl.static_draw); specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer' in that specification.
String.prototype.link() - JavaScript
the returned string can then be added to the
document via
document.write() or element.innerhtml.
... links created with the link() method become elements in the links array of the
document object.
... see
document.links.
typeof - JavaScript
typeof undeclaredvariable === 'undefined'; typeof newletvariable; // referenceerror typeof newconstvariable; // referenceerror typeof newclass; // referenceerror let newletvariable; const newconstvariable = 'hello'; class newclass{}; exceptions all current browsers expose a non-standard host object
document.all with type undefined.
... typeof
document.all === 'undefined'; although the specification allows custom type tags for non-standard exotic objects, it requires those type tags to be different from the predefined ones.
... the case of
document.all having type 'undefined' is classified in the web standards as a "willful violation" of the original ecma javascript standard.
OpenSearch description format
(see reference material for links to other browsers'
documentation.) firefox also supports additional features not in the opensearch standard, such as search suggestions and the <searchform> element.
...the template attribute should be the url of the opensearch
document to automatically update to.
... reference material opensearch
documentation safari 8.0 release notes: quick website search microsoft edge dev guide: search provider discovery the chromium projects: tab to search imdb.com has a working osd.xml opensearch plugin generator ready2search - create opensearch plugins.
Critical rendering path - Web Performance
optimizing the critical render path improves render performance.the critical rendering path includes the
document object model (dom), css object model (cssom), render tree and layout.
... the
document object model is created as the html is parsed.
...
document object model dom construction is incremental.
Structural overview of progressive web apps - Progressive web apps (PWAs)
for working examples and more information, see the streams api
documentation.
...i++) { var entry = template.replace(/pos/g,(i+1)) .replace(/slug/g,games[i].slug) .replace(/name/g,games[i].name) .replace(/author/g,games[i].author) .replace(/twitter/g,games[i].twitter) .replace(/website/g,games[i].website) .replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; };
document.getelementbyid('content').innerhtml = content; then it registers a service worker: if ("serviceworker" in navigator) { navigator.serviceworker.register("/pwa-examples/js13kpwa/sw.js"); } after that, the app adds a handler for clicks on a button whose id is notifications; this handler requests permission to send notifications to the user, then generates and sends a random notification.
... var button =
document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if (result === 'granted') { randomnotification(); } }); }); the randomnotification() function follows, rounding out the last of the code in the file: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+games[randomitem].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notiftitle, options); settimeout(randomnotification, 30000); } the service worker the last file we'll briefly look at he...
Web technology reference
below you'll find links to a selection of key
documentation for each.
...html provides a means to create structured
documents made up of blocks called html elements that are delineated by tags, written using angle brackets.
... some introduce content into the page directly, others provide information about
document text and may include other tags as sub-elements.
requiredFeatures - SVG: Scalable Vector Graphics
ts all of the language features from http://www.w3.org/tr/svg11/feature#svg-animation plus the following features: http://www.w3.org/tr/svg11/feature#hyperlinking http://www.w3.org/tr/svg11/feature#scripting http://www.w3.org/tr/svg11/feature#view http://www.w3.org/tr/svg11/feature#cursor http://www.w3.org/tr/svg11/feature#graphicaleventsattribute http://www.w3.org/tr/svg11/feature#
documenteventsattribute http://www.w3.org/tr/svg11/feature#animationeventsattribute http://www.w3.org/tr/svg11/feature#svgdom-dynamic the browser supports all of the dom interfaces and methods that correspond to the language features for http://www.w3.org/tr/svg11/feature#svg-dynamic.
...otlight>, <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#basicfilter the browser supports the <filter>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <feoffset>, <fetile>, <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#
documenteventsattribute the browser supports the onunload, onabort, onerror, onresize, onscroll and onzoom attributes http://www.w3.org/tr/svg11/feature#graphicaleventsattribute the browser supports the onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload attributes http://www.w3.org/tr/svg11/feature#animationeventsattribute the...
...r</text> <!-- testing : http://www.w3.org/tr/svg11/feature#basicfilter --> <rect class="ko" x="10" y="810" height="25" width="430" /> <rect class="ok" x="10" y="810" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#basicfilter" /> <text x="20" y="827">http://www.w3.org/tr/svg11/feature#basicfilter</text> <!-- testing : http://www.w3.org/tr/svg11/feature#
documenteventsattribute --> <rect class="ko" x="10" y="835" height="25" width="430" /> <rect class="ok" x="10" y="835" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#
documenteventsattribute" /> <text x="20" y="852">http://www.w3.org/tr/svg11/feature#
documenteventsattribute</text> <!-- testing : http://www.w3.org/tr/svg11/feature#graphicaleventsattribute --> <rec...
zoomAndPan - SVG: Scalable Vector Graphics
the zoomandpan attribute specifies whether the svg
document can be magnified and panned.
... magnification in this context means the effect of a supplemental scale and translate transformation on the outermost svg
document fragment.
... panning represents a translation (i.e., a shift) transformation on an svg
document fragment in response to a user interface action.
<script> - SVG: Scalable Vector Graphics
the svg script element allows to add scripts to an svg
document.
...www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` }
document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element.
... value type: <url> ; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes,
document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<script>' in that specification.
<symbol> - SVG: Scalable Vector Graphics
the use of symbol elements for graphics that are used multiple times in the same
document adds structure and semantics.
...
documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.
... value type: <length>|<percentage> ; default value: 0; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes,
document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transfor...
Basic shapes - SVG: Scalable Vector Graphics
however, since they're used in most svg
documents, it's necessary to give them some sort of introduction.
... basic shapes to insert a shape, you create an element in the
document.
...some are slightly redundant in that they can be created by other shapes, but they're all there for your convenience and to keep your svg
documents as short and as readable as possible.
Positions - SVG: Scalable Vector Graphics
that is, the top left corner of the
document is considered to be the point (0,0), or point of origin.
...however, this is the same way elements in html are positioned (by default, ltr
documents are considered not the rtl
documents which position x from right-to-left).
... in the most basic case one pixel in an svg
document maps to one pixel on the output device (a.k.a.
Secure contexts - Web security
a particular
document is considered to be in a secure context when it is the active
document of a top-level browsing context (basically, a containing window or tab) that is a secure context.
... for example, even for a
document delivered over tls within an <iframe>, its context is not considered secure if it has an ancestor that was not also delivered over tls.
...that’s because the determination of whether or not a particular
document is in a secure context is based only on considering it within the top-level browsing context with which it is associated — and not whether a non-secure context happened to be used to create it.
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
this feature controls how serializing the constructed output
document works.
... however firefox never serializes the output
document and so the attribute isn't really applicable.
... while we could try to add some heuristics to serialize and reparse just the part of the output
document which has disable-output-escaping applied, heuristics often get things wrong and lead to surprising results, hence we've been reluctant to add this so far.
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
the following
document passes the two parameters "color" and "size" to the stylesheet "style.xsl".
... both the xslt-param and the xslt-param-namespace pis must appear in the prolog of the
document, i.e.
...
document() seems useful, but it seems tricky to maintain the invariant that generate-id() should produce the same string for the same
document.
Introduction - XSLT: Extensible Stylesheet Language Transformations
javascript can enable a web application to load xml data, process it via xslt into a presentable form and then add it into an existing
document.
... xslt allows the author to directly manipulate the structure of a
document.
... for example, it permits the rearranging and sorting of elements; it also provides more fine-grained control of the resulting
document's structure.
Web technology for developers
below you'll find links to our web technology
documentation.
...
documentation for web developers web developer reference a list of all references for web technologies, including those for html, css, and so on.
... developing web applications
documentation for web application developers; web apps are true write-once, deploy anywhere apps for mobile, desktop, and firefox os.
Creating Reusable Modules - Archive of obsolete content
the
documentation for that interface includes an example which we can adapt like this: var {cc, ci} = require("chrome"); function promptforfile() { const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); var window = require("sdk/window/utils").getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifilepicker.modeopen);...
... } return path; } hash function firefox has built-in support for hash functions, exposed via the nsicryptohash xpcom interface the
documentation page for that interface includes an example of calculating an md5 hash of a file's contents, given its path.
Getting Started (jpm) - Archive of obsolete content
there's comprehensive reference
documentation covering all the commands you can use and all the options they take.
...there's reference
documentation for all the high-level and low-level apis in the sdk.
Logging - Archive of obsolete content
the following add-on logs the html content of every tab the user loads, by calling console.log() inside a content script: require("sdk/tabs").on("ready", function(tab) { tab.attach({ contentscript: "console.log(
document.body.innerhtml);" }); }); console output if you are running your add-on from the command line (for example, executing jpm run or jpm test) then the console's messages appear in the command shell you used.
... see "logging levels" in the console reference
documentation for more information on this.
Modifying the Page Hosted by a Tab - Archive of obsolete content
here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: '
document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory.
... the content script now needs to look like this: // "self" is a global object in content scripts // listen for a "drawborder" self.port.on("drawborder", function(color) {
document.body.style.border = "5px solid " + color; }); in the add-on script, we'll send the content script a "drawborder" message using the object returned from attach(): var self = require("sdk/self"); var tabs = require("sdk/tabs"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { var worker = ta...
Bookmarks - Archive of obsolete content
firefox 2 and earlier creating a new bookmark var win = mybrowser.contentwindow; // get the bookmarks service const bmsvc = components.classes["@mozilla.org/browser/bookmarks-service;1"] .getservice(components.interfaces.nsibookmarksservice); // create the bookmark bmsvc.createbookmarkincontainer(win.
document.title, // bookmark name win.location.href.tostring(), // uri of the bookmark null, // shortcut win.
document.title, // description win.
document.characterset, // charset null, // postdata bookmarksservice.getbookmarkstoolbarfolder(), // bookmark folder ...
...the
documentation for the new api is available at places.
Downloading Files - Archive of obsolete content
var privacy = privatebrowsingutils.privacycontextfromwindow(aurlsourcewindow); var progresselement =
document.getelementbyid("progress_element"); persist.progresslistener = { onprogresschange: function(awebprogress, arequest, acurselfprogress, amaxselfprogress, acurtotalprogress, amaxtotalprogress) { var percentcomplete = math.round((acurtotalprogress / amaxtotalprogress) * 100); progresselement.textcontent = percentcomplete +"%"; }, onstatechange: function(awebprogress, arequest, astatefla...
... instead of using qi like above, you can also implement nsiinterfacerequestor and return nsiauthprompt from there, like nsiwebbrowserpersist.progresslistener
documentation suggests.
HTML in XUL for rich tooltips - Archive of obsolete content
var htmltip = { onload: function() { //at any point you can save an html string to a xul attribute for later injection into the tooltip
document.getelementbyid("htmltip1").setattribute("tooltiphtml", "<font color='red'>red foo</font>")
document.getelementbyid("htmltip2").setattribute("tooltiphtml", "<font color='green'>green foo</font>") }, onmousetooltip: function(event) { //get the html tooltip string assigned to the element that the mouse is over (which will soon launch the tooltip) var txt = event.target.getattribute("tooltiphtm...
...l"); // get the html div element that is inside the custom xul tooltip var div =
document.getelementbyid("myhtmltipdiv"); //clear the html div element of any prior shown custom html while(div.firstchild) div.removechild(div.firstchild); //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(txt, false, null, div); //attach the dom object to the html div element div.appendchild(injecthtml); } } window.addeventlistener('load', htmltip.onload, false); in the xul overlay, xmlns:html is used to enable html tags to be used inside the xul.
LookupPrefix - Archive of obsolete content
function lookupprefix (node, namespaceuri) { var htmlmode =
document.contenttype; // mozilla only // depends on private function _lookupnamespaceprefix() below and on https://developer.mozilla.org/en/code_snippets/lookupnamespaceuri // http://www.w3.org/tr/dom-level-3-core/core.html#node3-lookupnamespaceprefix // http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code which were corrected here) if (node.lookupprefix && htmlmode !== 'text/html') { // shouldn't use this...
... in text/html for mozilla as will return null return node.lookupprefix(namespaceuri); } if (namespaceuri === null || namespaceuri === '') { return null; } switch (node.nodetype) { case 1: // node.element_node return _lookupnamespaceprefix(namespaceuri, node); case 9: // node.
document_node return _lookupnamespaceprefix(namespaceuri, node.
documentelement); case 6: // node.entity_node case 12: // node.notation_node case 11: // node.
document_fragment_node case 10: // node.
document_type_node return null; // type is unknown case 2: // node.attribute_node if (node.ownerelement) { return _lookupnamespaceprefix(namespaceuri, node.ownerelement); } return null; default: if (node.parentnode) { // entityreferences may have to be skipped to get to it r...
SVG General - Archive of obsolete content
svg template here is a basic markup template to start building an svg
document: <svg xmlns="http://www.w3.org/2000/svg"> <!-- svg elements go here --> </svg> note: it is recommended that you do not use dtd's with svg
documents.
...here is the script: var svgns = "http://www.w3.org/2000/svg"; var xlinkns = "http://www.w3.org/1999/xlink"; var attr_map = { "classname": "class", "svghref": "href" } var ns_map = { "svghref": xlinkns }; function makesvg(tag, attributes) { var elem =
document.createelementns(svgns, tag); for (var attribute in attributes) { var name = (attribute in attr_map ?
Toolbar - Archive of obsolete content
/** * installs the toolbar button with the given id into the given * toolbar, if it is not already present in the
document.
...@optional */ function installbutton(toolbarid, id, afterid) { if (!
document.getelementbyid(id)) { var toolbar =
document.getelementbyid(toolbarid); // if no afterid is given, then append the item to the toolbar var before = null; if (afterid) { let elem =
document.getelementbyid(afterid); if (elem && elem.parentnode == toolbar) before = elem.nextelementsibling; } toolbar.insertitem(id, before); toolbar.setattribute("currentset", toolbar.currentset);
document.persist(toolbar.id, "currentset"); ...
XPath - Archive of obsolete content
notes and sample code for xpath and ajax (the following was moved from
document.evaluate) obj.evaluate(xpathexpression,contextnode,namespaceresolver,resulttype,result); //obj and contextnode should be the same object, if context is a ajax xml object (example: returnedxml) this should be used as : returnedxml.evaluate(xpathexpression,returnedxml,namespaceresolver,returntype,result); //contextnode should be used in the one in which it was created //add by mooring 2008-11-15 16:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.
documentelement) { alert("your browser does't support this script!"); return; } ...
... var fields = [];//store the results if(window.activexobject) { var tobj = obj.
documentelement.selectnodes("/root/field/item"); for(var i=0;i<tobj.length; i++) { fields.push(tobj[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.
documentelement,null, xpathresult.any_type, null); var tmp = tobj.iteratenext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <field> <item>art_id</item> <item>psection</item> <item>qkind</item> <item>qtitle</item> <item>question</item> <item>pic</item> <item>answer1</item> <item>answer2</item> <item>answer3</item> <item>answer4</item> </field> </root> //add by mooring 2008-11-15 1...
getAttributeNS - Archive of obsolete content
'\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name being searched (escape period since only character (besides colon) allowed in an xml name which needs escaping) for (var j = 0; j < attrs.length; j++) { // thisitem's atts // e.g., abc:href, xlink:href while (((result = prefixatt.exec(attrs[j].nodename)) !== null) && thisitem.nodename !== '#
document' && thisitem.nodename !== '#
document-fragment') { var xmlnsprefix = new regexp('^xmlns:'+result[1]+'$'); // e.g., xmnls:xl, xmlns:xlink // check higher up for xmlns:prefix // check the current node and if necessary, check for the next matching local name up in the hierarchy (until reaching the
document root) while (thisitem.nodename !== '#
document' ...
...&& thisitem.nodename !== '#
document-fragment') { attrs2 = thisitem.attributes; for (var i = 0; i < attrs2.length; i++) { // search for any prefixed xmlns declaration on thisitem which match prefixes found above with desired local name if (attrs2[i].nodename.match(xmlnsprefix) && attrs2[i].nodevalue === ns ) { // e.g., 'xmlns:xlink' and 'http://www.w3.org/1999/xlink' return attrs[j].nodevalue; } } thisitem = thisitem.parentnode; } } } return ''; // if not found (some implementations return 'null' but this is not standard) } alert(getattributenswrapper (someelement, 'http://www.w3.org/1999/xlink', 'href')); // gets xlink:href, xl:href, etc.
Migrating raw components to add-ons - Archive of obsolete content
as we roll this new behavior out, this
document will be updated with additional information addressing scenarios we see developers encountering.
...if you would like to install firefox add-ons in an automated, programmatic way, we have
documented a set of best practices.
Creating a Skin for Mozilla - Archive of obsolete content
that is beyond the scope of this
document.
... organizing images adding an image to the right of a toolbar jar file installer utility (provided by neil marshall) frequently asked questions links original
document information author: neil marshall other contributors (suggestions/corrections): brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch last updated date: jan 5th, 2003 copyright information: copyright 2002-2003 neil marshall, permission given to devmo to migrate into the wiki april 2005 via email.
Using Dehydra - Archive of obsolete content
see
documentation for: process_type, input_end, print, .loc property example: using attributes to mark a class as "final" save the following code as final.cc: // this class should not be subclassed!
...let base in t.bases) if (isfinal(base.type)) error("class " + t.name + " extends final class " + base.type.name, t.loc); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/final.js -o/dev/null -c final.cc it should print the following results and return with an error code: final.cc:8: error: class subclass extends final class myclass see
documentation for: process_type, error, .bases property, .attributes property ...
Developing New Mozilla Features - Archive of obsolete content
once you’re familiar with an area, do the completely unexpected and write a piece of
documentation.
... original
document information author(s): mitchell baker last updated date: october 30, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Drag and Drop Example - Archive of obsolete content
var boardobserver = { getsupportedflavours : function () { var flavours = new flavourset(); flavours.appendflavour("text/unicode"); return flavours; }, ondragover: function (event, flavour, session) {}, ondrop: function (event, dropdata, session) { if (dropdata.data != "") { var elem =
document.createelement(dropdata.data); event.target.appendchild(elem); elem.setattribute("left", "" + event.pagex); elem.setattribute("top", "" + event.pagey); elem.setattribute("label", dropdata.data); } } } the getsupportedflavours function needs only to return a list of flavours that the stack can accept to be dropped on it.
...ferdata(); transferdata.data.adddataforflavour("text/unicode", txt); } }; var boardobserver = { getsupportedflavours : function () { var flavours = new flavourset(); flavours.appendflavour("text/unicode"); return flavours; }, ondragover: function (event, flavour, session) {}, ondrop: function (event, dropdata, session) { if (dropdata.data != "") { var elem =
document.createelement(dropdata.data); event.target.appendchild(elem); elem.setattribute("left", "" + event.pagex); elem.setattribute("top", "" + event.pagey); elem.setattribute("label", dropdata.data); } } }; « previous original
document information author(s): neil deakin original
document: http://xulplanet.com/tutorials/mozsdk/dragex.php copyright information: cop...
JavaScript Client API - Archive of obsolete content
this
document is somewhat outdated, and the api isn't well-supported for use from add-ons; tread carefully.
... see the
documentation for whatever service you are observing to find out what to call this method, what arguments to expect, and how to interpret them.
HTTP Class Overview - Archive of obsolete content
this
document provides an overview of the classes used by the mozilla http implementation.
...rms common header manipulations/calculations nshttpheaderarray stores http "<header>:<value>" pairs nshttpauthcache stores authentication credentials for http auth domains nshttpbasicauth implements nsihttpauthenticator generates basic auth credentials from user:pass nshttpdigestauth implements nsihttpauthenticator generates digest auth credentials from user:pass original
document information author(s): darin fisher last updated date: august 5, 2002 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Help Viewer - Archive of obsolete content
consequently, the mozilla platform provides a cross-platform help viewer along with a framework for providing built-in help
documentation.
... mozilla's help viewer makes providing
documentation an easy job, and this
document will describe how you can use it.
Basics - Archive of obsolete content
note: this page
documents the jetpack prototype, which is no longer under active development.
...lah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited
document is fully loaded.
Twitter - Archive of obsolete content
note: this page
documents the jetpack prototype, which is no longer under active development.
... see twitter's authentication
documentation for related information.
UI - Archive of obsolete content
note: this page
documents the jetpack prototype, which is no longer under active development.
...ing menus in the browser slidebar ui mechanism for displaying jetpack content in a slide-out animated vertical column toolbar including entries and access elements into the toolbar panel a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with browser tabs and their contained
documents statusbar low-level functions and basic calls notifications a system for alerting users via provided ui mechanisms selection interacting with user-selected content window mitigates and eases interactions between different browser windows ...
Microsummary topics - Archive of obsolete content
6.0 / seamonkey 2.3) programmatically installing a microsummary generator to programmatically install a microsummary generator -- for example, in an extension that helps users create custom generators for their favorite sites -- obtain a reference to the nsimicrosummaryservice interface implemented by the nsimicrosummaryservice component, then call its installgenerator() method, passing it an xml
document containing the generator.
...see generating a uuid in the nsiuuidgenerator
documentation.
Modularization techniques - Archive of obsolete content
introduction the purpose of this
document is provide all the information you need to create a new mozilla module or break existing code into a module.
... links the component object model specification revision history feb 25, 1998, created oct 19, 1998, dusted off momentarily oct 10, 1999, added comments about xpidl, language-independentness original
document information author(s): will scullin last updated date: september 13, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details ...
How to Write and Land Nanojit Patches - Archive of obsolete content
(note: this
document is called nanojitmerge for historical reasons -- adobe and mozilla used to have separate copies of nanojit, but this was a maintenance headache so they were merged.
... the first version of this
document was written just after that merge occurred.) resources nanojit development now takes place on a single shared repository nanojit-central.
Prism - Archive of obsolete content
documentation frequently asked questions bundles a web application bundle is a zip archive that holds a configuration file, icons and an optional webapp js script.
... community blog posts prism forum #prism on irc.mozilla.org goodies bundle library contributing source code in svn bugzilla (for bugs and suggestions) open bugs, enter new bug build
documentation related topics xulrunner ...
PyDOM - Archive of obsolete content
introduction this is the
documentation for the binding of python and the mozilla dom.
...for example, let's say you have xul similar to pyxultest: top-level script code says something like: button =
document.getelementbyid("some-button") button.foo = 0 and the button itself might look like: <button id="some-button" label="click here" onclick="event.target.foo += 1; print 'foo is now', event.target.foo"/> note that (a) we have stuck an arbitrary attribute on a dom element and (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the glo...
Space Manager Detailed Design - Archive of obsolete content
see the high level design
document for an overview of the space manager, and as an introduction to the classes, structures and algorithms container in this, the detailed design
document.
... cross-component algorithms tech notes original
document information author(s): marc attinasi other contributors: david baron, josh soref last updated date: november 25, 2005 ...
Space Manager High Level Design - Archive of obsolete content
anager if the line in question intersects the float damage if the line does intersect a damage interval, then the line is marked dirty if the line does not intersect a damage interval, it may still be marked dirty if: it was impacted by floats before, but is not any longer it was not impacted by floats before, but is now it is impacted by floats and is a block problems / bugs found during
documentation: bandrect and bandlist are public in nsspacemanager.h - should be private (compiles fine) nsspacemanager data members are declared protected, but there are no subclasses.
... should be private (compiles fine) nsblockframe::paint is mucking with nsblockbanddata in and #if 0 block - remove that and the include (compiles fine) nsspacemanger has no way of clearing the float damage interval set - this might be needed if the spacemanager persists beyond a reflow original
document information author(s): marc attinasi other contributors: alex savulov, chris waterson, david baron, josh soref last updated date: november 20, 2005 ...
Supporting per-window private browsing - Archive of obsolete content
as an example, if an add-on adds a context menu item that accesses an api that requires an nsiloadcontext, the most relevant window is the one that owns the element being targeted by the context menu (element.owner
document.defaultview).
...rface(components.interfaces.nsisupportsprbool); // if another extension has not already canceled entering the private mode if (!asubject.data) { /* you should display some user interface here */ asubject.data = true; // cancel the operation } }, "last-pb-context-exiting", false); forcing a channel into private mode usually, network channels inherit the privacy status of the
document that created them, which means that they work correctly most of the time.
Supporting private browsing mode - Archive of obsolete content
to determine whether or not the browser is permanently in private browsing mode, you can look at the privatebrowsingmode attribute on the
document root.
...let docroot =
document.
documentelement; if (docroot.hasattribute("privatebrowsingmode")) { // private browsing mode is enabled } if (docroot.getattribute("privatebrowsingmode") == "temporary") { // private browsing mode is temporary } if (docroot.getattribute("privatebrowsingmode") == "permanent") { // private browsing mode is permanent for this session } turning private browsing on and off extensions can turn private browsing mode on and off by manipulating the value of the privatebrowsingenabled attribute.
Table Cellmap - Archive of obsolete content
introduction the table layout use the cellmap for two purposes: quick lookup of table structural data store of the border collapse data the cellmap code is contained in nscellmap.cpp and nscellmap.h this
document does currently describe only the quick lookup part of the game, border collapse is still far away cellmap data - overview the entries in the cellmap contain information about the table cell frame corresponding to a given row and column number (celldata.h).
... original
document information author(s): bernd mielke last updated date: september 27, 2003 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
URIs and URLs - Archive of obsolete content
familiar examples include an electronic
document, an image, a service (e.g., "today's weather report for los angeles"), and a collection of other resources.
... original
document information author(s): andreas otte last updated date: january 2, 2002 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Venkman - Archive of obsolete content
documentation venkman introduction an overview and some practical examples of using the javascript debugger in web development.
... related topics javascript, web development, developing mozilla original
document information author(s): robert ginda other contributors: doctor unclear last updated date: july 13, 2007 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Video presentations - Archive of obsolete content
how pages are built using the dom this presentation describes how
documents are loaded and the dom tree is constructed.
... (as quicktime; 198 mb) laying out and drawing
documents (slides) this presentation describes how a
document is laid out and painted to the display by the gecko engine.
XBL - Archive of obsolete content
xml binding language (xbl, sometimes also called extensible bindings language) is a language for describing bindings that can be attached to elements in other
documents.
...unfortunately, the actual implementation in mozilla is different from the specification, and there's no known
document available describing the differences.
getFolder - Archive of obsolete content
so work in other versions): "chrome" "components" "current user" "defaults" "file:///" "os drive" "plugins" "preferences" "profile" "program" "temporary" "mac apple menu" "mac control panel" "mac desktop" "mac
documents" "mac extension" "mac fonts" "mac shutdown" "mac startup" "mac system" "mac trash" "mac preferences" "macosx default download" "macosx home" "macosx internet sites" "macosx local applications" "macosx local desktop" "macosx local
documents" ...
... "macosx local frameworks" "macosx local internet plugin" "macosx local preferences" "macosx movie
documents" "macosx music
documents" "macosx picture
documents" "macosx user applications" "macosx user desktop" "macosx user
documents" "macosx user frameworks" "macosx user internet plugin" "macosx user preferences" "unix lib" "unix local" "windows" "win appdata" "win common files" "win desktop" "win desktop common" "win program files" "win programs" "win programs common" "win startmenu" "win startmenu common" ...
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 b...
... original
document information author(s): ian oeschger last updated date: 01/26/2006 copyright information: copyright (c) ian oeschger ...
datasources - Archive of obsolete content
for xml datasources, only one source is used, either the url of an xml file or an anchor reference to another element within the same
document.
... when the xul
document is contained on a remote web site, the datasources may only be loaded from the same domain as the
document.
label - Archive of obsolete content
see also treeitem.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="alert(
document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="
document.getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click" oncommand="
document.getelementbyid('mycheckbox').setattribute('label','still not checked');"/> <button label="show label o...
...f checkbox" oncommand="alert(
document.getelementbyid('mycheckbox').getattribute('label') )"/> ...
Deprecated and defunct markup - Archive of obsolete content
even some of the information on the tags below may be out of date, but is provided here for historical reference and to help anyone who comes across them in old code or
documentation.
... 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?
XUL Events - Archive of obsolete content
if you capture this event at the
document level, you can be notified of
document changes.
...if you capture this event at the
document level, you can be notified of
document changes warning: it should be noted that the addition of any mutation event listeners to a
document degrades the performance of subsequent dom operations in that
document, and that removing the listeners later does not mitigate or reverse the effect.
loadURI - Archive of obsolete content
please check which one you're
documenting!
... (this one has no post data parameter, see loaduriwithflags for a version that does) loaduri( uri, referrer, charset ) return type: no return value load a url into the
document, with the given referrer and character set.
openPopup - Archive of obsolete content
the anchor node does not need to be in the same
document as the popup.
...an unanchored popup appears at the position specified by x and y, relative to the viewport of the
document containing the popup node.
Methods - Archive of obsolete content
r 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 getbrowserfor
document getbrowserfortab getbrowserindexfor
document getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstvisiblerow getindexofitem getitematindex getnextitem getnotificationbox getnotificationwithvalue getnumberofvisiblerows getpagebyid getpreviousitem getresultat getresultcount getr...
... 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.addeventlistener dom:element.appendchild dom:element.compare
documentposition 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.hasc...
Menus - Archive of obsolete content
<menuitem label="open" accesskey="o" command="cmd_open"/> the command attribute should be set to the id of a command element within the same
document, in this case 'cmd_open'.
...for example, to have an item initially hidden in a window: function initmenus() { var item =
document.getelementbyid("menu-file-open"); item.hidden = true; } the hidden property is set to true to hide the menu with the id 'menu-fileopen'.
controllers - Archive of obsolete content
the
document's command dispatcher will locate controllers to handle a command by using the focused element's list.
... example <window id="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list =
document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox>...
Filtering - Archive of obsolete content
function applyfilter(country) { var cond =
document.getelementbyid("cond"); var triple =
document.getelementbyid("filtertriple"); if (country) { 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(t...
...riple); } else if (triple) { cond.removechild(triple); }
document.getelementbyid("photoslist").builder.rebuild(); } the 'country' argument to the applyfilter function holds the value to filter by.
Template Logging - Archive of obsolete content
if the datasource load and parsing was successful, the datasource will be set to the xml
document.
... for example: if (root.builder.datasource instanceof xml
document) alert("xml datasource loaded ok"); be careful, as the datasource will only be set once the
document has finished loading and has been parsed, so don't check this property too early.
Adding Properties to XBL-defined Elements - Archive of obsolete content
that way, all you need is to get a reference to the element (using
document.getelementbyid or a similar function) and then get or set the additional properties and call the methods on it.
...xul: <box id="random-box" class="randomizer"/> <button label="generate" oncommand="
document.getelementbyid('random-box').number=math.random();"/> <button label="show" oncommand="alert(
document.getelementbyid('random-box').number)"/> xbl: <binding id="randomizer"> <implementation> <field name="number"/> </implementation> </binding> a number field has been defined in the binding, which stores the random number.
Broadcasters and Observers - Archive of obsolete content
example 3 : source view <broadcasterset> <broadcaster id="colorchanger" style="color: black"/> </broadcasterset> <button label="test"> <observes element="colorchanger" attribute="style" onbroadcast="alert('color changed');"/> </button> <button label="observer" oncommand="
document.getelementbyid('colorchanger').setattribute('style','color: red');" /> two buttons have been created, one labeled test and the other labeled observer.
... next, we'll look at using the
document object model with xul elements.
Custom Tree Views - Archive of obsolete content
function setview(){
document.getelementbyid('my-tree').view = treeview; } the following presents the example together.
...iner: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; function setview(){
document.getelementbyid('my-tree').view = treeview; } </script> <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" label="date" flex="1"/> </treecols> <treechildren/> </tree> </window> in the image, you can see two columns, each with data taken from the getcelltext() function.
Tree View Details - Archive of obsolete content
function init() {
document.getelementbyid("elementlist").view = treeview; } the custom tree view will need to implement a number of methods, of which the important ones will be examined individually.
...lumn) {}, cycleheader: function(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("elementlist").view = treeview; } ]]></script> </window> next, we'll look in more detail at the tree box object.
XUL Tutorial - Archive of obsolete content
xes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts focus and selection commands updating commands broadcasters and observers
document object model
document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view details tree box objects rdf and templates introduction to rdf templates trees and templates rdf datasources advanced rules persistent data skins and locales adding sty...
... original
document information author: neil deakin copyright information: © 1999-2005 xulplanet.com ...
Using multiple DTDs - Archive of obsolete content
normally you have a single dtd (
document type definition) to localize a specific xul file.
... single dtd to make strings in your xul file localizable, you normally add a dtd declaration at the beginning of the file like this: <!doctype window system "chrome://myextension/locale/mainwindow.dtd"> where "window" is the local name of the
document (root) element.
XUL FAQ - Archive of obsolete content
this
document contains answers to frequently asked questions about xul, mozilla's markup language for describing application's user interface.
... if your question is not answered here, you can try looking for the answer in the xul
documentation or ask in the xul newsgroup.
XUL and RDF - Archive of obsolete content
the implementation of the application object modelpurpose - the purpose of this
document is two-fold.
... the first section of the
document describes the motivation and reasoning behind using rdf as the foundation of xul.
colorpicker - Archive of obsolete content
window,
document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ ...
... value property gets and sets color attribute methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
description - Archive of obsolete content
</description> this is a long section of text that will not word wrap <description value="this is a long section of text that will not word wrap"> </description> this is a long section of dynamically controlled text that will word wrap <description id="desc" style="width: 300px"></description>
document.getelementbyid('desc').textcontent = "this is a long section of dynamic message text that will word wrap"; attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
key - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
...for example: // modify some attributes let key =
document.getelementbyid(key_id); key.setattribute("modifiers", "alt shift"); // apply the changes let keyset =
document.getelementbyid(keyset_id); keyset.parentnode.appendchild(keyset); ...
listcell - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
... tips if you need to right-align a cell's contents, you can do so like this: cell =
document.createelement("listcell"); cell.setattribute("label", "this is the cell's label"); cell.setattribute("style", "text-align:right"); related elements listbox, listcol, listcols, listhead, listheader, listitem ...
notificationbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
...this should be either a string, or, from gecko 37 onwards, you can pass a
documentfragment with rich content as well.
preferences - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
...sdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related preferences system
documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
prefpane - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
...tion/javascript" src="chrome://myext/content/script0.js"> <script type="application/javascript" src="chrome://myext/content/script1.js"> </prefwindow> when opening a dialog with multiple panes you must include the toolbar feature in the call to opendialog, for example: window.opendialog("chrome://example/content/prefwin.xul", "", "chrome,toolbar"); related prefwindow preferences system
documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
progressmeter - Archive of obsolete content
properties accessibletype, max, mode, value examples <progressmeter mode="determined" value="82"/> <progressmeter mode="undetermined"/> <!-- switching modes while the mouse is over a button --> <progressmeter mode="determined" id="myprogress"/> <button label="example" onmouseover="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){
document.getelementbyid('myprogress').mode = (state) ?
...ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
textbox - Archive of obsolete content
for more information about autocomplete textboxes, see the autocomplete
documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
wizard - Archive of obsolete content
ge, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2, getbutton, getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){
document.getelementbyid('thewizard').canadvance = (
document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> attributes activetitl...
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
Building XULRunner with Python - Archive of obsolete content
you should also read the the developer
documentation on source code and building as wells as pyxpcom xulrunner with python promises to be a good platform for accessibility projects and both jambu alternative input and the iaccessible2 test tool are using it.
...for example def onload(): btntest =
document.getelementbyid("btntest") btntest.addeventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches.
How to enable locale switching in a XULRunner application - Archive of obsolete content
terfaces.nsitoolkitchromeregistry); var selectedlocale = xulchromereg.getselectedlocale("localeswitchdemo"); var availablelocales = toolkitchromereg.getlocalesforpackage("localeswitchdemo"); // render locale menulist by iterating through the query result from getlocalesforpackage() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox =
document.getelementbyid("locale-listbox"); var selecteditem = null; while(availablelocales.hasmore()) { var locale = availablelocales.getnext(); var listitem =
document.createelementns(xul_ns, "listitem"); listitem.setattribute("value", locale); listitem.setattribute("label", locale); if (locale == selectedlocale) { // is this the current locale?
... var localelistbox =
document.getelementbyid("locale-listbox"); var newlocale = localelistbox.selecteditem.value; // write preferred locale to local user config var prefs = components.classes["@mozilla.org/preferences-service;1"].
2006-12-24 - Archive of obsolete content
discussions [reset issue for overflow='hidden' in ie and opera there is a very modest horizontal shift of the
document due to reflow associated with the removal of the vertical scroll bar (because the
document content is using a horizontal centering style).
... but in firefox the
document is reset (shifted both horizontally and vertically) to its 0,0 position before being centered horizontally.
2006-12- 02 - Archive of obsolete content
discussions [reset issue for overflow='hidden' in ie and opera there is a very modest horizontal shift of the
document due to reflow associated with the removal of the vertical scroll bar (because the
document content is using a horizontal centering style).
... but in firefox the
document is reset (shifted both horizontally and vertically) to its 0,0 position before being centered horizontally.
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.tech.xul - nov 11-nov 17, 2006 return to mozilla-dev-tech-xul announcements processing instructions are now added to xul
document's dom on november 12, 2006, nickolay ponomarev announces the results of the recently fixed bug 319654.
... the result of the bug fix is that you may no longer use
document.firstchild in xul scripts.
NPN_GetValue - Archive of obsolete content
npnv
documentorigin: the value for this variable is the unicode serialization of the origin converted to nfkc-encoded (normalized) utf-8.
...for more information, see the
document origin specification.
.htaccess ( hypertext access ) - Archive of obsolete content
php_value auto_prepend_file "/real/path/to/file/functions.php" # adds function.php at the top of requested
document php_value auto_append_file "/real/path/to/file/footer.php" # adds footer.html at bottom of requested
document customized error responses : user can be directed to different pages depending on the error they caused or by the webserver.
... error
document 404 /notfound.html # redirects traffic to notfound.html in case of a 404 error error
document 500 /serverr.html # redirects traffic to serverr.html in case of a 500 internal server error for further information see this external article: redirect your traffic for error handling.
Digital Signatures - Archive of obsolete content
encryption and decryption address the problem of eavesdropping, one of the three internet security issues mentioned at the beginning of this
document.
... original
document information author(s): ella deon lackey last updated date: 2012 copyright information: © 2012 red hat, inc.
Table Reflow Internals - Archive of obsolete content
overview review of reflow table frames table reflow intro to paginated reflow table paginated reflow review of reflow reflow process starts when an html
document starts loading (the frame tree contains only viewport, scroll(s), canvas, html, body).
... original
document information author(s): chris karnaze last updated aug 7, 2002 ...
Creating a Skin for Firefox - Archive of obsolete content
if you want to change the functionality of firefox, you'll have to look into modifying the chrome, which is beyond the scope of this
document.
... contents getting started original
document information author(s): neil marshall and tucker lee other contributors: brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch, anders conbere, tim regula (http://www.igraphics.nn.cx) copyright information: copyright 2002-2003 neil marshall, permission given to mdc to migrate into the wiki april 2005 via email.
Summary of Changes - Archive of obsolete content
elements deprecated bgcolor css1 background-color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01 div plus scripting non-standard bgsound html 4.01 object proprietary or deprecated feature w3c feature or recommended replacement ie5+ id_attribute_value
document.all.id_attribute_value
document.all[id_attribute_value] dom level 2:
document.getelementbyid(id_attribute_value) ie5+ formname.inputname.value dom level 1:
document.forms["formname"].inputname.value ie5+ inputname.value dom level 1:
document.forms["formname"].inputname.value ie5+ formctrlname dom level 1:
document.forms["formname"...
...].formctrlname ie5+
document.forms(0) dom level 1:
document.forms[0] ie elemref.innertext dom level 1 (core) interface we could introduce dom 3 core textcontent attribute here which is supported by mozilla 1.5+ and is a perfect equivalent to innertext.
CSS - Archive of obsolete content
.-ms-content-zoomingthe -ms-content-zooming css property is a microsoft extension that specifies whether zooming is enabled.-ms-filterthe -ms-filter css property is a microsoft extension that sets or retrieves the filter or collection of filters applied to an object.-ms-flow-fromthe -ms-flow-from css property is a microsoft extension that gets or sets a value identifying a region container in the
document that accepts the content flow from the data source.-ms-flow-intothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the
document that serves as the region's data source.-ms-high-contrast-adjustthe -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css propertie...
...cifies a margin that offsets the inner wrap shape from other shapes.-ms-wrap-throughthe -ms-wrap-through css property is a microsoft extension that specifies how content should wrap around an exclusion element.:-moz-full-screen-ancestorthe :-moz-full-screen-ancestor css pseudo-class is a mozilla extension that represents all ancestors of the full-screen element, except containing frames in parent
documents, which are the full-screen element in their own
documents.
Displaying notifications (deprecated) - Archive of obsolete content
for example, let's simply append a little html to our
document when these events fire: notification.onclick = function() { var e =
document.createelement("p"); e.innerhtml = "<strong>the notification was clicked.</strong>";
document.body.appendchild(e); }; notification.onclose = function() { var e =
document.createelement("p"); e.innerhtml = "<strong>the notification was closed.</strong>";
document.body.appendchild(e); }; displaying the notific...
...ation once the notification is configured the way you want it to be, call its show() method to display the notification: notification.show(); on android, for example, the resulting notification panel looks like this: when the user taps on the "hey, check this out!" notification here, the resulting changes to the
document look like this: if you're using firefox mobile, you can see this example live by tapping the button below.
E4X - Archive of obsolete content
it does this by providing access to the xml
document in a form that feels natural for ecmascript programmers.
... the goal is to provide an alternative, simpler syntax for accessing xml
documents than via dom interfaces.
Accessing XML children - Archive of obsolete content
this gives an xml
document of <foo> <bar> <baz/> <quux/> </bar> </foo> note, however, that assigning a non-xml value to a child element that doesn't exist will create that element.
... list[1] = "green"; changes the xml
document to read <foo> <bar baz="1">red</bar> <bar baz="2">green</bar> </foo> special types of nodes xml objects have methods for accessing xml lists of certain common types of nodes as well.
Debug.debuggerEnabled - Archive of obsolete content
syntax var dbgenabled = debug.debuggerenabled; requirements supported in the following
document modes: internet explorer 10 standards and internet explorer 11 standards.
... not supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards.
Debug.msTraceAsyncCallbackStarting - Archive of obsolete content
}, function (error) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_error); debug.mstraceasynccallbackstarting(opid); }); debug.mstraceasynccallbackcompleted(); } function dosomethingasync() { return winjs.promise.as(true); } asyncwrapperfunction(); requirements supported in the internet explorer 11 standards
document mode.
... not supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards.
Debug.msTraceAsyncCallbackCompleted - Archive of obsolete content
}, function (error) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_error); debug.mstraceasynccallbackstarting(opid); }); debug.mstraceasynccallbackcompleted(); } function dosomethingasync() { return winjs.promise.as(true); } asyncwrapperfunction(); requirements supported in the internet explorer 11 standards
document mode.
... not supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards.
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
requirements supported in the internet explorer 11 standards
document mode.
... not supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards.
Debug.setNonUserCodeExceptions - Archive of obsolete content
} })(); requirements supported in the following
document modes: internet explorer 10 standards and internet explorer 11 standards.
... not supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards.
Error.number - Archive of obsolete content
var x = y; } catch(e) {
document.write ("error code: ");
document.write (e.number & 0xffff)
document.write ("<br />");
document.write ("facility code: ")
document.write(e.number>>16 & 0x1fff)
document.write ("<br />");
document.write ("error message: ")
document.write (e.message) } example the output of this code is as follows.
... error code: 5009 facility code: 10 error message: 'y' is undefined requirements supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
GetObject - Archive of obsolete content
for information on how to create this string, see the
documentation for the application that created the object.
... requirements supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, and internet explorer 8 standards.
VBArray.getItem - Archive of obsolete content
<head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(i, j) = k
document.writeln(k) k = k + 1 next
document.writeln("<br>") next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function getitemtest(vbarray) { var i, j; var a = new vbarray(vbarray); for (i = 0; i <= 2; i++) { for (j =0; j <= 2; j++) {
document.writeln(a.getitem(i, j)); } } } --> </script> </head> <bod...
...y> <script type="text/javascript"> <!-- getitemtest(createvbarray()); --> </script> </body> requirements supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray.toArray - Archive of obsolete content
<head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(j, i) = k
document.writeln(k) k = k + 1 next
document.writeln("<br>") next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function vbarraytest(vbarray) { var a = new vbarray(vbarray); var b = a.toarray(); var i; for (i = 0; i < 9; i++) {
document.writeln(b[i]); } } --> </script> </head> <body> <script type="text/javascript"> <!-...
...- vbarraytest(createvbarray()); --> </script> </body> requirements supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray - Archive of obsolete content
<head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(j, i) = k
document.writeln(k) k = k + 1 next
document.writeln("<br />") next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function vbarraytest(vbarray){ var a = new vbarray(vbarray); var b = a.toarray(); var i; for (i = 0; i < 9; i++) {
document.writeln(b[i]); } } --> </script> </head> <body> <script type="text/javascript"> <!
... requirements supported in the following
document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
after a bit of fiddling to try to fix this, i decided that trying to overcome this error in
document flow wasn't worth the effort.
...- related links the amazing netscape fish cam page original
document information author(s): eric meyer, standards evangelist, netscape communications last updated date: published 25 apr 2003 copyright information: copyright © 2001-2003 netscape.
XForms Custom Controls Examples - Archive of obsolete content
output showing images <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> var img =
document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> output showing xhtml <binding id="output-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswidget-output"> <content> <children includes="label"/> <xhtml:div class="xf-value" anonid="content"></xh...
... var val = this.stringvalue; var newdom = this.domparser.parsefromstring(val, "text/xml"); var impnode =
document.importnode(newdom.firstchild, true); // get content node, clean it, and update it var content =
document.getanonymouselementbyattribute(this, "anonid", "content"); if (content.firstchild) { content.removechild(content.firstchild); } content.appendchild(impnode); return true; </body> </method> </implementation> </binding> ...
Requests For Enhancement - Archive of obsolete content
natively, the mozilla xforms implementation supports xforms elements being hosted in xhtml and xul
documents.
...this section could be of particular interest to people using custom controls in xul
documents for the following reasons: xul, in many cases, is much better suited for application development than xhtml.
XForms Styling - Archive of obsolete content
processors such as chiba create "old-style" html forms from xforms
documents, and must be styled accordingly.
... however, most of the time the transition is straight-forward: view the source after processing of your xforms
document, and map the old styles to the new elements.
XForms Help Element - Archive of obsolete content
the message of the help element can exist in instance data, in a remote
document, or as inline text.
... attributes single-node binding linking src - url of a
document whose contents will be retrieved by the help element and used to provide a help message for the containing form control.
XForms Hint Element - Archive of obsolete content
the message of the hint element can exist in instance data, in a remote
document, or as inline text.
... attributes single-node binding linking src - url of a
document whose contents will be retrieved by the hint element and used to provide hint text for the containing form control.
XForms Message Element - Archive of obsolete content
the message of the message element can exist in instance data, in a remote
document, or as inline text.
... attributes single-node binding linking src - url of a
document whose contents will be retrieved by the message element and used to provide the message text for the message element.
Mozilla XForms User Interface - Archive of obsolete content
mainly this is aimed to
document how xforms elements will be presented in mozilla since the xforms specifications give only a hint of how controls might be rendered.
...repeat a repeat element contains markup and is itself bound to a nodeset in an instance
document (see the spec).
Displaying a graphic with audio samples - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <img id="mozlogo" style="display:none" src="mozilla2.png"></img> <script> var canvas =
document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; fft = new fft(framebufferlength / channels, rate); ...
... ctx.fillrect (0,0, canvas.width, canvas.height); ctx.fillstyle = "rgb(255,255,255)"; for (var i = 0; i < signal.length; i++ ) { // multiply spectrum by a zoom value magnitude = signal[i] * 1000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(
document.getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var audio =
document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> ...
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
in addition, when a
document is displayed in "quirks" mode in mozilla 0.9.4 and later, the markers of lists will not use the font size of the list item text, but will instead stay the same as the user's default font size.
... related links bug 110360 bug 97351 original
document information author(s): eric a.
Web Standards - Archive of obsolete content
web standards are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any
document published on the web.
...[1]
documentation migrate apps from internet explorer to mozilla ever have trouble getting your internet explorer-specific web applications to work with mozilla?
Building up a basic demo with Babylon.js - Game development
opening the babylon.js
documentation in a separate tab — it is useful to refer to.
... html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: babylon.js demo</title> <style> html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; } </style> </head> <body> <script src="babylon.js"></script> <canvas id="render-canvas"></canvas> <script> var canvas =
document.getelementbyid("render-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the
document <title>, and some css to set the width and height of the <canvas> element (which babylon.js will use to render the content on) to fill the entire available viewport space.
Building up a basic demo with the PlayCanvas engine - Game development
opening the playcanvas
documentation in a separate tab — it is useful to refer to.
... <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: playcanvas demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="playcanvas-latest.js"></script> <canvas id="application-canvas"></canvas> <script> var canvas =
document.getelementbyid("application-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the
document <title>, and some css to set the width and height of the <canvas> element that playcanvas will use to 100% so that it will fill the entire available viewport space.
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.addeventlistener("touchstart", handlestart); el.addeventlistener("touchmove", handlemove); el.addeventlistener("touchend", handleend); el.addeventlistener("touchcancel", handlecancel); this way, touching the game's <canvas> on the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the space ship aro...
...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.addeventlistener("touchstart", touchhandler);
document.addeventlistener("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 ...
Unconventional controls - Game development
there's good hello world and getting started javascript tutorials available on the leap motion
documentation pages, which will get you through the basics.
...be sure to visit the leapjs repository on github to learn about the javascript client for the leap motion controller and read the
documentation there.
WebRTC data channels - Game development
we have
documentation for using webrtc.
... original
document information author(s): alan kligman source article: webrtc data channels for great multiplayer other contributors: robert nyman copyright information: alan kligman, 2013 ...
Game over - Game development
first, replace where you initially called setinterval() setinterval(draw, 10); with: var interval = setinterval(draw, 10); then replace the second if statement with the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { alert("game over");
document.location.reload(); clearinterval(interval); // needed for chrome to end game } letting the paddle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area.
...update the last bit of code you modified again, to the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; } else { alert("game over");
document.location.reload(); clearinterval(interval); } } if the ball hits the bottom edge of the canvas we need to check whether it hits the paddle .
Track the score and win - Game development
+) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; score++; if(score == brickrowcount*brickcolumncount) { alert("you win, congratulations!");
document.location.reload(); clearinterval(interval); // needed for chrome to end game } } } } } } thanks to this, your users can actually win the game when they destroy all the bricks, which is quite important when it comes to games.
... the
document.location.reload() function reloads the page and starts the game again once the alert button is clicked.
Initialize the framework - Game development
the game's html the html
document structure is quite simple, as the game will be rendered entirely on the <canvas> element generated by the framework.
... using your favourite text editor, create a new html
document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev phaser workshop - lesson 01: initialize the framework</title> <style>* { padding: 0; margin: 0; }</style> <script src="js/phaser.min.js"></script> </head> <body> <script> var game = new phaser.game(480, 320, phaser.canvas, null, { preload: preload, create: create, update: update }); function preload() {} function create() {} function update() {} </script> </body> </html> downloading the phaser code next, we need to go through the process of downloading the phaser source code and applying it to our html
document.
Visual typescript game engine - Game development
npm run broadcaster
documentation : beta version for
documentation.
... api
documentation if you wanna generate doc you will need manual remove the comment from plugin section in webpack.config.js.
CSS - MDN Web Docs Glossary: Definitions of Web-related terms
here is an example that makes every html paragraph yellow against a black background: /* the selector "p" indicates that all paragraphs in the
document will be affected by that rule */ p { /* the "color" property defines the text color, in this case yellow.
... learn more general knowledge learn css css on wikipedia technical reference the css
documentation on mdn the css working group current work ...
HTML - MDN Web Docs Glossary: Definitions of Web-related terms
concept and syntax an html
document is a plaintext
document structured with elements.
... learn more general knowledge html on wikipedia learning html our html tutorial the web course on codecademy.com technical reference the html
documentation on mdn the html specification ...
HTTP - MDN Web Docs Glossary: Definitions of Web-related terms
the hypertext transfer protocol (http) is the underlying network protocol that enables transfer of hypermedia
documents on the web, typically between a browser and a server so that humans can read them.
...this property makes it ideal for humans to read
documents (web sites) on the world wide web.
Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of css (cascading style sheets), the term media refers to the destination to which the
document is to be drawn by the rendering engine.
... css offers several features that allow you to tweak your
document's styles—or even offer different styles—according to the media type (such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device.
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
navigate-to restricts the urls to which a
document can initiate navigation by any means, including <form> (if form-action is not specified), <a>, window.location, window.open, etc.
... learn more https://www.w3.org/tr/csp/#directives-navigation other kinds of directives: fetch directive
document directive reporting directive block-all-mixed-content upgrade-insecure-requests require-sri-for trusted-types content-security-policy ...
Mobile accessibility - Learn web development
note: see get started on android with talkback for more complete
documentation.
...this occurs because we are using code such as the following: div.onmousedown = function() { initialboxx = div.offsetleft; initialboxy = div.offsettop; movepanel(); }
document.onmouseup = stopmove; to enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices: div.ontouchstart = function(e) { initialboxx = div.offsetleft; initialboxy = div.offsettop; positionhandler(e); movepanel(); } panel.ontouchend = stopmove; we've provided a simple example that shows how to use the mouse and...
Backgrounds and borders - Learn web development
lid black; } the individual properties for these shorthands would be: .box { border-width: 1px; border-style: solid; border-color: black; } and for the longhands: .box { border-top-width: 1px; border-top-style: solid; border-top-color: black; } note: these top, right, bottom, and left border properties also have mapped logical properties that relate to the writing mode of the
document (e.g.
... in the next lesson, we will find out how the writing mode of your
document interacts with your css.
CSS selectors - Learn web development
in earlier articles you met some different selectors, and learned that there are selectors that target the
document in different ways — for example by selecting an element such as h1, or a class such as .special.
... p::first-line { } combinators the final group of selectors combine other selectors in order to target elements within our
documents.
Floats - Learn web development
th: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin-right: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } so let's think about how the float works — the element with the float set on it (the <div> element in this case) is taken out of the normal layout flow of the
document and stuck to the left-hand side of its parent container (<body>, in this case).
...change your
document so that the first paragraph and our floated box are wrapped with a <div> with a class of wrapper.
Supporting older browsers - Learn web development
therefore, a well-structured html
document should always be your starting point.
... the ie10 and 11 prefixed version of grid the css grid specification was initially prototyped in internet explorer 10; this means that while ie10 and ie11 do not have modern grid support, they do have a version of grid layout that is very usable, although different to the modern specification
documented on this site.
Using your new knowledge - Learn web development
previous overview: first steps with the things you have learned in the last few lessons you should find that you can format simple text
documents using css, to add your own style to them.
...this is a single page with the html, plus the starting point css in the head of the
document.
CSS first steps - Learn web development
getting started with css in this article we will take a simple html
document and apply css to it, learning some practical things about the language along the way.
... using your new knowledge with the things you have learned in the last few lessons you should find that you can format simple text
documents using css, to add your own style to them.
CSS FAQ - Learn web development
browsers use the doctype declaration to choose whether to show the
document using a mode that is more compatible with web standards or with old browser bugs.
...
documents with an incomplete, incorrect, or missing doctype declaration or a known doctype declaration in common use before 2001 will be rendered in quirks mode.
What are browser developer tools? - Learn web development
this will give you a window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter): alert('hello!');
document.queryselector('html').style.backgroundcolor = 'purple'; const mywordmark =
document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png');
document.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get.
... alert('hello!);
document.cheeseselector('html').style.backgroundcolor = 'purple'; const mywordmark =
document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png');
document.queryselector('h1').appendchild(mywordmark); you'll start to see the kind of errors that the browser returns.
Example 4 - Learn web development
ctorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form =
document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist =
document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function ()...
..., option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist =
document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { ...
HTML Cheatsheet - Learn web development
mdn provides you with an extended html
documentation as well as a deep instructional html how-to.
... highlight some text <mark>notice me</mark> notice me draw a line through irrelevant text <s>i'm irrelevant</s> i'm irrelevant underline a non-textual annotation this is <u>mispelled</u> this is mispelled text displayed lower than normal text h<sub>2</sub>o h2o small text used to represent the <small>small print </small>of a
document used to represent the small print of a
document used for an address <address>main street 67</address> main street 67 used for a textual cite <cite>lorem ipsum</cite> lorem ipsum text displayed higher than normal text x<sup>2</sup> x2 a short inline quotation <q>the q element indicates a short inline quotation.</q> the q element indica...
Define terms with HTML - Learn web development
prerequisites: you need to be familiar with how to create a basic html
document.
... <p> <dfn><abbr>html</abbr> (hypertext markup language)</dfn> is a description language used to structure
documents on the web.
Structuring a page of content - Learn web development
prerequisites: before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on
document and website structure.
...metadata in html html text fundamentals creating hyperlinks advanced text formatting
document and website structure debugging html marking up a letter structuring a page of content ...
Images in HTML - Learn web development
00px; width: 95%"> <img> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 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.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; sol...
...ght: 100px; width: 95%"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 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.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; sol...
What went wrong? Troubleshooting JavaScript - Learn web development
the earliest instance you'll find in the javascript is on line 48: const loworhi =
document.queryselector('loworhi'); at this point we are trying to make the variable contain a reference to an element in the
document's html.
...line 48 is using a
document.queryselector() method to get a reference to an element by selecting it with a css selector.
JavaScript object basics - Learn web development
when you accessed the
document object model using lines like this: const mydiv =
document.createelement('div'); const myvideo =
document.queryselector('video'); you were using methods available on an instance of the
document class.
... for each webpage loaded, an instance of
document is created, called
document, which represents the entire page's structure, content, and other features such as its url.
Object building practice - Learn web development
these contain the following, respectively: a very simple html
document featuring an <h1> element, a <canvas> element to draw our balls on, and elements to apply our css and javascript to our html.
... the first part of the script looks like so: const canvas =
document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); const width = canvas.width = window.innerwidth; const height = canvas.height = window.innerheight; this script gets a reference to the <canvas> element, then calls the getcontext() method on it to give us a context on which we can start to draw.
Getting started with Ember - Learn web development
for more information on the technical aspects of the glimmer vm, the github repository has some
documentation — specifically, references and validators may be of interest.
...(good suggestions are your "desktop" or "
documents" directories, so that it is easy to find): ember new todomvc or, on windows: npx ember-cli new todomvc this generates a production-ready application development environment that includes the following features by default: development server with live reload.
Ember resources and troubleshooting - Learn web development
further resources ember.js guides tutorial: super rentals ember.js api
documentation ember.js discord server — a forum/chat server where you can meet the ember community, ask for help, and help others!
... more information on everything a route can do is found in the api
documentation.
Componentizing our React app - Learn web development
this is bad html because id attributes must be unique (they are used as unique identifiers for
document fragments, by css, javascript, etc.).
...the final line of src/index.js should read like this: reactdom.render(<app tasks={data} />,
document.getelementbyid("root")); this array is now available to the app component as props.tasks.
Getting started with Svelte - Learn web development
<script> // logic goes here </script> <style> /* styles go here */ </style> <!-- markup (zero or more html elements) goes here --> note: for more information on the component format, have a look at the svelte
documentation.
...this file is the entry point for our app, and it initially looks like this: import app from './app.svelte'; const app = new app({ target:
document.body, props: { name: 'world' } }); export default app; main.js starts by importing the svelte component that we are going to use.
Getting started with Vue - Learn web development
as you work through this tutorial, you might want to keep the vue guide and api
documentation open in other tabs, so you can refer to them if you want more information on any sub topic.
...right now, it should contain a welcome message, a link to the vue
documentation, links to the plugins you added when you initialized the app with your cli, and some other useful links to the vue community and ecosystem.
Command line crash course - Learn web development
you can find all the
documentation you need in the windows subsystem for linux
documentation.
...this is a community-driven
documentation service, similar to mdn, but specific to terminal commands.
Package management basics - Learn web development
in the index.js file, add the following code and save it: import { formatdistancetonow } from 'date-fns' const date = '1996-09-13 10:00:00';
document.body.textcontent = formatdistancetonow(new date(date)) + ' ago'; go back to http://localhost:1234 and you'll see how long ago it is since the author turned 18.
... this is determined using a system called semver, which might look a bit complicated from the
documentation but can be simplified by considering only the summary information and that a version is represented by major.minor.patch, such as 2.0.1 being major version 2 with patch version 1.
Information for Assistive Technology Vendors
keyboard
documentation this lists mozilla's keyboard docs in a single long
document.
...in addition, we provide some simple interfaces via which we expose a read-only dom (
document object model).
Accessibility and Mozilla
mozilla strives to make its software accessible; the
documents below cover the ways in which we do so.
...here is a rundown of problems and the planned solutions:mozilla's section 508 compliancemozilla’s uaag evaluation reportthe uaag
document contains a very rich set of accessibility guidelines, that broadly define how accessibility should be implemented by any user agent, i.e.
Command line options
other options need to be
documented -print-xpcom-dir -print-xpcom-dirlist -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/nsbrowsercontent...
...handler.js suite/browser/nsbrowsercontenthandler.js mail/components/nsmaildefaulthandler.js installer command line options original
document information author(s): ben goodger, steffen wilberg, seth spitzer, daniel wang copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Debugging JavaScript
this
document is intended to help developers writing javascript code in mozilla, mainly for mozilla itself, but it may also be useful for web developers.
...ents.stack like this: function getstackdump() { var lines = []; for (var frame = components.stack; frame; frame = frame.caller) { lines.push(frame.filename + " (" + frame.linenumber + ")"); } return lines.join("\n"); } see also debugging mozilla with gdb setting up an extension development environment (particularly development preferences and development extensions) original
document information author(s): ben bucksch created date: september 12, 2005, last updated date: november 10, 2009 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Debugging on Mac OS X
this
document explains how to debug mozilla-derived applications such as firefox, thunderbird, and seamonkey on macos using xcode.
... disabling system integrity protection (sip) if debugging a production build is required, follow apple's
documented steps for disabling system integrity protection (sip).
The Firefox codebase: CSS Guidelines
this
document contains guidelines defining how css inside the firefox codebase should be written, it is notably relevant for firefox front-end engineers.
...consider using an actual <img> tag (for html
documents) or list-style-image (for xul
documents) if rendering the image is important.
Interface development guide
documentation xpidl the xpcom interface description language is used to specify xpcom interface classes.
...commenting idl for better
documentation a guide explaining how to properly comment your interface's idl in order to ensure that not only can others understand your interface, but to ensure that the
documentation here on mdc is as accurate as possible.
Runtime Directories
windows vista/7 c:\program files\mozilla firefox\ c:\users\<username>\appdata\roaming\mozilla\firefox\ (or %appdata%\mozilla\firefox\) c:\users\<username>\appdata\local\mozilla\firefox\ (or %localappdata%\mozilla\firefox) and c:\users\<username>\appdata\local\virtualstore\program files\mozilla firefox\ windows 2000/xp c:\program files\mozilla firefox\ c:\
documents and settings\<username>\application data\mozilla\firefox\ (or %appdata%\mozilla\firefox\) c:\
documents and settings\<username>\local settings\application data\mozilla\firefox\ os x /applications/firefox.app ~/library/application support/firefox/profiles/xxxxxxxx.default/ ~/library/caches/firefox/profiles/xxxxxxxx.default/ linux ????
... windows vista/7 c:\program files\mozilla thunderbird\ c:\users\<username>\appdata\roaming\thunderbird\ (or %appdata%\thunderbird\) c:\users\<username>\appdata\local\thunderbird\ (or %localappdata%\thunderbird\) and c:\users\<username>\appdata\local\virtualstore\program files\mozilla thunderbird\ windows 2000/xp c:\program files\mozilla thunderbird\ c:\
documents and settings\<username>\application data\thunderbird\ (or %appdata%\thunderbird\) c:\
documents and settings\<username>\local settings\application data\thunderbird\ os x /applications/thunderbird.app ~/library/thunderbird/profiles/xxxxxxxx.default/ ~/library/caches/thunderbird/profiles/xxxxxxxx.default/ linux ????
SVG Guidelines
pros and cons of svg for images when used as a
document format there is usually a compelling reason that makes svg the only solution.
...however, there are some utilities that cover parts of this
document: mostly complete command line tool: https://github.com/svg/svgo alternatives to svgo: https://github.com/razrfalcon/svgcleaner https://github.com/scour-project/scour gui for command line tool (use with "prettify code" and "remove <title>" options on): https://jakearchibald.github.io/svgomg/ good alternative to svgo/svgomg: https://petercollingridge.appspot.com/svg-editor fixe...
Working with Mozilla source code
interface development guide guidelines and
documentation for how to create and update xpcom interfaces.
... the firefox codebase: css guidelines this
document contains guidelines defining how css inside the firefox codebase should be written, it is notably relevant for firefox front-end engineers.
Experimental features in Firefox
nightly 33 no developer edition 33 no beta 33 no release 33 no preference name media.track.enabled dom
document property: autoplaypolicy the
document property autoplaypolicy returns a string indicating how the browser handles requests to automatically play media (either using the autoplay property on a media element or by attempting to trigger playback from javascript code.
... nightly 56 no developer edition 56 no beta 56 no release 56 no preference name dom.payments.request.enabled and dom.payments.request.supportedregions visual viewport api the visual viewport api provides access to information describing the position of the visual viewport relative to the
document as well as to the window's content area.
Index
3 building firefox with rust code build
documentation, gecko, build, rust in may 2015 the rust programming language reached its 1.0 stability milestone, and various experiments with writing parts of gecko in rust began.
... 169 privacy privacy, security this
document lists privacy-related
documentation.
Frame script loading and lifetime
so once you load them, they will stay loaded until the tab is closed, even if you reload the
document or navigate.
... if you want a frame script to do something when a new
document is loaded, you need to listen for an appropriate dom event, generally domwindowcreated, domcontentloaded, or load.
Tracking Protection
for example, you should not use google analytics in the following way: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() {
document.location = url; } }); } </script> instead, you should account for the case when google analytics is missing by checking to see if the ga object has initialized: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); if (window.ga && ga.loaded) { ga...
...('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() {
document.location = url; } }); } else {
document.location = url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
Security best practices for Firefox front-end engineers
existing security controls sanitizing all strings that enter the dom through apis such as innerhtml when running system-privileged chrome code, we sanitize all html fragments that are created for chrome-privileged
documents.
... appendix list of disallowed dom apis innerhtml outerhtml insertadjacenthtml() createcontextualfragment()
document.write()
document.writeln() please take a look at the repository for an updated list ...
Firefox
project
documentation get detailed information about the internals of firefox and its build system, so you can find your way around in the code.
...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.
HTMLIFrameElement.getContentDimensions()
note: the values returned are equivalent to
document.body.scrollwidth and
document.body.scrollheight.
... examples var browser =
document.queryselector('iframe'); var request = browser.getcontentdimensions(); request.onsuccess = function() { console.log("page size:", request.result.width + "x" + request.result.height); } request.onerror = function() { console.log("download error"); } specification not part of any specification.
mozbrowsercontextmenu
its properties are as follows:
documenturi a domstring representing the url of the
document the menu is associated with.
... example var browser =
document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalpro...
Localizing with Koala
due to a bug in koala (bug 21930), it is recommended that you don't choose a path that contains spaces (like c:\
documents and settings\user\...).
... translating files let's translate the searchbar-related strings mentioned in the beginning of this
document.
Localizing with Mercurial
if the
documentation is incomplete or you have questions, please drop by the #l10n or #hg channels on irc.mozilla.org.
... please refer to mqtutorial and mq
documentation for further uses of mq extension to manage patches.
Localization formats
warning: this
document pertains to the development of mozilla web sites and not to the development of gecko-based extensions or applications.
... wiki blogging,
documentation, and other types of mozilla content often surface as wikis.
MathML Demo: <mspace> - space
trol" href="javascript:downdepth();" title="decrease depth">-</a> <math display="block"> <mstyle displaystyle="true"> <msqrt> <mrow> <mn>3</mn> <mspace style="background-color: yellow" id="thespace" height="0.1ex" depth="0.1ex" width="0.1em" /> <mi>x</mi> </mrow> </msqrt> </mstyle> </math> </p> javascript content var height=0; var width=0; var depth=0; function upheight() { height++;
document.getelementbyid("thespace").setattribute("height",height+".1ex"); } function downheight() { height--;
document.getelementbyid("thespace").setattribute("height",height+".1ex"); } function upwidth() { width++;
document.getelementbyid("thespace").setattribute("width",width+".1em"); } function downwidth() { width--;
document.getelementbyid("thespace").setattribute("width",width+".1em"); } ...
...function updepth() { depth++;
document.getelementbyid("thespace").setattribute("depth",depth+".1ex"); } function downdepth() { depth--;
document.getelementbyid("thespace").setattribute("depth",depth+".1ex"); } ...
Mozilla MathML Project
mathml in mozilla developer network mathml accessibility in mozilla sample mathml
documents screenshots mathml start page - with translations in different languages ( arabic, chinese, hebrew, thai) mathml basics -
document tailored to display correctly with just the symbol font that is pre-installed by default on most os configurations.
... create mathml
documents authoring mathml editors converters stylesheets original
document information author(s): roger b.
Using the viewport meta tag to control layout on mobile browsers
apple's
documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in fennec.
... for example, safari's
documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.
Mozilla Style System
some style sheets are managed by the
document; some apply to all
documents.
... rule tree style data computation css style sheet backend loading parsing data structures cascading html mapped attribute backend css style attribute backend handling of dynamic changes see also mozilla style system
documentation (2002) style system tech talk (2002) ...
Activity Monitor, Battery Status Menu and top
it may make parts of this
document easier to understand.
...(apple support
documentation specifically recommends it for troubleshooting battery life problems.) unfortunately "energy impact" is not a good measure for either users or software developers and it should be avoided.
Refcount tracing and balancing
note that setting xpcom_mem_log_classes will also list the serial number of each object that leaked in the "bloat log" (that is, the file specified by the xpcom_mem_bloat_log variable; see the bloatview
documentation for more details).
...for more details, see the old
documentation (which should probably be incorporated here).
Scroll-linked effects
<body style="height: 5000px" onscroll="
document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
...ation); } else if (math.abs(destination - window.scrolly) < 200) { scrollto(window.scrollx, window.scrolly + ((destination - window.scrolly) / 2)); settimeout(snap, 20, destination); } } var timeoutid = null; addeventlistener("scroll", function() { if (timeoutid) cleartimeout(timeoutid); timeoutid = settimeout(snap, 200, parseint(
document.getelementbyid('snaptarget').style.top)); }, true); </script> <div id="snaptarget" class="snaptarget" style="position: relative; top: 200px; width: 100%; height: 200px; background-color: green"></div> </body> in this example, there is a scroll event listener which detects if the scroll position is within 200 pixels of the top of the "snaptarget" div.
TimerFirings logging
it may make parts of this
document easier to understand.
...timer (one_shot): [content] http://widgets.outbrain.com/outbrain.js:20:330 186 fn timer (one_shot): nsbrowserstatusfilter::timeouthandler 138 fn timer (one_shot): [content] https://self-repair.mozilla.org/repair/:7:13669 118 fn timer (one_shot): [content] http://a.visualrevenue.com/vrs.js:6:9423 108 fn timer (slack): layeractivitytracker 104 fn timer (slack): nsi
document::selectorcache 104 fn timer (slack): cctimerfired ...
powermetrics
this
document describes the version of powermetrics that comes with mac os 10.10.
...it may make parts of this
document easier to understand.
Preference reference
the old behavior can be restored by setting the preference mail.tabs.drawintitlebar to false.nglayout.debug.disable xul fastloadthe preference nglayout.debug.disable_xul_fastload controls whether or not xul fastload is used.nglayout.debug.disable_xul_cacheto improve performance, mozilla caches chrome xul
documents the first time they load for faster loading later.
...the xul cache is serialized and saved between mozilla sessions in the xul fastload file, which saves a “compiled” version of the xul and javascript in a
document to disk for faster startup the next time the application runs.reader.parse-on-load.force-enabledthe preference reader.parse-on-load.force-enabled controls if the reader mode used in firefox mobile should be enabled independent of the memory available in the device.
Preferences system
this
document describes toolkit's preferences system.
...reference information about them is available below: preferences system
documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
A guide to searching crash reports
please read the
documentation about individual crash reports before reading this page.
...see the api
documentation for full details; note that it uses the term "aggregation" for grouping/faceting.
L20n HTML Bindings
the l20n html bindings you can take advantage of html bindings to localize your html
documents with l20n.
... when all dom nodes are localized, the
document element will fire a
documentlocalized event, which you can listen to:
document.addeventlistener('
documentlocalized', function() { // the dom has been localized and the user sees it in their language yourapp.init(); }); exposing context data you can expose important bits of data to the localization context in form of context data.
L20n Javascript API
ctx.localize(['hello', 'new'], function(l10n) { var node =
document.queryselector('[data-l10n-id=hello]'); node.textcontent = l10n.entities.hello.value; node.classlist.remove('hidden'); }); ctx.registerlocales(defaultlocale: string?, availablelocales: array<string>?) register the default locale of the context instance, as well as all other locales available to the context instance before the language negotiation.
... ctx.localize(['hello', 'about'], function(l10n) { var node =
document.queryselector('[data-l10n-id=hello]'); node.textcontent = l10n.entities.hello.value; node.classlist.remove('hidden'); }); the callback becomes bound to the entities on the ids list.
Localization Use Cases
this article
documents a few opportunities to improve the localization of gaia (the ui layer of firefox os) by using l20n.
... in the javascript code, the developer needs to pass sizeinfo.unit instead of a localized value: function showformatedsize(element, l10nid, size) { // … element.textcontent =
document.l10n.get(l10nid, { size: sizeinfo.size, unit: sizeinfo.unit }); } and then use the $unit variable verbatim in the english message: <availablesize "{{ $size }} {{ $unit }} available"> in french, the localizer can then use the value of $unit to match it against a translated abbreviation, like so: <_unitedemesure { b: "o", kb: "ko", mb: "mo", gb: "go", tb: "to" }> <availabl...
AsyncTestUtils extended framework
there are more attributes you can specify; consult the
documentation for more information.
...if you need to get fancy about having flags set on the folder, we support that, but please check the method
documentation.
NSPR Poll Method
this technical note
documents the poll method of prfiledesc.
... original
document information author: wan teh chang last updated date: june 27, 2006 ...
I/O Types
prfiledesc priomethods prfileprivate prdescidentity note that the nspr
documentation follows the unix convention of using the termfiles to refer to many kinds of i/o objects.
... to refer specifically to the files in a file system (that is, disk files), this
documentation uses the termnormal files.
Certificate functions
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.
... function name/
documentation source code nss versions cert_addcerttolisttail mxr 3.2 and later cert_addextension mxr 3.5 and later cert_addocspacceptableresponses mxr 3.6 and later cert_addokdomainname mxr 3.4 and later cert_addrdn mxr 3.2.1 and later cert_asciitoname mxr 3.2 and later cert_cachecrl mxr 3.10 and later cert_clearocspcache mxr 3.11.7 and later cert_certchainfromcert mxr 3.2 and later cert_certlistfromce...
Cryptography functions
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.
... function name/
documentation source code nss versions pk11_algtagtomechanism mxr 3.2 and later pk11_authenticate mxr 3.2 and later pk11_blockdata mxr 3.2 and later pk11_changepw mxr 3.2 and later pk11_checkuserpassword mxr 3.2 and later pk11_cipherop mxr 3.2 and later pk11_clonecontext mxr 3.2 and later pk11_configurepkcs11 mxr ...
Introduction to Network Security Services
chniques of public-key cryptography the secure sockets layer (ssl) protocol the pkcs #11 standard for cryptographic token interfaces cross-platform development issues and techniques where to find more information for information about pki and ssl that you should understand before using nss, see the following: introduction to public-key cryptography introduction to ssl for links to api
documentation, build instructions, and other useful information, see the nss project page.
...the api
documentation for nspr is available at nspr api reference.
NSS 3.14.2 release notes
the release is available for download from https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_2_rtm/src/ for the primary nss
documentation pages please visit /docs/nss new in nss 3.14.2 nss will now make use of the intel aes-ni and avx instruction sets for hardware-accelerated aes-gcm on 64-bit linux systems.
...the
documentation is in the docbook format and can be rendered as html and unix-style manual pages using an optional build target.
NSS Developer Tutorial
update nss in mozilla-inbound and mozilla-central the procedure is
documented at https://developer.mozilla.org/docs/updating_nspr_or_nss_in_mozilla-central.
... if it is necessary to apply private patches, please
document them in <tree>/security/patches/readme.
nss tech note5
note: this
document contains code snippets that focus on essential aspects of the task and often do not illustrate all the cleanup that needs to be done.
... also, this
document does not attempt to be an exhaustive survey of all possible ways to do a certain task; it merely tries to show a certain way.
FC_Initialize
nss_nodb_init(""), which initializes nss with no databases: "configdir='' certprefix='' keyprefix='' secmod='' flags=readonly,nocertdb,nomod db,forceopen,optimizespace " mozilla firefox initializes nss with this string (on windows): "configdir='c:\\
documents and settings\\wtc\\application data\\mozilla\\firefox\\profiles\\default.7tt' certprefix='' keyprefix='' secmod='secmod.db' flags=optimizespace manufacturerid='mozilla.org' librarydescription='psm internal crypto services' cryptotokendescription='generic crypto services' dbtokendescription='software security device' cryptoslotdescription='psm internal cryptographic services' dbslotdescription='...
...psm private keys' fipsslotdescription='psm internal fips-140-1 cryptographic services' fipstokendescription='psm fips-140-1 user private key services' minps=0" see pkcs #11 module specs for complete
documentation of the library parameters string.
NSS tools : crlutil
synopsis crlutil [options] [[arguments]] status this
documentation is still work in progress.
... this
document discusses certificate revocation list management.
NSS tools : modutil
synopsis modutil [options] [[arguments]] status this
documentation is still work in progress.
...the jar file uses the nss pkcs #11 jar format to identify all the files to be installed, the module's name, the mechanism flags, and the cipher flags, as well as any files to be installed on the target machine, including the pkcs #11 module library file and other files such as
documentation.
Secure Development Guidelines
validation could save you without knowing it examples: if it doesn’t have to be negative, store it in an unsigned int if the input doesn’t have to be > 512, cut it off there if the input should only be [a-za-z0-9], enforce it cross site scripting (xss) xss is a type of code injection attack typically occurs in web applications injection of arbitrary data into an html
document from another site victim’s browser executes those html instructions could be used to steal user credentials think: webmail, online auction, cms, online banking...
... xss: example the following snippet of javascript:
document.write("welcome to " +
document.location); ...
Browser security
a web pki x509 certificate primerx.509 (in this
document referred as x509) is an itu standard to describe certificates.
... this article provides an overview of what these are and how they work.exploitable crashesthis article will help you determine if a crash is exploitable, find crashes which are exploitable, and to fix exploitable crashes.handling mozilla security bugsthis
document describes how the new security organizational structure will work, and how security-related mozilla bug reports will be handled.pinning violation reportsif a site makes use of key pinning, and your browser sees a certificate chain for that site which does not match the pin, firefox will reject the connection and display an error page.
XForms Accessibility
you can try the following link to test xforms accessibility: visual xforms elements in xhtml
document at bugzilla.mozilla.org visual xforms elements in xul
document at bugzilla.mozilla.org you can see xforms sample tests at mozilla xforms project there are set of tests at beaufour.dk w3c's xforms test at w3.org keyboard navigation issues navigation sequence though xforms spec declares navindex attribute to define the navigation sequence (see 1.0 specs or 1.1 specs) but rich schwerdtfeger ...
... therefore since mozilla xforms works in xhtml (1.x) or xul
documents only then we use tabindex instead.
Accessibility API Implementation Details
these pages contain
documentation on mozilla specific implementation details of assistive technology apis.
... at apis supportthis
documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support gecko-based software.
Embedded Dialog API
(note to self: is there decent
documentation on writing factories or components?
... the dialog component's contract id should have the form "@mozilla.org/embedui/unique-component-name;1" original
document information author: danm@netscape.com last updated date: 15 dec 2001 ...
Places
documentation places migration guide migrating existing code to use the places api.
... design
documents the places database high-level overview of the places database design.
Accessing the Windows Registry Using XPCOM
the examples in this
document are all written in javascript using xpcom.
...you can read the interface
documentation for a full explanation, but we will show only the three most commonly used modes here: access_read — for reading values, enumerating keys, and receiving notifications access_write — for setting values and creating sub keys access_all — access for all operations in addition to open() and create(), there are the openchild() and createchild() methods.
Aggregating the In-Memory Datasource
notes describing all of the vagaries of xpcom aggregation is beyond the scope of this
document.
... for more information on writing a datasource, see the rdf datasource how-to
document.
Finishing the Component
the other method on the nsicontentpolicy interface is for blocking processing of specific elements in a
document, but our policy is more restrictive: if the url isn't on the white list, the entire page should be blocked.
...distribution of substantively modified versions of this
document is prohibited without the explicit permission of the copyright holder.
Preface
despite what old
documentation says, xpcom should not be used to make npapi plugins scriptable.
...distribution of substantively modified versions of this
document is prohibited without the explicit permission of the copyright holder.
Starting WebLock
once the interface has been described in the xpidl language, the interface file can be used to generate the header files needed for the implementation code, the binary type library files that let you use the interface of the weblock component from javascript, and even broken linkjavadoc style html
documentation.
...distribution of substantively modified versions of this
document is prohibited without the explicit permission of the copyright holder.
Using XPCOM Utilities to Make Things Easier
for a complete listing of smart pointer functionality, see mozilla.org's nscomptr
documentationxxx this should be in devmo.
...distribution of substantively modified versions of this
document is prohibited without the explicit permission of the copyright holder.
Creating XPCOM components
finishing the component using frozen interfaces copying interfaces into your build environment implementing the nsicontentpolicy interface receiving notifications implementing the nsicontentpolicy uniform resource locators checking the white list creating nsiuri objects building the weblock ui user interface package list client code overview xul the xul
document the locking ui site adding ui weblock.xul overlaying new user interface into mozilla weblockoverlay.xul other resources weblock.css image resources packaging weblock component installation overview archiving resources the weblock installation script the weblock trigger script distributing your component appendix a - setting up the gecko sdk downloading ...
...distribution of substantively modified versions of this
document is prohibited without the explicit permission of the copyright holder.
Detailed XPCOM hashtable guide
functions for most key types, including narrow and wide strings, pointers, and most binary data: void* (or nsisupports*) cast using ns_ptr_to_int32 char* string nscrt::hashcode() prunichar* string nsastring hashstring() nsacstring nsid& nsidhashkey::hashkey() writing a good hash function is well beyond the scope of this
document, and has been discussed extensively in computer-science circles for many years.
... original
document information author(s): benjamin smedberg <benjamin@smedbergs.us> ...
Components.utils.cloneInto
using the same mechanism as that used in components.utils.exportfunction: // add-on script var addonscriptobject = { greetme: function() { alert("hello from add-on"); } }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {clonefunctions: true}); // page script var test =
document.getelementbyid("test"); test.addeventlistener("click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that contain dom elements by default, if the object you clone contains objects that are reflected from c++, such as dom elements, the cloning operation will fail with an error.
... if you pass the {wrapreflectors:true} flag, then the object you clone is allowed to contain these objects: // add-on script var addonscriptobject = { body: contentwindow.
document.body }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {wrapreflectors: true}); // page script var test =
document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(window.addonscriptobject.body.innerhtml); }, false); access to these objects in the target scope is subject to the normal security checks.
Flash Activation: Browser Comparison - Plugins
this can be done by calling a javascript function when the plugin is activated: function plugincreated() { // we don't need to see the plugin, so hide it by resizing var plugin =
document.getelementbyid('myplugin'); plugin.height = 0; plugin.width = 0; plugin.callpluginmethod(); } the html, by default, specifies the flash object to be a size that makes it visible, like this: <!-- give the plugin an initial size so it is visible --> <object type="application/x-shockwave-flash" data="myapp.swf" id="myplugin" width="300" height="300"> <param name="callback" value="plu...
...ur up your html with a callback that calls the javascript function plugincreated(), like this: <object type="application/x-my-plugin" data="somedata.mytype" id="myplugin"> <param name="callback" value="plugincreated()"> </object> the plugincreated() function is then responsible for the setup of your script and any calls back into the plugin that you need to make: function plugincreated() {
document.getelementbyid('myplugin').callpluginmethod(); } ...
Preferences System
this
document describes toolkit's preferences system.
...reference information about them is available below: preferences system
documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
Accessibility Inspector - Firefox Developer Tools
the available menu items include: none — don't show the possible list of issues all issues — check for all types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your
document for the type of issues you selected.
... depending on the size and complexity of your
document, this may take a few seconds.
Inspecting web app manifests - Firefox Developer Tools
when you open the application panel’s manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your
document that points to your .webmanifest file: <link rel="manifest" href="/manifest.webmanifest"> the .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json).
... list of manifest members we won't provide an exhaustive list of all the members that can appear in a web manifest here; you can already find that in our web manifest
documentation.
Browser Toolbox - Firefox Developer Tools
targeting a
document in the normal toolbox, there's a button in the toolbar enabling you to target specific iframes in the
document.
...this enables you to inspect
documents in individual chrome windows and popups, as well as in content tabs.
Debugger.Script - Firefox Developer Tools
startline if the instance refers to a jsscript, the number of the line at which this script’s code starts, within the file or
document named by url.
... linecount if the instance refers to a jsscript, the number of lines this script’s code occupies, within the file or
document named by url.
All keyboard shortcuts - Firefox Developer Tools
because access keys are locale-dependent, they're not
documented in this page.
...s cmd + s ctrl + s open an existing pad ctrl + o cmd + o ctrl + o create a new pad ctrl + n 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 eyedropper command windows macos linux select the current color enter return enter dismiss the eyedropper esc esc esc move by 1 pixel arrow keys arrow keys arrow keys move by 10 pixels shift + arrow keys shift + arrow keys ...
DOM allocation example - Firefox Developer Tools
it just contains a script that creates a large number of dom nodes: var toolbarbuttoncount = 20; var toolbarcount = 200; function getrandomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton =
document.createelement("span"); toolbarbutton.classlist.add("toolbarbutton"); // stop spidermonkey from sharing instances toolbarbutton[getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar =
document.createelement("div"); // stop spidermonkey from sharing instances toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) ...
...{ var toolbarbutton = createtoolbarbutton(); toolbar.appendchild(toolbarbutton); } return toolbar; } function createtoolbars() { var container =
document.getelementbyid("container"); for (var i = 0; i < toolbarcount; i++) { var toolbar = createtoolbar(); container.appendchild(toolbar); } } createtoolbars(); a simple pseudocode representation of how this code operates looks like this: createtoolbars() -> createtoolbar() // called 200 times, creates 1 div element each time -> createtoolbarbutton() // called 20 times per toolbar, creates 1 span element each time in total, then, it creates 200 htmldivelement objects, and 4000 htmlspanelement objects.
Dominators view - Firefox Developer Tools
sometimes there's more than one retaining path back from a node: here there are three paths back from the
documentprototype node to a gc root.
... if one were removed, then the
documentprototype would still not be garbage-collected, because it's still retained by the other two path.
Network request details - Firefox Developer Tools
for each line in the response headers section, a question mark links to the
documentation for that response header, if one is available.
...for each line in the request headers section, a question mark links to the
documentation for that request header, if one is available.
Animation inspector example: Web Animations API - Firefox Developer Tools
scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon =
document.getelementbyid("icon"); var note =
document.getelementbyid("note"); var iconanimation = icon.animate(iconkeyframeset, iconkeyframeoptions); var noteanimation = note.animate(notekeyframeset, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; function animatechannel(e) { if (e.button != 0) { return; } if (e.target.id != "icon") { return; } ...
... if (firsttime) { iconanimation.play(); noteanimation.play(); firsttime = false; } else { iconanimation.reverse(); noteanimation.reverse(); } }
document.addeventlistener("click", animatechannel); ...
Tips - Firefox Developer Tools
$() is a shortcut to
document.queryselector().
... $$() returns an array with the results from
document.queryselectorall().
Validators - Firefox Developer Tools
this
document lists different resources for developers to validate web pages.
... accessibility services lynx viewer checks a web page using lynx visualization and allows validation of accessibility features original
document information last updated date: august 16th, 2002 copyright © 2001-2003 netscape.
View Source - Firefox Developer Tools
among the errors that don't get reported: bytes that are illegal according to the
document's encoding aren't marked as errors.
... this mishighlighting can be seen by viewing the source of firefox chrome files (such as xul
documents).
Console messages - Firefox Developer Tools
for example, code like this will cause an immediate, synchronous, reflow, when it calls window.getcomputedstyle(thing).height: var thing =
document.getelementbyid("the-thing"); thing.style.display = "inline-block"; var thingheight = window.getcomputedstyle(thing).height; because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the dom, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.
... to find a suitable library for your server code, see the chrome logger
documentation.
Rich output - Firefox Developer Tools
nables detailed examination of the object's properties provides richer information for dom elements, and enables you to select them in the inspector type-specific rich output the web console provides rich output for many object types, including the following: object array date promise regexp window
document element event examining object properties when an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded.
...then you can paste it into a
document.
Working with iframes - Firefox Developer Tools
you can point the developer tools at a specific iframe within a
document.
... you'll see a button in the toolbar: click it, and you'll see a popup listing all the iframes in the
document, as well as the main
document itself.
Firefox Developer Tools
the menu also includes links to the
documentation for firefox web tools and the mozilla community.
... download firefox developer edition connecting the developer tools if you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the
document hosted by the currently active tab.
Animation.onfinish - Web APIs
you can force the animation into the "finished" state by setting its starttime to
document.timeline.currenttime - (animation.currenttime * animation.playbackrate).
...here is one instance where we add pointer events back to an element after its opacity animation has faded it in: // add an animation to the game's ending credits var endingui =
document.getelementbyid("ending-ui"); var bringui = endingui.animate(keysfade, timingfade); // pause said animation's credits bringui.pause(); // this function removes pointer events on the credits.
AnimationTimeline - Web APIs
this interface exists to define timeline features (inherited by
documenttimeline and future timeline types) and is not itself directly used by developers.
... anywhere you see animationtimeline, you should use
documenttimeline or any other timeline type instead.
Attr.localName - Web APIs
html content <button id="example">click me</button> javascript content const element =
document.queryselector("#example"); element.addeventlistener("click", function() { const attribute = element.attributes[0]; alert(attribute.localname); }); notes the local name of an attribute is the part of the attribute's qualified name that comes after the colon.
... qualified names are typically used in xml as part of the namespace(s) of the particular xml
documents.
Attr.prefix - Web APIs
when a
document is served with an xml mime type.
... this will not work for html
documents.
AudioContext.createMediaStreamDestination() - Web APIs
<!doctype html> <html> <head> <title>createmediastreamdestination() demo</title> </head> <body> <h1>createmediastreamdestination() demo</h1> <p>encoding a pure sine wave to an opus file </p> <button>make sine wave</button> <audio controls></audio> <script> var b =
document.queryselector("button"); var clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("click", function(e) { if (!clicked) { mediarecorder.start(); osc.st...
... var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
document.queryselector("audio").src = url.createobjecturl(blob); }; </script> </body> </html> note: you can view this example live, or study the source code, on github.
AudioContext.getOutputTimestamp() - Web APIs
this is the time after the
document containing the audio context was first rendered.
... performancetime: a point in the time coordinate system of a performance interface; the time after the
document containing the audio context was first rendered examples in the following code we start to play an audio file after a play button is clicked, and start off a requestanimationframe loop running, which constantly outputs the contexttime and performancetime.
AudioTrackList: change event - Web APIs
bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement =
document.queryselector('video'); videoelement.audiotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `enabled` will trigger the `change` event const toggletrackbutton =
document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); using the onchange event handler property: const videoelement =
document.
...queryselector('video'); videoelement.audiotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `enabled` will trigger the `change` event const toggletrackbutton =
document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); specifications specification status html living standardthe definition of 'change' in that specification.
BiquadFilterNode.getFrequencyResponse() - Web APIs
requencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our html to contain our results, and grab a reference to it in our javascript: <p>biquad filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput =
document.queryselector('.freq-response-output'); finally, after creating our biquad 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 biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfi...
... function calcfrequencyresponse() { biquadfilter.getfrequencyresponse(myfrequencyarray,magresponseoutput,phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification.
Bluetooth.referringDevice - Web APIs
the bluetooth.referringdevice attribute of the bluetooth interface returns a bluetoothdevice if the current
document was opened in response to an instruction sent by this device and null otherwise.
... syntax bluetooth.referringdevice value a bluetoothdevice, if the
document was opened in response to an instruction sent by this device and null otherwise.
Body.json() - Web APIs
const mylist =
document.queryselector('ul'); const myrequest = new request('products.json'); fetch(myrequest) .then(response => response.json()) .then(data => { for (const product of data.products) { let listitem =
document.createelement('li'); listitem.appendchild(
document.createelement('strong') ).textcontent = product.name; listitem.append( ` can be found in ${ ...
...cost: ` ); listitem.appendchild(
document.createelement('strong') ).textcontent = `£${product.price}`; mylist.appendchild(listitem); } }) .catch(console.error); specifications specification status comment fetchthe definition of 'body.json()' in that specification.
CSSRuleList - Web APIs
example // get the first style sheet’s first rule var first_rule =
document.stylesheets[0].cssrules[0]; see also cssrule cssrulelist implementations there are multiple properties in the cssom that will return a cssrulelist.
... they are: cssstylesheet property cssrules cssmediarule property cssrules csskeyframesrule property cssrules cssmoz
documentrule property cssrules specifications specification status comment css object model (cssom)the definition of 'cssrulelist' in that specification.
CSSStyleDeclaration.getPropertyPriority() - Web APIs
example the following javascript code checks whether margin is marked as important in a css selector rule: var declaration =
document.stylesheets[0].cssrules[0].style; var isimportant = declaration.getpropertypriority('margin') === 'important'; specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertypriority()' in that specification.
... working draft
document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.getPropertyValue() - Web APIs
example the following javascript code queries the value of the margin property in a css selector rule: var declaration =
document.stylesheets[0].cssrules[0].style; var value = declaration.getpropertyvalue('margin'); // "1px 2px" specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertyvalue()' in that specification.
... working draft
document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.item() - Web APIs
javascript has a special simpler syntax for obtaining an item from a nodelist by index: var propertyname = style[index]; example var style =
document.getelementbyid('div1').style; var propertyname = style.item(1); // or simply style[1] - returns the second style listed specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.item()' in that specification.
... working draft
document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.length - Web APIs
example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv =
document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification.
... working draft
document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.parentRule - Web APIs
example the following javascript code gets the parent css style rule from a cssstyledeclaration: var declaration =
document.stylesheets[0].rules[0].style; var rule = declaration.parentrule; specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.parentrule' in that specification.
... working draft
document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.removeProperty() - Web APIs
example the following javascript code removes the background-color css property from a selector rule: var declaration =
document.stylesheets[0].rules[0].style; var oldvalue = declaration.removeproperty('background-color'); specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.removeproperty()' in that specification.
... working draft
document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSS Object Model (CSSOM) - Web APIs
on cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications:
document, window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement.
... css device adaptation working draft css counter styles level 3 candidate recommendation
document object model (dom) level 2 style specification obsolete initial definition.
Using the CSS Painting API - Web APIs
for more options, look at the canvas
documentation.
... css.paintworklet.addmodule('nameofpaintworkletfile.js'); this can be done using the paint worklet's addmodule() method in a <script> within the main html or in an external javascript file linked to from the
document.
Cache.match() - Web APIs
in this example, only html
documents retrieved with the get http verb will be cached.
... self.addeventlistener('fetch', function(event) { // we only want to call event.respondwith() if this is a get request for an html
document.
CanvasPattern.setTransform() - Web APIs
html <canvas id="canvas"></canvas> <svg id="svg1"></svg> javascript var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 =
document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = patte...
...reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea =
document.getelementbyid('code'); var reset =
document.getelementbyid('reset'); var edit =
document.getelementbyid('edit'); var code = textarea.value; var svg1 =
document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textare...
CanvasRenderingContext2D.addHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); canvas.addeventlistener('mousemove', function(event) { if(event.region) { alert('ouch, my eye :('); } }); ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi); ctx.arc(130, 80, 10, 0, 2 * math.pi); ctx.fill(); ctx.addhitregion({...
...layable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi, false); ctx.stroke();</textarea> var canvas =
document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea =
document.getelementbyid("code"); var reset =
document.getelementbyid("reset"); var edit =
document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code;...
CanvasRenderingContext2D.arc() - Web APIs
const canvas =
document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 75, 50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws various shapes to show what is possible with arc().
... html <canvas width="150" height="200"></canvas> javascript const canvas =
document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); // draw shapes for (let i = 0; i <= 3; i++) { for (let j = 0; j <= 2; j++) { ctx.beginpath(); let x = 25 + j * 50; // x coordinate let y = 25 + i * 50; // y coordinate let radius = 20; // arc radius let startangle = 0; // starting point on circle let endangle = math.pi + (math.pi * j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } else { ...
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript // define canvas and context const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // define the points as {x, y} let start = { x: 50, y: 20 }; let cp1 = { x: 230, y: 30 }; let cp2 = { x: 150, y: 80 }; let end = { x: 250, y: 100 }; // cubic bézier curve ctx.beginpath(); ctx.moveto(start.x, start.y); ctx.beziercurveto(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); ctx.stroke(); // start and end poin...
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.clearRect() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, canvas.width, canvas.height); erasing part of a canvas this example draws a blue triangle on top of a yellowish background.
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw yellow background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontex...
CanvasRenderingContext2D.clip() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100, 75, 50, 0, math.pi * 2); ctx.clip(); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two re...
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.closePath() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 140); // move pen to bottom-left corner ctx.lineto(120, 10); // line to top corner ctx.lineto(220, 140); // line to bottom-right corner ctx.closepath(); // line to bottom-left corner ctx.stroke(); result closing just one sub-path this example draws a smiley face consisting of three dis...
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(240, 20, 40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20, 40, 0, math.pi); ctx.moveto(215, 80); ctx.arc(150, 80, 65, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.closepath' in that specification.
CanvasRenderingContext2D.createImageData() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 50); console.log(imagedata); // imagedata { width: 100, height: 50, data: uint8clampedarray[20000] } filling a blank imagedata object this example creates and fills a new imagedata object with purple pixels.
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // modify pixel data imagedata.data[i + 0] = 190; // r value imagedata.data[i + 1] = 0; // g value imagedata.data[i + 2] = 210; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result more examples for more examples using createimagedata() and ...
CanvasRenderingContext2D.direction - Web APIs
"inherit" the text direction is inherited from the <canvas> element or the
document as appropriate.
... html <canvas id="canvas"></canvas> javascript var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hi!', 150, 50); ctx.direction = 'rtl'; ctx.filltext('hi!', 150, 130); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.direction' in that specification.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
html <canvas id="canvas"> <button id="button1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const button1 =
document.getelementbyid('button1'); const button2 =
document.getelementbyid('button2');
document.addeventlistener('focus', redraw, true);
document.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.heig...
... coordinates const x = e.clientx - canvas.offsetleft; const y = e.clienty - canvas.offsettop; // focus button1, if appropriate drawbutton(button1, 20, 20); if (ctx.ispointinpath(x, y)) { button1.focus(); } // focus button2, if appropriate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.focus(); } } function drawbutton(el, x, y) { const active =
document.activeelement === el; const width = 150; const height = 40; // button background ctx.fillstyle = active ?
CanvasRenderingContext2D.drawImage() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image =
document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71, 104, 124, 21, 20, 87, 104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing.
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = new image(60, 45); // using optional size for image image.onload = drawimageactualsize; // draw when image has loaded // load an image of intrinsic size 300x227 in css pixels image.src = 'https://udn.realityripple.com/samples/db/f374e9c6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in ...
CanvasRenderingContext2D.ellipse() - Web APIs
html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with ...
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(60, 75, 50, 30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.fill() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.fill(); result specifying a path and a fillrule this example saves some intersecting lines to a path2d object.
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fill' in that specification.
CanvasRenderingContext2D.fillRect() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(20, 10, 150, 100); result filling the whole canvas this code snippet fills the entire canvas with a rectangle.
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillrect(0, 0, canvas.width, canvas.height); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fillrect' in that specification.
CanvasRenderingContext2D.fillStyle - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.f...
CanvasRenderingContext2D.fillText() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90); this code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90, 140); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filltext' in that specification.
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.filter = 'blur(4px)'; ctx.font = '48px serif'; ctx.filltext('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image =
document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.getImageData() - Web APIs
securityerror the canvas contains or may contain pixels which were loaded from an origin other than the one from which the
document itself was loaded.
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); let imagedata = ctx.getimagedata(60, 60, 200, 100); ctx.putimagedata(imagedata, 150, 10); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.getimagedata' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles f...
CanvasRenderingContext2D.isPointInPath() - Web APIs
html <canvas id="canvas"></canvas> <p>in path: <code id="result">false</code></p> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const result =
document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.fill(); result.innertext = ctx.ispointinpath(30, 70); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in a circular path2d path.
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circle const circle = new path2d(); circle.arc(150, 75, 50, 0, 2 * math.pi); ctx.fillstyle = 'red'; ctx.fill(circle); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification status comment html living standardthe definition of 'canvasren...
CanvasRenderingContext2D.isPointInStroke() - Web APIs
html <canvas id="canvas"></canvas> <p>in stroke: <code id="result">false</code></p> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const result =
document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.innertext = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path.
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(150, 75, 40, 60, math.pi * .25, 0, 2 * math.pi); ctx.linewidth = 25; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); resul...
CanvasRenderingContext2D.lineCap - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 20); ctx.linewidth = 15; ctx.linecap = 'round'; ctx.lineto(100, 100); ctx.stroke(); result comparison of line caps in this example three lines are drawn, each with a different value for the linecap property.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const linecap = ['butt', 'round', 'square']; // draw guides ctx.strokestyle = '#09f'; ctx.beginpath(); ctx.moveto(10, 10); ctx.lineto(140, 10); ctx.moveto(10, 140); ctx.lineto(140, 140); ctx.stroke(); // draw lines ctx.strokestyle = 'black'; for (let i = 0; i < linecap.length; i++) { ctx.linewidth = 15; ctx.linecap = linecap[i];...
CanvasRenderingContext2D.lineDashOffset - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([4, 16]); // dashed line with no offset ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // dashed line with offset of 4 ctx.beginpath(); ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result the line with a dash offset is drawn in re...
... html <canvas id="canvas"></canvas> const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(10, 10, 100, 100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.li...
CanvasRenderingContext2D.lineJoin - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 20; ctx.linejoin = 'round'; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(190, 100); ctx.lineto(280, 20); ctx.lineto(280, 150); ctx.stroke(); result comparison of line joins the example below draws three different paths, demonstrating each of the three linejoin options.
... <canvas id="canvas" width="150" height="150"></canvas> var ctx =
document.getelementbyid('canvas').getcontext('2d'); var linejoin = ['round', 'bevel', 'miter']; ctx.linewidth = 10; for (let i = 0; i < linejoin.length; i++) { ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-5, 5 + i * 40); ctx.lineto(35, 45 + i * 40); ctx.lineto(75, 5 + i * 40); ctx.lineto(115, 45 + i * 40); ctx.lineto(155, 5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linejoin' in that specification.
CanvasRenderingContext2D.lineTo() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); // start a new path ctx.moveto(30, 50); // move the pen to (30, 50) ctx.lineto(150, 100); // draw a line to (150, 100) ctx.stroke(); // render the path result drawing connected lines each call of lineto() (and similar methods) automatically adds to the current sub-path, which means that all th...
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 130); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 130); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
CanvasRenderingContext2D.putImageData() - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); function putimagedata(ctx, imagedata, dx, dy, dirtyx, dirtyy, dirtywidth, dirtyheight) { var data = imagedata.data; var height = imagedata.height; var width = imagedata.width; dirtyx = dirtyx || 0; dirtyy = dirtyy || 0; dirtywidth = dirtywidth !== undefined?
... javascript const canvas =
document.createelement("canvas"); canvas.width = 1; canvas.height = 1; const context = canvas.getcontext("2d"); const imgdata = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1] = 127; pixels[0 + 2] = 255; pixels[0 + 3] = 1; console.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, c...
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // quadratic bézier curve ctx.beginpath(); ctx.moveto(50, 20); ctx.quadraticcurveto(230, 30, 50, 100); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(50, 20, 5, 0, 2 * math.pi); // start point ctx.arc(50, 100, 5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = '...
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(230, 150, 250, 20); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.
CanvasRenderingContext2D.resetTransform() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); result the skewed rectangles are gray, and the non-skewed rectangles are red.
CanvasRenderingContext2D.rotate() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity m...
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red.
CanvasRenderingContext2D.scale() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // scaled rectangle ctx.scale(9, 3); ctx.fillstyle = 'red'; ctx.fillrect(10, 10, 8, 20); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // non-scaled rectangle ctx.fillstyle = 'gray'; ctx.fillrect(10, 10, 8, 20); result the scaled rectangle is red, and the non-scaled rectangle i...
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.filltext('hello world!', -280, 90); ctx.settransform(1, 0, 0, 1, 0, 0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scale' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="ed...
...it" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas =
document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea =
document.getelementbyid("code"); var reset =
document.getelementbyid("reset"); var edit =
document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", ...
CanvasRenderingContext2D.setLineDash() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common patterns this example illustrates a variety of common line dash patterns.
... function drawdashedline(pattern) { ctx.beginpath(); ctx.setlinedash(pattern); ctx.moveto(0, y); ctx.lineto(300, y); ctx.stroke(); y += 20; } const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3] result specifications specification status comment html living standardthe definition of 'canva...
CanvasRenderingContext2D.setTransform() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.settransform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result retrieving and passing a dommatrix object in the following example, we have two <canvas> elements.
... html <canvas width="240"></canvas> <canvas width="240"></canvas> css canvas { border: 1px solid black; } javascript const canvases =
document.queryselectorall('canvas'); const ctx1 = canvases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill(); result specifications ...
CanvasRenderingContext2D.shadowColor - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 10; ctx.shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20, 100, 100); result shadows on translucent shapes a shadow's opacity is affected by the transparency level of its parent object (e...
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'rgba(255, 0, 0, .8)'; ctx.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(10, 10, 150, 100); // stroked rectangle ctx.linewidth = 10; ctx.strokestyle = 'rgba(0, 0, 255, .6)'; ctx.strokerect(10, 10, 150, 100); result specifications specification status comment html living standa...
CanvasRenderingContext2D.strokeRect() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.strokestyle = 'green'; ctx.strokerect(20, 10, 160, 100); result applying various context settings this example draws a rectangle with a drop shadow and thick, beveled outlines.
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification.
CanvasRenderingContext2D.strokeStyle - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.strokestyle = 'blue'; ctx.strokerect(10, 10, 100, 100); result creating multiple stroke colors using loops in this example, we use two for loops and the arc() method to draw a grid of circles, each having a different stroke color.
...(the red channel has a fixed value.) <canvas id="canvas" width="150" height="150"></canvas> var ctx =
document.getelementbyid('canvas').getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokestyle' in that spec...
CanvasRenderingContext2D.strokeText() - Web APIs
const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90); this code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90, 140); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroketext' in that specification.
CanvasRenderingContext2D.textAlign - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); canvas.width = 350; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned'...
... html <canvas id="canvas"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification.
Canvas API - Web APIs
html <canvas id="canvas"></canvas> javascript the
document.getelementbyid() method gets a reference to the html <canvas> element.
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontex...
Channel Messaging API - Web APIs
the channel messaging api allows two separate scripts running in different browsing contexts attached to the same
document (e.g., two iframes, or the main
document and an iframe, two
documents via a sharedworker, or two workers) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.
...you could then respond by sending a message back to the original
document using messageport.postmessage.
ChildNode.remove() - Web APIs
syntax node.remove(); example using remove() <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <div id="div-03">here is div-03</div> var el =
document.getelementbyid('div-02'); el.remove(); // removes the div with the 'div-02' id childnode.remove() is unscopable the remove() method is not scoped into the with statement.
...dnode/remove()/remove().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('remove')) { return; } object.defineproperty(item, 'remove', { configurable: true, enumerable: true, writable: true, value: function remove() { this.parentnode.removechild(this); } }); }); })([element.prototype, characterdata.prototype,
documenttype.prototype]); specifications specification status comment domthe definition of 'childnode.remove' in that specification.
ChildNode - Web APIs
it's implemented by element,
documenttype, and characterdata objects.
...the characterdata and
documenttype implemented the new interfaces.
Clipboard API - Web APIs
this api is designed to supersede accessing the clipboard using
document.execcommand().
... accessing the clipboard instead of creating a clipboard object through instantiation, you access the system clipboard through the navigator.clipboard global: navigator.clipboard.readtext().then( cliptext =>
document.queryselector(".editor").innertext += cliptext); this snippet fetches the text from the clipboard and appends it to the first element found with the class editor.
CloseEvent.initCloseEvent() - Web APIs
the closeevent.initcloseevent() method initializes the value of a close event once it's been created (normally using the
document.createevent() method).
... events initialized in this way must have been created with the
document.createevent() method.
ContentIndex - Web APIs
async function createreadinglist() { // 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 readinglistelem =
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.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = do...
...cument.createelement('ul'); for (const entry of entries) { const listitem =
document.createelement('li'); const anchorelem =
document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.
CustomElementRegistry.upgrade() - Web APIs
the upgrade() method of the customelementregistry interface upgrades all shadow-containing custom elements in a node subtree, even before they are connected to the main
document.
... examples taken from the html spec: const el =
document.createelement("spider-man"); class spiderman extends htmlelement {} customelements.define("spider-man", spiderman); console.assert(!(el instanceof spiderman)); // not yet upgraded customelements.upgrade(el); console.assert(el instanceof spiderman); // upgraded!
DOMException - Web APIs
(legacy code value: 3 and legacy constant name: hierarchy_request_err) wrong
documenterror the object is in the wrong
document.
... (legacy code value: 4 and legacy constant name: wrong_
document_err) invalidcharactererror the string contains invalid characters.
DOMMatrixReadOnly.scale() - Web APIs
examples this svg contains three squares, one red, one blue, and one green, each positioned at the
document origin: <svg width="250" height="250" viewbox="0 0 25 25"> <rect width="25" height="25" fill="red" /> <rect id="transformed" width="25" height="25" fill="blue" /> <rect id="transformedorigin" width="25" height="25" fill="green" /> </svg> this javascript first creates an identity matrix, then uses the scale() method to create a new matrix with a single parameter.
... = new dommatrixreadonly(); const scaledmatrix = matrix.scale(0.5); let scaledmatrixwithorigin = matrix.scale(0.5, 25, 25); // if the browser has interpreted these parameters as scalex, scaley, scalez, the resulting matrix is 3d const browserexpectssixparamscale = !scaledmatrixwithorigin.is2d; if (browserexpectssixparamscale) { scaledmatrixwithorigin = matrix.scale(0.5, 0.5, 1, 25, 25, 0); }
document.queryselector('#transformed').setattribute('transform', scaledmatrix.tostring());
document.queryselector('#transformedorigin').setattribute('transform', scaledmatrixwithorigin.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.scale()' in that specification.
DOMMatrixReadOnly.translate() - Web APIs
examples this svg contains two squares, one red and one blue, each positioned at the
document origin: <svg width="250" height="250" viewbox="0 0 50 50"> <rect width="25" height="25" fill="red" /> <rect id="transformed" width="25" height="25" fill="blue" /> </svg> the following javascript first creates an identity matrix, then uses the translate() method to create a new, translated matrix — which is then applied to the blue square as a transform.
... const matrix = new dommatrixreadonly().translate(25, 25);
document.queryselector('#transformed').setattribute('transform', matrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.translate()' in that specification.
DOMTokenList.remove() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span =
document.queryselector("span"); let classes = span.classlist; classes.remove("c"); span.textcontent = classes; the output looks like this: to remove multiple classes at once, you can supply multiple tokens.
... the order you supply the tokens doesn't have to match the order they appear in the list: let span2 =
document.getelementsbytagname("span")[0] let classes2 = span.classlist; classes2.remove("c", "b"); span2.textcontent = classes; specifications specification status comment domthe definition of 'remove()' in that specification.
DOMTokenList - Web APIs
first, the html: <p class="a b c"></p> now the javascript: let para =
document.queryselector("p"); let classes = para.classlist; para.classlist.add("d"); para.textcontent = `paragraph classlist is "${classes}"`; the output looks like this: trimming of whitespace and removal of duplicates methods that modify the domtokenlist (such as domtokenlist.add()) automatically trim any excess whitespace and remove duplicate values from the list.
... for example: <span class=" d d e f"></span> let span =
document.queryselector("span"); let classes = span.classlist; span.classlist.add("x"); span.textcontent = `span classlist is "${classes}"`; the output looks like this: specifications specification status comment domthe definition of 'domtokenlist' in that specification.
DataTransfer.clearData() - Web APIs
<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.addeventlistener('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.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dragendhandler); dropable.addeventlistener('dragover', dragoverhandle...
...entdefault(); } function dragleavehandler (event) { status.innerhtml = 'drag in process (drop was available)'; event.preventdefault(); } function drophandler (event) { dropped = true; status.innerhtml = 'drop done'; event.preventdefault(); // get data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var element =
document.getelementbyid(_data); // append drag source element to event's target element event.target.appendchild(element); // change css styles and displayed text element.style.csstext = 'border: 1px solid black;display: block; color: red'; element.innerhtml = "i'm in the drop zone!"; } }) specifications specification status comment html living standard...
DataTransferItem.getAsFile() - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(
document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
... recommendation snapshot of the html whatwg
document ...
DataTransferItem.getAsString() - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(
document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
... recommendation snapshot fo html whatwg
document ...
DataTransferItem.kind - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(
document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
... recommendation w3c snapshot of the whatwg
document.
DataTransferItem.type - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(
document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
... recommendation snapshot of the html whatwg
document ...
DedicatedWorkerGlobalScope - Web APIs
these events are of type messageevent and will be called when the worker receives a message from the
document that started it (i.e.
... dedicatedworkerglobalscope.postmessage() sends a message — which can consist of any javascript object — to the parent
document that first spawned the worker.
How to create a DOM tree - Web APIs
dynamically creating a dom tree consider the following xml
document: <?xml version="1.0"?> <people> <person first-name="eric" middle-initial="h" last-name="jung"> <address street="321 south st" city="denver" state="co" country="usa"/> <address street="123 main st" city="arlington" state="ma" country="usa"/> </person> <person first-name="jed" last-name="brown"> <address street="321 north st" city="atlanta" state="ga" country="usa"/> <address street="123 west st" city="seattle" state="wa" country="usa"/> <address street="321 south avenue" city="de...
...nver" state="co" country="usa"/> </person> </people> the w3c dom api, supported by mozilla, can be used to create an in-memory representation of this
document like so: var doc =
document.implementation.create
document("", "", null); var peopleelem = doc.createelement("people"); var personelem1 = doc.createelement("person"); personelem1.setattribute("first-name", "eric"); personelem1.setattribute("middle-initial", "h"); personelem1.setattribute("last-name", "jung"); var addresselem1 = doc.createelement("address"); addresselem1.setattribute("street", "321 south st"); addresselem1.setattribute("city", "denver"); addresselem1.setattribute("state", "co"); addresselem1.setattribute("country", "usa"); personelem1.appendchild(addresselem1); var addresselem2 = doc.createelement("address"); addressel...
Example - Web APIs
<html> <head> <title>my
document</title> <script type="text/javascript"> function change() { //
document.getelementsbytagname("h1") returns a nodelist of the h1 // elements in the
document, and the first is number 0: var header =
document.getelementsbytagname("h1").item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic
document"; // now the header is "a dynamic
document".
... var para =
document.getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext =
document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement =
document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the
document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } </script> </head> <body> <input type="button" value="change this
document." onclick="change()"> <h1>header</h1> <p>paragraph</p> </body> </head> ...
EffectTiming.fill - Web APIs
document.getelementbyid("animatebutton").addeventlistener("click", event => {
document.getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it adds an event listener to the "animate" button so that when it's clicked by the user, the box is animated by calling element.animate() on it, providing the boxrotationkeyframes and ...
...var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // set up the rabbit's animation to play on command by calling rabbitdownanimation.play() later var rabbitdownanimation = new animation(rabbitdownkeyframes,
document.timeline); alternatives to fill modes fill modes are primarily provided as a means of representing the animation-fill-mode feature of css animations.
Element.className - Web APIs
example let el =
document.getelementbyid('item'); if (el.classname === 'active'){ el.classname = 'inactive'; } else { el.classname = 'active'; } notes the name classname is used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the dom.
... obsolete
document object model (dom) level 2 html specificationthe definition of 'element.classname' in that specification.
Element: compositionend event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement =
document.queryselector('input[type="text"]'); inputelement.addeventlistener('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> <di...
...on> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-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.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); in...
Element: compositionstart event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement =
document.queryselector('input[type="text"]'); inputelement.addeventlistener('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> <...
...on> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-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.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); in...
Element: compositionupdate event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement =
document.queryselector('input[type="text"]'); inputelement.addeventlistener('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> ...
...on> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-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.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); in...
Element.computedStyleMap() - Web APIs
// get the element const myelement =
document.queryselector('a'); // get the <dl> we'll be populating const styleslist =
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 cssprope...
...rty =
document.createelement('dt'); cssproperty.appendchild(
document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue =
document.createelement('dd'); cssvalue.appendchild(
document.createtextnode(val)); styleslist.appendchild(cssvalue); } in browsers that support computedstylemap(), you'll see a list of all the css properties and values.
Element: dblclick event - Web APIs
javascript const card =
document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform:...
... working draft
document object model (dom) level 3 events specificationthe definition of 'dblclick' in that specification.
Element: focusin event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusin sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form =
document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
...
document object model (dom) level 3 events specification obsolete initial definition ...
Element: focusout event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusout sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form =
document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
...
document object model (dom) level 3 events specification obsolete initial definition ...
Element: fullscreenerror event - Web APIs
bubbles yes cancelable no interface event event handler property onfullscreenerror as with the fullscreenchange event, two fullscreenerror events are fired; the first is sent to the element which failed to change modes, and the second is sent to the
document which contains that element.
... examples const requestor =
document.queryselector('div'); requestor.addeventlistener('fullscreenerror', (event) => { console.error('an error occurred changing into fullscreen'); console.log(event); }); requestor.requestfullscreen(); specifications specification status fullscreen api living standard ...
Element.getAttributeNode() - Web APIs
example // html: <div id="top" /> let t =
document.getelementbyid("top"); let idattr = t.getattributenode("id"); alert(idattr.value == "top") notes when called on an html element in a dom flagged as an html
document, getattributenode lower-cases its argument before proceeding.
... the attr node inherits from node, but is not considered a part of the
document tree.
Element.getClientRects() - Web APIs
*/ var rects = elt.getclientrects(); for (var i = 0; i != rects.length; i++) { var rect = rects[i]; var tablerectdiv =
document.createelement('div'); tablerectdiv.style.position = 'absolute'; tablerectdiv.style.border = '1px solid red'; var scrolltop =
document.
documentelement.scrolltop ||
document.body.scrolltop; var scrollleft =
document.
documentelement.scrollleft ||
document.body.scrollleft; tablerectdiv.style.margin = tablerectdiv.style.padding = '0'; tablerectdiv.style.top = (rect.top + scroll...
... tablerectdiv.style.width = (rect.width - 2) + 'px'; tablerectdiv.style.height = (rect.height - 2) + 'px';
document.body.appendchild(tablerectdiv); } } (function() { /* call function addclientrectsoverlay(elt) for all elements with assigned class "withclientrectsoverlay" */ var elt =
document.getelementsbyclassname('withclientrectsoverlay'); for (var i = 0; i < elt.length; i++) { addclientrectsoverlay(elt[i]); } })(); result specifications specification status comment css object model (cssom) view modulethe definition of 'element.getclientrects()' in that specification.
Element.hasAttributeNS() - Web APIs
example // check that the attribute exists before you set a value var d =
document.getelementbyid("div1"); if (d.hasattributens( "http://www.mozilla.org/ns/specialspace/", "special-align")) { d.setattribute("align", "center"); } notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespac...
...ing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of '
document.hasattributens' in that specification.
Element.hasPointerCapture() - Web APIs
examples <html> <script> function downhandler(ev) { const el =
document.getelementbyid("target"); // element 'target' will receive/capture further events el.setpointercapture(ev.pointerid); /* ...
... } } function init() { const el =
document.getelementbyid("target"); el.onpointerdown = downhandler; } </script> <body onload="init();"> <div id="target">touch this element with a pointer.</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'haspointercapture()' in that specification.
Element.localName - Web APIs
example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text =
document.getelementbyid('text'); var circle =
document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </head> <body onload="test()"> <svg:svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <svg:circle cx=...
...qualified names are typically used in xml as part of the namespace(s) of the particular xml
documents.
Element.matches() - Web APIs
example <ul id="birds"> <li>orange-winged parrot</li> <li class="endangered">philippine eagle</li> <li>great white pelican</li> </ul> <script type="text/javascript"> var birds =
document.getelementsbytagname('li'); for (var i = 0; i < birds.length; i++) { if (birds[i].matches('.endangered')) { console.log('the ' + birds[i].textcontent + ' is endangered!'); } } </script> this will log "the philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered.
... polyfill for browsers that do not support element.matches() or element.matchesselector(), but include support for
document.queryselectorall(), a polyfill exists: if (!element.prototype.matches) { element.prototype.matches = element.prototype.matchesselector || element.prototype.mozmatchesselector || element.prototype.msmatchesselector || element.prototype.omatchesselector || element.prototype.webkitmatchesselector || function(s) { var matches = (this.
document || this.owner
document).queryselectorall(s), i = matches.length; while (--i >= 0 && matches.item(i) !== this) {} return i > -1; }; } however, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical case...
Element: mousedown event - Web APIs
html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics =
document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
... working draft
document object model (dom) level 3 events specificationthe definition of 'mousedown' in that specification.
Element: mousemove event - Web APIs
html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics =
document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
... working draft
document object model (dom) level 3 events specificationthe definition of 'mousemove' in that specification.
Element: mouseout event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test =
document.getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.addeventlistener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when th...
... working draft
document object model (dom) level 3 events specificationthe definition of 'mouseout' in that specification.
Element: mouseover event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test =
document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be ...
... working draft
document object model (dom) level 3 events specificationthe definition of 'mouseover' in that specification.
Element: mouseup event - Web APIs
html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics =
document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
... working draft
document object model (dom) level 3 events specificationthe definition of 'mouseup' in that specification.
Element.name - Web APIs
name can be used in the
document.getelementsbyname() method, a form and with the form elements collection.
... syntax htmlelement.name = string let elname = htmlelement.name let fcontrol = htmlformelement.elementname let controlcollection = htmlformelement.elements.elementname example <form action="" name="forma"> <input type="text" value="foo"> </form> <script type="text/javascript"> // get a reference to the first element in the form let formelement =
document.forms['forma'].elements[0] // give it a name formelement.name = 'inputa' // show the value of the input alert(
document.forms['forma'].elements['inputa'].value) </script> notes in internet explorer (ie), the name property of dom objects created using
document.createelement() can't be set or modified.
Element.namespaceURI - Web APIs
in firefox 3.5 and earlier, the namespace uri for html elements in html
documents is null.
... you can create an element with the specified namespaceuri using the dom level 2 method
document.createelementns.
Element.scrollHeight - Web APIs
inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2a9f00 solid 2px; border-radius: 5px; } javascript function checkreading () { if (checkreading.read) { return; } checkreading.read = this.scrollheight - this.scrolltop === this.clientheight;
document.registration.accept.disabled =
document.getelementbyid("nextstep").disabled = !checkreading.read; checkreading.noticebox.innerhtml = checkreading.read ?
... "thank you." : "please, scroll and read the following text."; } onload = function () { var otoberead =
document.getelementbyid("rules"); checkreading.noticebox =
document.createelement("span");
document.registration.accept.checked = false; checkreading.noticebox.id = "notice"; otoberead.parentnode.insertbefore(checkreading.noticebox, otoberead); otoberead.parentnode.insertbefore(
document.createelement("br"), otoberead); otoberead.onscroll = checkreading; checkreading.call(otoberead); } specifications specification status comment css object model (cssom) view modulethe definition of 'element.scrollheight' in that specification.
Element.setAttribute() - Web APIs
the attribute name is automatically converted to all lower-case when setattribute() is called on an html element in an html
document.
... html <button>hello world</button> javascript var b =
document.queryselector("button"); b.setattribute("name", "hellobutton"); b.setattribute("disabled", ""); this demonstrates two things: the first call to setattribute() above shows changing the name attribute's value to "hellobutton".
Element.setAttributeNS() - Web APIs
example let d =
document.getelementbyid('d1'); d.setattributens('http://www.mozilla.org/ns/specialspace', 'spec:align', 'center'); notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (se...
... specifications specification status comment domthe definition of '
document.setattributens' in that specification.
Element.setAttributeNodeNS() - Web APIs
example // <div id="one" xmlns:myns="http://www.mozilla.org/ns/specialspace" // myns:special-align="utterleft">one</div> // <div id="two">two</div> var myns = "http://www.mozilla.org/ns/specialspace"; var d1 =
document.getelementbyid("one"); var d2 =
document.getelementbyid("two"); var a = d1.getattributenodens(myns, "special-align"); d2.setattributenodens(a.clonenode(true)); alert(d2.attributes[1].value) // returns: `utterleft' notes if the specified attribute already exists on the element, then that attribute is replaced with the new one and the replaced one is returned.
...ing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of '
document.setattributenodens' in that specification.
Element.slot - Web APIs
when <my-paragraph> is used in the
document, the slot is populated by a slotable element by including it inside the element with a slot attribute with the value my-text.
... let slottedspan =
document.queryselector('my-paragraph span') console.log(slottedspan.slot); // logs 'my-text' specifications specification status comment domthe definition of 'slot' in that specification.
Element.toggleAttribute() - Web APIs
the attribute name is automatically converted to all lower-case when toggleattribute() is called on an html element in an html
document.
... html <input value="text"> <button>toggleattribute("readonly")</button> javascript var button =
document.queryselector("button"); var input =
document.queryselector("input"); button.addeventlistener("click", function(){ input.toggleattribute("readonly"); }); result dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-...
Comparison of Event Targets - Web APIs
</tr> </thead> <tr> <td id="target"></td> <td id="currenttarget"></td> <td id="relatedtarget"></td> <td id="explicitoriginaltarget"></td> <td id="originaltarget"></td> </tr> </table> <p>clicking on the text will show the difference between explicitoriginaltarget, originaltarget, and target</p> <script> function handleclicks(e) {
document.getelementbyid('target').innerhtml = e.target;
document.getelementbyid('currenttarget').innerhtml = e.currenttarget;
document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget;
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.addeventlistener('click', handleclicks, false);
document.addeventlistener('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.cancelable - Web APIs
console.warn(`the following event couldn't be canceled:`); console.dir(event); } }
document.addeventlistener('wheel', preventscrollwheel); notes whether an event can be canceled or not is something that's determined when that event is initialized.
... living standard
document object model (dom) level 2 events specificationthe definition of 'event.cancelable' in that specification.
Event.target - Web APIs
// make a list const ul =
document.createelement('ul');
document.body.appendchild(ul); const li1 =
document.createelement('li'); const li2 =
document.createelement('li'); ul.appendchild(li1); ul.appendchild(li2); function hide(evt) { // e.target refers to the clicked <li> element // this is different than e.currenttarget, which would refer to the parent <ul> in this context evt.target.style.visibility = 'hidden'; } // att...
... obsolete
document object model (dom) level 2 events specificationthe definition of 'event.target' in that specification.
Event.timeStamp - Web APIs
syntax time = event.timestamp; value this value is the number of milliseconds elapsed from the beginning of the current
document's lifetime till the event was created.
...</p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(event) { var time =
document.getelementbyid("time"); time.firstchild.nodevalue = event.timestamp; }
document.body.addeventlistener("keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp might get rounded depending on browser settings.
EventListener - Web APIs
example html <button id="btn">click here!</button> javascript const buttonelement =
document.getelementbyid('btn'); // add a handler for the 'click' event by providing a callback function.
...
document object model (dom) level 2 events specificationthe definition of 'eventlistener' in that specification.
EventSource - Web APIs
var evtsource = new eventsource('sse.php'); var eventlist =
document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement =
document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } each received event causes our eventsource object's onmessage event handler to be run.
... it, in turn, creates a new <li> element and writes the message's data into it, then appends the new element to the list element already in the
document.
EventTarget.removeEventListener() - Web APIs
const body =
document.queryselector('body') const clicktarget =
document.getelementbyid('click-target') const mouseovertarget =
document.getelementbyid('mouse-over-target') let toggle = false; function makebackgroundyellow() { if (toggle) { body.style.backgroundcolor = 'white'; } else { body.style.backgroundcolor = 'yellow'; } toggle = !toggle; } clicktarget.addeventlistener('click',...
... obsolete
document object model (dom) level 2 events specificationthe definition of 'eventtarget.removeeventlistener()' in that specification.
FeaturePolicy.allowedFeatures() - Web APIs
example the followin example logs all the allowed directives for the current
document.
... // first, get the feature policy object const featurepolicy =
document.featurepolicy // then query feature for specific const allowed = featurepolicy.allowedfeatures() for (const directive of allowed){ console.log(directive) } specifications specification status comment feature policythe definition of 'allowsfeature' in that specification.
FeaturePolicy.allowsFeature() - Web APIs
example the following example queries whether or not the
document is allowed to use camera api by the feature policy.
... // first, get the feature policy object const featurepolicy =
document.featurepolicy // then query feature for specific const allowed = featurepolicy.allowsfeature("camera") if (allowed){ console.log("fp allows camera.") } else { console.log("fp does not allows camera.") } specifications specification status comment feature policythe definition of 'allowsfeature' in that specification.
FileReader.readAsDataURL() - Web APIs
example html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview =
document.queryselector('img'); const file =
document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file...
..." onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview =
document.queryselector('#preview'); var files =
document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); reader.readasdataurl(file); } } if (files) { [].foreach.call(files, readandpreview); } } note: the filereader() constructor was not supported...
FileSystemDirectoryEntry - Web APIs
example in the following code snippet, we create a directory called "
documents." // taking care of the browser-specific prefixes.
... function onfs(fs){ fs.root.getdirectory('
documents', {create:true}, function(directoryentry){ //directoryentry.isfile === false //directoryentry.isdirectory === true //directoryentry.name === '
documents' //directoryentry.fullpath === '/
documents' }, onerror); } // opening a file system with temporary storage window.requestfilesystem(temporary, 1024*1024 /*1mb*/, onfs, onerror); properties this interface has no properties of its own, but inherits properties from its parent interface, filesystementry.
FileSystemEntry.toURL() - Web APIs
return value a domstring containing a url that can then be used as a
document reference in html content, or an empty string if the url can't be generated (such as if the file system implementation doesn't support tourl()).
... code that makes use of this might look like this: let img =
document.createelement("img"); img.src = imagefileentry.tourl();
document.body.appendchild(img); assuming the scenario mentioned before the code, the result would be html that looks like this being appended to the end of the
document: <img src="filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg"> browser compatibility the compatibility table on this page is generated from structured...
Frame Timing API - Web APIs
example code of the interfaces described in this
document is included in using the frame timing api.
... performanceentry.name set to the
document's address.
FullscreenOptions.navigationUI - Web APIs
example in this example, the entire
document is placed into full-screen mode by calling requestfullscreen() on the
document's
document.
documentelement, which is the
document's root <html> element.
... let elem =
document.
documentelement; elem.requestfullscreen({ navigationui: "show" }).then({}).catch(err => { alert(`an error occurred while trying to switch into full-screen mode: ${err.message} (${err.name})`); }); the promise's resolve handler does nothing, but if the promise is rejected, an error message is displayed by calling alert().
Using the Geolocation API - Web APIs
body { padding: 20px; background-color:#ffffc9 } button { margin: .5rem 0; } html <button id = "find-me">show my location</button><br/> <p id = "status"></p> <a id = "map-link" target="_blank"></a> javascript function geofindme() { const status =
document.queryselector('#status'); const maplink =
document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; status.textcontent = ''; maplink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; maplink.textcontent ...
...= `latitude: ${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } }
document.queryselector('#find-me').addeventlistener('click', geofindme); result ...
Geolocation API - Web APIs
body { padding: 20px; background-color:#ffffc9 } button { margin: .5rem 0; } html <button id = "find-me">show my location</button><br/> <p id = "status"></p> <a id = "map-link" target="_blank"></a> javascript function geofindme() { const status =
document.queryselector('#status'); const maplink =
document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; status.textcontent = ''; maplink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; maplink.textcontent ...
...= `latitude: ${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } }
document.queryselector('#find-me').addeventlistener('click', geofindme); result specifications specification status comment geolocation api recommendation ...
GlobalEventHandlers.onblur - Web APIs
it's available on element,
document, and window.
... html <input type="text" value="click here"> javascript let input =
document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus; function inputblur() { input.value = 'focus has been lost'; } function inputfocus() { input.value = 'focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly.
GlobalEventHandlers.onclick - Web APIs
html <div id="demo">click here</div> javascript
document.getelementbyid('demo').onclick = function changecontent() {
document.getelementbyid('demo').innerhtml = "help me";
document.getelementbyid('demo').style = "color: red"; } result getting the coordinates of clicks this example displays the coordinates at which the most recent mouse button click occurred.
... html <p>click anywhere in this example.</p> <p id="log"></p> javascript let log =
document.getelementbyid('log');
document.onclick = inputchange; function inputchange(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specification specification status comment html living standardthe definition of 'onclick' in that specification.
GlobalEventHandlers.ondragend - Web APIs
ransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(
document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { con...
... var el=
document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=
document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> ...
GlobalEventHandlers.ondragenter - Web APIs
ransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(
document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { con...
... var el=
document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=
document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> ...
GlobalEventHandlers.ondragexit - Web APIs
ransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(
document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { con...
... var el=
document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=
document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> ...
GlobalEventHandlers.ondragleave - Web APIs
tdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(
document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttarget.style.background = "white"; } function dragend_handler(...
... var el=
document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's background color back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=
document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</c...
GlobalEventHandlers.onload - Web APIs
tml> <html> <head> <title>onload test</title> // es5 <script> function load() { console.log("load event detected!"); } window.onload = load; </script> // es2015 <script> const load = () => { console.log("load event detected!"); } window.onload = load; </script> </head> <body> <p>the load event fires when the
document has finished loading!</p> </body> </html> notes the load event fires at the end of the
document loading process.
... at this point, all of the objects in the
document are in the dom, and all the images, scripts, links and sub-frames have finished loading.
GlobalEventHandlers.onmousemove - Web APIs
html <p><a href="#" data-tooltip="first link">see a tooltip here …</a></p> <p><a href="#" data-tooltip="second link">… or here!</a></p> css .tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const tooltip = new (function() { const node =
document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', '');
document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty + 10 + 'px'; }; this.show = function(event) { node.textcontent = event.target.dataset.tooltip; node.removeattribute('hidden'); }; this.hide ...
...= function() { node.setattribute('hidden', ''); }; })(); const links =
document.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; }); result draggable elements we also have an example available showing the use of the onmousemove event handler with draggable objects — view the example in action.
GlobalEventHandlers.ontransitioncancel - Web APIs
syntax var transitioncancelhandler = target.ontransitioncancel; target.ontransitioncancel = function value a function to be called when a transitioncancel event occurs indicating that a css transition has been cancelled on the target, where the target object is an html element (htmlelement),
document (
document), or window (window).
... let box =
document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } box.onclick = function() { box.style.display = 'none'; timeout = window.settimeout(appear, 2000); function appear() { box.style.display = 'block'; } } box.ontransitioncancel = function(event) { console.log('transition...
GlobalEventHandlers.ontransitionend - Web APIs
syntax var transitionendhandler = target.ontransitionend; target.ontransitionend = function value a function to be called when a transitionend event occurs indicating that a css transition has completed on the target, where the target object is an html element (htmlelement),
document (
document), or window (window).
... let box =
document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } result the resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away.
HTMLAnchorElement.relList - Web APIs
it is a live domtokenlist containing the set of link types indicating the relationship between the resource represented by the <a> element and the current
document.
... syntax var relstr = anchorelt.rellist; example var anchors =
document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { var list = anchors[i].rellist; var listlength = list.length; console.log("new anchor node found with", listlength, "link types in rellist."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification.
HTMLAreaElement.rel - Web APIs
it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <area> element and the current
document.
... syntax var relstr = areaelt.rel; areaelt.rel = relstr; example var areas =
document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { alert("rel: " + areas[i].rel); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
HTMLAreaElement.relList - Web APIs
it is a live domtokenlist containing the set of link types indicating the relationship between the resource represented by the <area> element and the current
document.
... syntax var relstr = areaelt.rellist; example var areas =
document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { var list = areas[i].rellist; 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 'rellist' in that specification.
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.
... usage notes you can also use other element-creation methods, such as the
document object's createelement() method, to construct a new htmlaudioelement.
HTMLCanvasElement.mozGetAsFile() - Web APIs
function draw() { var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link =
document.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas =
document.getelementbyid('canvas'); var f = canvas.mozgetasfile('tes...
...t.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg =
document.createelement('img'); newimg.src = reader.result;
document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specifications not part of any specification.
HTMLCollection.item - Web APIs
elements appear in an htmlcollection in the same order in which they appear in the
document's source.
... example var c =
document.images; // this is an htmlcollection var img0 = c.item(0); // you can use the item() method this way var img1 = c[1]; // but this notation is easier and more common ...
HTMLDialogElement: cancel event - Web APIs
bubbles no cancelable yes interface event event handler oncancel examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result =
document.queryselector('.result'); const dialog =
document.queryselector('.example-dialog'); dialog.addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog =
document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } el...
...se { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton =
document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'cancel' in that specification.
HTMLDialogElement: close event - Web APIs
bubbles no cancelable no interface event event handler property onclose examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result =
document.queryselector('.result'); const dialog =
document.queryselector('.example-dialog'); dialog.addeventlistener('close', (event) => { result.textcontent = 'dialog was closed'; }); const opendialog =
document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else...
... { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton =
document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'close' in that specification.
HTMLElement: animationcancel event - Web APIs
const animated =
document.queryselector('.animated'); animated.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); animated.style.display = 'none'; the same, but using the onanimationcancel property instead of addeventlistener(): const animated =
document.queryselector('.animated'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = '...
...iner { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes 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.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('...
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.addeventlistener('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="animation-example"> <div class="container"> <p...
....container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @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.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('...
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.addeventlistener('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 = () => { iteration...
...iner { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes 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.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('...
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.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated =
document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live example html <div class="animation-example"> <div class="container"> <p class="animati...
...iner { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes 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.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('...
HTMLElement: change event - Web APIs
option value="">select one …</option> <option value="chocolate">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.addeventlistener('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.addeventlistener('change', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'change' in that specification.
HTMLElement.click() - Web APIs
this event then bubbles up to elements higher in the
document tree (or event chain) and fires their click events.
... syntax element.click() example simulate a mouse-click when moving the mouse pointer over a checkbox: html <form> <input type="checkbox" id="mycheck" onmouseover="myfunction()" onclick="alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() {
document.getelementbyid("mycheck").click(); } specification specification status comment html living standard living standard
document object model (dom) level 2 html specification obsolete initial definition.
HTMLElement.innerText - Web APIs
if the element itself is not being rendered (e.g detached from the
document or is hidden from view), the returned value is the same as the node.textcontent property.
... uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentoutput" rows="6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="innertextoutput" rows="6" cols="30" readonly>...</textarea> javascript const source =
document.getelementbyid("source"); const textcontentoutput =
document.getelementbyid("textcontentoutput"); const innertextoutput =
document.getelementbyid("innertextoutput"); textcontentoutput.value = source.textcontent; innertextoutput.value = source.innertext; result specification specification status comment html living standardthe definition of 'innertext' in that spe...
HTMLElement: input event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input =
document.queryselector('input'); const log =
document.getelementbyid('values'); input.addeventlistener('input', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'input event' in that specification.
... living standard
document object model (dom) level 3 events specificationthe definition of 'input event' in that specification.
HTMLElement.offsetLeft - Web APIs
example var colortable =
document.getelementbyid("t1"); var toleft = colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.
...</span> <span id="longspan">long span that wraps within this div.</span> </div> <div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"> </div> <script type="text/javascript"> var box =
document.getelementbyid("box"); var longspan =
document.getelementbyid("longspan"); box.style.left = longspan.offsetleft +
document.body.scrollleft + "px"; box.style.top = longspan.offsettop +
document.body.scrolltop + "px"; box.style.width = longspan.offsetwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> specification specification status comment css object model (cssom) view modulethe...
HTMLElement: transitioncancel event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel examples this code gets an element that has a transition defined and adds a listener to the transitioncancel event: const transition =
document.queryselector('.transition'); transition.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): const transition =
document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we ...
... const message =
document.queryselector('.message'); const el =
document.queryselector('.transition'); el.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.ad...
HTMLElement: transitionend event - Web APIs
examples this code gets an element that has a transition defined and adds a listener to the transitionend event: const transition =
document.queryselector('.transition'); transition.addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend: const transition =
document.queryselector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the following example, we have a simple <div> element, styled with a transition t...
... const message =
document.queryselector('.message'); const el =
document.queryselector('.transition'); el.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.ad...
HTMLFontElement.face - Web APIs
the
document text, in the default style, is rendered as the first font face that the client's browser supports.
...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 .
HTMLHeadingElement - Web APIs
document object model (dom) level 2 html specificationthe definition of 'htmlheadingelement' in that specification.
... obsolete no change
document object model (dom) level 1 specificationthe definition of 'htmlheadingelement' in that specification.
HTMLHtmlElement.version - Web APIs
this property has been declared as deprecated by the w3c technical recommendation for html 4.01 in favor of use of the dtd for obtaining version information for a
document.
... returns version information about the
document type definition (dtd) of a
document.
HTMLIFrameElement.contentWindow - Web APIs
you can use this window object to access the iframe's
document and its internal dom.
... example of contentwindow var x =
document.getelementsbytagname("iframe")[0].contentwindow; //x = window.frames[0]; x.
document.getelementsbytagname("body")[0].style.backgroundcolor = "blue"; // this would turn the 1st iframe in
document blue.
Image() - Web APIs
it is functionally equivalent to
document.createelement('img').
... examples var myimage = new image(100, 200); myimage.src = 'picture.jpg';
document.body.appendchild(myimage); this would be the equivalent of defining the following html tag inside the <body>: <img width="100" height="200" src="picture.jpg"> specifications specification status comment html living standardthe definition of 'image()' in that specification.
HTMLImageElement.currentSrc - Web APIs
the sizes attribute is provided to indicate that the image should be drawn at 50% of the
document width if the viewport is under 400px wide; otherwise, the image is drawn at 90% width of the
document.
... html <img src="/files/16797/clock-demo-400px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 50%, 90%"> javascript var clockimage =
document.queryselector("img"); let p =
document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; }
document.body.appendchild(p); result specifications specification status comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification.
HTMLImageElement.sizes - Web APIs
this provides the ability to automatically select among different images—even images of different orientations or aspect ratios—as the
document state changes to match different media conditions.
... let image =
document.queryselector("article img"); let break40 =
document.getelementbyid("break40"); let break50 =
document.getelementbyid("break50"); break40.addeventlistener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here.
HTMLImageElement.srcset - Web APIs
example html the html below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our
documentation.
... let box =
document.queryselector(".box"); let image = box.queryselector("img"); let newelem =
document.createelement("p"); newelem.innerhtml = `image: <code>${image.currentsrc}</code>`; box.appendchild(newelem); result in the displayed output below, the selected url will correspond with whether your display results in selecting the 1x or the 2x version of the image.
HTMLIsIndexElement - Web APIs
document object model (dom) level 2 html specificationthe definition of 'htmlisindexelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification
document object model (dom) level 1 specificationthe definition of 'htmlisindexelement' in that specification.
HTMLLinkElement.relList - Web APIs
it is a live domtokenlist containing the set of link types indicating the relationship between the resource represented by the <link> element and the current
document.
... syntax var relstr = linkelt.rellist; example var links =
document.getelementsbytagname("link"); var length = links.length; for (var i = 0; i < length; i++) { var list = links[i].rellist; 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 'rellist' in that specification.
HTMLMediaElement: emptied event - Web APIs
using addeventlistener(): const video =
document.queryselector('video'); video.addeventlistener('emptied', (event) => { console.log('uh oh.
...did you call load()?'); }); using the onemptied event handler property: const video =
document.queryselector('video'); video.onemptied = (event) => { console.log('uh oh.
HTMLMediaElement.load() - Web APIs
example this example finds a <video> element in the
document and resets it by calling load().
... var mediaelem =
document.queryselector("video"); mediaelem.load(); specifications specification status comment html living standardthe definition of 'htmlmediaelement.load()' in that specification.
HTMLMediaElement: loadeddata event - Web APIs
using addeventlistener(): const video =
document.queryselector('video'); video.addeventlistener('loadeddata', (event) => { console.log('yay!
... the readystate just increased to ' + 'have_current_data or greater for the first time.'); }); using the onloadeddata event handler property: const video =
document.queryselector('video'); video.onloadeddata = (event) => { console.log('yay!
HTMLMediaElement: loadedmetadata event - Web APIs
using addeventlistener(): const video =
document.queryselector('video'); video.addeventlistener('loadedmetadata', (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known.
... '); }); using the onloadedmetadata event handler property: const video =
document.queryselector('video'); video.onloadedmetadata = (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known.
HTMLMediaElement: loadstart event - Web APIs
idth: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } js const loadvideo =
document.queryselector('button'); const video =
document.queryselector('video'); const eventlog =
document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleev...
...ent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) {
document.location.reload(); } else { loadvideo.textcontent = "reset example"; source =
document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'loadstart media event' in that specification.
HTMLMediaElement: pause event - Web APIs
using addeventlistener(): const video =
document.queryselector('video'); video.addeventlistener('pause', (event) => { console.log('the boolean paused property is now true.
... either the ' + 'pause() method was called or the autoplay attribute was toggled.'); }); using the onpause event handler property: const video =
document.queryselector('video'); video.onpause = (event) => { console.log('the boolean paused property is now true.
HTMLMediaElement: play event - Web APIs
using addeventlistener(): const video =
document.queryselector('video'); video.addeventlistener('play', (event) => { console.log('the boolean paused property is now false.
... either the ' + 'play() method was called or the autoplay attribute was toggled.'); }); using the onplay event handler property: const video =
document.queryselector('video'); video.onplay = (event) => { console.log('the boolean paused property is now false.
HTMLMediaElement: progress event - Web APIs
rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } javascript const loadvideo =
document.queryselector('button'); const video =
document.queryselector('video'); const eventlog =
document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleev...
...ent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) {
document.location.reload(); } else { loadvideo.textcontent = "reset example"; source =
document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'progress media event' in that specification.
HTMLMediaElement: timeupdate event - Web APIs
using addeventlistener(): const video =
document.queryselector('video'); video.addeventlistener('timeupdate', (event) => { console.log('the currenttime attribute has been updated.
... again.'); }); using the ontimeupdate event handler property: const video =
document.queryselector('video'); video.ontimeupdate = (event) => { console.log('the currenttime attribute has been updated.
HTMLOptionElement - Web APIs
document object model (dom) level 2 html specificationthe definition of 'htmloptionelement' in that specification.
...
document object model (dom) level 1 specificationthe definition of 'htmloptionelement' in that specification.
HTMLElement.blur() - Web APIs
syntax element.blur(); examples remove focus from a text input html <input type="text" id="mytext" value="sample text"> <br><br> <button type="button" onclick="focusinput()">click me to gain focus</button> <button type="button" onclick="blurinput()">click me to lose focus</button> javascript function focusinput() {
document.getelementbyid('mytext').focus(); } function blurinput() {
document.getelementbyid('mytext').blur(); } result specification specification status comment html living standardthe definition of 'blur' in that specification.
... recommendation
document object model (dom) level 2 html specificationthe definition of 'blur' in that specification.
HTMLOutputElement - Web APIs
htmloutputelement.htmlforread only a domtokenlist reflecting the for html attribute, containing a list of ids of other elements in the same
document that contribute to (or otherwise affect) the calculated value.
... when the problem is reported, the user agent may focus the element and change the scrolling position of the
document or perform some other action that brings the element to the user's attention.
HTMLTableColElement - Web APIs
document object model (dom) level 2 html specificationthe definition of 'htmltablecolelement' in that specification.
... obsolete no change from
document object model (dom) level 1 specification
document object model (dom) level 1 specificationthe definition of 'htmltablecolelement' in that specification.
HTMLTableElement.caption - Web APIs
recommendation no change from
document object model (dom) level 2 html specification
document object model (dom) level 2 html specificationthe definition of 'htmltableelement.caption' in that specification.
... obsolete no change from
document object model (dom) level 1 specification
document object model (dom) level 1 specificationthe definition of 'htmltableelement.caption' in that specification.
HTMLTableElement.createCaption() - Web APIs
the caption does not need to be added separately as would be the case if
document.createelement() had been used to create the new <caption> element.
... html <table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> </table> javascript let table =
document.queryselector('table'); let caption = table.createcaption(); caption.textcontent = 'this caption was created by javascript!'; result specifications specification status comment html living standardthe definition of 'htmltableelement: createcaption' in that specification.
HTMLTableElement.tFoot - Web APIs
recommendation no change from
document object model (dom) level 2 html specification
document object model (dom) level 2 html specificationthe definition of 'htmltableelement.tfoot' in that specification.
... obsolete no change from
document object model (dom) level 1 specification
document object model (dom) level 1 specificationthe definition of 'htmltableelement.tfoot' in that specification.
HTMLTableElement.tHead - Web APIs
recommendation no change from
document object model (dom) level 2 html specification
document object model (dom) level 2 html specificationthe definition of 'htmltableelement.thead' in that specification.
... obsolete no change from
document object model (dom) level 1 specification
document object model (dom) level 1 specificationthe definition of 'htmltableelement.thead' in that specification.
HTMLTableRowElement - Web APIs
document object model (dom) level 2 html specificationthe definition of 'htmltablerowelement' in that specification.
...
document object model (dom) level 1 specificationthe definition of 'htmltablerowelement' in that specification.
HTMLTableSectionElement - Web APIs
document object model (dom) level 2 html specificationthe definition of 'htmltablesectionelement' in that specification.
...
document object model (dom) level 1 specificationthe definition of 'htmltablesectionelement' in that specification.
HTMLTemplateElement.content - Web APIs
the htmltemplateelement.content property returns a <template> element's template contents (a
documentfragment).
... syntax var
documentfragment = templateelement.content example var templateelement =
document.queryselector("#foo"); var
documentfragment = templateelement.content.clonenode(true); specifications specification status comment html living standardthe definition of 'htmltemplateelement interface' in that specification.
Dragging and Dropping Multiple Items - Web APIs
the drag processing described in this
document use the datatransfer interface.
... i++) { output(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<<error>>\n"); dump(ex); } } } } function output(text) {
document.getelementbyid("output").textcontent += text; dump(text); } </script> </head> <body> <div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;" ondragenter="
document.getelementbyid('output').textcontent = ''; event.stoppropagation(); event.preventdefault();" ondragover="event.stoppropagation(); event.preventdefault();" ondrop="event.stoppropagation()...
IIRFilterNode.getFrequencyResponse() - Web APIs
myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our html to contain our results, 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 = audioct...
... 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.
IntersectionObserver.IntersectionObserver() - Web APIs
if options isn't specified, the observer uses the
document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is enough to trigger a callback).
... you can provide any combination of the following options: root an element or
document object which is an ancestor of the intended target, whose bounding rectangle will be considered the viewport.
IntersectionObserver.unobserve() - Web APIs
var observer = new intersectionobserver(callback); observer.observe(
document.getelementbyid("elementtoobserve")); /* ...
... */ observer.unobserve(
document.getelementbyid("elementtoobserve")); specifications specification status comment intersection observerthe definition of 'intersectionobserver.unobserve()' in that specification.
IntersectionObserverEntry.time - Web APIs
the intersectionobserverentry interface's read-only time property is a domhighrestimestamp that indicates the time at which the intersection change occurred relative to the time at which the
document was created.
...the time is specified in milliseconds since the creation of the containing
document.
KeyboardEvent.charCode - Web APIs
example html <p>type anything into the input box below to log a <code>charcode</code>.</p> <input type="text" /> <p id="log"></p> javascript let input =
document.queryselector('input'); let log =
document.queryselector('#log'); input.addeventlistener('keypress', function(e) { log.innertext = `key pressed: ${string.fromcharcode(e.charcode)}\ncharcode: ${e.charcode}`; }); result notes in a keypress event, the unicode value of the key pressed is stored in either the keycode or charcode property, but never both.
... specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'keyboardevent.charcode' in that specification.
KeyboardEvent.code - Web APIs
html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <div id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el =
document.createelement("span"); el.innerhtml = str + "<br/>";
document.getelementbyid("output").appendchild(el); }, true); try it out to ensure that keystrokes go to the sample, click in the output box below before pressing keys.
... let shipsize = { width: 30, height: 30 }; let position = { x: 200, y: 200 }; let moverate = 9; let turnrate = 5; let angle = 0; let spaceship =
document.getelementbyid("spaceship"); next comes the function updateposition().
KeyboardEvent.key - Web APIs
"> <pre id="console-log"></pre> </div> </div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { padding-left: 20px; padding-right: 20px; } .fx > div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea =
document.getelementbyid('test-target'), consolelog =
document.getelementbyid('console-log'), btnclearconsole =
document.getelementbyid('btn-clear-console'); function logmessage(message) {
document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage...
... working draft
document object model (dom) level 3 events specificationthe definition of 'keyboardevent.key' in that specification.
KeyframeEffect.target - Web APIs
syntax var targetelement =
document.getelementbyid("elementtoanimate"); var keyframes = new keyframeeffect( targetelement, keyframeblock, timingoptions ); // returns #elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtargetelement; value an element, csspseudoelement, or null.
... examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit =
document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id=​"rabbit">​click the rabbit's ears!​</div>​ rabbitdownkeyframes.target; specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.
MediaQueryList.addListener() - Web APIs
examples var para =
document.queryselector('p'); var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.';
document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide s...
...creen — more than 600px wide.';
document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'addlistener' in that specification.
MediaQueryList.matches - Web APIs
the matches read-only property of the mediaquerylist interface is a boolean that returns true if the
document currently matches the media query list, or false if not.
... syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the
document currently matches the media query list; otherwise, it's false.
MediaQueryListEvent - Web APIs
mediaquerylistevent.matchesread only a boolean that returns true if the
document currently matches the media query list, or false if not.
... examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.';
document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.';
document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquery...
MediaQueryListListener - Web APIs
a mediaquerylist object maintains a list of media queries on a
document, and handles sending notifications to listeners when the media queries on the
document change.
... this makes it possible to observe a
document to detect when its media queries change, instead of polling the values periodically, if you need to detect changes to the values of media queries on a
document.
MediaSession.setPositionState() - Web APIs
the mediasession method setpositionstate() is used to update the current
document's media playback position and speed for presentation by user's device in any kind of interface that provides details about ongoing media.
... syntax navigator.mediasession.setpositionstate(statedict); parameters statedict optional an object conforming to the mediapositionstate dictionary, providing updated information about the playback position and speed of the
document's ongoing media.
MediaStreamConstraints.audio - Web APIs
g"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement =
document.getelementbyid("audio"); let logelement =
document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; }
document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here w...
...g"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement =
document.getelementbyid("audio"); let logelement =
document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; }
document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => lo...
MediaStreamConstraints.video - Web APIs
<br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement =
document.getelementbyid("video"); let logelement =
document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; }
document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here...
...<br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement =
document.getelementbyid("video"); let logelement =
document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; }
document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) ...
MediaStreamTrack: mute event - Web APIs
musictrack.addeventlistener("mute", event => {
document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => {
document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its background color changed to #aaa.
...the following example shows this: musictrack.onmute = event => {
document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > {
document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'mute' in that specification.
MediaStreamTrack: unmute event - Web APIs
musictrack.addeventlistener("mute", event => {
document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => {
document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its background color changed to #aaa.
...the following example shows this: musictrack.onmute = event => {
document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > {
document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'unmute' in that specification.
MediaStreamTrack - Web APIs
mediastreamtrack.isolated read only returns a boolean value which is true if the track is isolated; that is, the track cannot be accessed by the
document that owns the mediastreamtrack.
... isolationchange sent whenever the value of the isolated property changes due to the
document gaining or losing permission to access the track.
MessageEvent - Web APIs
cross-
document messaging (see window.postmessage() and window.onmessage).
... cross-worker/
document messaging (see the above two entries, but also worker.postmessage(), worker.onmessage, serviceworkerglobalscope.onmessage, etc.) broadcast channels (see broadcastchannel.postmessage()) and broadcastchannel.onmessage).
MouseEvent.buttons - Web APIs
html <p>click anywhere with one or more mouse buttons.</p> <pre id="log">buttons: </pre> javascript let log =
document.createtextnode('?'); // let log = new text('?'); function logbuttons(e) { log.data = `${e.buttons} (${e.type})`; // log.nodevalue= `${e.buttons} (${e.type})`; }
document.addeventlistener('mouseup', logbuttons);
document.addeventlistener('mousedown', logbuttons); //
document.addeventlistener('mousemove', logbuttons);
document.queryselector('#log').appendchild(log) result specifications...
... specification status comment
document object model (dom) level 3 events specificationthe definition of 'mouseevent.buttons' in that specification.
MouseEvent.getModifierState() - Web APIs
see the
document of keyboardevent.getmodifierstate() for details.
... specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'getmodifierstate()' in that specification.
MutationObserver.takeRecords() - Web APIs
return value an array mutationrecord objects, each describing one change applied to the observed portion of the
document's dom tree.
... const targetnode =
document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); /* ...later, when it's time to stop observing...
Using Navigation Timing - Web APIs
for example, to measure the perceived loading time for a page: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart;
document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and outputs that information to the screen by inserting it into an element.
...e performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_reload: output += "reload"; break; case performancenavigation.type_back_forward: output += "history"; break; default: output += "unknown"; break; } output += "<br/>redirects: " + performance.navigation.redirectcount;
document.queryselector(".output").innerhtml = output; }, false); this amends the previous example by looking at the contents of the performance.navigation object.
Navigation Timing API - Web APIs
performancenavigationtiming provides methods and properties to store and retrieve metrics regarding the browser's
document navigation events.
... for example, this interface can be used to determine how much time it takes to load or unload a
document.
Navigator.getBattery() - Web APIs
this implements the battery status api; see that
documentation for additional details, a guide to using the api, and sample code.
... notallowederror note: no user agent currently throws this exception, but the specification describes the following behaviors: this
document is not allowed to use this feature.
Navigator.getUserMedia() - Web APIs
your callback can then assign the stream to the desired object (such as an <audio> or <video> element), as shown in the following example: function(stream) { var video =
document.queryselector('video'); video.srcobject = stream; video.onloadedmetadata = function(e) { // do something with the video here.
... navigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia; if (navigator.getusermedia) { navigator.getusermedia({ audio: true, video: { width: 1280, height: 720 } }, function(stream) { var video =
document.queryselector('video'); video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); }; }, function(err) { console.log("the following error occurred: " + err.name); } ); } else { console.log("getusermedia not supported"); } ...
Navigator.mediaSession - Web APIs
the read-only navigator property mediasession returns a mediasession object that can be used to share with the browser metadata and other information about the current playback state of media being handled by a
document.
... syntax let mediasession = navigator.mediasession; value a mediasession object the current
document can use to share information about media it's playing and its current playback status.
Navigator - Web APIs
navigator.serviceworker read only returns a serviceworkercontainer object, which provides access to registration, removal, upgrade, and communication with the serviceworker objects for the associated
document.
... non-standard navigator.mozislocallyavailable() lets code check to see if the
document at a given uri is available without using the network.
Node.contains() - Web APIs
function isinpage(node) { return (node ===
document.body) ?
... false :
document.body.contains(node); } specifications specification status comment domthe definition of 'node.contains()' in that specification.
Node.isSameNode() - Web APIs
html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output =
document.getelementbyid("output"); let divlist =
document.getelementsbytagname("div"); output.innerhtml += "div 0 same as div 0: " + divlist[0].issamenode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 same as div 1: " + divlist[0].issamenode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 same as div 2: " + divlist[0].issamenode(divlist[2]) + "<br/>"; results specifications specific...
...
document object model (dom) level 3 core specificationthe definition of 'node.issamenode()' in that specification.
Node.nodeValue - Web APIs
for the
document itself, nodevalue returns null.
... the following table shows the return values for different elements: node value of nodevalue cdatasection content of the cdata section comment content of the comment
document null
documentfragment null
documenttype null element null namednodemap null entityreference null notation null processinginstruction entire content excluding the target text content of the text node when nodevalue is defined to be null, setting it has no effect.
Node.parentNode - Web APIs
the parent of an element is an element node, a
document node, or a
documentfragment node.
... example if (node.parentnode) { // remove a node from the tree, unless // it's not in the tree already node.parentnode.removechild(node); } notes
document and
documentfragment nodes can never have a parent, so parentnode will always return null.
Node.removeChild() - Web APIs
examples simple examples given this html: <div id="top"> <div id="nested"></div> </div> to remove a specified element when knowing its parent node: let d =
document.getelementbyid("top"); let d_nested =
document.getelementbyid("nested"); let throwawaynode = d.removechild(d_nested); to remove a specified element without having to specify its parent node: let node =
document.getelementbyid("nested"); if (node.parentnode) { node.parentnode.removechild(node); } to remove all children from an element: let element =
document.getelementbyid("top"); while (e...
...lement.firstchild) { element.removechild(element.firstchild); } causing a typeerror <!--sample html code--> <div id="top"> </div> <script type="text/javascript"> let top =
document.getelementbyid("top"); let nested =
document.getelementbyid("nested"); // throws uncaught typeerror let garbage = top.removechild(nested); </script> causing a notfounderror <!--sample html code--> <div id="top"> <div id="nested"></div> </div> <script type="text/javascript"> let top =
document.getelementbyid("top"); let nested =
document.getelementbyid("nested"); // this first call correctly removes the node let garbage = top.removechild(nested); // throws uncaught notfounderror garbage = top.removechild(nested); </script> specifications specification status comment ...
Node.replaceChild() - Web APIs
example // given: // <div> // <span id="childspan">foo bar</span> // </div> // create an empty element node // without an id, any attributes, or any content var sp1 =
document.createelement("span"); // give it an id attribute called 'newspan' sp1.id = "newspan"; // create some content for the new element.
... var sp1_content =
document.createtextnode("new replacement span element."); // apply that content to the new element sp1.appendchild(sp1_content); // build a reference to the existing node to be replaced var sp2 =
document.getelementbyid("childspan"); var parentdiv = sp2.parentnode; // replace existing node sp2 with the new span element sp1 parentdiv.replacechild(sp1, sp2); // result: // <div> // <span id="newspan">new replacement span element.</span> // </div> specifications specification status comment domthe definition of 'node: replacechild' in that specification.
NodeFilter.acceptNode() - Web APIs
example var nodeiterator =
document.createnodeiterator( // node to use as root
document.getelementbyid('someid'), // only consider nodes that are text nodes (nodetype 3) nodefilter.show_text, // object containing the function to use for the acceptnode method // of the nodefilter { acceptnode: function(node) { // logic to determine whether to accept, reject or skip node // in this case, only accept node...
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'nodefilter.acceptnode()' in that specification.
NodeIterator.detach() - Web APIs
syntax nodeiterator.detach(); example var nodeiterator =
document.createnodeiterator(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); nodeiterator.detach(); // detaches the iterator nodeiterator.nextnode(); // throws an invalid_state_err exception specifications specification status comment domthe definition of 'nodeiterator.detach' in that specific...
... living standard transformed in a no-op
document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.detach' in that specification.
NodeIterator.nextNode() - Web APIs
syntax node = nodeiterator.nextnode(); example var nodeiterator =
document.createnodeiterator(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false // this optional argument is not used any more ); currentnode = nodeiterator.nextnode(); // returns the next node specifications specification status comment domthe definition of 'nodeiterator.nextnode' in that specificat...
...
document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.nextnode' in that specification.
NodeIterator.previousNode() - Web APIs
syntax node = nodeiterator.previousnode(); example var nodeiterator =
document.createnodeiterator(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false // this optional argument is not used any more ); currentnode = nodeiterator.nextnode(); // returns the next node previousnode = nodeiterator.previousnode(); // same result, since we backtracked to the previous node specifications speci...
...
document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.previousnode' in that specification.
Using the Notifications API - Web APIs
var n = new notification('my great song');
document.addeventlistener('visibilitychange', function() { if (
document.visibilitystate === 'visible') { // the tab has become visible so clear the now-stale notification.
... way: window.addeventlistener('load', function () { // at first, let's check if we have permission for notification // if not, let's ask for it if (window.notification && notification.permission !== "granted") { notification.requestpermission(function (status) { if (notification.permission !== status) { notification.permission = status; } }); } var button =
document.getelementsbytagname('button')[0]; button.addeventlistener('click', function () { // if the user agreed to get notified // let's try to send ten notifications if (window.notification && notification.permission === "granted") { var i = 0; // using an interval cause some browsers (including firefox) are blocking notifications if there are too much in a certain time.
OffscreenCanvas - Web APIs
var one =
document.getelementbyid("one").getcontext("bitmaprenderer"); var two =
document.getelementbyid("two").getcontext("bitmaprenderer"); var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); // ...
... main.js (main thread code): var htmlcanvas =
document.getelementbyid("canvas"); var offscreen = htmlcanvas.transfercontroltooffscreen(); var worker = new worker("offscreencanvas.js"); worker.postmessage({canvas: offscreen}, [offscreen]); offscreencanvas.js (worker code): onmessage = function(evt) { var canvas = evt.data.canvas; var gl = canvas.getcontext("webgl"); // ...
PageTransitionEvent - Web APIs
the pagetransitionevent event object is available inside handler functions for the pageshow and pagehide events, fired when a
document is being loaded or unloaded.
... pagetransitionevent.persisted read only indicates if the
document is loading from a cache.
ParentNode.children - Web APIs
example const foo =
document.getelementbyid('foo'); for (let i = 0; i < foo.children.length; i++) { console.log(foo.children[i].tagname); } polyfill // overwrites native 'children' prototype.
... // adds
document &
documentfragment support for ie9 & safari.
ParentNode.lastElementChild - Web APIs
syntax const element = node.lastelementchild example <ul id="foo"> <li>first (1)</li> <li>second (2)</li> <li>third (3)</li> </ul> <script> const foo =
document.getelementbyid('foo'); console.log(foo.lastelementchild.textcontent); // logs: third (3) </script> polyfill the code below adds support of lastelementchild() to
document and
documentfragment in internet explorer and safari.
... the
document and
documentfragment implemented the new interfaces.
ParentNode.querySelector() - Web APIs
note: this method is implemented as
document.queryselector(),
documentfragment.queryselector() and element.queryselector().
... obsolete initial definition selectors api level 1the definition of '
document.queryselector()' in that specification.
ParentNode.replaceChildren() - Web APIs
const noselect =
document.getelementbyid('no'); const yesselect =
document.getelementbyid('yes'); const nobtn =
document.getelementbyid('to-no'); const yesbtn =
document.getelementbyid('to-yes'); yesbtn.addeventlistener('click', () => { const selectedtransferoptions =
document.queryselectorall('#no option:checked'); const existingyesoptions =
document.queryselectorall('#yes option'); yesselect.replacechildren(...se...
...lectedtransferoptions, ...existingyesoptions); }); nobtn.addeventlistener('click', () => { const selectedtransferoptions =
document.queryselectorall('#yes option:checked'); const existingnooptions =
document.queryselectorall('#no option'); noselect.replacechildren(...selectedtransferoptions, ...existingnooptions); }); the end result looks like this: specification specification status comment domthe definition of 'parentnode.replacechildren()' in that specification.
Path2D() - Web APIs
<canvas id="canvas"></canvas> const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let path1 = new path2d(); path1.rect(10, 10, 100,100); let path2 = new path2d(path1); path2.moveto(220, 60); path2.arc(170, 60, 50, 0, 2 * math.pi); ctx.stroke(path2); using svg paths this example creates a path2d path using svg path data.
... <canvas id="canvas"></canvas> const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let p = new path2d('m10 10 h 80 v 80 h -80 z'); ctx.fill(p); specification specification status comment html living standardthe definition of 'path2d()' in that specification.
Path2D.addPath() - Web APIs
we then create a matrix using
document.createelementns() and createsvgmatrix().
... const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create first path and add a rectangle let p1 = new path2d(); p1.rect(0, 0, 100, 150); // create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0, 100, 75); // create transformation matrix that moves 200 points to the right let m =
document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specifications ...
PaymentRequest: merchantvalidation event - Web APIs
the merchant server should access the validation url in accordance with the payment method
documention.
... merchantserverurl = window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }, false); }; const response = await request.show(); how merchant server handles the validation depends on the server implementation and payment method
documentation.
performance.now() - Web APIs
starting with firefox 79, high resolution timers can be used if you cross-origin isolate your
document using the cross-origin-opener-policy and cross-origin-embedder-policy headers: cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp these headers ensure a top-level
document does not share a browsing context group with cross-origin
documents.
... coop process-isolates your
document and potential attackers can't access to your global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks.
PerformanceTiming.navigationStart - Web APIs
the legacy performancetiming.navigationstart read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after the prompt for unload terminates on the previous
document in the same browsing context.
... if there is no previous
document, this value will be the same as performancetiming.fetchstart.
Using the Performance API - Web APIs
function print_json() { var json; var o =
document.getelementsbytagname("output")[0]; if (window.performance.tojson === undefined) { json = "window.performance.tojson() is not supported"; o.innerhtml += json + "<br>"; } else { var s; json = window.performance.tojson(); // print the performance object s = json.stringify(json); o.innerhtml = "<p>performance = " + s + "</p>"; // print the performance.timing and...
... performance.navigation objects var perf = json.parse(s); var timing = perf.timing; o.innerhtml += "<p>peformance.timing = " + json.stringify(timing) + "</p>"; var navigation = perf.navigation; o.innerhtml += "<p>peformance.navigation = " + json.stringify(navigation) + "</p>"; } } specifications the interfaces described in this
document are defined in the high resolution time standard which has two levels: high-resolution time level 2; editors draft; work in progress high-resolution time; w3c recommendation 17 december 2012 interoperability as shown in the performance interface's browser compatibility table, most of the performance interfaces are broadly implemented by desktop browsers.
Using Performance Timeline - Web APIs
function log(s) { var o =
document.getelementsbytagname("output")[0]; o.innerhtml += s + " <br>"; } function do_work (n) { for (var i=0 ; i < n; i++) { var m = math.random(); } } function print_perf_entry(pe) { log("..name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } function print_performanceentries() { if (performan...
... specifications the interfaces described in this
document are defined in the performance timeline standard which has two levels: performance timeline level 2; editors draft; work in progress.
Pinch zoom gestures - Web APIs
function init() { // install event handlers for the pointer target var el=
document.getelementbyid("target"); el.onpointerdown = pointerdown_handler; el.onpointermove = pointermove_handler; // use same handler for pointer{up,cancel,out,leave} events since // the semantics for these events - in this app - are the same.
...false : true; } function log(prefix, ev) { if (!logevents) return; var o =
document.getelementsbytagname('output')[0]; var s = prefix + ": pointerid = " + ev.pointerid + " ; pointertype = " + ev.pointertype + " ; isprimary = " + ev.isprimary; o.innerhtml += s + " "; } function clearlog(event) { var o =
document.getelementsbytagname('output')[0]; o.innerhtml = ""; } ...
ProgressEvent - Web APIs
progressevent.initprogressevent() initializes a progressevent created using the deprecated
document.createevent("progressevent") method.
... var progressbar =
document.getelementbyid("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcomputable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status comment xmlhttprequestthe definition of 'progressevent' in that specification.
RTCDataChannel.onmessage - Web APIs
the new elements are then attached to the end of the
document.
... let pc = new rtcpeerconnection(); let dc = pc.createdatachannel(); dc.onmessage = function(event) { var el =
document.createelement("p"); var txtnode =
document.createtextnode(event.data); el.appendchild(txtnode); receivebox.appendchild(el); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onmessage' in that specification.
RTCIceTransport: selectedcandidatepairchange event - Web APIs
let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem =
document.getelementbyid("local-protocol"); let remoteprotoelem =
document.getelementbyid("remote-protocol"); icetransport.addeventlistener("selectedcandidatepairchange", ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); }, false) this can also be done by setting t...
... let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem =
document.getelementbyid("local-protocol"); let remoteprotoelem =
document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'selectedcandidatepairchange' in that specification.
RTCPeerConnection.getStats() - Web APIs
this version of getstats() is obsolete; in addition, the data it returns is entirely different from the current specification, and the form of that data was never
documented.
...:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially drop the ones we // sorted to the top above object.keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); });
document.queryselector(".stats-box").innerhtml = statsoutput; }); }, 1000); this works by calling getstats(), then, when the promise is resolved, iterates over the rtcstats objects on the returned rtcstatsreport.
RTCPeerConnection.setRemoteDescription() - Web APIs
deprecated syntax in older code and
documentation, you may see a callback-based version of this function used.
... function handleoffer(msg) { createmypeerconnection(); mypeerconnection.setremotedescription(msg.description).then(function () { return navigator.mediadevices.getusermedia(mediaconstraints); }) .then(function(stream) {
document.getelementbyid("local_video").srcobject = stream; return mypeerconnection.addstream(stream); }) .then(function() { return mypeerconnection.createanswer(); }) .then(function(answer) { return mypeerconnection.setlocaldescription(answer); }) .then(function() { // send the answer to the remote peer using the signaling server }) .catch(handlegetusermediaerror); } after...
RTCPeerConnection - Web APIs
a track is isolated if its content cannot be accessed by the owning
document due to lack of authentication or if the track comes from a cross-origin source.
...<<< make this a link once i know where that will be
documented "connected" every ice transport used by the connection is either in use (state "connected" or "completed") or is closed (state "closed"); in addition, at least one transport is either "connected" or "completed".
Range() - Web APIs
the range() constructor returns a newly created range object whose start and end is the global
document object.
... html <p>first paragraph.</p> <p>second paragraph.</p> <p>third paragraph.</p> <p>fourth paragraph.</p> javascript const paragraphs =
document.queryselectorall('p'); // create new range const range = new range(); // start range at second paragraph range.setstartbefore(paragraphs[1]); // end range at third paragraph range.setendafter(paragraphs[2]); // get window selection const selection = window.getselection(); // add range to window selection selection.addrange(range); result specification specification status ...
Range.cloneRange() - Web APIs
syntax clone = range.clonerange(); example range =
document.createrange(); range.selectnode(
document.getelementsbytagname("div").item(0)); clone = range.clonerange(); specifications specification status comment domthe definition of 'range.clonerange()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.clonerange()' in that specification.
Range.collapse() - Web APIs
example var range =
document.createrange(); referencenode =
document.getelementsbytagname("div").item(0); range.selectnode(referencenode); range.collapse(true); specifications specification status comment domthe definition of 'range.collapse()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.collapse()' in that specification.
Range.collapsed - Web APIs
syntax iscollapsed = range.collapsed; example let range =
document.createrange(); range.setstart(startnode, startoffset); range.setend(endnode, endoffset); iscollapsed = range.collapsed; specifications specification status comment domthe definition of 'range.collapsed' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.collapsed' in that specification.
Range.compareBoundaryPoints() - Web APIs
example var range, sourcerange, compare; range =
document.createrange(); range.selectnode(
document.getelementsbytagname("div")[0]); sourcerange =
document.createrange(); sourcerange.selectnode(
document.getelementsbytagname("div")[1]); compare = range.compareboundarypoints(range.start_to_end, sourcerange); specifications specification status comment domthe definition of 'range.compareboundarypoints()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.compareboundarypoints()' in that specification.
Range.compareNode() - Web APIs
the following function can be used as replacement: function rangecomparenode(range, node) { var noderange = node.owner
document.createrange(); try { noderange.selectnode(node); } catch (e) { noderange.selectnodecontents(node); } var nodeisbefore = range.compareboundarypoints(range.start_to_start, noderange) == 1; var nodeisafter = range.compareboundarypoints(range.end_to_end, noderange) == -1; if (nodeisbefore && !nodeisafter) return 0; if (!nodeisbefore && nodeisafter) return 1; if (nod...
... example range =
document.createrange(); range.selectnode(
document.getelementsbytagname("div").item(0)); returnvalue = range.comparenode(
document.getelementsbytagname("p").item(0)); notes this method is obsolete; you should use the w3c dom range.compareboundarypoints() method.
Range.detach() - Web APIs
syntax range.detach(); example var range =
document.createrange(); range.selectnode(
document.getelementsbytagname("div").item(0)); range.detach(); specifications specification status comment domthe definition of 'range.detach()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.detach()' in that specification.
Range.endContainer - Web APIs
syntax endrangenode = range.endcontainer; example var range =
document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); endrangenode = range.endcontainer; specifications specification status comment domthe definition of 'range.endcontainer' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.endcontainer' in that specification.
Range.endOffset - Web APIs
syntax endrangeoffset = range.endoffset; example var range =
document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); endrangeoffset = range.endoffset; specifications specification status comment domthe definition of 'range.endoffset' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.endoffset' in that specification.
Range.selectNode() - Web APIs
example let range =
document.createrange(); let referencenode =
document.getelementsbytagname('div').item(0); range.selectnode(referencenode); specifications specification status comment domthe definition of 'range.selectnode()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.selectnode()' in that specification.
Range.setEndAfter() - Web APIs
example var range =
document.createrange(); var referencenode =
document.getelementsbytagname('div').item(0); range.setendafter(referencenode); specifications specification status comment domthe definition of 'range.setendafter()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.setendafter()' in that specification.
Range.setEndBefore() - Web APIs
example var range =
document.createrange(); var referencenode =
document.getelementsbytagname("div").item(0); range.setendbefore(referencenode); specifications specification status comment domthe definition of 'range.setendbefore()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.setendbefore()' in that specification.
Range.setStartAfter() - Web APIs
example var range =
document.createrange(); var referencenode =
document.getelementsbytagname("div").item(0); range.setstartafter(referencenode); specifications specification status comment domthe definition of 'range.setstartafter()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.setstartafter()' in that specification.
Range.setStartBefore() - Web APIs
example var range =
document.createrange(); var referencenode =
document.getelementsbytagname("div").item(0); range.setstartbefore(referencenode); specifications specification status comment domthe definition of 'range.setstartbefore()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.setstartbefore()' in that specification.
Range.startContainer - Web APIs
syntax startrangenode = range.startcontainer; example range =
document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); startrangenode = range.startcontainer; specifications specification status comment domthe definition of 'range.endcontainer' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.startcontainer' in that specification.
Range.startOffset - Web APIs
syntax startrangeoffset = range.startoffset; example var range =
document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); var startrangeoffset = range.startoffset; specifications specification status comment domthe definition of 'range.startoffset' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.startoffset' in that specification.
Range.surroundContents() - Web APIs
example html <span class="header-text">put this in a headline</span> javascript const range =
document.createrange(); const newparent =
document.createelement('h1'); range.selectnode(
document.queryselector('.header-text')); range.surroundcontents(newparent); result specifications specification status comment domthe definition of 'range.surroundcontents()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.surroundcontents()' in that specification.
Range.toString() - Web APIs
look at the output below.</p> <p id="log"></p> javascript const range =
document.createrange(); range.setstartbefore(
document.getelementsbytagname('b').item(0), 0); range.setendafter(
document.getelementsbytagname('b').item(1), 0);
document.getelementbyid('log').textcontent = range.tostring(); result specifications specification status comment domthe definition of 'range.tostring()' in that specification.
...
document object model (dom) level 2 traversal and range specificationthe definition of 'range.tostring()' in that specification.
Request() - Web APIs
var myimage =
document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { return response.blob(); }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); in our fetch request with init example (see fetch request init live) we do the same thing except that we pass in an init object when we invoke fetch(): ...
... var myimage =
document.queryselector('img'); var myheaders = new headers(); myheaders.append('content-type', 'image/jpeg'); var myinit = { method: 'get', headers: myheaders, mode: 'cors', cache: 'default' }; var myrequest = new request('flowers.jpg',myinit); fetch(myrequest).then(function(response) { ...
Response.redirected - Web APIs
fetch("awesome-picture.jpg").then(function(response) { let elem =
document.getelementbyid("warning-message-box"); if (response.redirected) { elem.innerhtml = "unexpected redirect"; } else { elem.innerhtml = ""; } return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob);
document.getelementbyid("img-element-id").src = imgobjecturl; }); disallowing redirects because using redirected to manually filter o...
...ut redirects can allow forgery of redirects, you should instead set the redirect mode to "error" in the init parameter when calling fetch(), like this: fetch("awesome-picture.jpg", { redirect: "error" }).then(function(response) { return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob);
document.getelementbyid("img-element-id").src = imgobjecturl; }); specifications specification status comment fetchthe definition of 'redirected' in that specification.
SVGAnimationElement: endEvent event - Web APIs
00px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <button>stop animation</button> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem =
document.queryselector('svg'); let animateelem =
document.queryselector('animatemotion'); let list =
document.queryselector('ul'); let btn =
document.queryselector('button'); animateelem.addeventlistener('beginevent', () => { let listitem =
document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('endevent', () => { let ...
...listitem =
document.createelement('li'); listitem.textcontent = 'endevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem =
document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) btn.addeventlistener('click', () => { btn.disabled = true; animateelem.setattribute('repeatcount', '1'); }) event handler property equivalent note that you can also create an event listener for the end event using the onend event handler property: animateelem.onend = () => { console.log('endevent fired'); } specifications specification status comment scalable vector graphics (svg) 2the def...
SecurityPolicyViolationEvent.columnNumber - Web APIs
the columnnumber read-only property of the securitypolicyviolationevent interface is the column number in the
document or worker at which the violation occurred.
... example
document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.columnnumber); }); specifications specification status comment content security policy level 3the definition of 'columnnumber' in that specification.
SecurityPolicyViolationEvent.lineNumber - Web APIs
the linenumber read-only property of the securitypolicyviolationevent interface is the line number in the
document or worker at which the violation occurred.
... example
document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.linenumber); }); specifications specification status comment content security policy level 3the definition of 'linenumber' in that specification.
Selection.containsNode() - Web APIs
console.log(window.getselection().containsnode(
document.body, true)); find the hidden word in this example, a message appears when you select the secret word.
... html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret =
document.getelementbyid('secret'); const win =
document.getelementbyid('win'); // listen for selection changes
document.addeventlistener('selectionchange', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.
Selection.setBaseAndExtent() - Web APIs
note: if the focus position appears before the anchor position in the
document, the direction of the selection is reversed — the caret is placed at the beginning of the text rather the end, which matters for any keyboard command that might follow.
...<p> <label for="aoffset">anchor offset</label> <input id="aoffset" name="aoffset" type="number" value="0"> </p> <p> <label for="foffset">focus offset</label> <input id="foffset" name="foffset" type="number" value="0"> </p> <p><button>capture selection</button></p> </div> <p><strong>output</strong>: <span class="output"></span></p> the javascript looks like so: var one =
document.queryselector('.one'); var two =
document.queryselector('.two'); var aoffset =
document.getelementbyid('aoffset'); var foffset =
document.getelementbyid('foffset'); var button =
document.queryselector('button'); var output =
document.queryselector('.output'); var selection; button.onclick = function() { try { selection =
document.getselection(); selection.setbaseandextent(one, aoff...
Using server-sent events - Web APIs
for example, assuming the client script is on example.com: const evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement =
document.createelement("li"); const eventlist =
document.getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the
document's html.
... you can also listen for events with addeventlistener(): evtsource.addeventlistener("ping", function(event) { const newelement =
document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that information.
ServiceWorker - Web APIs
the url must be on the same origin as the
document that registers the serviceworker.
... if ('serviceworker' in navigator) { navigator.serviceworker.register('service-worker.js', { scope: './' }).then(function (registration) { var serviceworker; if (registration.installing) { serviceworker = registration.installing;
document.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 (servi...
ServiceWorkerContainer.getRegistration() - Web APIs
the getregistration() method of the serviceworkercontainer interface gets a serviceworkerregistration object whose scope url matches the provided
document url.
... example navigator.serviceworker.getregistration('/app').then(function(registration) { if(registration){
document.queryselector('#status').textcontent = 'serviceworkerregistration found.'; } }); specifications specification status comment service workersthe definition of 'serviceworkercontainer: getregistration' in that specification.
ServiceWorkerContainer - Web APIs
events controllerchange occurs when the
document's associated serviceworkerregistration acquires a new active worker.
... serviceworkercontainer.getregistration() gets a serviceworkerregistration object whose scope matches the provided
document url.
Slottable: assignedSlot - Web APIs
when <my-paragraph> is used in the
document, the slot is populated by a slottable element by including it inside the element with a slot attribute with the value my-text.
... let slottedspan =
document.queryselector('my-paragraph span') console.log(slottedspan.assignedslot); // logs '<slot name="my-text">' specifications specification status comment domthe definition of 'assignedslot' in that specification.
SpeechRecognitionEvent.emma - Web APIs
syntax var myemma = event.emma; value a valid xml
document.
... the exact contents can vary across user agents and recognition engines, but all supporting implementations will expose a valid xml
document complete with an emma namespace.
SpeechSynthesis: voiceschanged event - Web APIs
you can use the voiceschanged event in an addeventlistener method: var synth = window.speechsynthesis; synth.addeventlistener('voiceschanged', function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option =
document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } }); or use the onvoiceschanged event handler property: synth.onvoiceschanged = function() { var voices = synth.getvoices(); for(i = 0; i < voices.le...
...ngth ; i++) { var option =
document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } specifications specification status comment web speech apithe definition of 'speech synthesis events' in that specification.
SpeechSynthesis - Web APIs
var synth = window.speechsynthesis; var inputform =
document.queryselector('form'); var inputtxt =
document.queryselector('.txt'); var voiceselect =
document.queryselector('select'); var pitch =
document.queryselector('#pitch'); var pitchvalue =
document.queryselector('.pitch-value'); var rate =
document.queryselector('#rate'); var ratevalue =
document.queryselector('.rate-value'); var voices = []; function populatevoicelist() { voices = synth.getvoic...
...es(); 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); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name ===...
SpeechSynthesisUtterance.text - Web APIs
the text may be provided as plain text, or a well-formed ssml
document.
... examples var synth = window.speechsynthesis; var inputform =
document.queryselector('form'); var inputtxt =
document.queryselector('input'); var voiceselect =
document.queryselector('select'); var voices = synth.getvoices(); ...
StaticRange - Web APIs
usage notes a dom range specifies a span of content in a
document, potentially beginning inside one node (or element) and ending inside another one.
... unlike a range, a staticrange represents a range which is fixed in time; it does not change to try to keep the same content within it as the
document changes.
Storage - Web APIs
if(!localstorage.getitem('bgcolor')) { populatestorage(); } setstyles(); function populatestorage() { localstorage.setitem('bgcolor',
document.getelementbyid('bgcolor').value); localstorage.setitem('font',
document.getelementbyid('font').value); localstorage.setitem('image',
document.getelementbyid('image').value); } function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image');
document.getelementbyid('bgcolor').v...
...alue = currentcolor;
document.getelementbyid('font').value = currentfont;
document.getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this running as a complete working example, see our web storage demo.
Using readable streams - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem =
document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we shoul...
... 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.
StylePropertyMapReadOnly.get() - Web APIs
// get the element const myelement =
document.queryselector('a'); // get the <dl> we'll be populating const styleslist =
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])); styleslist.appendchild(cssproperty); // values const cssvalue =
document.createelement('dd'); cssvalue.appendchild(
document.createtextnode( stylemap.get(ofinterest[i]))); styleslist.appendchild(cssvalue); } specifications specification status comment css typed om level 1the definition of 'get()' in that specification.
StylePropertyMapReadOnly - Web APIs
// get the element const myelement =
document.queryselector('p'); // get the <dl> we'll be populating const styleslist =
document.queryselector('#output'); // retrieve all computed styles with computedstylemap() const stylepropertymap = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of stylepropertymap) { // properties const cssproperty = doc...
...ument.createelement('dt'); cssproperty.appendchild(
document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue =
document.createelement('dd'); cssvalue.appendchild(
document.createtextnode(val)); styleslist.appendchild(cssvalue); } specifications specification status comment css typed om level 1the definition of 'stylepropertymapreadonly' in that specification.
StyleSheet.media - Web APIs
example <!doctype html> <html> <head> <link rel="stylesheet" href="
document.css" type="text/css" media="screen" /> <style rel="stylesheet" type="text/css" media="screen, print"> body { background-color: snow; } </style> </head> <body> <script> for (var isheetindex = 0; isheetindex <
document.stylesheets.length; isheetindex++) { console.log('
document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(
document.stylesheets[isheetindex].media)); if (isheetindex === 0)
document.stylesheets[isheetindex].media.appendmedium('handheld'); if (isheet...
...index === 1)
document.stylesheets[isheetindex].media.deletemedium('print'); console.log('
document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(
document.stylesheets[isheetindex].media)); } /* will log:
document.stylesheets[0].media: {"0":"screen"}
document.stylesheets[0].media: {"0":"screen","1":"handheld"}
document.stylesheets[1].media: {"0":"screen","1":"print"}
document.stylesheets[1].media: {"0":"screen"} */ </script> </body> </html> specifications specification status comment css object model (cssom)the definition of 'stylesheet: media' in that specification.
StyleSheet.ownerNode - Web APIs
the ownernode property of the stylesheet interface returns the node that associates this style sheet with the
document.
... syntax noderef = stylesheet.ownernode example <html lang="en"> <head> <link rel="stylesheet" href="example.css"> </head> <body> <button onclick="alert(
document.stylesheets[0].ownernode)">show example.css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for style sheets that are included by other style sheets, such as with @import, the value of this property is null.
SubmitEvent() - Web APIs
examples this code snippet locates a form in the current
document, and then an html <button> within the form with the class submit on it.
... const form =
document.queryselector("form"); const formtrigger = form.queryselector("button.submit"); const submitevent = new submitevent("submit", { submitter: formtrigger }); form.dispatchevent(submitevent); this is a somewhat contrived example, as you can do nearly all of this much more easily, but this gives you deep control over the process that can be useful.
SubtleCrypto.deriveKey() - Web APIs
let encryptbutton =
document.queryselector(".ecdh .encrypt-button"); encryptbutton.addeventlistener("click", () => { encrypt(alicessecretkey); }); // bob can use his copy to decrypt the message.
... let decryptbutton =
document.queryselector(".ecdh .decrypt-button"); decryptbutton.addeventlistener("click", () => { decrypt(bobssecretkey); }); } pbkdf2 in this example we ask the user for a password, then use it to derive an aes key using pbkdf2, then use the aes key to encrypt a message.
Text.isElementContentWhitespace - Web APIs
var tn =
document.createtextnode("hello world"); tn.iselementcontentwhitespace; /* evaluates to false */ for a node that is all whitespace characters, the iselementcontentwhitespace evaluates to true.
... var ws =
document.createtextnode(" \t \r\n ") ws.iselementcontentwhitespace; /* evaluates to true */ ...
Text.wholeText - Web APIs
the text is concatenated in
document order.
...
document object model (dom) level 3 core specificationthe definition of 'text.wholetext' in that specification.
TextMetrics - Web APIs
html <canvas id="canvas" width="550" height="500"></canvas> javascript const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const baselinesabovealphabetic = ['fontboundingboxascent', 'actualboundingboxascent', 'emheightascent', 'hangingbaseline']; const baselinesbelowalphabetic = ['ideographicbaseline', 'emheightdescent', 'actualboundingboxdescent', 'fontboundingboxdescent']; const baselines = [...baselinesabovealphab...
... it can therefore be useful to use the sum of actualboundingboxleft and actualboundingboxright as a more accurate way to get the absolute text width: const canvas =
document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const text = 'abcdefghijklmnop'; ctx.font = 'italic 50px serif'; const textmetrics = ctx.measuretext(text); console.log(textmetrics.width); // 459.8833312988281 console.log(math.abs(textmetrics.actualboundingboxleft) + math.abs(textmetrics.actualboundingboxright)); // 462.8833333333333 specifications specifica...
Using Touch Events - Web APIs
add the touch point handlers to the specific target element (rather than the entire
document or nodes higher up in the
document tree).
... examples and demos the following
documents describe how to use touch events and include example code: touch events overview implement custom gestures introduction to touch events in javascript add touch screen support to your website (the easy way) touch event demonstrations: paint program (by rick byers) touch/pointer tests and demos (by patrick h.
TrackEvent - Web APIs
example this example sets up a function, handletrackevent(), which is callled for any addtrack or removetrack event on the first <video> element found in the
document.
... var videoelem =
document.queryselector("video"); videoelem.videotracks.addeventlistener("addtrack", handletrackevent, false); videoelem.videotracks.addeventlistener("removetrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("addtrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("removetrack", handletrackevent, false); videoelem.texttracks.addeventlistener("addtrack", handletrackevent, false); videoelem.texttracks.addeventlistener("removetrack", handletrackevent, false); function handletrackevent(event) { var trackkind; if (event.target instanceof(videotracklist)) { trackkind = "video"; } else if (event.target instanceof(audiotracklist)) { trackkind = "audio"; } else if (event.target instanceof(texttracklist)) { trackkind = "text";...
TreeWalker.currentNode - Web APIs
syntax node = treewalker.currentnode; treewalker.currentnode = node; example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); root = treewalker.currentnode; // the root element as it is the first element!
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.currentnode' in that specification.
TreeWalker.filter - Web APIs
syntax nodefilter = treewalker.filter; example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); nodefilter = treewalker.filter; //
document.body in this case specifications specification status comment domthe definition of 'treewalker.filter' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.filter' in that specification.
TreeWalker.firstChild() - Web APIs
syntax node = treewalker.firstchild; example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.firstchild(); // returns the first child of the root element, or null if none specifications specification status comment domthe definition of 'treewalker.firstchild' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.firstchild' in that specification.
TreeWalker.lastChild() - Web APIs
syntax node = treewalker.lastchild(); example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.lastchild(); // returns the last visible child of the root element specifications specification status comment domthe definition of 'treewalker.lastchild' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.lastchild' in that specification.
TreeWalker.nextSibling() - Web APIs
syntax node = treewalker.nextsibling(); example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); treewalker.firstchild(); var node = treewalker.nextsibling(); // returns null if the first child of the root element has no sibling specifications specification status comment domthe definition of 'treewalker.nextsibling' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.nextsibling' in that specification.
TreeWalker.previousSibling() - Web APIs
syntax node = treewalker.previoussibling(); example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.previoussibling(); // returns null as there is no previous sibiling specifications specification status comment domthe definition of 'treewalker.previoussibling' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.previoussibling' in that specification.
TreeWalker.root - Web APIs
syntax root = treewalker.root; example var treewalker =
document.createtreewalker(
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); root = treewalker.root; //
document.body in this case specifications specification status comment domthe definition of 'treewalker.root' in that specification.
... living standard no change from
document object model (dom) level 2 traversal and range specification
document object model (dom) level 2 traversal and range specificationthe definition of 'treewalker.root' in that specification.
TypeInfo - Web APIs
the obsolete typeinfo interface was intended to be used to describe a dom data type by keying its name to a namespace within the
document's schema.
... constants constant value derivation_restriction 1 derivation_extension 2 derivation_union 4 derivation_list 8 specifications specification status comment
document object model (dom) level 3 core specificationthe definition of 'typeinfo' in that specification.
UIEvent.detail - Web APIs
specifications specification status comment
document object model (dom) level 3 events specificationthe definition of 'uievent.detail' in that specification.
... obsolete
document object model (dom) level 2 events specificationthe definition of 'uievent.detail' in that specification.
URL.createObjectURL() - Web APIs
the url lifetime is tied to the
document in the window on which it was created.
... browsers will release object urls automatically when the
document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.
UserDataHandler - Web APIs
in both
document.importnode() and node.clonenode(), although user data is not copied over, the handler will be called.
... constants constant value operation node_cloned 1 node.clonenode() node_imported 2
document.importnode() node_deleted unimplemented (see bug 550400) 3 node_renamed unimplemented 4 node.renamenode() node_adopted 5
document.adoptnode() (node_renamed is currently not supported since node.renamenode() is not supported.) specification dom level 3 core: userdatahandler ...
VTTCue - Web APIs
methods getcueashtml() returns the cue text as a
documentfragment.
... example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video =
document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体ä¸æ–‡subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, 'å—幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtitles will display between 2.6 and 4 seconds'); track.addcue(cueen); }); result chrome: please open in jsfiddle to view the live sample.
VideoTrackList: change event - Web APIs
bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement =
document.queryselector('video'); videoelement.videotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggletrackbutton =
document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the onchange event handler property: const videoelement = do...
...cument.queryselector('video'); videoelement.videotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `selected` will trigger the `change` event const toggletrackbutton =
document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); specifications specification status html living standardthe definition of 'change' in that specification.
WebGLRenderingContext - Web APIs
to get an access to a webgl context for 2d and/or 3d graphics rendering, call getcontext() on a <canvas> element, supplying "webgl" as the argument: var canvas =
document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); once you have the webgl rendering context for a canvas, you can render within it.
...ur browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas =
document.getelementsbytagname("canvas")[0], secondcanvas =
document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) {
document.queryselector("p").innerhtml...
Clearing with colors - Web APIs
window.removeeventlistener(evt.type, setupwebgl, false); // references to the
document elements.
... var paragraph =
document.queryselector("p"), canvas =
document.queryselector("canvas"); // getting the webgl rendering context.
Color masking - Web APIs
f; font-size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas =
document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) {
document.queryselector("p").innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000)...
...; var mask = [true, true, true]; var redtoggle =
document.queryselector("#red-toggle"), greentoggle =
document.queryselector("#green-toggle"), bluetoggle =
document.queryselector("#blue-toggle"); redtoggle.addeventlistener("click", setcolormask, false); greentoggle.addeventlistener("click", setcolormask, false); bluetoggle.addeventlistener("click", setcolormask, false); function setcolormask(evt) { var index = evt.target === greentoggle && 1 || evt.target === bluetoggle && 2 || 0; mask[index] = !mask[index]; if (mask[index] === true) evt.target.innerhtml="on"; else evt.target.innerhtml="off"; gl.colormask(mask[0], mask[1], mask[2], true); drawanimation(); }; function drawanimation () { var color = getrandomcolor()...
Raining rectangles - Web APIs
function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17);
document.queryselector("canvas") .addeventlistener("click", playerclick, false); var displays =
document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); ...
...; rect.position = [ randnums[2]*(gl.drawingbufferwidth - rect.size[0]), gl.drawingbufferheight ]; rect.velocity = 1.0 + 6.0*math.random(); rect.color = getrandomvector(); gl.clearcolor(rect.color[0], rect.color[1], rect.color[2], 1.0); function getrandomvector() { return [math.random(), math.random(), math.random()]; } } 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.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0...
Simple color animation - Web APIs
var button =
document.queryselector("#animation-onoff"); var verb =
document.queryselector("strong"); function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false); verb.innerhtml="stop"; // setup animation loop by redrawing every second.
... stopanimation({type: "click"}); var gl; function drawanimation () { if (!gl) { var canvas =
document.getelementbyid("canvas-view"); gl = canvas.getcontext("webgl") ||canvas.getcontext("experimental-webgl"); if (!gl) { clearinterval(timer); alert("failed to get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a...
A simple RTCDataChannel sample - Web APIs
function startup() { connectbutton =
document.getelementbyid('connectbutton'); disconnectbutton =
document.getelementbyid('disconnectbutton'); sendbutton =
document.getelementbyid('sendbutton'); messageinputbox =
document.getelementbyid('message'); receivebox =
document.getelementbyid('receivebox'); // set event listeners for user interface widgets connectbutton.addeventlistener('click', connectpeers, false); disconnectbutton...
... function handlereceivemessage(event) { var el =
document.createelement("p"); var txtnode =
document.createtextnode(event.data); el.appendchild(txtnode); receivebox.appendchild(el); } this method simply performs some basic dom injection; it creates a new <p> (paragraph) element, then creates a new text node containing the message text, which is received in the event's data property.
Web Video Text Tracks Format (WebVTT) - Web APIs
example 20 - voice tag <v bob>text</v> interfaces there are two interfaces or apis used in webvtt which are: vttcue interface it is used for providing an interface in
document object model api, where different attributes supported by it can be used to prepare and alter the cues in number of ways.
...region; attribute directionsetting vertical; attribute boolean snaptolines; attribute (double or autokeyword) line; attribute linealignsetting linealign; attribute (double or autokeyword) position; attribute positionalignsetting positionalign; attribute double size; attribute alignsetting align; attribute domstring text;
documentfragment getcueashtml(); }; vtt region interface this is the second interface in webvtt api.
Inputs and input sources - Web APIs
there are a number of examples showing how to handle select events throughout the
documentation, such as in the section on targeting and the targeting ray elsewhere in this article.
... the corresponding code for keyboard input might look something like this:
document.addeventlistener("keydown", event => { switch(event.key) { case: "a": case: "a": avatar.posdelta.x -= accel_x; break; case "d": case "d": avatar.posdelta.x += accel_x; break; case "w": case "w": avatar.posdelta.y += accel_y; break; case "s": case "s": avatar.posdelta.y -= accel_y; break; default: break; ...
Web Audio API best practices - Web APIs
here is a simple example of creating the context from inside a click event: const button =
document.queryselector('button'); button.addeventlistener('click', function() { const audioctx = new audiocontext(); }, false); if however, you create the context outside of a user gesture, its state will be set to suspended and it will need to be started after user interaction.
... const audioctx = new audiocontext(); const button =
document.queryselector('button'); button.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } }, false); you might instead be working with an offlineaudiocontext, in which case you can resume the suspended audio context with the startrendering() method.
Window.devicePixelRatio - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas =
document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // set display size (css pixels).
... let pixelratiobox =
document.queryselector(".pixel-ratio"); let mqstring = `(resolution: ${window.devicepixelratio}dppx)`; const updatepixelratio = () => { let pr = window.devicepixelratio; let prstring = (pr * 100).tofixed(0); pixelratiobox.innertext = `${prstring}% (${pr.tofixed(2)})`; } updatepixelratio(); matchmedia(mqstring).addlistener(updatepixelratio); the string mqstring is set up to be the media query its...
Window.frameElement - Web APIs
note: despite this property's name, it works for
documents embedded within any embedding point, including <object>, <iframe>, or <embed>.
...if the window isn't embedded into another
document, or if the
document into which it's embedded has a different origin, the value is null instead.
Window.frames - Web APIs
each item in the window.frames pseudo-array represents the window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame dom element (i.e., window.frames[0] is the same thing as
document.getelementsbytagname("iframe")[0].contentwindow).
... example var frames = window.frames; // or // var frames = window.parent.frames; for (var i = 0; i < frames.length; i++) { // do something with each subframe as frames[i] frames[i].
document.body.style.background = "red"; } specifications specification status comment html living standardthe definition of 'window.frames' in that specification.
Window.mozPaintCount - Web APIs
returns the number of times the current
document has been painted to the screen in this window.
... the window.mozpaintcount value is a long long, and starts at zero when the
document is first created, incrementing by one each time the
document is painted.
Window.scrollBy() - Web APIs
the window.scrollby() method scrolls the
document in the window by the given amount.
... examples to scroll down one page: window.scrollby(0, window.innerheight); to scroll up: window.scrollby(0, -window.innerheight); using options: window.scrollby({ top: 100, left: 100, behavior: 'smooth' }); notes window.scrollby() scrolls by a particular amount, whereas window.scroll() scrolls to an absolute position in the
document.
Window.scrollByPages() - Web APIs
the window.scrollbypages() method scrolls the current
document by the specified number of pages.
... example // scroll down the
document by 1 page window.scrollbypages(1); // scroll up the
document by 1 page window.scrollbypages(-1); specification dom level 0.
Window: unload event - Web APIs
the unload event is fired when the
document or a child resource is being unloaded.
... bubbles no cancelable no interface event event handler property onunload it is fired after: beforeunload (cancelable event) pagehide the
document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the
document tree: parent frame unload will happen before child frame unload (see example below).
WindowEventHandlers.onstorage - Web APIs
the storage event fires when a storage area has been changed in the context of another
document.
... example this example logs the value for a storage key whenever it changes in another
document.
WindowOrWorkerGlobalScope.fetch() - Web APIs
const myimage =
document.queryselector('img'); let myrequest = new request('flowers.jpg'); fetch(myrequest) .then(function(response) { if (!response.ok) { throw new error(`http error!
... status: ${response.status}`); } return response.blob(); }) .then(function(response) { let objecturl = url.createobjecturl(response); myimage.src = objecturl; }); in the fetch with init then request example (see fetch request init live), we do the same thing except that we pass in an init object when we invoke fetch(): const myimage =
document.queryselector('img'); let myheaders = new headers(); myheaders.append('content-type', 'image/jpeg'); const myinit = { method: 'get', headers: myheaders, mode: 'cors', cache: 'default' }; let myrequest = new request('flowers.jpg'); fetch(myrequest, myinit).then(function(response) { // ...
Worker - Web APIs
when a message is sent to the parent
document from the worker via dedicatedworkerglobalscope.postmessage.
... example the following code snippet creates a worker object using the worker() constructor, then uses the worker object: var myworker = new worker('/worker.js'); var first =
document.queryselector('input#number1'); var second =
document.queryselector('input#number2'); first.onchange = function() { myworker.postmessage([first.value, second.value]); console.log('message posted to worker'); } for a full example, see ourbasic dedicated worker example (run dedicated worker).
WorkerGlobalScope.location - Web APIs
example if you called the following in a
document served at localhost:8000 console.log(location); inside a worker (which would basically be the equivalent of self.console.log(self.location);, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), you will get a workerlocation object written to the console — something like the following: workerlocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…} has...
...h: "" host: "localhost:8000" hostname: "localhost" href: "http://localhost:8000/worker.js" origin: "http://localhost:8000" pathname: "/worker.js" port: "8000" protocol: "http:" search: "" __proto__: workerlocation you could use this location object to return more information about the
document's location, as you might do with a normal location object.
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(chunk); ...
... 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); } }, queuingstrategy...
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(chunk); ...
... 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); } }, queuingstrategy...
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(chunk); ...
... 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); } }, queuingstrategy...
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(chunk); ...
... 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); } }, queuingstrategy...
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(chunk); ...
... 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); } }, queuingstrategy...
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(chunk); ...
... 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); } }, queuingstrategy...
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(ch...
...rategy = 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); } }, ...
Sending and Receiving Binary Data - Web APIs
possible values are the empty string (default), "arraybuffer", "blob", "
document", "json", and "text".
... the response property will contain the entity body according to responsetype, as an arraybuffer, blob,
document, json, or string.
XMLHttpRequest.response - Web APIs
the xmlhttprequest response property returns the response's body content as an arraybuffer, blob,
document, javascript object, or domstring, depending on the value of the request's responsetype property.
...
document the response is an html
document or xml xml
document, as appropriate based on the mime type of the received data.
XMLHttpRequest.responseType - Web APIs
document the response is an html
document or xml xml
document, as appropriate based on the mime type of the received data.
... restrictions in workers attempts to set the value of responsetype to
document are ignored in a worker.
XPathEvaluator.createNSResolver() - Web APIs
this method adapts any dom node to resolve namespaces so that an xpath expression can be easily evaluated relative to the context of the node where it appeared within the
document.
... specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.creatensresolver()' in that specification.
XPathResult.booleanValue - Web APIs
syntax var value = result.booleanvalue; return value the return value is the boolean value of the xpathresult returned by
document.evaluate().
... html <div>xpath example</div> <p>text is 'xpath example': <output></output></p> javascript var xpath = "//div/text() = 'xpath example'"; var result =
document.evaluate(xpath,
document, null, xpathresult.boolean_type, null);
document.queryselector("output").textcontent = result.booleanvalue; result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.booleanvalue' in that specification.
XPathResult.iterateNext() - Web APIs
invalid_state_err if the
document is mutated since the result was returned, an xpathexception of type invalid_state_err is thrown.
... html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result =
document.evaluate(xpath,
document, null, xpathresult.any_type, null); var node = null; var tagnames = []; while(node = result.iteratenext()) { tagnames.push(node.localname); }
document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.iteratenext()' in that specification.
XPathResult.numberValue - Web APIs
syntax var value = result.numbervalue; return value the return value is the numeric value of the xpathresult returned by
document.evaluate().
... html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "count(//div)"; var result =
document.evaluate(xpath,
document, null, xpathresult.number_type, null);
document.queryselector("output").textcontent = result.numbervalue; result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.numbervalue' in that specification.
XPathResult.singleNodeValue - Web APIs
syntax var value = result.singlenodevalue; return value the return value is the node value of the xpathresult returned by
document.evaluate().
... html <div>xpath example</div> <div>tag name of the element having the text content 'xpath example': <output></output></div> javascript var xpath = "//*[text()='xpath example']"; var result =
document.evaluate(xpath,
document, null, xpathresult.first_ordered_node_type, null);
document.queryselector("output").textcontent = result.singlenodevalue.localname; result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.singlenodevalue' in that specification.
XPathResult.snapshotItem() - Web APIs
unlike the iterator result, the snapshot does not become invalid, but may not correspond to the current
document if it is mutated.
... html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result =
document.evaluate(xpath,
document, null, xpathresult.ordered_node_snapshot_type, null); var node = null; var tagnames = []; for(var i = 0; i < result.snapshotlength; i++) { var node = result.snapshotitem(i); tagnames.push(node.localname); }
document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status comment
document objec...
XPathResult.stringValue - Web APIs
syntax var value = result.stringvalue; return value the return value is the string value of the xpathresult returned by
document.evaluate().
... html <div>xpath example</div> <div>text content of the <div> above: <output></output></div> javascript var xpath = "//div/text()"; var result =
document.evaluate(xpath,
document, null, xpathresult.string_type, null);
document.queryselector("output").textcontent = result.stringvalue; result specifications specification status comment
document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.stringvalue' in that specification.
XRSession.visibilityState - Web APIs
usage notes it's important to keep in mind that because an immersive webxr session is potentially being shown using a different display than the html
document in which it's running (such as when being shown on a headset), the value of a session's visibilitystate may not necessarily be the same as the owning
document's visibilitystate.
... for instance, if the viewer is using a headset tethered to a computer and the immersive scene is obscured by a configuration ui, the user could peek out from behind the headset and still be able to see the
document itself on their computer's monitor.
XRSystem: isSessionSupported() - Web APIs
this string must be one of inline (to present the webxr content inline within the context of an html
document) or immersive-vr for a fully-immersive virtual experience.
... securityerror the
document's origin does not have permission to use the xr-spatial-tracking feature policy.
msCapsLockWarningOff - Web APIs
syntax
document.mscapslockwarningoff = true; value type: boolean false: default.
... example fiddle: http://jsfiddle.net/jonathansampson/mqcha/1/ example 2 <html> <head> <title>mscapslockwarningoff example</title> <script type="text/javascript"> function capsoff() { if (
document.mscapslockwarningoff == false) {
document.mscapslockwarningoff = true;
document.getelementbyid("caps").innerhtml = "warning off"; } else {
document.mscapslockwarningoff = false;
document.getelementbyid("caps").innerhtml = "warning on"; } } </script> </head> <body> <label>type a password: <input type="password" /></label><br /> <button id="caps" onclick="capsoff();">warning off<...
msGetRegionContent - Web APIs
return value type: boolean returned ranges are sorted by
document position and do not overlap.
...this is only available to regions that are
document elements and not to regions that are pseudo-elements.
msthumbnailclick - Web APIs
syntax event property object.onmsthumbnailclick = handler; addeventlistener method object.addeventlistener("msthumbnailclick", handler, usecapture) general info synchronous no bubbles no cancelable no note the onmsthumbnailclick event is available only to
documents that are launched from a pinned site shortcut.
... example function thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); }
document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handler
document.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay = window.external.mssitemodeaddthumbbarbutton(iconuri, tooltip); // refresh the taskbar wi...
Using the aria-activedescendant attribute - Accessibility
description the aria-activedescendant attribute contains the id of the currently active child object that is part of a composite widget within the
document object model.
...this active child using the aria-activedescendant property must always be visible on screen and must be a descendant of the container in the
document object model.
Using the aria-describedby attribute - Accessibility
</div> </div> example 2: a close button in the example below, a link that functions as a 'close' button on a dialog is described elsewhere in the
document.
... id="descriptionclose">closing this window will discard any information entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom
document.
Using the aria-invalid attribute - Accessibility
the snippet below shows a very simple validation function, which only checks for the presence of a particular character (in the real world, validation will likely be more sophisticated): function checkvalidity(aid, asearchterm, amsg){ var elem =
document.getelementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribute("aria-invalid", "true"); updatealert(amsg); } else { elem.setattribute("aria-invalid", "false"); updatealert(); } } the snippet below shows the alert functions, which add (or remove) the error message: function updatealert(msg) { var old...
...alert =
document.getelementbyid("alert"); if (oldalert) {
document.body.removechild(oldalert); } if (msg) { var newalert =
document.createelement("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var content =
document.createtextnode(msg); newalert.appendchild(content);
document.body.appendchild(newalert); } } note that the alert has the aria role attribute set to "alert." working examples: alert role example (uses the aria-invalid attribute) notes when aria-invalid is used in conjunction with the aria-required attribute, aria-invalid should not be set to true before the form is submitted - only in response to validation.
Using the article role - Accessibility
the article role is used to identify a section of a page that forms an independent part of a
document, page or site.
... possible effects on user agents and assistive technology when the user navigates an element assigned the role of article, assistive technologies that typically intercept standard keyboard events should switch to
document browsing mode, as opposed to passing keyboard events through to the web application.
Using the slider role - Accessibility
<label for="fader">volume</label> <input type="range" id="fader" min="1" max="100" value="50" step="1" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" oninput="outputupdate(value)"> <output for="fader" id="volume">50</output> the following code snippet allows you to return the output as it is updated by user input: function outputupdate(vol) {
document.queryselector('#volume').value = vol; } example 2: text values sometimes, a slider is used to choose a value that is not, semantically, a number.
... aria-valuemin="1" aria-valuemax="7" aria-valuenow="2" aria-valuetext="monday"> </div> </div> the code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes: var daynames = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"]; var updateslider = function (newvalue) { var handle =
document.getelementbyid("day-handle"); handle.setattribute("aria-valuenow", newvalue.tostring()); handle.setattribute("aria-valuetext", daynames[newvalue]); }; working examples: slider example notes aria attributes used aria-valuemin aria-valuemax aria-valuenow aria-valuetext aria-orientation related aria techniques compatibility tbd: add support information for common u...
ARIA: Comment role - Accessibility
examples in the following example we have a
document section that has been commented.
... i think the cowbell could distract from the solo.</p> <p><time datetime="2019-03-30t21:02">march 30 2019, 21:02</time></p> </div> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the
document.
ARIA: Mark role - Accessibility
examples in the following example we have a
document section that has been commented.
... accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the
document.
ARIA: Suggestion role - Accessibility
the suggestion landmark role semantically denotes a single proposed change to an editable
document.
...</p> <div id="comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div> browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the
document.
ARIA: heading role - Accessibility
associated wai-aria roles, states, and properties aria-level the aria-level attribute specifies the heading level in the
document structure.
...in that case, the newly-added headings need aria-level attributes whose values are consistent with the rest of the
document structure.
Basic form hints - Accessibility
> </div> <div> <label for="phone">phone:</label> <input type="text" value="phone" id="phone" aria-required="false"/> </div> <div> <label for="email">* e-mail:</label> <input type="text" value="email" id="email" aria-required="true"/> </div> </form> the script that validates the form entry would look something like this: var validate = function () { var emailelement =
document.getelementbyid(emailfieldid); var valid = emailvalid(formdata.email); // returns true if valid, false otherwise emailelement.setattribute("aria-invalid", !valid); setelementbordercolour(emailelement, valid); // sets the border to red if second arg is false }; providing helpful error messages read how to use aria alerts to enhance forms.
... for more guidance on using aria for forms accessibility, see the wai-aria authoring practices
document.
ARIA - Accessibility
var progressbar =
document.getelementbyid("percent-loaded"); // set its aria roles and states, // so that assistive technologies know what kind of widget it is.
... wai-aria authoring practices the official best practices
documents how best to aria-ify common widgets and interactions.
Understandable - Accessibility
see setting the primary language of the
document.
...it is better to just write all content at lower secondary level, even technical
documentation like programming tutorials, unless there is a good reason not to (e.g.
:dir() - CSS: Cascading Style Sheets
/* selects any element with right-to-left text */ :dir(rtl) { background-color: red; } the :dir() pseudo-class uses only the semantic value of the directionality, i.e., the one defined in the
document itself.
...other
document types may have different methods.
:has() - CSS: Cascading Style Sheets
/* selects any <a>, as long as it has an <img> element directly inside it */ /* note that this is not supported in any browser yet */ let test =
document.queryselector('a:has(> img)'); syntax :has( <relative-selector-list> )where <relative-selector-list> = <relative-selector>#where <relative-selector> = <combinator>?
...instead, it could only be used with functions like
document.queryselector(); this was due to performance concerns.
:host() - CSS: Cascading Style Sheets
in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style =
document.createelement('style'); let span =
document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after ...
...{ content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host(.footer) { color : red; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the
document that have the footer class set on them — we've used it to give instances of the element inside the <footer> a special color.
:host-context() - CSS: Cascading Style Sheets
/* selects a shadow root host, only if it is a descendant of the selector argument given */ :host-context(h1) { font-weight: bold; } :host-context(main article) { font-weight: bold; } /* changes paragraph text color from black to white when a .dark-theme class is applied to the
document body */ p { color: #000; } :host-context(body.dark-theme) p { color: #fff; } syntax :host-context( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
... in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style =
document.createelement('style'); let span =
document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after ...
:host - CSS: Cascading Style Sheets
in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style =
document.createelement('style'); let span =
document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after ...
...: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host { background: rgba(0,0,0,0.1); padding: 2px 5px; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the
document.
:lang() - CSS: Cascading Style Sheets
for other
document types there may be other
document methods for determining the language.
...note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of
document.
:root - CSS: Cascading Style Sheets
the :root css pseudo-class matches the root element of a tree representing the
document.
... /* selects the root element of the
document: <html> in the case of html */ :root { background: yellow; } syntax :root examples declaring global css variables :root can be useful for declaring global css variables: :root { --main-color: hotpink; --pane-padding: 5px 42px; } specifications specification status comment selectors level 4the definition of ':root' in that specification.
:scope - CSS: Cascading Style Sheets
javascript let paragraph =
document.getelementbyid("para"); let output =
document.getelementbyid("output"); if (paragraph.matches(":scope")) { output.innertext = "yep, the element is its own scope as expected!"; } html <p id="para"> this is a paragraph.
... javascript var context =
document.getelementbyid('context'); var selected = context.queryselectorall(':scope > div');
document.getelementbyid('results').innerhtml = array.prototype.map.call(selected, function (element) { return '#' + element.getattribute('id'); }).join(', '); html <div id="context"> <div id="element-1"> <div id="element-1.1"></div> <div id="element-1.2"></div> </div> <div id="element-2"> <div id="element-2.1"></div> </div> </div> <p> selected elements ids : <span id="results"></span> <...
Using media queries - CSS: Cascading Style Sheets
a media query computes to true when the media type (if specified) matches the device on which a
document is being displayed and all media feature expressions compute as true.
... print intended for paged material and
documents viewed on a screen in print preview mode.
Mozilla CSS extensions - CSS: Cascading Style Sheets
e gecko 62 -moz-grid-groupobsolete since gecko 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-ethiopi...
...eckbox :-moz-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-row :-moz-tree-row(hover) :-moz-tree-separator :-moz-tree-twisty u – x :-moz-ui-invalid :-moz-ui-valid :-moz-user-disabled ::-moz-viewport ::-moz-viewport-scroll :-moz-window-inactive ::-moz-xul-anonymous-block at-rules @-moz-
document media features -moz-mac-graphite-theme -moz-maemo-classic -moz-device-pixel-ratio -moz-os-version -moz-scrollbar-end-backward -moz-scrollbar-end-forward -moz-scrollbar-start-backward -moz-scrollbar-start-forward -moz-scrollbar-thumb-proportional -moz-touch-enabled -moz-windows-accent-color-in-titlebar -moz-windows-classic -moz-windows-compositor -moz-windows-default-theme -mo...
Replaced elements - CSS: Cascading Style Sheets
put in simpler terms, they're elements whose contents are not affected by the current
document's styles.
...some replaced elements, such as <iframe> elements, may have stylesheets of their own, but they don't inherit the styles of the parent
document.
attr() - CSS: Cascading Style Sheets
relative url are resolved relatively to the original
document, not relatively to the style sheet.
... the url about:invalid that points to a non-existent
document with a generic error condition.
background-clip - CSS: Cascading Style Sheets
see "the backgrounds of special elements." note: for
documents whose root element is an html element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first html <body> child element.
...it is recommended that authors of html
documents specify the canvas background for the <body> element rather than the html element.
border-width - CSS: Cascading Style Sheets
nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single
document.
... recommendation added the constraint that values' meaning must be constant inside a
document.
content - CSS: Cascading Style Sheets
the case-sensitivity of attribute names depends on the
document language.
...if the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main
document.
direction - CSS: Cascading Style Sheets
note that text direction is usually defined within a
document (e.g., with html's dir attribute) rather than through direct use of the direction property.
... unlike the dir attribute in html, the direction property is not inherited from table columns into table cells, since css inheritance follows the
document tree, and table cells are inside of rows but not inside of columns.
element() - CSS: Cascading Style Sheets
on gecko browsers, you can use the non-standard
document.mozsetimageelement() method to change the element being used as the background for a given css background element.
... see also image() image-set() <image> <gradient> element() cross-fade()
document.mozsetimageelement() ...
image() - CSS: Cascading Style Sheets
if the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the
document.
...list items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as
documents set to arabic or hebrew, will have the bullet display on the right, horizontally flippled, as if transform: scalex(-1) had been set.
<length> - CSS: Cascading Style Sheets
viewport-percentage lengths viewport-percentage lengths define the <length> value relative to the size of the viewport, i.e., the visible portion of the
document.
... rgba(0,0,0,0.5); background-color: orange; display: flex; align-items: center; margin-top: 10px; } .result code { position: absolute; margin-left: 20px; } .results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv =
document.queryselector('.inner'); const inputelem =
document.queryselector('input'); const resultsdiv =
document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result =
document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.value}</code>...
overflow-anchor - CSS: Cascading Style Sheets
therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a
document or part of a
document and need to turn the behavior off.
... formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | none examples prevent scroll anchoring to prevent scroll anchoring in a
document, use the overflow-anchor property.
place-content - CSS: Cascading Style Sheets
ected>center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="left">left</option> <option value="right">right</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select><code>;</code> var update = function () {
document.getelementbyid("container").style.placecontent =
document.getelementbyid("aligncontentalignment").value + " " +
document.getelementbyid("justifycontentalignment").value; } var aligncontentalignment =
document.getelementbyid("aligncontentalignment"); aligncontentalignment.addeventlistener("change", update); var justifycontentalignment =
document.getelementbyid("justifycontentalignment"); justif...
...ycontentalignment.addeventlistener("change", update); var writingm =
document.getelementbyid("writingmode"); writingm.addeventlistener("change", function (evt) {
document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction =
document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) {
document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 5...
transition-timing-function - CSS: Cascading Style Sheets
margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els =
document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .ease { transition-timing-function: ease; } .easein { transition-timing-function: ease-in; } .easeout { transition-timing-function: ease-out; } .easeinout { transition-timing-function: eas...
... margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els =
document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .jump-start { transition-timing-function: steps(5, jump-start); } .jump-end { transition-timing-function: steps(5, jump-end); } .jump-none { transition-timing-function: steps(5, jump-none); }...
unicode-bidi - CSS: Cascading Style Sheets
the unicode-bidi css property, together with the direction property, determines how bidirectional text in a
document is handled.
... note: this property is intended for
document type definition (dtd) designers.
visibility - CSS: Cascading Style Sheets
the visibility css property shows or hides an element without changing the layout of a
document.
... to both hide an element and remove it from the
document layout, set the display property to none instead of using visibility.
Web Audio playbackRate explained - Developer guides
playbackrate basics let's starting by looking at a brief example of playbackrate usage: var myaudio =
document.createelement('audio'); myaudio.setattribute('src','audiofile.mp3'); myaudio.playbackrate = 0.5; here we create an <audio> element, and set its src to a file of our choice.
...="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v =
document.getelementbyid("myvideo"); var p =
document.getelementbyid("pbr"); var c =
document.getelementbyid("currentpbr"); p.addeventlistener('input',function(){ c.innerhtml = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input event firing on the <input> element, allowing us to react to the playback rate control being changed.
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.addeventlistener("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.
Using device orientation with 3D transforms - Developer guides
here's a simple code snippet to sum it up: var elem =
document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax e...
...this is achieved by inverting the previous order of rotations and negating the alpha value: var elem =
document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis...
Event developer guide - Developer guides
the media streams embedded in the html
documents might trigger some events, as explained in the media events page.
... two common styles are: the generalized addeventlistener() and a set of specific on-event handlers.media eventsvarious 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.mouse gesture eventsgecko 1.9.1 added support for several mozilla-specific dom events used to handle mouse gestures.
HTML attribute: accept - HTML: Hypertext Markup Language
for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-office
document.wordprocessingml.
document"> whereas if you're accepting a media file, you may want to be include any format of that media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the accept attribute doesn't validate the types of the selected files; it simply provides hints for browsers to ...
...(many mobile devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-office
document.wordprocessingml.
document" — accept anything that smells like an ms word
document.
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
receiving and saving the image the code that handles the newly-downloaded image is found in the imagereceived() method: function imagereceived() { let canvas =
document.createelement("canvas"); let context = canvas.getcontext("2d"); canvas.width = downloadedimg.width; canvas.height = downloadedimg.height; context.drawimage(downloadedimg, 0, 0); imagebox.appendchild(canvas); try { localstorage.setitem("saved-image-example", canvas.todataurl("image/png")); } catch(err) { console.log("error: " + err); } } imagereceived() is called to h...
...the canvas is then inserted into the
document so the image is visible.
<a>: The Anchor element - HTML: Hypertext Markup Language
<a href="" download="my_painting.png">download my painting</a> </p> <canvas width="300" height="300"></canvas> css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; } javascript var canvas =
document.queryselector('canvas'), c = canvas.getcontext('2d'); c.fillstyle = 'hotpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlistener('mousemove', event => draw(event.offsetx, event.offsety) ); canvas.addeventlistener('mousedown', () => isdrawing = true); canvas.addeventlistener('mouseup...
...', () => isdrawing = false);
document.queryselector('a').addeventlistener('click', event => event.target.href = canvas.todataurl() ); result security and privacy <a> elements can have consequences for users’ security and privacy.
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
there are, though, a few cases where it's helpful to do so: when an abbreviation is used and you want to provide an expansion or definition outside the flow of the
document's content, use <abbr> with an appropriate title.
... html <p><dfn id="html"><abbr title="hypertext markup language">html</abbr> </dfn> is a markup language used to create the semantics and structure of a web page.</p> <p>a <dfn id="spec">specification</dfn> (<abbr title="specification">spec</abbr>) is a
document that outlines in detail how a technology or api is intended to function and how it is accessed.</p> result accessibility concerns spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the html <audio> element is used to embed sound content in
documents.
... for example, to detect when audio tracks are added to or removed from an <audio> element, you can use code like this: var elem =
document.queryselector("audio"); elem.audiotracklist.onaddtrack = function(event) { trackeditor.addtrack(event.track); }; elem.audiotracklist.onremovetrack = function(event) { trackeditor.removetrack(event.track); }; this code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's ...
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
examples html this code snippet adds a canvas element to your html
document.
...</canvas> javascript then in the javascript code, call htmlcanvaselement.getcontext() to get a drawing context and start drawing onto the canvas: const canvas =
document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); result accessibility concerns alternative content the <canvas> element on its own is just a bitmap and does not provide information about any drawn objects.
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
usage notes usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a
document, but that can be moved to another part of the
document or to an appendix without affecting the main flow.
... being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the
document.
<form> - HTML: Hypertext Markup Language
the html <form> element represents a
document section containing interactive controls for submitting information.
...it must be unique among the forms in a
document and not an empty string as of html5.
<frame> - HTML: Hypertext Markup Language
<frame> is an html element which defines a particular area in which another html
document can be displayed.
... src this attribute specifies the
document that will be displayed by the frame.
<input type="checkbox"> - HTML: Hypertext Markup Language
var overall =
document.queryselector('input[id="enchtbl"]'); var ingredients =
document.queryselectorall('ul input'); overall.addeventlistener('click', function(e) { e.preventdefault(); }); for(var i = 0; i < ingredients.length; i++) { ingredients[i].addeventlistener('click', updatedisplay); } function updatedisplay() { var checkedcount = 0; for(var i = 0; i < ingredients.length; i++) { ...
...value" name="other"> </div> <div> <button type="submit">submit form</button> </div> </fieldset> </form> css html { font-family: sans-serif; } form { width: 600px; margin: 0 auto; } div { margin-bottom: 10px; } fieldset { background: cyan; border: 5px solid blue; } legend { padding: 10px; background: blue; color: cyan; } javascript var othercheckbox =
document.queryselector('input[value="other"]'); var othertext =
document.queryselector('input[id="othervalue"]'); othertext.style.visibility = 'hidden'; othercheckbox.addeventlistener('change', () => { if(othercheckbox.checked) { othertext.style.visibility = 'visible'; othertext.value = ''; } else { othertext.style.visibility = 'hidden'; } }); specifications specification ...
<input type="email"> - HTML: Hypertext Markup Language
valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be list the values of the list attribute is the id of a <datalist> element located in the same
document.
...it must be a valid javascript regular expression, as used by the regexp type, and as
documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii.
<input type="number"> - HTML: Hypertext Markup Language
this input placeholder an example value to display inside the field when it's empty readonly a boolean attribute indicating whether the value is read-only step a stepping interval to use when using up and down arrows to adjust the value, as well as for validation list the values of the list attribute is the id of a <datalist> element located in the same
document.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } and finally, the javascript: let metersinputgroup =
document.queryselector('.metersinputgroup'); let feetinputgroup =
document.queryselector('.feetinputgroup'); let metersinput =
document.queryselector('#meters'); let feetinput =
document.queryselector('#feet'); let inchesinput =
document.queryselector('#inches'); let switchbtn =
document.queryselector('input[type="button"]'); switchbtn.addeventlistener('click', function() { if(switchbtn.getattribute('c...
<input type="search"> - HTML: Hypertext Markup Language
her or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same
document.
...it must be a valid javascript regular expression, as used by the regexp type, and as
documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii.
<input type="text"> - HTML: Hypertext Markup Language
her or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same
document.
...it must be a valid javascript regular expression, as used by the regexp type, and as
documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii.
<input type="url"> - HTML: Hypertext Markup Language
her or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same
document.
...it must be a valid javascript regular expression, as used by the regexp type, and as
documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii.
<ins> - HTML: Hypertext Markup Language
the html <ins> element represents a range of text that has been added to a
document.
... you can use the <del> element to similarly represent a range of text that has been deleted from the
document.
<output>: The Output element - HTML: Hypertext Markup Language
the value of this attribute must be the id of a <form> in the same
document.
... (if this attribute is not set, the <output> is associated with its ancestor <form> element, if any.) this attribute lets you associate <output> elements to <form>s anywhere in the
document, not just inside a <form>.
<table>: The Table element - HTML: Hypertext Markup Language
deprecated attributes align this enumerated attribute indicates how the table must be aligned inside the containing
document.
... it may have the following values: left: the table is displayed on the left side of the
document; center: the table is displayed in the center of the
document; right: the table is displayed on the right side of the
document.
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
this attribute must be specified and its url value must have the same origin as the
document — unless the <audio> or <video> parent element of the track element has a crossorigin attribute.
... let texttrackelem =
document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem =
document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); examples <video controls poster="/images/sample.gif"> ...
Link types: noopener - HTML: Hypertext Markup Language
the noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the
document that opened it — by not setting the window.opener property on the opened window (it returns null).
... this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating
document via the window.opener property (see about rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well).
Browser detection using the user agent - HTTP
this
document will guide you in doing this as correctly as possible.
...ation' in window) { hastouchscreen = true; // deprecated, but good fallback } else { // only as a last resort, fall back to user agent sniffing var ua = navigator.useragent; hastouchscreen = ( /\b(blackberry|webos|iphone|iemobile)\b/i.test(ua) || /\b(android|windows phone|ipad|ipod)\b/i.test(ua) ); } } if (hastouchscreen)
document.getelementbyid("examplebutton").style.padding="1em"; as for the screen size, simply use window.innerwidth and window.addeventlistener("resize", function(){ /*refresh screen size dependent things*/ }).
Access-Control-Allow-Origin - HTTP
note: null should not be used: "it may seem safe to return access-control-allow-origin: "null", but the serialization of the origin of any resource that uses a non-hierarchical scheme (such as data: or file:) and sandboxed
documents is defined to be "null".
... many user agents will grant such
documents access to a response with an access-control-allow-origin: "null" header, and any origin can create a hostile
document with a "null" origin.
CSP: plugin-types - HTTP
the http content-security-policy (csp) plugin-types directive restricts the set of plugins that can be embedded into a
document by limiting the types of resources which can be loaded.
... csp version 2 directive type
document directive default-src fallback no.
CSP: sandbox - HTTP
csp version 1.1 / 2 directive type
document directive this directive is not supported in the <meta> element or by the content-security-policy-report-only header field.
... allow-popups-to-escape-sandbox allows a sandboxed
document to open new windows without forcing the sandboxing flags upon them.
CSP: script-src - HTTP
'self' refers to the origin from which the protected
document is being served, including the same url scheme and port number.
... 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 addeventlistener calls:
document.getelementbyid("btn").addeventlistener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides.
CSP: style-src - HTTP
'self' refers to the origin from which the protected
document is being served, including the same url scheme and port number.
...> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet inline style attributes are also blocked: <div style="display:none">foo</div> as well as styles that are applied in javascript by setting the style attribute directly, or by setting csstext:
document.queryselector('div').setattribute('style', 'display:none;');
document.queryselector('div').style.csstext = 'display:none;'; however, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via javascript:
document.queryselector('div').style.display = 'none'; these types of manipulations can be prevented by disallow...
If-Unmodified-Since - HTTP
there are two common use cases: in conjunction with non-safe methods, like post, it can be used to implement an optimistic concurrency control, like done by some wikis: editions are rejected if the stored
document has been modified since the original has been retrieved.
... in conjunction with a range request with a if-range header, it can be used to ensure that the new fragment requested comes from an unmodified
document.
Sec-Fetch-Dest - HTTP
header type fetch metadata request header forbidden header name yes, since it has prefix sec- cors-safelisted request header syntax sec-fetch-dest: audio sec-fetch-dest: audioworklet sec-fetch-dest:
document sec-fetch-dest: embed sec-fetch-dest: empty sec-fetch-dest: font sec-fetch-dest: image sec-fetch-dest: manifest sec-fetch-dest: nested-
document sec-fetch-dest: object sec-fetch-dest: paintworklet sec-fetch-dest: report sec-fetch-dest: script sec-fetch-dest: serviceworker sec-fetch-dest: sharedworker sec-fetch-dest: style sec-fetch-dest: track sec-fetch-dest: video sec-fetch-dest: worker sec-fetch-dest: xslt sec-fetch-dest: aud...
...ioworklet sec-fetch-dest: audioworklet values audio audioworklet
document embed empty font image manifest object paintworklet report script serviceworker sharedworker style track video worker xslt nested-
document examples todo specifications specification title fetch metadata request headers the sec-fetch-dest http request header ...
Set-Cookie - HTTP
if omitted, defaults to the host of the current
document url, not including subdomains.
... httponly optional forbids javascript from accessing the cookie, for example, through the
document.cookie property.
Firefox user agent string reference - HTTP
this
document describes the user agent string used in firefox 4 and later and applications based on gecko 2.0 and later.
...see also this
document on user agent sniffing and this hacks blog post.
HTTP Messages - HTTP
an optional body containing data associated with the request (like content of an html form), or the
document associated with a response.
...for example, get indicates that a resource should be fetched or post means that data is pushed to the server (creating or modifying a resource, or generating a temporary
document to send back).
Proxy Auto-Configuration (PAC) file - HTTP
the examples at the end of this
document are complete.
...furthermore, the three remaining proxy servers share the load based on url patterns, which makes their caching more effective (there is only one copy of any
document on the three servers - as opposed to one copy on each of them).
HTTP range requests - HTTP
it indicates the part(s) of a
document that the server should return.
... multipart ranges the range header also allows you to get multiple ranges at once in a multipart
document.
HTTP resources and specifications - HTTP
designed with extensibility in mind, it has seen numerous additions over the years; this lead to its specification being scattered through numerous specification
documents (in the midst of experimental abandoned extensions).
... rfc 7034 http header field x-frame-options informational rfc 6797 http strict transport security (hsts) proposed standard upgrade insecure requests upgrade insecure requests candidate recommendation content security policy 1.0 content security policy 1.0 csp 1.1 and csp 3.0 doesn't extend the http standard obsolete microsoft
document specifying legacy
document modes* defines x-ua-compatible note rfc 5689 http extensions for web distributed authoring and versioning (webdav) these extensions of the web, as well as carddav and caldav, are out-of-scope for http on the web.
416 Range Not Satisfiable - HTTP
the most likely reason is that the
document doesn't contain such ranges, or that the range header value, though syntactically correct, doesn't make sense.
...content-range: bytes */12777 faced with this error, browsers usually either abort the operation (for example, a download will be considered as non-resumable) or ask for the whole
document again.
HTTP
hypertext transfer protocol (http) is an application-layer protocol for transmitting hypermedia
documents, such as html.
... reference browse through detailed http reference
documentation.
A re-introduction to JavaScript (JS tutorial) - JavaScript
see also the full
documentation for array methods.
...you can use named iifes (immediately invoked function expressions) as shown below: var charsinbody = (function counter(elm) { if (elm.nodetype == 3) { // text_node return elm.nodevalue.length; } var count = 0; for (var i = 0, child; child = elm.childnodes[i]; i++) { count += counter(child); } return count; })(
document.body); the name provided to a function expression as above is only available to the function's own scope.
Control flow and error handling - JavaScript
function checkdata() { if (
document.form1.threechar.value.length == 3) { return true; } else { alert( 'enter exactly three characters.
... ' + `${
document.form1.threechar.value} is not valid.`); return false; } } switch statement a switch statement allows a program to evaluate an expression and attempt to match the expression's value to a case label.
Grammar and types - JavaScript
for example: var n = null; console.log(n * 32); // will log 0 to the console variable scope when you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current
document.
...for example, if a variable called phonenumber is declared in a
document, you can refer to this variable from an iframe as parent.phonenumber.
Working with objects - JavaScript
you can always refer to objects in these array-like objects by either their ordinal number (based on where they appear in the
document) or their name (if defined).
... for example, if the second <form> tag in a
document has a name attribute of "myform", you can refer to the form as
document.forms[1] or
document.forms["myform"] or
document.forms.myform.
Memory Management - JavaScript
var d = new date(); // allocates a date object var e =
document.createelement('div'); // allocates a dom element some methods allocate new values or objects: var s = 'azerty'; var s2 = s.substr(0, 3); // s2 is a new string // since strings are immutable values, // javascript may decide to not allocate memory, // but just store the [0, 3] range.
...cycles are a common mistake that can generate memory leaks: var div; window.onload = function() { div =
document.getelementbyid('mydivelement'); div.circularreference = div; div.lotsofdata = new array(10000).join('*'); }; in the above example, the dom element "mydivelement" has a circular reference to itself in the "circularreference" property.
TypeError: Reduce of empty array with no initial value - JavaScript
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.
Promise - JavaScript
"use strict"; var promisecount = 0; function testpromise() { let thispromisecount = ++promisecount; let log =
document.getelementbyid('log'); // begin log.insertadjacenthtml('beforeend', thispromisecount + ') started (sync code started)'); // we make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) let p1 = new promise((resolve, reject) => { // the executor function is called with the ability to resolve or reject the promise log.insertadjacenthtml('befo...
.../ log the fulfillment value log.insertadjacenthtml('beforeend', val + ') promise fulfilled (async code terminated)'); }).catch((reason) => { // log the rejection reason console.log(`handle rejected promise (${reason}) here.`); }); // end log.insertadjacenthtml('beforeend', thispromisecount + ') promise made (sync code terminated)'); } if ("promise" in window) { let btn =
document.getelementbyid("btn"); btn.addeventlistener("click",testpromise); } else { log =
document.getelementbyid('log'); log.innerhtml = "live example not available as your browser doesn't support the <code>promise<code> interface."; } this example is started by clicking the button.
WeakRef - JavaScript
here are some specific points that the authors of the weakref proposal included in its explainer
document: garbage collectors are complicated.
... element.textcontent = ++this.count; } else { // the element doesn't exist anymore console.log("the element is gone."); this.stop(); this.ref = null; } }; tick(); this.timer = setinterval(tick, 1000); } stop() { if (this.timer) { clearinterval(this.timer); this.timer = 0; } } } const counter = new counter(
document.getelementbyid("counter")); counter.start(); settimeout(() => {
document.getelementbyid("counter").remove(); }, 5000); specifications specification weakrefsthe definition of 'weakref' in that specification.
Standard built-in objects - JavaScript
this chapter
documents all of javascript's standard, built-in objects, including their methods and properties.
...the host objects available in browser contexts are
documented in the api reference.
JavaScript
this
documentation refers to the latest draft version, which is currently ecmascript 2020.
... reference browse the complete javascript reference
documentation.
<math> - MathML
> <body> <math xmlns="http://www.w3.org/1998/math/mathml"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html> notes: xhtml
documents with mathml must be served as application/xhtml+xml.
...since you notate your mathml in an xml
document, also be sure you write a well-formed xml
document.
MathML
here you'll find links to
documentation, examples, and tools to help you work with this powerful technology.
... mailing list newsgroup rss feed matrix chat room wiki used by mozilla contributors w3c math home www-math w3.org mail archive tools w3c validator mathzilla firefox add-on collection texzilla — javascript latex to mathml converter (live demo, firefox os webapp, firefox add-on, using in a web page, js program etc) latexml - convert latex
documents into html+mathml web pages web equation - turn handwritten equations into mathml or latex mathjax - cross-browser javascript display engine for mathematics.
Web video codec guide - Web media technologies
the
documentation included with your encoding software will help you to understand the specific impact of these options on the encoded video.
... the
documentation for your codec choices will probably offer information you'll use when constructing your codecs parameter.
Add to Home screen - Progressive web apps (PWAs)
adding an install button to make our pwa installable on desktop, we first added a button to our
document to allow users to do the installation — this isn't made available automatically on desktop apps, and the installation needs to be triggered by a user gesture: <button class="add-button">add to home screen</button> we then gave it some simple styling: .add-button { position: absolute; top: 1px; left: 1px; } javascript for handling the install at the bottom of our index.js file, we add...
...first of all, we declare a deferredprompt variable (which we'll explain later on), get a reference to our install button, and set it to display: none initially: let deferredprompt; const addbtn =
document.queryselector('.add-button'); addbtn.style.display = 'none'; we hide the button initially because the pwa will not be available for install until it follows the a2hs criteria.
Progressive web app structure - Progressive web apps (PWAs)
for working examples and more information, see the streams api
documentation.
...i++) { var entry = template.replace(/pos/g,(i+1)) .replace(/slug/g,games[i].slug) .replace(/name/g,games[i].name) .replace(/author/g,games[i].author) .replace(/twitter/g,games[i].twitter) .replace(/website/g,games[i].website) .replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; };
document.getelementbyid('content').innerhtml = content; next, it registers a service worker: if('serviceworker' in navigator) { navigator.serviceworker.register('/pwa-examples/js13kpwa/sw.js'); }; the next code block requests permission for notifications when a button is clicked: var button =
document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.
Progressive loading - Progressive web apps (PWAs)
to fix that we can, for example, add defer to javascript files: <script src="app.js" defer></script> they will be downloaded and executed after the
document itself has been parsed, so it won't block rendering the html structure.
... loading via javascript the app.js file processes the data-src attributes like so: let imagestoload =
document.queryselectorall('img[data-src]'); const loadimages = (image) => { image.setattribute('src', image.getattribute('data-src')); image.onload = () => { image.removeattribute('data-src'); }; }; the imagestoload variable contains references to all the images, while the loadimages function moves the path from data-src to src.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button =
document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
... fetch('./register', { method: 'post', headers: { 'content-type': 'application/json' }, body: json.stringify({ subscription: subscription }), }); then the globaleventhandlers.onclick function on the subscribe button is defined:
document.getelementbyid('doit').onclick = function() { const payload =
document.getelementbyid('notification-payload').value; const delay =
document.getelementbyid('notification-delay').value; const ttl =
document.getelementbyid('notification-ttl').value; fetch('./sendnotification', { method: 'post', headers: { 'content-type': 'application/json' }, ...
Progressive web apps (PWAs)
documentation <-- the temporary automatic list below will be replaced soon --> add to home screenadd to home screen (or a2hs for short) is a feature available in modern browsers that allows a user to "install" a web app, ie.
...be sure to check out our further
documentation if you want to learn more about the concepts behind the service worker api and how to use it in more detail.
height - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 120% animatable yes foreignobject for <foreignobject>, height defines the vertical length for the rendering area for the referenced
document.
... note: in an html
document if both the viewbox and height attributes are omitted, the svg element will be rendered with a height of 150px value auto | <length> | <percentage> default value auto (treated as 100%) animatable yes note: starting with svg2, height is a geometry property meaning this attribute can also be used as a css property for <svg>.
id - SVG: Scalable Vector Graphics
it must be valid in xml
documents.
... a stand-alone svg
document uses xml 1.0 syntax, which specifies that valid ids only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.
restart - SVG: Scalable Vector Graphics
ght="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg>
document.getelementbyid("restart").addeventlistener("click", evt => {
document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennotactive | never default value always animatable no always this value indicates that the animation can be restarted at any time.
... never this value indicates that the animation cannot be restarted for the time the
document is loaded.
type - SVG: Scalable Vector Graphics
usage context for the <animatetransform> elements categories none value translate | scale | rotate | skewx | skewy animatable no normative
document svg 1.1 (2nd edition) for the <fecolormatrix> element categories none value matrix | saturate | huerotate | luminancetoalpha animatable yes normative
document svg 1.1 (2nd edition) for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements categories none value identity | table | discrete | linear | ga...
...mma animatable yes normative
document svg 1.1 (2nd edition) for the <feturbulence> element categories none value fractalnoise | turbulence animatable yes normative
document svg 1.1 (2nd edition) for the <style> and <script> elements categories none value <content-type> animatable no normative
document svg 1.1 (2nd edition) : script svg 1.1 (2nd edition) : style example elements the following elements can use the values attribute <animatetransform> <fecolormatrix> <fefunca> <fefuncb> <fefuncg> <fefuncr> <feturbulence> <script> <style> ...
width - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 120% animatable yes foreignobject for <foreignobject>, width defines the horizontal length for the rendering area for the referenced
document.
... note: in an html
document if both the viewbox and width attributes are omitted, the svg element will be rendered with a width of 300px value auto | <length> | <percentage> default value auto (treated as 100%) animatable yes note: starting with svg2, width is a geometry property meaning this attribute can also be used as a css property for <svg>.
SVG Attribute reference - SVG: Scalable Vector Graphics
below is a list of all of the attributes available in svg along with links to reference
documentation to help you learn which elements support them and how they work.
...n attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat
document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadedda...
<altGlyph> - SVG: Scalable Vector Graphics
value type: <string> ; default value: none; animatable: no xlink:href an <iri> reference either to a <glyph> element in an svg
document or to an <altglyphdef> element.
... value type: <iri> ; default value: none; animatable: no global attributes core attributes most notably: id lang styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes,
document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, str...
<defs> - SVG: Scalable Vector Graphics
graphical objects can be referenced from anywhere, however, defining these objects inside of a <defs> element promotes understandability of the svg content and is beneficial to the overall accessibility of the
document.
...0)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#mygradient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes,
document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transfor...
<foreignObject> - SVG: Scalable Vector Graphics
viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> div { color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed html text into svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the context of svg embedded in an html
document, the xhtml namespace could be omitted, but it is mandatory in the context of an svg
document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes,
document event attributes,
document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform...
Linking - SVG: Scalable Vector Graphics
when svg
documents are embedded within a parent html
document using the tag: page1.html: <html> <body> <p>this is a svg button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specification says that the browser should navigate to the html
document page2.html when the button graphics are clicked.
... to get around this, requires a little ugly javascript hacking: button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g onclick="top.
document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg> example for an example of this solution at work see www.codedread.com.
Gradients in SVG - SVG: Scalable Vector Graphics
gradient id="gradient1"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="50%"/> <stop id="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gradient1"/> i've included the xlink namespace here directly on the node, although usually you would define it at the top of your
document.
...to create one you add a <radialgradient> element to the definitions section of your
document.
SVG: Scalable Vector Graphics
documentation svg element reference details about each svg element.
... other resources: xml, css, dom, canvas examples google maps (route overlay) & docs (spreadsheet charting) svg bubble menus svg authoring guidelines an overview of the mozilla svg project frequently asked questions regarding svg and mozilla svg as an image svg animation with smil svg art gallery animation and interactions like html, svg has a
document model (dom) and events, and is accessible from javascript.
Web security
robots.txt to be written site maps to be written integrity same-origin policy the same-origin policy is a critical security mechanism that restricts how a
document or script loaded from one origin can interact with a resource from another origin.
... it helps isolate potentially malicious
documents, reducing possible attack vectors.
XML Index - XML: Extensible Markup Language
found 4 pages: # page tags and summary 1 xml: extensible markup language draft, landing, web, xml the extensible markup language is a strict serialisation of the
document object model.
... 4 xml:base html baseelement, needsspectable, svg, xml:base xml:base is like the html baseelement but can specify the base uri per element as well as the entire
document.
XML: Extensible Markup Language
the extensible markup language is a strict serialisation of the
document object model.
... xml:basexml:base is like the html baseelement but can specify the base uri per element as well as the entire
document.
The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
development of the xslt processor is ongoing, and this
document will be updated as functionality is expanded.
...ted) xsl:when (supported) xsl:with-param (supported) axes ancestor ancestor-or-self attribute child descendant descendant-or-self following following-sibling namespace (not supported) parent preceding preceding-sibling self functions boolean() (supported) ceiling() (supported) concat() (supported) contains() (supported) count() (supported) current() (supported)
document() (supported) element-available() (supported) false() (supported) floor() (supported) format-number() (supported) function-available() (supported) generate-id() (supported) id() (partially supported) key() (supported) lang() (supported) last() (supported) local-name() (supported) name() (supported) namespace-uri() (supported) normalize-space() (supported) not() (sup...
Basic Example - XSLT: Extensible Stylesheet Language Transformations
the .xsl file is then imported (xsltprocessor.importstylesheet(xslstylesheet)) and the transformation run (xsltprocessor.transformtofragment(xmldoc,
document)).
... myxmlhttprequest.send(null); xslstylesheet = myxmlhttprequest.responsexml; xsltprocessor.importstylesheet(xslstylesheet); // load the xml file, example1.xml myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xml", false); myxmlhttprequest.send(null); xmldoc = myxmlhttprequest.responsexml; var fragment = xsltprocessor.transformtofragment(xmldoc,
document);
document.getelementbyid("example").innerhtml = ""; mydom = fragment;
document.getelementbyid("example").appendchild(fragment); } ...
Compiling from Rust to WebAssembly - WebAssembly
for more, consult the cargo and rust linkage
documentation.
...this is beyond the scope of this tutorial, but if you'd like to learn more, check out the rust webassembly working group's
documentation on shrinking .wasm size.
action - Archive of obsolete content
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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
arrowscrollbox - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
assign - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
bbox - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
binding - Archive of obsolete content
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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
bindings - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
box - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
broadcaster - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
broadcasterset - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
button - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
caption - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
checkbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
column - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
columns - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
command - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
commandset - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
conditions - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
content - Archive of obsolete content
métodos inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
datepicker - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
deck - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
dialog - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
dialogheader - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
dropmarker - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
grid - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
grippy - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
groupbox - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
hbox - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
image - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
keyset - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
label - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
listcol - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
listcols - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
listhead - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
listheader - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
listitem - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
member - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
menu - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
menubar - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
menuitem - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
menulist - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
menuseparator - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
notification - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
observes - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
page - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
param - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
popupset - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
query - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
queryset - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
radio - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
radiogroup - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
resizer - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
richlistbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
richlistitem - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
row - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
rows - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
rule - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
scale - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
script - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
scrollbar - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
scrollbox - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
scrollcorner - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
separator - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
spacer - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
spinbuttons - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
splitter - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
stack - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
statusbar - Archive of obsolete content
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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
<statusbarpanel> - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
stringbundle - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
stringbundleset - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
tab - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
tabpanel - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
tabpanels - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
tabs - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
template - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
textnode - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
timepicker - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
titlebar - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbar - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbarbutton - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbargrippy - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbaritem - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbarpalette - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbarseparator - Archive of obsolete content
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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbarset - Archive of obsolete content
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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbarspacer - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbarspring - Archive of obsolete content
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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
toolbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultname...
treecell - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
treechildren - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
treecol - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
treecols - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
treeitem - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
treerow - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
treeseparator - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
triple - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
vbox - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
where - Archive of obsolete content
ollapsed, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
wizardpage - Archive of obsolete content
ntrollers, 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 addeventlistener(), appendchild(), blur, click, clonenode(), compare
documentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), i...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.1\xulrunner\xulrunner.exe" --install-app "c:\
documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/appicationname linux run the following command in a command prompt...
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "c:\
documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a comman...
XULRunner 1.9.1 Release Notes - Archive of obsolete content
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.1\xulrunner\xulrunner.exe" --install-app "c:\
documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command promp...
XULRunner 1.9.2 Release Notes - Archive of obsolete content
windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.2\xulrunner\xulrunner.exe" --install-app "c:\
documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command promp...
Animation.onremove - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem =
document.queryselector('div');
document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> ...
Animation.pause() - Web APIs
example animation.pause() is used many times in the alice in web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake =
document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the...
Animation.persist() - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem =
document.queryselector('div');
document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> ...
Animation.play() - Web APIs
two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake =
document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately.
Animation.playbackRate - Web APIs
alice and the red queen are constantly slowing down: setinterval( function() { // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.playbackrate *= .9; } }, 3000); but clicking or tapping on them causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.playbackrate *= 1.1; }
document.addeventlistener("click", gofaster);
document.addeventlistener("touchstart", gofaster); specifications specification status comment web animationsthe definition of 'animation.playbackrate' in that specification.
Animation.replaceState - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem =
document.queryselector('div');
document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> ...
AnimationEvent - Web APIs
animationevent.initanimationevent() initializes a animationevent created using the deprecated
document.createevent("animationevent") method.
AudioBuffer.getChannelData() - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var button =
document.queryselector('button'); var pre =
document.queryselector('pre'); var myscript =
document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the audiocontext var framecount = audioctx.samplerate * 2.0; var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); button.
AudioContext.createMediaStreamSource() - Web APIs
var pre =
document.queryselector('pre'); var video =
document.queryselector('video'); var myscript =
document.queryselector('script'); var range =
document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getuser...
AudioListener.dopplerFactor - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.forwardX - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.forwardY - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.forwardZ - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.positionX - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.positionY - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.positionZ - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.setOrientation() - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.setPosition() - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.speedOfSound - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.upX - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.upY - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener.upZ - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioListener - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
AudioParam.exponentialRampToValueAtTime() - Web APIs
this is pretty useful for fade in/fade out effects: // create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio =
document.queryselector('audio'); var pre =
document.queryselector('pre'); var myscript =
document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var exprampplus =
document.queryselector('.exp-ramp-plus'); var exprampminus =
document.queryselector('.exp-ramp-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(...
AudioParam.linearRampToValueAtTime() - Web APIs
// create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio =
document.queryselector('audio'); var pre =
document.queryselector('pre'); var myscript =
document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var linearrampplus =
document.queryselector('.linear-ramp-plus'); var linearrampminus =
document.queryselector('.linear-ramp-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediael...
AudioParam.setTargetAtTime() - Web APIs
// create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio =
document.queryselector('audio'); var pre =
document.queryselector('pre'); var myscript =
document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var attimeplus =
document.queryselector('.at-time-plus'); var attimeminus =
document.queryselector('.at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myau...
AudioParam.setValueAtTime() - Web APIs
when the buttons are pressed, the currgain variable is incremented/decremented by 0.25, then the setvalueattime() method is used to set the gain value equal to currgain, one second from now (audioctx.currenttime + 1.) // create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio =
document.queryselector('audio'); var pre =
document.queryselector('pre'); var myscript =
document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var targetattimeplus =
document.queryselector('.set-target-at-time-plus'); var targetattimeminus =
document.queryselector('.set-target-at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audi...
AudioParam.setValueCurveAtTime() - Web APIs
ton (see the webaudio-examples repo for the source code, or view the example live.) when this button is pressed, setvaluecurveattime() is used to change the gain value between the values contained in the wavearray array: // create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio =
document.queryselector('audio'); var pre =
document.queryselector('pre'); var myscript =
document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var valuecurve =
document.queryselector('.value-curve'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 v...
IDBIndex.openKeyCursor() - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); 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 + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('all last names displayed.'); } }; }; specification specification status comment indexed database api 2.0the definitio...
IDBIndex.unique - Web APIs
ve.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); 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>' + '<td>' + cursor.value.company + '</td>' + '<td>' + curso...
IDBIndex - Web APIs
e demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); 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>' + '<td>' + cursor.value.company + '</td>' + '<td>' + curso...
IDBKeyRange.bound() - Web APIs
indexeddb-examples repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'bound()' in that ...
IDBKeyRange.lower - Web APIs
oo.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lower' in that ...
IDBKeyRange.lowerBound() - Web APIs
dbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowerbound()' i...
IDBKeyRange.lowerOpen - Web APIs
function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'loweropen' in that...
IDBKeyRange.only() - Web APIs
look at our idbkeyrange repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'only' in that spec...
IDBKeyRange.upper - Web APIs
oo.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upper' in that ...
IDBKeyRange.upperBound() - Web APIs
dbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upperbound()...
IDBKeyRange.upperOpen - Web APIs
function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upperopen' in t...
IDBKeyRange - Web APIs
ur idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem =
document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'idbkeyrange' in that specification...
IDBLocaleAwareKeyRange - Web APIs
amples function displaydata() { var keyrangevalue = idblocaleawarekeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var myindex = objectstore.index('lname'); myindex.opencursor(keyrangevalue).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>' + '<td>' + cursor.value.company...
IDBObjectStore.index() - Web APIs
e demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); 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>' + '<td>' + cursor.value.company + '</td>' + '<td>' + curso...
IDBVersionChangeEvent.newVersion - Web APIs
for a full working example, see our to-do notifications app (view example live.) var note =
document.queryselector("ul"); // in the following line, you should include the prefixes of // implementations you want to test.
PannerNode.distanceModel - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
PannerNode.maxDistance - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
PannerNode.panningModel - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
PannerNode.setOrientation() - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
PannerNode.setPosition() - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
PannerNode.setVelocity() - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
PannerNode - Web APIs
ttime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.upx.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play =
document.queryselector('.play'); var stop =
document.queryselector('.stop'); var boombox =
document.queryselector('.boom-box'); var listenerdata =
document.queryselector('.listener-data'); var pannerdata =
document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) {...
PasswordCredential.additionalData - Web APIs
navigator.credentials.get(options).then(function(creds) { if (creds.type == 'password') { var form = new formdata(); var csrf_token =
document.queryselector('csrf_token').value; form.append('csrf_token', csrf_token); creds.additionaldata = form; fetch('https://www.example.com', { method: 'post', credentials: creds }); }; }); specifications specification status comment credential management level 1 working draft initial definition.
PerformanceEntry.entryType - Web APIs
performance entry type names value subtype type of name property description of name property frame, navigation performanceframetiming, performancenavigationtiming url the
document's address.