HTMLScriptElement - Web APIs
ts new scripts within a document creating a <script> node immediately before the <script> that hosts the following code (through document.currentscript).
...owing code (through document.currentscript).
....currentscript).
...And 5 more matches

Connecting to Remote Content - Archive of obsolete content
l major browsers support it.
...request.send(null); in this example we demonstrate how to make a xmlhttprequest call in asynchronous mode.
...t holds all functionality for making a request.
...And 4 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
pt execution differences different browsers execute javascript differently.
...ecute javascript differently.
...(){ var mywindow = window.open("about:blank"); mywindow.location.href = "http://www.ibm.com"; } </script> the problem with the code is that window.open is asynchronous -- it does not block the javascript execution until the window has finished loading.
...And 3 more matches

Client-side storage - Learn web development
he 'forget' part of the form and show the 'remember' part forgetdiv.style.display = 'none'; rememberdiv.style.display = 'block'; } } last but not least, we need to run the namedisplaycheck() function every time the page is loaded.
...arations, add the following lines: // create an instance of a db object for us to store the open database in let db; here we are declaring a variable called db — this will later be used to store an object representing our database.
...e the open database in let db; here we are declaring a variable called db — this will later be used to store an object representing our database.
...And 3 more matches

Handling common JavaScript problems - Learn web development
th async requests like this is when you try to do something with the response object before it has actually been returned from the network.
... the right-hand side will update to show some very useful information.
...was stopped.
...And 3 more matches

Using images - Web APIs
small line graph.
...bject's load event handler to execute the drawing statements.
...sitions.
...And 3 more matches

Using files from web applications - Web APIs
efiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; if (!file.type.startswith('image/')){ continue } const img = document.createelement("img"); img.classlist.add("obj"); img.file = file; preview.appendchild(img); // assuming that "preview" is the div output where the content will be displayed.
...ee.
...area of our document.
...And 3 more matches

FileReader - Web APIs
eration is complete, and the format of the data depends on which of the methods was used to initiate the read operation.
...lers filereader.onabort a handler for the abort event.
...borted.
...And 3 more matches

Using XMLHttpRequest - Web APIs
owever, more modern techniques are available, since the responsetype attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.
...success () { /* console.log("ajaxsubmit - success!"); */ console.log(this.responsetext); /* you can get the serialized data through the "submitteddata" custom property: */ /* console.log(json.stringify(this.submitteddata)); */ } function submitdata (odata) { /* the ajax request...
...=== 3) { /* enctype is multipart/form-data */ for (nfile = 0; nfile < ofield.files.length; nfile++) { ofile = ofield.files[nfile]; osegmreq = new filereader(); /* (custom properties:) */ osegmreq.segmentidx = this.segments.length; osegmreq.owner = this; /* (end of custom properties) */ osegmreq.onload = pushsegment; this.segments.push("content-disposition: form-data; name=\"" + ofield.name + "\"; filename=\"" + ofile.name + "\"\r\ncontent-type: " + ofile.type + "\r\n\r\n"); this.status++; osegmreq.readasbinarystring(ofile); } } else { /* enctype is application/x-www-form-urlencoded or text/plain or ...
...And 3 more matches

Using the Editor from XUL - Archive of obsolete content
m javascript.
...ditor creation so let's trace through the process of editor creation when bringing up the composer window.
... so let's trace through the process of editor creation when bringing up the composer window.
...And 2 more matches

Fetching data from the server - Learn web development
to fetch other types of data in the future.
... you can do anything with that response, otherwise, an error will be thrown.
... run when the load event fires (when the response has returned).
...And 2 more matches

Document - Web APIs
lid event is raised.
...e keydown event is raised.
...press event is raised.
...And 2 more matches

GlobalEventHandlers - Web APIs
lid event is raised.
...e keydown event is raised.
...press event is raised.
...And 2 more matches

widget - Archive of obsolete content
id("pause-button"); pause_button.onclick = function() { addon.port.emit("pause"); } var stop_button = document.getelementbyid("stop-button"); stop_button.onclick = function() { addon.port.emit("stop"); } } next, add a script tag to reference "button-script.js", and call its init() function on load: <html> <head> <script src="button-script.js"></script> </head> <body onload="init()"> <img src="play.png" id="play-button"> <img src="pause.png" id="pause-button"> <img src="stop.png" id="stop-button"> </body> </html> finally, remove the line attaching the content script from "main.js": const widgets = require("sdk/widget"); const data = require("sdk/self").data; var player = widgets.widget({ id: "player", width: 72, label: "player", contenturl:...
...t": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
... "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
...: load content scripts immediately after the document element for the widget view is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget view has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.

JavaScript Daemons Management - Archive of obsolete content
span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var nmaxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callbac...
... nletter++) { oletter = this.letters[nletter]; if (nlength < nindex && this.clock + this.delta < this.interval) { clock += this.delta; return; } this.clock = 0; oletter.elem.textcontent = nindex / nlength - oletter.index / this.numletters >= 0 ?
...); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var nmaxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon.safe(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon.safe(<em>@thisobject</em>, <em>@ca...
... nletter++) { oletter = this.letters[nletter]; if (nlength < nindex && this.clock + this.delta < this.interval) { clock += this.delta; return; } this.clock = 0; oletter.elem.textcontent = nindex / nlength - oletter.index / this.numletters >= 0 ?

Drawing graphics - Learn web development
is the same type as that which is returned when you grab a reference to an existing <img> element).
...firefox logo image.
...template (1_canvas_template.html) and open it in your code editor.
...pt, add the following line to once again make the coordinate origin sit in the middle of the canvas: ctx.translate(width/2, height/2); now let's create a new htmlimageelement object, set its src to the image we want to load, and add an onload event handler that will cause the draw() function to fire when the image is loaded: let image = new image(); image.src = 'walk-right.png'; image.onload = draw; now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display.

nsIDOMChromeWindow
ndow.idlscriptable this interface is implemented on the window object in chrome.
...n long acyclecount ); parameters acyclecount the maximum number of times to animate the window per system conventions.
...e, the cursor isn't moved.
...systems, this method doesn't have any reaction currently.

Examples of web and XML development using the DOM - Web APIs
(var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (i+1) + ": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="im...
...c1 { background-color: pink; } </style> <script> function stopevent(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-daddy from getting the click.
...action=""> <p> <button type="button" onclick="cstyles();">getcomputedstyle</button> height<input id="t1" type="text" value="1" /> max-width<input id="t2" type="text" value="2" /> bg-color<input id="t3" type="text" value="3" /> </p> </form> </body> </html> example 7: displaying event object properties this example uses dom methods to display all the properties of the window.onload event object and their values in a table.
...n = lablelist.length; for (var i=0; i<len; i++) { addcell(row, lablelist[i]); } var tbody = document.createelement('tbody'); table.appendchild(tbody); for (var p in e) { row = tbody.insertrow(-1); row.classname = (row.rowindex % 2)?

Pointer events - Web APIs
el.onpointerenter = enter_handler; el.onpointerdown = down_handler; el.onpointermove = move_handler; el.onpointerup = up_handler; el.onpointercancel = cancel_handler; el.onpointerout = out_handler; el.onpointerleave = leave_handler; el.gotpointercapture = gotcapture_handler; el.lostpointercapture = lostcapture_handler; } </script> <body onload="init();"> <div id="target"> touch me ...
...s_tilt(ev.tiltx, ev.tilty); // call the pressure handler process_pressure(ev.pressure); // if this event is not primary, call the non primary handler if (!ev.isprimary) process_non_primary(ev); } function init() { var el=document.getelementbyid("target"); // register pointerdown handler el.onpointerdown = down_handler; } </script> <body onload="init();"> <div id="target"> touch me ...
...ling).
...tion cancelhandler(ev) { let el = document.getelementbyid("target"); // release the pointer capture el.releasepointercapture(ev.pointerid); } function init() { let el = document.getelementbyid("target"); // register pointerdown and pointercancel handlers el.onpointerdown = downhandler; el.onpointercancel = cancelhandler; } </script> <body onload="init();"> <div id="target"> touch me ...

XDomainRequest - Web APIs
setext gets the response body as a string.
...nds the request.
...errored.
...r.responsetext); } settimeout(function () { xdr.send(); }, 0); } note: the xdr.send() call is wrapped in a timeout (see window.settimeout() to prevent an issue with the interface where some requests are lost if multiple xdomainrequests are being sent at the same time.

Synchronous and asynchronous requests - Web APIs
er experience.
... if (xhr.status === 200) { console.log(xhr.responsetext); } else { console.error(xhr.statustext); } } }; xhr.onerror = function (e) { console.error(xhr.statustext); }; xhr.send(null); line 2 specifies true for its third parameter to indicate that the request should be handled asynchronously.
...o switch the content of the read file to a specified listener.
...e waiting for a read to finish.

XMLHttpRequest - Web APIs
.multipartobsolete since gecko 22 this gecko-only feature, a boolean, was removed in firefox/gecko 22.
... of the send() method that sends binary data.
...().
...o available via the onerror property.

DOM onevent handlers - Developer guides
nt)'); log(`changed the property to: <code> ${el.onclick.tostring()} </code>`); log(`now even the html attribute has changed: <code> ${el.getattribute("onclick")} </code><br>`); result for historical reasons, some attributes/properties on the <body> and <frameset> elements instead set event handlers on their parent window object.
...gorithm" in the html specification.
...ing the presence of event handler properties you can detect the presence of an event handler property with the javascript in operator.
...perties you can detect the presence of an event handler property with the javascript in operator.

Rich-Text Editing in Mozilla - Developer guides
he first example is an html document setting its own designmode to "on".
...signmode = "on"; } example 2 the second example is a simple rich text editing page, where text can be bolded/italicized/underlined, new links can be added and the color of text changed.
...nerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; m...
...e(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 &lt;h1&gt;</option...

Canvas code snippets - Archive of obsolete content
fied location.
...0; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens...
...tecanvas = new remotecanvas(); remotecanvas.load(); convert image files to base64 strings the following code gets a remote image and converts its content to data uri scheme.

Dialogs and Prompts - Archive of obsolete content
og, modal, resizable=yes", params).focus(); if (params.out) { // user clicked ok.
...l, resizable=yes", params).focus(); if (params.out) { // user clicked ok.
...<columns><column/><column/></columns> <rows> <row align="center"><label value="name:"/><textbox id="name"/></row> <row align="center"><label value="description:"/><textbox id="description"/></row> <row align="center"><spacer/><checkbox id="enabled" label="check to enable"/></row> </rows> </grid> </dialog> mydialog.js: // called once when the dialog displays function onload() { // use the arguments passed to us by the caller document.getelementbyid("name").value = window.arguments[0].inn.name; document.getelementbyid("description").value = window.arguments[0].inn.description; document.getelementbyid("enabled").checked = window.arguments[0].inn.enabled; } // called once if and only if the user clicks ok function onok() { // return the changed arguments.

Promises - Archive of obsolete content
oes not have direct support for promises, its standard usage is very easy to adapt to a promise-based approach.
...= "json"; xhr.send(); }); let data = resp.target.response; // use the response to construct form data object for the // second request.
...ng changes will remove the dependency on aom wrappers: let addon = yield new promise(accept => addonmanager.getaddonbyid(addon_id, accept)); let dir = yield new promise(accept => addon.getdatadirectory(accept)); xmlhttprequest function request(url, options) { return new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = event => resolve(event.target); xhr.onerror = reject; let defaultmethod = options.data ?

Index - Archive of obsolete content
searching xul attributes, xul reference no summary!
...968 oncommand xul attributes, xul reference no summary!
... 1023 preference.name xul attributes, xul reference no summary!

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
binder component the data binder is responsible for setting the data into the main page.
...he iframe and inside this page (requested data), set the onload event to callback a function notifying the parent document (originator).
...pproach.

Index - Archive of obsolete content
searching xul attributes, xul reference no summary!
... 229 onerror xul attributes, xul reference no summary!
...ary!

prefwindow - Archive of obsolete content
, breaking the general behavior of the window and in particular the list of prefpanes.
...pressed or when the canceldialog method is called.
...nction in your sub window - to handle parameters passed using openwindow() in case the window was already open.

Working with JSON - Learn web development
xhr knows that the server will be returning json, and that this should be converted behind the scenes into a javascript object.
...is variable now contains the javascript object based on the json!
...nished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the xhr to return the raw json text, then used parse() to convert it to an actual javascript object.

mozIAsyncFavicons
st use placesutils.favicons from javascript.
...ervice.idl).
...llback acallback optional ); parameters apageuri uri of the page whose favicon is being set.

nsIFaviconService
o 22.0 nsiuri getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); void setandloadfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); obsolete since gecko 22.0 void setfavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in prtime aexpiration); obsolete since gecko 22.0 void setfavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl, in prtime aexpiration); obsolet...
... to load will automatically be added to the failed favicon cache.
...avicondatacallback acallback optional from gecko 2.0 ); parameters apageuri uri of the page whose favicon is being set.

nsIXMLHttpRequestEventTarget
inherits from: nsidomeventtarget last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) attributes attribute type description onabort nsidomeventlistener a javascript function object that gets invoked if the operation is canceled by the user.
... attribute type description onabort nsidomeventlistener a javascript function object that gets invoked if the operation is canceled by the user.
...cript function object that gets invoked if the operation fails to complete due to an error.

Address Book examples
photo handlers allow developers to customize the behavior of the contact editor when loading or saving contact photos.
... the following interface: /* * onload: function(acard, adocument): * called when the editor wants to populate the contact editor * input fields with information about acard's photo.
...function.

Creating a Custom Column
) so that your extension can display a new visual cue to the user.
...sion, please revisit this article and add any helpful hints that you find along the way!
... some weird behaviors have been witnessed, namely failing to be notified of the msgcreatedbview event when enigmail is installed [protz].

Pixel manipulation with canvas - Web APIs
rray data to set a background color and a text in the <div> to display the color.
... average, given by the formula x = 0.299r + 0.587g + 0.114b, for example.
...s prefixes for different browsers).

Introduction to the DOM - Web APIs
b page.
...cript will display an alert when the document is loaded (and when the whole dom is available for use): <body onload="window.alert('welcome to my home page!');"> another example.
...e object example in the previous section.

FontFaceSet - Web APIs
the fontfaceset interface of the css font loading api manages the loading of font-faces and querying of their download status.
...rties fontfaceset.status read only indicates the font-face's loading status.
... promise which resolves once font loading and layout operations have completed.

HTMLMediaElement: loadeddata event - Web APIs
the loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
...d an event listener for the htmlmediaelement's loadeddata event, then post a message when that event handler has reacted to the event firing.
...at event handler has reacted to the event firing.

HTMLMediaElement: loadedmetadata event - Web APIs
the loadedmetadata event is fired when the metadata has been loaded.
...examples add an event listener for the htmlmediaelement's loadedmetadata event, then post a message when that event handler has reacted to the event firing.
...age when that event handler has reacted to the event firing.

Ajax navigation example - Web APIs
} closereq(); } function filterurl (surl, sviewmode) { return surl.replace(rsearch, "") + ("?" + surl.replace(rhost, "&").replace(rview, sviewmode ?
...ghvtqlaib1yhicnlsrkaaaowaaaaaaaaaaaa=="; ocover.appendchild(oloadingimg); oloadingbox.appendchild(ocover); onpopstate = function (oevent) { bupdateurl = false; opageinfo.title = oevent.state.title; opageinfo.url = oevent.state.url; getpage(); }; window.addeventlistener ?
...kaaaowaaaaaaaaaaaa=="; ocover.appendchild(oloadingimg); oloadingbox.appendchild(ocover); onpopstate = function (oevent) { bupdateurl = false; opageinfo.title = oevent.state.title; opageinfo.url = oevent.state.url; getpage(); }; window.addeventlistener ?

Window: load event - Web APIs
the load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
...hich is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
...as been loaded, without waiting for resources to finish loading.

Sending and Receiving Binary Data - Web APIs
this is null if the request is not complete or was not successful.
... { var bytearray = new uint8array(arraybuffer); for (var i = 0; i < bytearray.bytelength; i++) { // do something with each byte in the array } } }; oreq.send(null); you can also read a binary file as a blob by setting the string "blob" to the responsetype property.
...he xmlhttprequest has been extended to enable easy transmission of binary data by accepting an arraybuffer, blob, or file object.

XMLHttpRequest.multipart - Web APIs
ts instead.
...ream of possibly multiple xml documents.
...t be multipart/x-mixed-replace or an error will occur.

XMLHttpRequest.upload - Web APIs
pload property returns an xmlhttprequestupload object that can be observed to monitor an upload's progress.
...ad object and used to monitor the upload: event event listener description loadstart onloadstart the upload has begun.
...ate the amount of progress made so far.

XMLHttpRequestEventTarget - Web APIs
g></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.
...nd the abort event is received by this object.
...ation about the progress of the request and the progress event is received by this object.

Global attributes - HTML: Hypertext Markup Language
sibility.
....
...andler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.

Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
rting it, this will be reflected in the processing.
...ther than modifying the dom it is recommended to use stylesheet parameters which are usually easier and can give better performance.
...ameters which are usually easier and can give better performance.

page-mod - Archive of obsolete content
you may have problems getting your add-on approved on amo.
... one of the following values: "start": load content scripts immediately after the document element is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) has been loaded, at the time the window.onload event fires var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscript: 'window.alert("matched!");', contentscriptwhen: "start" }); if you specify "start" for contentscriptwhen, your scripts will not be able to interact with the document's dom right away (although they could listen for window.onload or domcontentloaded themselves).

page-worker - Archive of obsolete content
start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...es: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.

panel - Archive of obsolete content
art": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under addon.options property.

content/symbiont - Archive of obsolete content
start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...es: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.

Forms related code snippets - Archive of obsolete content
nday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000; window.addeventlistener ?
...l usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000; window.addeventlistener ?

HTML in XUL for rich tooltips - Archive of obsolete content
tooltip(event)" tooltip="myhtmltip" /> </popup> <popupset id="mainpopupset"> <tooltip id="myhtmltip"> <html:div id="myhtmltipdiv" type="content"/> </tooltip> </popupset> </overlay> insert your version of the following into the javascript overlay.
... //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(txt, false, null, div); //attach the dom object to the html div element div.appendchild(injecthtml); } } window.addeventlistener('load', htmltip.onload, false); in the xul overlay, xmlns:html is used to enable html tags to be used inside the xul.

On page load - Archive of obsolete content
appcontent.addeventlistener("domcontentloaded", myextension.onpageload, true); } var messagepane = document.getelementbyid("messagepane"); // mail if(messagepane){ messagepane.addeventlistener("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page.
...n; //only top window.

Communication between HTML and your extension - Archive of obsolete content
something that i wanted the extension to find.
...mponent was update with the result of the ajax request, i created and dispatched the event like this: var event = document.createevent("events"); event.initevent("my-custom-event", true, true); document.body.dispatchevent(event); in the code of the extension that catches the loading of a new page i added this code: var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page.

Listening to events in Firefox extensions - Archive of obsolete content
er the page—including images—has first finished loading.
...web pages is: user navigates to a page.

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
he buttons attribute to accept.
...e dtd file, and replace “clock” and “current time” with entity references.

Adding Events and Commands - Archive of obsolete content
« previousnext » event handlers just like with html, most javascript code execution is triggered by event handlers attached to dom elements.
... }, false); you can do something similar with the onunload event, to do any cleanup you may need.

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
privileged sandbox (which is complicated!), but if you have a choice, just avoid jsonp altogether!
...neral rule of thumb, just don't pass code around as strings and execute it by calling eval, settimeout and friends.

Appendix D: Loading Scripts - Archive of obsolete content
ompile time are reduced.
...execute all of their initialization code and allocate and initialize all of their data structures each time the script is loaded.

XUL user interfaces - Archive of obsolete content
action: a xul demonstration make a new xul document as a plain text file, doc7.xul.
...status bar */ statusbar { width: 100%; border: 1px inset -moz-dialog; margin: 4px; padding: 0px 4px; } #status { padding: 4px; } #status[warning] { color: red; } make a new text file, script7.js.

Creating a dynamic status bar extension - Archive of obsolete content
licks on the status bar panel, when our extension is first added to a browser window, and by the interval handler to periodically update the display.
...nother function, inforeceived(), which we'll look at separately shortly.

Using XML Data Islands in Mozilla - Archive of obsolete content
items = doc.getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.body.textcontent = "the purchase order contains " + lineitems.length + " line items.
...ytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.getelementbyid("output-box").textcontent = "the purchase order contains " + lineitems.length + " line items.

Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
our mozilla extension now exists, but it doesn't do anything.
...e we use it to retrieve an html page containing a brief summary of the current tinderbox state.

Monitoring downloads - Archive of obsolete content
f the download, the download speed, and the status of the download.
...displaying the download log the download log window's code is encapsulated in an object called downloadlogger_dlwindow.

A XUL Bestiary - Archive of obsolete content
in that hierarchy -- including in the same node in which they were raised.
...istener is really a convenience; instead of using it, you could find out when an object fired an event, then go find out what that event was, and then write some event handling code as a response to that event, but the event listener provides an easy mechanism for writing event handlers for specific, common events.

XUL Events - Archive of obsolete content
sent to the window after it has been fully loaded.
...e it is popped open.

Uploading and Downloading Files - Archive of obsolete content
existing servers can process.
...); }; req.send(formdata); } http put you can also upload a file using an http put operation.

Custom Tree Views - Archive of obsolete content
ing presents the example together.
... document.getelementbyid('my-tree').view = treeview; } </script> <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" label="date" flex="1"/> </treecols> <treechildren/> </tree> </window> in the image, you can see two columns, each with data taken from the getcelltext() function.

Tree View Details - Archive of obsolete content
termine what the next sibling's row index would be in such a case.
...ate.

XML - Archive of obsolete content
offers no flexibility to you as acoder.
...is very sensitive to case.

image - Archive of obsolete content
ribute can be used to specify the url of the image.
...th and height down proportionally.

Building XULRunner with Python - Archive of obsolete content
ment pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); html <script> tags specify that python is used withtype="application/x-python" attribute.
...ayout.debug.disable_xul_fastload", true); html <script> tags specify that python is used withtype="application/x-python" attribute.

Popup Window Controls - Archive of obsolete content
reference for privacy & security > popup windows, users can: allow all sites to open popup windows except for sites which the user has explicity denied permission what popup windows are suppressed?
...l() what popup windows are not suppressed?

Introducing asynchronous JavaScript - Learn web development
function is responsible for executing the callback function when the time comes.
...cument's <body>.

Introduction to web APIs - Learn web development
when a response has been successfully returned containing the requested resource, and it is now available.
...roes); } note: you can see this code in action in our ajax.html example (see it live also).

Third-party APIs - Learn web development
o 'hybrid' to show a hybrid-style map.
...apquest.searchcontrol() and mapquest.satellitecontrol(), and some are quite complex and powerful.

Web performance resources - Learn web development
ut user experience and perceived performance.
... and blocks rendering.

OS.File for the main thread
save canvas to disk this exmaple uses image to load an image from a path (note: if your path is a file on disk you must use local file; this is accomplished with os.path.tofileuri, which accepts a string).
...document.createelementns('http://www.w3.org/1999/xhtml', 'canvas'); canvas.width = img.naturalwidth; canvas.height = img.naturalheight; var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); (canvas.toblobhd || canvas.toblob).call(canvas, function(b) { var r = cc['@mozilla.org/files/filereader;1'].createinstance(ci.nsidomfilereader); //new filereader(); r.onloadend = function() { // r.result contains the arraybuffer.

nsIDocShell
true, which is the default state.
...s false for documents in minimized windows.

nsIXMLHttpRequest
xpcom interface, as seen below in example 2, we can get access to this.
...entation of nsixmlhttprequest implements the interface nsidomeventtarget and that's how you're supported to add event listeners.

nsIXMLHttpRequestUpload
uploading data using nsixmlhttprequest.
...6 introduced gecko 1.9.1 inherits from: nsidomeventtarget last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description onabort nsidomeventlistener onerror nsidomeventlistener onload nsidomeventlistener onloadstart nsidomeventlistener onprogress nsidomeventlistener see also nsixmlhttprequest nsixmlhttprequesteventtarget xmlhttprequest using xmlhttprequest ...

Use SQLite
s to your database.
... }, _dbcreate: function(adbservice, adbfile) { var dbconnection = adbservice.opendatabase(adbfile); this._dbcreatetables(dbconnection); return dbconnection; }, _dbcreatetables: function(adbconnection) { for(var name in this.dbschema.tables) adbconnection.createtable(name, this.dbschema.tables[name]); }, }; window.addeventlistener("load", function(e) { tbirdsqlite.onload(e); }, false); this is another practical sample on how to handle opendatabase and sql queries on the client side, using in-memory (blob) storage of 2mb: var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executesql('create table if not exists logs (id unique, log)'); tx.executesql('insert into logs (id, log) values (1, "foobar")'); ...

CanvasPattern.setTransform() - Web APIs
e canvas when using the fillrect() method, for example.
...00" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelem...

CanvasRenderingContext2D.drawImage() - Web APIs
this allows scaling of the drawn image.
...erly calculate things like crop and scale regions, rather than element.width and element.height.

Applying styles and colors - Web APIs
age(); img.src = 'someimage.png'; var ptrn = ctx.createpattern(img, 'repeat'); note: like with the drawimage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.
...llstyle property.

Basic animations - Web APIs
o change the image being scrolled, its // direction, and the speed.
...function(e) { m.x = e.clientx; m.y = e.clienty; } function gc() { var s = "0123456789abcdef"; var c = "#"; for (var i = 0; i < 6; i++) { c += s[math.ceil(math.random() * 15)] } return c } var a = []; window.onload = function myfunction() { cn = document.getelementbyid('cw'); c = cn.getcontext('2d'); for (var i = 0; i < 10; i++) { var r = 30; var x = math.random() * (innerwidth - 2 * r) + r; var y = math.random() * (innerheight - 2 * r) + r; var t = new ob(innerwidth / 2,innerheig...

Basic usage of canvas - Web APIs
<head> <meta charset="utf-8"/> <title>canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getelementbyid('tutorial'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> the script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the load event on the document.
... <script type="application/javascript"> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 50, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> this example looks like this: screenshotlive sample « previousnext » ...

Using channel messaging - Web APIs
confirmation messages that we will receive back from the <iframe>.
...es that we will receive back from the <iframe>.

Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
} // appends the row <tr> into <tbody> mytablebody.appendchild(mycurrent_row); } // appends <tbody> into <table> mytable.appendchild(mytablebody); // appends <table> into <body> mybody.appendchild(mytable); // sets the border attribute of mytable to 2; mytable.setattribute("border","2"); } </script> </head> <body onload="start()"> </body> </html> manipulating the table with dom and css getting a text node from the table this example introduces two new dom attributes.
...attribute("border"); hiding a column by changing style properties once you have the object in your javascript variable, you can set style properties directly.

HTMLBodyElement - Web APIs
n eventhandler representing the code to be called when the unload event is raised.
...the definition of 'htmlbodyelement' in that specification.

HTMLCanvasElement.toBlob() - Web APIs
elow, for example, takes the image in the <canvas> element whose id is "canvas", obtains a copy of it as a png image, then appends a new <img> element to the document, whose source image is the one created using the canvas.
...x chrome context or add-on code as os apis are not present on web sites.

Using IndexedDB - Web APIs
ey = key; var store = getobjectstore(db_store_name, 'readonly'); getblob(key, store, function(blob) { console.log("setinviewer blob:", blob); var iframe = newviewerframe(); // it is not possible to set a direct link to the // blob to provide a mean to directly download it.
...rigin as the web site/app this code is deployed on.

MediaDevices.getUserMedia() - Web APIs
le gives a preference for camera resolution, and assigns the resulting mediastream object to a video element.
...ject); }); } } navigator.mediadevices.getusermedia({ audio: true, video: true }) .then(function(stream) { var video = document.queryselector('video'); // older browsers may not have srcobject if ("srcobject" in video) { video.srcobject = stream; } else { // avoid using this in new browsers, as it is going away.

Capabilities, constraints, and settings - Web APIs
nts }).then(function(stream) { let audiotracks = stream.getaudiotracks(); let videotracks = stream.getvideotracks(); videoelement.srcobject = stream; if (audiotracks.length) { audiotrack = audiotracks[0]; } if (videotracks.length) { videotrack = videotracks[0]; } }).then(function() { return new promise(function(resolve) { videoelement.onloadedmetadata = resolve; }); }).then(function() { getcurrentsettings(); }).catch(handleerror); } there are several steps here: it calls buildconstraints() to create the mediatrackconstraints objects for the two tracks from the code in the edit boxes.
... the audio and video from a source matching the inputs (typically a webcam, although if you provide the right constraints you can get media from other sources).

MessageChannel - Web APIs
gechannel.port2 to the iframe using the window.postmessage method along with a message.
...the iframe using the window.postmessage method along with a message.

MessagePort - Web APIs
gechannel.port2 to the iframe using the window.postmessage method along with a message.
...the iframe using the window.postmessage method along with a message.

Navigator.getUserMedia() - Web APIs
s invoked when the request for media access is approved.
...navigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia; if (navigator.getusermedia) { navigator.getusermedia({ audio: true, video: { width: 1280, height: 720 } }, function(stream) { var video = document.queryselector('video'); video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); }; }, function(err) { console.log("the following error occurred: " + err.name); } ); } else { console.log("getusermedia not supported"); } ...

Using Service Workers - Web APIs
n() returns a promise for value, then the rest of the code can carry on running.
...it running live.) note: a real service worker implementation would use caching and onfetch rather than the xmlhttprequest api.

Using textures in WebGL - Web APIs
const internalformat = gl.rgba; const width = 1; const height = 1; const border = 0; const srcformat = gl.rgba; const srctype = gl.unsigned_byte; const pixel = new uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, srctype, pixel); const image = new image(); image.onload = function() { gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, srctype, image); // webgl1 has different requirements for power of 2 images // vs non power of 2 images so check if the image is a // power of 2 in both dimensions.
... webgl createtexture() function.

Movement, orientation, and motion: A WebXR example - Web APIs
them to simulate the viewer's current position and orientation.
...e viewer's current position and orientation.

Migrating from webkitAudioContext - Web APIs
f these problems, this version of the createbuffer() method has been removed, and you should use the asynchronous decodeaudiodata() method instead.
...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 decodeaudiodata() 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 ...

Window - Web APIs
led when you begin pressing any key.
...indow, the document and its resources are about to be unloaded.

WindowOrWorkerGlobalScope.setInterval() - Web APIs
nintervid = setinterval(flashtext, 1000); } function flashtext() { var oelem = document.getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ?
...ets.length; scroll(asheets[nidx++], 0, false)); clean(); }; } /* usage: */ var otwexample1 = new typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15); /* default frame rate is 100: */ var otwexample2 = new typewriter('#controls'); /* you can also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */...

XDomainRequest.onprogress - Web APIs
this method is called periodically as an event handler for progress events on xdomainrequests, so that code can monitor progress while loading content.
...ext to get the response so far.

HTML in XMLHttpRequest - Web APIs
retrieving an html resource as a dom using xmlhttprequest works just like retrieving an xml resource as a dom using xmlhttprequest, except you can't use the synchronous mode and you have to explicitly request a document by assigning the string "document" to the responsetype property of the xmlhttprequest object after calling open() but before calling send().
...exec(ssrc); return aexec ?

Cross-browser audio basics - Developer guides
.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- place fallback here as <audio> supporting browsers will ignore it --> <p>download<a href="audiofile.mp3">audiofile.mp3</a></p> </audio> <!-- custom play and pause buttons --> <button id="play">play</button> <button id="pause">pause</button> next, we attach some functionality to the player using javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); // associate functions with the 'onclick' events play.onclick = playaudio; pause.onclick = pauseaudio; function playaudio() { myaudio.play(); } function pauseaudio() { myaudio.pause(); } } media loading events ...
...yle="display:none">play</button> <button id="pause" style="display:none" >pause</button> </div> <div id="progress"> <div id="bar"></div> </div> styled like so: #controls { width: 80px; float: left; } #progress { margin-left: 80px; border: 1px solid black; } #bar { height: 20px; background-color: green; width: 0; } now let's wire this thing up with javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); var loading = document.getelementbyid('loading'); var bar = document.getelementbyid('bar'); function displaycontrols() { loading.style.display = "none"; play.style.display = "block"; } // check that the me...

Media buffering, seeking, and time ranges - Developer guides
d(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // disp...
...sition: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").st...

Audio and Video Delivery - Developer guides
f the video depending on the type of video file the browser supports we then set the width and height of the video.
...pause and scrubbing.

Making content editable - Developer guides
nerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; m...
...e(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 &lt;h1&gt;</option...

Constraint validation - Developer guides
straint, we use the constraintapi to tell it zipfield.setcustomvalidity(""); } else { // the zip doesn't follow the constraint, we use the constraintapi to // give a message about the format required for this country zipfield.setcustomvalidity(constraints[country][1]); } } then we link it to the onchange event for the <select> and the oninput event for the <input>: window.onload = function () { document.getelementbyid("country").onchange = checkzip; document.getelementbyid("zip").oninput = checkzip; } you can see a live example of the postal code validation.
...d("fs"); var files = fs.files; // if there is (at least) one file selected if (files.length > 0) { if (files[0].size > 75 * 1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event: window.onload = function () { document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint validation.

Loading and running WebAssembly code - WebAssembly
ay.
...event handler to invoke a function when the response has finished downloading — in this function we get the array buffer from the response property, and then feed that into our webassembly.instantiate() method as we did with fetch.

Cross-domain Content Scripts - Archive of obsolete content
d></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 = getsummary(jsonresponse); var element = document.getelementbyid("forecast_summary"); element.textcontent = summary; }; request.send(); }); function getsummary(forecast) { return forecast.regionalfcst.fcstperiods.period[0].paragraph[0].$; } finally, we need to add the "cross-domain-content" ...

Loading Content Scripts - Archive of obsolete content
dy" loads the scripts after the dom for the page has been loaded: that is, at the point the domcontentloaded event fires.

Content Scripts - Archive of obsolete content
"ready": load the scripts after the dom for the page has been loaded: that is, at the point the domcontentloaded event fires.

Porting the Library Detector - Archive of obsolete content
(!worker.tab.libraries) { worker.tab.libraries = []; } librarylist.foreach(function(library) { if (worker.tab.libraries.indexof(library) == -1) { worker.tab.libraries.push(library); } }); if (worker.tab == tabs.activetab) { updatewidgetview(worker.tab); } }); } }); the content script is executed once for every window.onload event, so it will run multiple times when a single page containing multiple iframes is loaded.

tabs - Archive of obsolete content
nction a callback function that will be registered for the 'open' event.

content/loader - Archive of obsolete content
es: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.

core/promise - Archive of obsolete content
dk's promise module provides an api for doing that.

dev/panel - Archive of obsolete content
dispose function a function that will be called when the panel is about to be destroyed.

ui/frame - Archive of obsolete content
d to generate an id to to keep track of the frame.

Modifying Web Pages Based on URL - Archive of obsolete content
re already open when the page-mod is created, and are attached to iframes as well as top-level documents.

Bookmarks - Archive of obsolete content
erty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: function() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...

HTML to DOM - Archive of obsolete content
as an example, i will show a browser overlay .xul file, and some javascript code to access it.

Rosetta - Archive of obsolete content
ocompiled.text = oxhr200 ?

How to convert an overlay extension to restartless - Archive of obsolete content
"nsixmlhttprequest"); here's how to load a file using it: function loadfile(url,type,returnresult) { var request = new xmlhttprequest(); request.open("get", url, true); // async=true request.responsetype = type; request.onerror = function(event) { logerrormessage("error attempting to load: " + url); returnresult(null); }; request.onload = function(event) { if (request.response) returnresult(request.response); else request.onerror(event); }; request.send(); } loadfile("chrome://myaddon/content/filename.ext",datatype,function(data) { /* do stuff with data */ }); note: when using xmlhttprequest to access a file:// url the request.status is not properly set to 200 to indicate succ...

Interaction between privileged and non-privileged pages - Archive of obsolete content
nt, because that can create security holes.

Appendix A: Add-on Performance - Archive of obsolete content
-on developers need to make sure that they minimize their add-ons' performance impact, and here are a few simple guidelines that should be followed to achieve that.

Tabbed browser - Archive of obsolete content
wser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocument.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.addeventlistener("load", function () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).

Using the Stylesheet Service - Archive of obsolete content
.getservice(components.interfaces.nsiioservice); var uri = ios.newuri("chrome://myext/content/myext.css", null, null); sss.loadandregistersheet(uri, sss.user_sheet); note: loadandregistersheet will load the stylesheet synchronously, so you should only call this method using local uris.

Adding preferences to an extension - Archive of obsolete content
+ ": " + 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.

JXON - Archive of obsolete content
izer()).serializetostring(newdoc)); …the same thing using ajax: function reqlistener () { var myobject = jxon.build(this.responsexml); // we got our javascript object!

Automated testing tips and tricks - Archive of obsolete content
m.window.dump.enabled", true); to profiledir/user.js how to execute test code with chrome privileges using a chrome doc - see sbtests.xul in http://people.mozilla.com/~davel/scripts/ for an example firefox-bin -p sbtestprofile -chrome chrome://sbtests/content/ above code calls the quit function in quit.js to exit after test is finished how to detect content onload event from chrome use the domcontentloaded event chromewindow.addeventlistener('domcontentloaded',callbackfunction,false); ...

Enabling the behavior - updating the status periodically - Archive of obsolete content
now that we have code to retrieve tinderbox status and update the icon, we need to run it periodically.

JavaScript crypto - Archive of obsolete content
() { window.crypto.enablesmartcardevents = true; document.addeventlistener("smartcard-insert", onsmartcardchange, false); document.addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() { document.removeeventlistener("smartcard-insert", onsmartcardchange, false); document.removeeventlistener("smartcard-remove", onsmartcardchange, false); } document.body.onload = register; document.body.onunload = deregister; </script> with the above example, your web site will automatically reload anytime a smartcard is inserted or removed.

jspage - Archive of obsolete content
){var f=this[e][a].apply(this[e],arguments);c.push(f); if(g){g=($type(f)=="element");}}return(g)?new elements(c):c;});}});element.prototype={$family:{name:"element"}};element.constructors=new hash;var iframe=new native({name:"iframe",generics:false,initialize:function(){var f=array.link(arguments,{properties:object.type,iframe:$defined}); var d=f.properties||{};var c=document.id(f.iframe);var e=d.onload||$empty;delete d.onload;d.id=d.name=$pick(d.id,d.name,c?(c.id||c.name):"iframe_"+$time()); c=new element(c||"iframe",d);var b=function(){var g=$try(function(){return c.contentwindow.location.host;});if(!g||g==window.location.host){var h=new window(c.contentwindow); new document(c.contentwindow.document);$extend(h.element.prototype,element.prototype);}e.call(c.contentwindow,c.contentwindow.documen...

statusBar - Archive of obsolete content
the status-bar-panel.js file in your jetpack repository.

Using Breakpoints in Venkman - Archive of obsolete content
on.

onpopupshown - Archive of obsolete content
« xul reference home onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.

Attribute (XUL) - Archive of obsolete content
ethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence ...

Building accessible custom components in XUL - Archive of obsolete content
) and call the install_handlers function when the spreadsheet is loaded.

Menus - Archive of obsolete content
light differences between each window, one possibility is to show or hide menu items in a load event listener.

controllers - Archive of obsolete content
« xul reference controllers type: nsicontrollers a controllers list attached to the element.

Sorting and filtering a custom tree view - Archive of obsolete content
for the sake of simplicity, strings are not localized and the data loaded is hard coded.

Adding Methods to XBL-defined Elements - Archive of obsolete content
uctor is called when a binding is removed from an element.

Commands - Archive of obsolete content
and selecting items from the list.

Creating Dialogs - Archive of obsolete content
key is pressed note: the label attributes are required by remote sites and are probably missing in the above examples due to bug 224996.

Focus and Selection - Archive of obsolete content
commands.

Localization - Archive of obsolete content
he entire xul file is shown below with the changes shown in red.

More Event Handlers - Archive of obsolete content
vent is commonly used to initialize fields and perform other tasks that need to be done before the user can use the window.

XUL Questions and Answers - Archive of obsolete content
ference is automatically updated as the control is manipulated.

XUL Event Propagation - Archive of obsolete content
e.

editor - Archive of obsolete content
makeeditable method.

menupopup - Archive of obsolete content
out to be hidden.

panel - Archive of obsolete content
out to be hidden.

tooltip - Archive of obsolete content
about to be hidden.

Dialogs in XULRunner - Archive of obsolete content
own xul file.

Using workers in extensions - Archive of obsolete content
f (!symbol) { throw "no symbol set!"; } var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var output = httprequest.responsetext; if (output) { postmessage(output.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); }, 10*60*1000); onmessage = function(event) { if (event.data) { symbol = event.data.touppercase(); } refreshinformation(); } when the worker thread is started, the main body of this code (in lines 26-35) is executed.

RDF in Mozilla FAQ - Archive of obsolete content
be loaded from untrusted xul.

Async scripts for asm.js - Game development
nt.body.appendchild(script); both are counted as 'inline' scripts and get compiled and then run immediately.

Crisp pixel art look with image-rendering - Game development
nd render a crisp image: canvas { width: 512px; height: 512px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } and some javascript to set up the canvas and load the image: // get canvas context var ctx = document.getelementbyid('game').getcontext('2d'); // load image var image = new image(); image.onload = function () { // draw the image into the canvas ctx.drawimage(image, 0, 0); } image.src = 'https://udn.realityripple.com/samples/11/a2954fe197.png'; this code used together produces the following result: note: you can check out the original code on github (and a live example.) ...

jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
ls, and event handling.

Choosing the right approach - Learn web development
n 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 = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); pitfalls nested callbacks can be cumbersome and hard to read (i.e.

Http.jsm
requests.

Examples
ise() { try { var mysubpromises = []; var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('succesfully loaded image at path = "' + path + '" the width of this image is = "' + this.naturalwidth + '".'); if (!this.naturalwidth) { loadthisimagepromise.reject('image loaded but it has 0 width at path = "' + path + '" the naturalwidth was 0'); } } myimage.onerror = function(e) { loadthisimagepr...

Investigating leaks using DMD heap scan mode
$cclog $winaddr this may take a few seconds.

Midas
ion to the built-in commands, advanced editing can be done by manipulating the selection and range objects.

Feed content access API
e(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.

Manipulating bookmarks using Places
erty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: function() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...

Building an Account Manager Extension
javascript of the new panel, the same naming as used for the xul.

Events
eated, but not yet shown.

Filelink Providers
examples of this.

Mail and RDF
datasource that is shared across all ui components, we have per-view datasources.

Working with windows in chrome code
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 window && window.arguments.length > 0) { maxprogress = window.arguments[0].maxprogress; ...

AudioBufferSourceNode.loop - Web APIs
and stop the audio playback, and a slider control is used to change the playbackrate property value on the fly.

AudioBufferSourceNode.loopEnd - Web APIs
p back to the 20 second mark and continue playing until the 25 second mark, ad infinitum (or at least until stop() is called).

AudioBufferSourceNode.loopStart - Web APIs
ple, if you set their values to 20 and 25, respectively, the audio will start to loop between 20 and 25 seconds in to the track.

AudioBufferSourceNode.playbackRate - Web APIs
.) play the song and alter the playback rate for some fun results.

AudioContext.createMediaStreamSource() - Web APIs
t'); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biqua...

AudioContext.createMediaStreamTrackSource() - Web APIs
createbiquadfilter(), and it's configured as desired to perform a lowshelf filter on the audio coming from the source.

AudioProcessingEvent - Web APIs
); // 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 process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is th...

BaseAudioContext.createConvolver() - Web APIs
-o-matic demo (see app.js for relevant code).

BaseAudioContext.createScriptProcessor() - Web APIs
); // 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 process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is th...

BaseAudioContext.decodeAudioData() - Web APIs
elector('.play'); var stop = document.queryselector('.stop'); // use xhr to load an audio track, and // decodeaudiodata to decode it and stick it in a buffer.

Using the Beacon API - Web APIs
o arguments: the url and the data to send.

CanvasRenderingContext2D.createPattern() - Web APIs
ge.

CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
the third is scaled to 3x but drawn with image smoothing disabled.

CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
medium quality.

Compositing example - Web APIs
e bottom layer, while adopting the chroma of the top layer.', 'preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.', 'preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.' ].reverse(); var width = 320; var height = 340; main program when the page loads, this code runs to set up and run the example: window.onload = function() { // lum in srgb var lum = { r: 0.33, g: 0.33, b: 0.33 }; // resize canvas canvas1.width = width; canvas1.height = height; canvas2.width = width; canvas2.height = height; lightmix() colorsphere(); runcomposite(); return; }; and this code, runcomposite(), handles the bulk of the work, relying on a number of util...

ConvolverNode.buffer - Web APIs
udiobuffer; value an audiobuffer.

ConvolverNode.normalize - Web APIs
rmalize = false; value a boolean.

Document.anchors - Web APIs
it() { var toc = document.getelementbyid("toc"); var i, li, newanchor; for (i = 0; i < document.anchors.length; i++) { li = document.createelement("li"); newanchor = document.createelement('a'); newanchor.href = "#" + document.anchors[i].name; newanchor.innerhtml = document.anchors[i].text; li.appendchild(newanchor); toc.appendchild(li); } } </script> </head> <body onload="init()"> <h1>title</h1> <h2><a name="contents">contents</a></h2> <ul id="toc"></ul> <h2><a name="plants">plants</a></h2> <ol> <li>apples</li> <li>oranges</li> <li>pears</li> </ol> <h2><a name="veggies">veggies</a></h2> <ol> <li>carrots</li> <li>celery</li> <li>beats</li> </ol> </body> </html> view on jsfiddle notes for reasons of backwards compatibility, the returned set of a...

Document.createElement() - Web APIs
.define().

Document.createElementNS() - Web APIs
the xhtml namespace and appends it to the vbox element.

Document.write() - Web APIs
en(), which will clear the document.

DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
else if (document.caretrangefrompoint) { range = document.caretrangefrompoint(e.clientx, e.clienty); textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode.nodetype == 3) { var replacement = textnode.splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment css object model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.

Element.hasPointerCapture() - Web APIs
*/ // check whether element still has pointer capture let pointercap = el.haspointercapture(ev.pointerid); if(pointercap) { // we've still got pointer capture } else { // oops, we've lost pointer capture!

Element.localName - Web APIs
ww.w3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </head> <body onload="test()"> <svg:svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> </svg:svg> <textarea id="text" rows="4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon.

Element.scrollHeight - Web APIs
px; } javascript function checkreading () { if (checkreading.read) { return; } checkreading.read = this.scrollheight - this.scrolltop === this.clientheight; document.registration.accept.disabled = document.getelementbyid("nextstep").disabled = !checkreading.read; checkreading.noticebox.innerhtml = checkreading.read ?

Element.setCapture() - Web APIs
usedown(e) { e.target.setcapture(); e.target.addeventlistener("mousemove", mousemoved, false); } function mouseup(e) { e.target.removeeventlistener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.

Event.eventPhase - Web APIs
">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { d.

FileReader() - Web APIs
der() constructor creates a new filereader.

FileReader: load event - Web APIs
the load event is fired when a file has been read successfully.

FileReader: loadend event - Web APIs
the loadend event is fired when a file read has completed, successfully or not.

FileReader: loadstart event - Web APIs
the loadstart event is fired when a file read operation has begun.

FileReader.readAsBinaryString() - Web APIs
file from which to read.

FileReader.readyState - Web APIs
.

FileReader.result - Web APIs
s by creating a filereader object and creating a listener for load events such that when then file is read, the result is obtained and passed to the callback function provided to read().

FileSystemFileEntry.file() - Web APIs
fined.

Using FormData Objects - Web APIs
" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error " + oreq.status + " occurred when trying to upload your file.<br \/>"; } }; oreq.send(odata); ev.preventdefault(); }, false); note: if you pass in a reference to the form, the request method specified in the form will be used over the method specifi...

Using the Frame Timing API - Web APIs
['frame']}); } function init () { create_frame_observer(); var obs = new performanceobserver(frame_observer_2); obs.observe({entrytypes: ['frame']}); } function frame_observer_2(list) { // log the frame entries var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #2: [" + i + "] = " + perfentries[i].name); } } <body onload="init(event)"> when the browser adds a new "frame" entry to the performance timeline, both of the observer callbacks will be invoked.

GlobalEventHandlers.ondragend - Web APIs
e source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_...

GlobalEventHandlers.ondragenter - Web APIs
e source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_...

GlobalEventHandlers.ondragexit - Web APIs
e source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_...

GlobalEventHandlers.ondragleave - Web APIs
lement's background color back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_...

GlobalEventHandlers.onpointercancel - Web APIs
value cancelhandler the pointercancel event handler for element targetelement.

GlobalEventHandlers.onpointerenter - Web APIs
ter; value enterhandler the pointerenter event handler for element targetelement.

GlobalEventHandlers.onpointerleave - Web APIs
er the eventlistener which will be invoked to handle pointerleave events sent to the target.

GlobalEventHandlers.onpointermove - Web APIs
onpointermove; value movehandler the pointermove event handler for element targetelement.

GlobalEventHandlers.onpointerout - Web APIs
telement.onpointerout; value outhandler the pointerout event handler for element targetelement.

GlobalEventHandlers.onpointerover - Web APIs
pointerover; value overhandler the pointerover event handler for element targetelement.

GlobalEventHandlers.onpointerup - Web APIs
= targetelement.onpointerup; value uphandler the pointerup event handler for element targetelement.

GlobalEventHandlers.ontouchcancel - Web APIs
nt.ontouchcancel; return value cancelhandler the touchcancel event handler for element someelement.

GlobalEventHandlers.ontouchend - Web APIs
r endhandler = targetelement.ontouchend; return value endhandler the touchend event handler for element targetelement.

GlobalEventHandlers.ontouchmove - Web APIs
ement.ontouchmove; return value movehandler the touchmove event handler for element someelement.

GlobalEventHandlers.ontouchstart - Web APIs
omeelement.ontouchstart; return value starthandler the touchstart event handler for element someelement.

HTMLCanvasElement.mozGetAsFile() - Web APIs
e = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specifications not part of any specification.

HTMLImageElement.complete - Web APIs
the value of the lightbox image's complete property before attempting to do its work.

HTMLImageElement.decode() - Web APIs
once the full-resolution image is ready for use.

HTMLMediaElement: loadstart event - Web APIs
the loadstart event is fired when the browser has started to load a resource.

Working with the History API - Web APIs
te event's state property contains a copy of the history entry's state object.

MediaSource - Web APIs
ab(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.

MediaStreamAudioSourceNode - Web APIs
t'); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biqua...

MediaStreamTrackAudioSourceNode - Web APIs
t'); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biqua...

Navigation Timing API - Web APIs
urn the value of navigation, which contains information explaining the context of the load operation described by this performance instance.

Node.localName - Web APIs
ww.w3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </head> <body onload="test()"> <svg:svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> </svg:svg> <textarea id="text" rows="4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon.

OfflineAudioContext.startRendering() - Web APIs
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.startrendering().then(function(renderedbuffer) { console.log('rendering completed successfully'); va...

OfflineAudioContext - Web APIs
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.startrendering().then(function(renderedbuffer) { console.log('rendering completed successfully'); va...

Performance.onresourcetimingbufferfull - Web APIs
event is fired.

Performance: resourcetimingbufferfull event - Web APIs
gbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property.

Multi-touch interaction - Web APIs
er remove_event(ev); update_background(ev); ev.target.style.border = "1px solid black"; } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and to clear the log.

Pinch zoom gestures - Web APIs
wn is less than two then reset diff tracker if (evcache.length < 2) { prevdiff = -1; } } application ui the application uses a <div> element for the touch area and provides buttons to enable logging and to clear the log.

Using Pointer Events - Web APIs
<canvas id="canvas" width="600" height="600" style="border:solid black 1px; touch-action:none"> your browser does not support canvas element.

ProgressEvent - Web APIs
method.

SVGElement: load event - Web APIs
the load event fires on an svgelement when it is loaded in the browser, e.g.

SVGElement - Web APIs
doweventhandlers.

SVGLength - Web APIs
thtype_unknown = 0 svg_lengthtype_number = 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 + ", valueas...

ScriptProcessorNode.bufferSize - Web APIs
); // 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 process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the s...

ScriptProcessorNode.onaudioprocess - Web APIs
); // 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 process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is th...

ScriptProcessorNode - Web APIs
); // 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 process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the s...

SourceBuffer - Web APIs
hab(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.

Animating textures in WebGL - Web APIs
ere the real work is done: function updatetexture(gl, texture, video) { const level = 0; const internalformat = gl.rgba; const srcformat = gl.rgba; const srctype = gl.unsigned_byte; gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, srctype, video); } you've seen this code before.

Getting started with WebGL - Web APIs
t const gl = canvas.getcontext("webgl"); // only continue if webgl is available and working if (gl === null) { alert("unable to initialize webgl.

Using Web Workers - Web APIs
ript[type=\'text\/js-worker\']'), function (oscript) { return oscript.textcontent; }),{type: 'text/javascript'}); // creating a new document.worker property containing all our "text/js-worker" scripts.

Window.captureEvents() - Web APIs
wn, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.

Window.defaultStatus - Web APIs
s obsolete.

self.createImageBitmap() - Web APIs
ites from a sprite sheet this example loads a sprite sheet, extracts individual sprites, and then renders each sprite to the canvas.

XDomainRequest.onerror - Web APIs
r which is called when an xdomainrequest encounters an error.

XDomainRequest.ontimeout - Web APIs
an event handler which is called when a pending xdomainrequest times out.

XDomainRequest.responseText - Web APIs
returns the response body of an xdomainrequest as a string.

XDomainRequest.send() - Web APIs
sends an xdomainrequest which has previously been opened calling xdomainrequest.open().

XMLDocument.async - Web APIs
true is the default value, indicating that documents should be loaded asynchronously.

How to check the security state of an XMLHTTPRequest over SSL - Web APIs
; 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: connection status: succeeded security info: security state: secure common name (cn) = addons.mozilla.org organisation = mozilla corporation issuer = verisign, inc.

XMLHttpRequest: load event - Web APIs
the load event is fired when an xmlhttprequest transaction completes successfully.

XMLHttpRequest: loadend event - Web APIs
the loadend event is fired when a request has completed, whether successfully (after load) or unsuccessfully (after abort or error).

XMLHttpRequest: loadstart event - Web APIs
the loadstart event is fired when a request has started to load data.

XMLHttpRequest.readyState - Web APIs
), readystate_loaded (2), readystate_interactive (3) and readystate_complete (4) are used.

XMLHttpRequest.responseText - Web APIs
00 ("ok").

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.

XMLHttpRequest.responseXML - Web APIs
if no data was received or if the data is not xml/html.

XMLHttpRequest.send() - Web APIs
with the send() method.

XMLHttpRequest.status - Web APIs
tp status code of the xmlhttprequest's response.

XMLHttpRequest.statusText - Web APIs
alue of statustext will be an empty string.

XMLHttpRequest.timeout - Web APIs
fired.

Border-image generator - CSS: Cascading Style Sheets
{ init: init }; }(); var imagereader = (function imagereader() { var freader = new filereader(); var browse = document.createelement('input'); var loadimage = function loadimage(e) { if (browse.files.length === 0) return; var file = browse.files[0]; if (file.type.slice(0, 5) !== 'image') return; freader.readasdataurl(file); return false; }; freader.onload = function(e) { imagecontrol.loadremoteimage(e.target.result); }; var load = function load() { browse.click(); }; browse.setattribute('type', 'file'); browse.style.display = 'none'; browse.onchange = loadimage; return { load: load }; })(); var imagecontrol = (function imagecontrol() { var scale = 0.5; var imgsource = new image(); var imgstate = null; var s...

Getting Started - Developer guides
head> <body> <p id="writedata" class="data">off-line</p> <p id="laststamp">no data yet</p> <script> const fulldata = document.getelementbyid('writedata'); const lastdata = document.getelementbyid('laststamp'); function fetchdata() { console.log('fetching updated data.'); let xhr = new xmlhttprequest(); xhr.open("get", "time-log.txt", true); xhr.onload = function() { updatedisplay(xhr.response); } xhr.send(); } function updatedisplay(text) { fulldata.textcontent = text; let timearray = text.split('\n'); // included because some file systems always include a blank line at the end of text files.

Web Audio playbackRate explained - Developer guides
="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('input',function(){ c.innerhtml = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input event firing on the <input> element, allowing us to react to the playback rate control being cha...

Parsing and serializing XML - Developer guides
mystring, "application/xml"); // print the name of the root element or error message console.log(odom.documentelement.nodename == "parsererror" ?

Printing - Developer guides
nt () { document.body.removechild(this.__container__); } function setprint () { this.contentwindow.__container__ = this; this.contentwindow.onbeforeunload = closeprint; this.contentwindow.onafterprint = closeprint; this.contentwindow.focus(); // required for ie this.contentwindow.print(); } function printpage (surl) { var ohiddframe = document.createelement("iframe"); ohiddframe.onload = setprint; ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = surl; document.body.appendchild(ohiddframe); } </script> </head> <body> <p><span onclick="printpage('externalpage.html');" style="cursor:pointer;text-decoration:...

Writing forward-compatible websites - Developer guides
hich "filter" in body.style tests true must be microsoft internet explorer and therefore e.g.

<body>: The Document Body element - HTML: Hypertext Markup Language
to call when the document loses focus.

<link>: The External Resource Link element - HTML: Hypertext Markup Language
f="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> stylesheet load events you can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event: <script> var mystylesheet = document.queryselector('#my-stylesheet'); mystylesheet.onload = function() { // do something interesting; the sheet has been loaded } mystylesheet.onerror = function() { console.log("an error occurred loading the stylesheet!"); } </script> <link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> note: the load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles star...

Link prefetching FAQ - HTTP
tion (mozilla 1.2), idle time is determined using the nsiwebprogresslistener api.

Memory Management - JavaScript
n.

Error: Permission denied to access property "x" - JavaScript
or type error.

Promise() constructor - JavaScript
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.

import - JavaScript
e.js') .then((module) => { // do something with the module.

Critical rendering path - Web Performance
l.

Populating the page: how browsers work - Web Performance
if necessary.

Progressive loading - Progressive web apps (PWAs)
holder image is scaled the same way the original images are, so it will take up the same space and not cause the layout to repaint as the images load.

SVG Event Attributes - SVG: Scalable Vector Graphics
size, onscroll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfo...

requiredFeatures - SVG: Scalable Vector Graphics
funcg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#documenteventsattribute the browser supports the onunload, onabort, onerror, onresize, onscroll and onzoom attributes http://www.w3.org/tr/svg11/feature#graphicaleventsattribute the browser supports the onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload attributes http://www.w3.org/tr/svg11/feature#animationeventsattribute the browser supports the onbegin, onend, onrepeat and onload attributes http://www.w3.org/tr/svg11/feature#cursor the browser supports the <cursor> element http://www.w3.org/tr/svg11/feature#hyperlinking the browser supports the <a> element http://www.w3.org/tr/svg11/feature#xlinkattribute the browser s...

SVG Attribute reference - SVG: Scalable Vector Graphics
onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfo...

Example - SVG: Scalable Vector Graphics
> <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> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles.

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
attribute of <view> and corresponding svg view fragment parameter removed implementation status unknown fragment-only urls are always same-document implementation status unknown additional attributes on <a> implemented (bug 1451823) scripting change notes contentscripttype removed implementation status unknown animationevents.onload removed implementation status unknown fonts change notes <font>, <glyph>, <missing-glyph>, <hkern>, <vkern>, <font-face>, <font-face-src>, <font-face-uri>, <font-face-format>, and <font-face-name> and corresponding idl interfaces removed implementation status unknown extensibility chapter change notes made <foreignobject> gra...